asset-audit

Name: asset-audit
Author: webflow

github.com/webflow营销与增长133318 次安装1 天前更新

代码仓库

关于 asset-audit

asset-audit 是用于检查 Webflow 网站资源并提出 SEO 与无障碍改进建议的技能。它通过 Webflow MCP 分析图片、生成经过校验的建议，并支持确认和回滚。

主要功能

01查找缺失或质量较差的替代文本
02检测不利于 SEO 的文件名及命名模式
03分析图片预览并建议修改
04校验文件名和替代文本
05支持逐项确认与回滚

适用场景

01审查 Webflow 网站的图片资源
02改进图片替代文本的无障碍效果
03重命名通用名或相机上传文件
04更新资源前检查修改建议

MCP 相关

该技能要求使用 Webflow MCP 工具列出网站、查看图片预览以及获取或更新资源。开始前还会使用 Webflow 指南工具。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/webflow/webflow-skills --skill asset-audit

安装后在 Claude Code 中输入/asset-audit确认已加载。

详细介绍

Asset 审核

分析 Webflow 网站上的资源，优化 SEO。

重要提示

所有操作始终使用 Webflow MCP 工具：

使用 Webflow MCP 的 asset_tool 获取和更新资源
使用 Webflow MCP 的 get_image_preview 分析图像内容
使用 Webflow MCP 的 data_sites_tool，并将 action 设为 list_sites，列出可用网站
开始前使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
不要使用其他工具或方法执行 Webflow 操作
所有工具调用都必须包含必需的 context 参数（15–25 个词，使用第三人称视角）

说明

第 1 阶段：选择网站并发现资源

获取网站：确定目标网站。如果用户未提供网站 ID，请向其询问。
获取所有资源：使用 Webflow MCP 的 asset_tool 获取网站中的所有资源
- 对于拥有 50 个或更多资源的网站，每批处理 20 个
- 显示进度：“正在处理资源 1-20，共 150 个……”
检测规律：分析资源命名中的常见规律：
- 相机上传的文件（IMG_、DSC_ 等）
- 屏幕截图（screenshot、Screen Shot 等）
- 通用名称（untitled、image-1 等）
- 日期格式的名称（2024-01-10 等）

第 2 阶段：问题分析与规律识别

识别问题：列出所有符合以下情况的资源：
- 未设置替代文本（值为 null 或空字符串）
- 已有替代文本，但质量较差（过短、短语重复等）
- 资源名称不利于 SEO
- 存在重复或非常相似的资源

规律检测报告：显示检测到的规律：

🔍 Detected patterns:
- 15 assets start with "IMG_" (camera uploads)
- 8 assets contain "screenshot"
- Suggest: Bulk rename these patterns

询问用户偏好：询问用户希望生成以下哪项：
- 仅替代文本
- 仅 SEO 友好名称
- 两者都要
- 应用命名规律/模板

第 3 阶段：分析并生成建议

分析资源：使用 Webflow MCP 的 get_image_preview 工具分析需要更新的资源
- 错误处理：如果 Webflow MCP 的 get_image_preview 失败，请使用备用方案：
  - 从现有文件名提取描述
  - 使用通用占位描述并发出警告
  - 继续处理其他资源
- 分批处理，避免超时
生成并验证建议：
- 替代文本验证：
  - 最多 125 个字符（超过时发出警告）
  - 不包含冗余短语（“image of”“picture of”“photo of”）
  - 必须以标点符号结尾
  - 标记通用描述（置信度 < 50%）
- SEO 名称验证：
  - 仅使用小写字母 a-z、数字 0-9 和连字符
  - 不得出现重复扩展名（.webp.webp）——先移除现有扩展名
  - 最多 100 个字符
  - 将空格和下划线替换为连字符
  - 不包含特殊字符

文件夹整理建议：如果检测到命名规律，建议文件夹结构：

💡 Organization suggestions:
- Create "team-photos" folder for 8 team images
- Create "product-images" folder for 15 product shots

第 4 阶段：逐项审批并应用

提供建议并支持逐项审批：
- 显示带复选框的编号列表
- 允许逐项切换：“输入要跳过的编号（例如 ‘2,4’）”
- 选项：“全部”“无”或指定编号
- 显示每条建议的验证警告

提供命名模板（适用于许多相似资源）：

🎨 应用命名规律？
1. [类别]-[描述]（例如 team-john-headshot）
2. [描述]-[位置]（例如 office-workspace-desk）
3. 自定义规律……
4. 跳过规律，分别命名

保存回滚数据：应用更改前，保存以下内容：
- 原始资源名称
- 原始替代文本
- 时间戳
- 已修改的资源
应用更新：使用 Webflow MCP 的 asset_tool 仅更新已批准的资源
- 显示批量更新的进度
- 妥善处理部分失败
- 分别报告成功和失败情况

