webflow-mcp:asset-audit

Name: webflow-mcp:asset-audit
Author: webflow

github.com/webflow营销与增长133883 次安装今天更新

代码仓库

关于 webflow-mcp:asset-audit

用于 Webflow 网站的 SEO 资产审计技能，面向需要检查图片替代文本和文件名的站点管理者。它通过图像预览、规则校验和逐项审批，协助生成并应用改进建议，且提供回滚选项。

主要功能

01检查缺失或质量较差的替代文本
02分析图片内容并生成 SEO 文件名
03检测命名模式与潜在重复项
04校验建议并支持逐项审批
05更新资产前保存回滚数据

适用场景

01审查网站图片的替代文本
02批量整理相机上传和截图文件名
03按需应用获批的资产修改
04修改后撤销最近一次更新

MCP 相关

此技能要求所有 Webflow 操作都使用 Webflow MCP，包括站点和资产读取、图片预览及资产更新。

安装

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

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

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

详细介绍

资产审核

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

重要说明

所有操作务必使用 Webflow MCP 工具：

使用 Webflow MCP 的 data_assets_tool 获取和更新资产
使用 Webflow MCP 的 get_asset_preview（传入资产的 asset_id）分析图片内容
使用 Webflow MCP 的 data_sites_tool，并将 action 设为 list_sites，列出可用网站
开始前使用 Webflow MCP 的 webflow_guide_tool 获取最佳实践
Webflow 操作不得使用任何其他工具或方法
所有工具调用都必须包含必需的 context 参数（15-25 个词，使用第三人称视角）

说明

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

获取网站：确定目标网站。如果用户未提供网站 ID，请向其询问。
获取所有资产：使用 Webflow MCP 的 data_assets_tool 获取网站上的所有资产（每条资产记录都包含其 asset_id，预览时需要使用）
- 对于资产数量达到 50 个或更多的网站，分批处理，每批 20 个
- 显示进度：“正在处理资产 1-20，共 150 个……”
检测模式：分析资产名称中的常见模式：
- 相机上传（IMG_、DSC_ 等）
- 截图（screenshot、Screen Shot 等）
- 通用名称（untitled、image-1 等）
- 基于日期的名称（2024-01-10 等）

阶段 2：问题分析与模式识别

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

模式检测报告：显示检测到的模式：

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

询问用户偏好：询问用户希望生成：
- 仅 alt 文本
- 仅 SEO 友好名称
- 两者都生成
- 应用命名模式/模板

阶段 3：分析并生成建议

分析资产：使用 Webflow MCP 的 get_asset_preview 工具，传入每个资产的 asset_id（来自阶段 1），分析需要更新的资产
- 错误处理：如果 Webflow MCP 的 get_asset_preview 失败，请使用备用方案：
  - 根据现有文件名提取描述
  - 使用通用占位内容，并发出警告
  - 继续处理其他资产
- 分批处理以避免超时
生成并验证建议：
- alt 文本验证：
  - 最多 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. [category]-[description]（例如：team-john-headshot）
2. [description]-[location]（例如：office-workspace-desk）
3. 自定义模式...
4. 跳过模式，使用单独的名称

存储回滚数据：应用更改前，存储：
- 原始资源名称
- 原始替代文本
- 时间戳
- 已修改的资源
应用更新：使用 Webflow MCP 的 data_assets_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 个字符（无障碍最佳实践）
必须以标点符号结尾（句号、感叹号、问号）
删除冗余短语：
- ❌ “Image of a person” → ✅ “Person working at desk”
- ❌ “Picture of logo” → ✅ “Company logo on blue background”
- ❌ “Photo showing” → ✅ 直接描述
如果过短（< 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_asset_preview 耗时超过 30 秒，则跳到下一批

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

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

错误处理：

如果 Webflow MCP 的 get_asset_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_asset_preview（传入 asset_id，而非 URL）来了解图片内容
生成具体、描述清晰的建议（而非泛泛而谈）
向用户展示前验证所有建议
妥善处理部分操作
为耗时较长的操作提供清晰的进度指示
在报告中将相似问题归类
使用视觉标记：✅ ⚠️ ❌ 🔍 💡 📋 🎉
对话风格自然，但保持简洁
更改后始终提供回滚选项

支持 Markdown

登录后评论

基本信息

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

报告问题