提供回滚选项：应用更改后：

📋 可回滚：
上次更新：2 分钟前修改了 4 个资源
输入 "undo" 以撤销这些更改

示例

用户提示词：

Run an asset audit on my site.

步骤 1：初始审核报告

📊 SEO Asset Audit: MCP Demo #2

Total: 4 assets

🔍 Detected patterns:
- 4 assets have generic numeric names (1.webp, 2.webp, 3.webp, 4.webp)
- All assets are in WebP format ✓

⚠️ Missing Alt Text (4 assets):
├── 1.webp (empty alt text)
├── 2.webp (empty alt text)
├── 3.webp (empty alt text)
└── 4.webp (empty alt text)

⚠️ Non-SEO-Friendly Names (4 assets):
├── 1.webp (generic numeric name)
├── 2.webp (generic numeric name)
├── 3.webp (generic numeric name)
└── 4.webp (generic numeric name)

---

What would you like to generate?
1. Alt text only
2. SEO-friendly names only
3. Both alt text and SEO-friendly names

Please select an option (1, 2, or 3).

包含验证警告的示例：

📋 Suggested Improvements:

[1] ✓ IMG_1234.jpg
    Alt text: "Professional team member headshot with blue background."
    New name: professional-team-member-headshot.jpg
    ✅ Validation passed

[2] ✓ screenshot-2024.png
    Alt text: "Dashboard analytics overview showing user engagement metrics."
    New name: dashboard-analytics-overview.png
    ✅ Validation passed

[3] ⚠️ untitled-image.webp
    Alt text: "Photo"
    ⚠️ Warning: Alt text too short (< 10 chars) - needs more detail
    New name: untitled-image.webp
    ⚠️ Warning: Unable to generate better name (image preview failed)

[4] ⚠️ TeamPhoto2024!!!.jpg
    Alt text: "Image of a person working on laptop in modern office with plants and natural lighting through large windows in the background."
    ⚠️ Warning: Alt text too long (137 chars) - consider shortening for screen readers
    New name: team-photo-2024.jpg
    ✅ Validation passed (special characters removed)

Which assets would you like to update?

步骤 2：用户选择选项 3 并完成图像分析后

📋 Suggested Improvements:

[1] ✓ 1.webp
    Alt text: "Podcast host with headphones and microphone recording Webflow podcast episode in studio."
    New name: webflow-podcast-host-recording-studio.webp
    ✅ Validation passed

[2] ✓ 2.webp
    Alt text: "Professional developer wearing glasses working on laptop with Webflow logo in modern office."
    New name: developer-working-laptop-webflow-office.webp
    ✅ Validation passed

[3] ✓ 3.webp
    Alt text: "Webflow homepage hero section with tagline and email signup form."
    New name: webflow-homepage-hero-section.webp
    ✅ Validation passed

[4] ✓ 4.webp
    Alt text: "Speaker presenting on stage at Webflow Conf with audience watching."
    New name: webflow-conf-speaker-presentation-stage.webp
    ✅ Validation passed

---

Which assets would you like to update?
- Type numbers to skip (e.g., "2,4" to skip items 2 and 4)
- Type "all" to proceed with all
- Type "none" to cancel

步骤 3：用户选择“all”进行确认后

🔄 Applying updates...

Progress: ████████████████████ 100% (4/4 assets)

✅ Updates Applied Successfully!

SEO Asset Audit Complete: MCP Demo #2

Summary:
- ✅ 4 assets updated successfully
- ❌ 0 assets failed
- ⏭️ 0 assets skipped

Changes Applied:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp                │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp                │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
└─────────────────────────────────────────────────────────────────┘

📋 Rollback Available:
Last update: 4 assets modified just now
Type "undo" to revert these changes

---

🎉 Your site's assets are now fully optimized for SEO and accessibility!

步骤 3 的替代方案：用户选择特定资源（例如“1,3”）

🔄 Applying updates to assets 1 and 3...

Progress: ████████████████████ 100% (2/2 assets)

✅ Partial Update Complete!

Summary:
- ✅ 2 assets updated successfully
- ❌ 0 assets failed
- ⏭️ 2 assets skipped (as requested)

Changes Applied:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp                  │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp                          │
│     ✓ Alt text added                                            │
│     ✓ Filename updated                                          │
└─────────────────────────────────────────────────────────────────┘

Skipped Assets (can run audit again later):
- [2] 2.webp
- [4] 4.webp

📋 Rollback Available:
Type "undo" to revert these 2 changes

指南

阶段 1：关键验证（必须遵循）

文件扩展名处理：

始终在添加新扩展名之前移除已有扩展名
错误：image.webp → new-name.webp.webp
正确：image.webp → new-name.webp
实现方式：使用不含扩展名的文件名加上新扩展名

替代文本质量规则：

最大长度：125 个字符（无障碍最佳实践）
必须以标点符号结尾（句号、感叹号、问号）
移除冗余短语：
- ❌ “一个人的图像” → ✅ “在办公桌前工作的人”
- ❌ “Logo 的图片” → ✅ “蓝色背景上的公司 Logo”
- ❌ “展示……” → ✅ 直接描述
如果过短（< 10 个字符），则标记：⚠️ “过于笼统——需要更多细节”
如果过长（> 125 个字符），则标记：⚠️ “建议缩短，方便屏幕阅读器朗读”

SEO 文件名规则：

仅允许：小写字母 a-z、数字 0-9、连字符
最大长度：100 个字符（不含扩展名）
将空格转换为连字符：team photo → team-photo
将下划线转换为连字符：team_photo → team-photo
移除特殊字符：photo!@#$ → photo
转换为小写：TeamPhoto → team-photo
移除连续的连字符：team--photo → team-photo
移除开头和结尾的连字符：-photo- → photo

阶段 2：批量处理与性能

大型站点处理：

对包含 50 个以上资源的站点：每批处理 20 个
显示进度：“正在处理第 1 批，共 5 批（资源 1-20）……”
允许用户处理指定批次
超时保护：如果 Webflow MCP 的 get_image_preview 耗时超过 30s，则跳到下一批

模式检测： 检测并报告以下模式：

相机上传：IMG_、DSC_、DCIM_、P_
屏幕截图：screenshot、Screen Shot、Capture
通用名称：untitled、image-1、photo、asset
日期格式：2024-01-10、20240110、01-10-2024
当 3 个以上资源符合某种模式时，建议批量重命名

错误处理：

如果 Webflow MCP 的 get_image_preview 失败：
1. 记录错误（不要向用户显示）
2. 使用备用方案：从文件名提取描述
3. 标记警告 ⚠️：“根据文件名生成（图像预览失败）”
4. 继续处理其他资源
部分成功处理：
- 分别报告成功项和失败项
- 显示：“✅ 已更新 15 项，❌ 2 项失败，⏭️ 3 项已跳过”
- 提供重试失败资源的选项

第 3 阶段：高级功能

精细化审批系统：

为每条建议编号：[1]、[2]、[3] 等。
显示勾选状态：✓ 或 ✗
接受多种格式：
- "all"——全部批准
- "none"——取消操作
- "1,3,5"——跳过第 1、3 和 5 项
- "2-5"——跳过第 2 至第 5 项
始终显示每项的验证状态

命名模板： 检测到 5 个或更多相似资源时，提供模板：

[category]-[description]-[modifier]
- 示例：product-laptop-front-view.jpg
[description]-[location]-[year]
- 示例：team-photo-office-2024.jpg
[type]-[name]-[variant]
- 示例：icon-arrow-blue.svg

文件夹整理： 检测到以下情况时建议创建文件夹：

5 张或更多图片包含 "team"、"staff"、"employee" → team-photos 文件夹
5 张或更多图片包含 "product"、"item" → product-images 文件夹
5 张或更多图片包含 "logo"、"brand" → branding 文件夹
5 张或更多图片包含 "screenshot"、"capture" → screenshots 文件夹

回滚系统： 进行任何更新前，将以下内容存储在内存中：

{
  "timestamp": "2026-01-10T00:45:00Z",
  "assets": [
    {
      "id": "asset-id",
      "originalName": "1.webp",
      "originalAltText": "",
      "newName": "podcast-host.webp",
      "newAltText": "Podcast host recording..."
    }
  ]
}

变更后 5 分钟内提供撤销选项
下一次审计开始后清除回滚数据
在最终摘要中显示回滚选项

重复项检测：

比较资源大小（完全一致 = 可能重复）
比较文件名（名称相似 = 可能重复）
报告："⚠️ 可能重复：asset1.jpg (2.4MB) 和 asset1-copy.jpg (2.4MB)"
不要自动删除——由用户决定

通用最佳实践

始终使用 Webflow MCP 的 get_image_preview 了解图片内容
生成具体、描述性的建议（而非泛泛而谈）
向用户展示前验证所有建议
妥善处理部分操作
为耗时操作提供清晰的进度指示
在报告中将相似问题归类
使用视觉指示符：✅ ⚠️ ❌ 🔍 💡 📋 🎉
对话风格自然，但表达简洁
变更后始终提供回滚选项

支持 Markdown

登录后评论

基本信息

作者: webflow
仓库: webflow/webflow-skills
分类: 营销与增长
安装次数: 318
GitHub Stars: 133

报告问题