webflow-mcp:compress-cms-image

Webflow CMS 图像压缩

将 Webflow CMS 项目中的图像字段压缩并转换为 .webp 或 .avif 格式。

目前，此技能不支持 Rich Text 字段中嵌入的图像。开始前请告知用户此限制，并且仅处理架构类型为 Image 或 MultiImage 的 CMS 字段。

重要说明

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

• 需要发现站点 ID 时，使用 Webflow MCP 的 data_sites_tool，并将操作设为 list_sites
• 使用 Webflow MCP 的 data_cms_tool，并将操作设为 get_collection_details，以获取集合架构
• 使用 Webflow MCP 的 data_cms_tool，并将操作设为 list_collection_items，以获取目标 CMS 项目
• 使用 Webflow MCP 的 data_assets_tool，并将操作设为 create_asset，以创建预签名资产上传
• 使用 Webflow MCP 的 data_cms_tool，并将操作设为 update_collection_items，以更新 CMS 图像字段
• 使用 Webflow MCP 的 data_cms_tool，并将操作设为 publish_collection_items，以发布更新后的项目
• 所有 Webflow MCP 调用都必须包含必需的 context 参数（15-25 个词，使用第三人称视角）
• 修改操作需要用户明确确认。上传资产、更新 CMS 字段或发布前，请用户输入 confirm。
• 不支持 Rich Text 中嵌入的图像。不要解析或重写 Rich Text HTML 来压缩图像。

说明

阶段 1：收集参数

尽可能一次性收集所有必需的输入：

1. Collection ID：询问“Collection ID 是什么？”
2. Item ID：询问“Item ID 是什么？”
3. 图像字段：询问“要压缩哪些图像字段？”
   • “所有图像字段”——压缩项目中找到的所有 Image 或 MultiImage 字段
   • “指定字段名称”——由用户提供具体的字段 slug
4. 目标格式：询问“目标格式是什么？”
   • “webp（推荐）”——浏览器支持度最佳，压缩效果好
   • “avif”——压缩效果更好，但支持度略低
5. 质量（1-100）：询问“质量（1-100）是多少？”
   • “85 - 推荐（webp）”——对大多数照片而言，视觉上无损
   • “75 - 推荐（avif）”——avif 在较低质量下也很高效
   • “自定义”——由用户输入自己的数值

如果用户选择“指定字段名称”，请追问以逗号分隔的字段 slug。如果用户选择“自定义”质量，请追问具体数值。验证自定义质量是否为 1 到 100 之间的整数。

阶段 2：查找图像字段

1. 调用 data_cms_tool，将操作设为 get_collection_details，并提供集合 ID。
2. 筛选 type === "Image" 或 type === "MultiImage" 的字段。
3. 选择目标字段：
   • 如果用户选择“所有图像字段”，使用找到的所有 Image 和 MultiImage 字段。
   • 如果用户指定了字段，请验证每个 slug 是否存在，以及是否为 Image 或 MultiImage 字段。
   • 对于用户指定但不存在或不是图像字段的字段，发出警告并跳过。
4. 如果没有剩余的有效图像字段，请停止并告知用户。

阶段 3：获取 CMS 项目

调用 data_cms_tool，将操作设为 list_collection_items，以获取目标项目。如果工具支持直接按项目 ID 识别项目，则使用项目 ID；否则筛选或搜索返回的项目。

提取每个目标字段当前的 fieldData：

• 对于 Image 字段，获取 url 和 fileId。
• 对于 MultiImage 字段，获取数组中每个条目的 url 和 fileId。
• 跳过值为 null、空值或格式错误的图像值。
• 跳过已经是目标格式的图像，除非用户明确要求重新压缩。

阶段 4：预览并确认

下载或上传任何内容之前，先显示预览：

Compression Preview

Collection: [collection ID]
Item: [item ID]
Target format: webp
Quality: 85

Fields to process:
- main-image: hero.jpg -> hero.webp
- gallery: 3 images -> webp

Skipped:
- thumbnail: already webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

只有在用户输入 confirm 后才能继续。

阶段 5：转换每张图片

对于每张图片：

1. 下载到 /tmp/：

curl -sL "{url}" -o "/tmp/cms_img_{fieldSlug}_{index}.orig"

2. 确认 Pillow 可用：

python3 -c "from PIL import Image" 2>/dev/null || pip3 install Pillow -q

对于 avif，还要尝试：

pip3 install pillow-avif-plugin -q

3. 使用用户设置的质量进行转换：

python3 - <<'EOF'
from PIL import Image
import os

try:
    import pillow_avif
except ImportError:
    pass

source = "/tmp/cms_img_{fieldSlug}_{index}.orig"
target = "/tmp/cms_img_{fieldSlug}_{index}.{ext}"
img = Image.open(source)
img.save(target, "{FORMAT}", quality={quality})
orig = os.path.getsize(source)
new = os.path.getsize(target)
print(f"Original: {orig:,} bytes -> {FORMAT}: {new:,} bytes ({(1 - new / orig) * 100:.1f}% smaller)")
EOF

如果 avif 转换失败，请报告错误，并询问用户是回退到 webp 还是中止。

4. 计算转换后文件的 MD5 哈希值：

md5 -q "/tmp/cms_img_{fieldSlug}_{index}.{ext}"

在 Linux 上：

md5sum "/tmp/cms_img_{fieldSlug}_{index}.{ext}" | cut -d' ' -f1

阶段 6：上传到 Webflow 资源

对于每个转换后的文件：

1. 确定 site_id。如果无法从集合或先前的上下文中得知，请调用 data_sites_tool，并使用操作 list_sites。如果有多个站点可用，请询问用户哪个站点拥有该集合。
2. 调用 data_assets_tool，并使用操作 create_asset：
   • site_id：目标站点 ID
   • file_name：原始基本名称加上新扩展名，例如 hero.webp
   • file_hash：MD5 十六进制字符串
3. 记录响应值：
   • uploadUrl：S3 端点
   • uploadDetails：表单字段
   • id：新资源 ID
   • hostedUrl：用作 CMS 源引用的 CDN URL
4. 以 multipart/form-data 格式 POST 到 S3。将 uploadDetails 的键映射为 curl 字段：
   • xAmzAlgorithm -> X-Amz-Algorithm
   • xAmzCredential -> X-Amz-Credential
   • xAmzDate -> X-Amz-Date
   • xAmzSignature -> X-Amz-Signature
   • successActionStatus -> success_action_status
   • contentType -> Content-Type
   • cacheControl -> Cache-Control
   • acl、bucket、key 和 policy 按原样传递
   • 最后附加文件：-F "file=@/tmp/cms_img_{fieldSlug}_{index}.{ext};type=image/{ext}"
5. 预期 HTTP 状态码为 201。如果响应不是 201，请记录响应正文并报告上传错误。预签名 URL 的有效期为一小时；如果 URL 过期，请从创建资源开始重新操作。

阶段 7：更新并发布

调用 data_cms_tool，使用操作 update_collection_items，并且只传入成功转换和上传的字段。

对于 Image 字段，设置为：

{
  "fieldSlug": {
    "fileId": "{newAssetId}",
    "url": "{hostedUrl}"
  }
}

对于 MultiImage 字段，重建完整图片数组，并仅将成功处理的条目替换为新的 { "fileId", "url" } 值。跳过的条目须原样保留。

更新成功后，调用 data_cms_tool，使用操作 publish_collection_items 发布该项目 ID。CMS 可能会重新处理图片并生成自己的 CDN URL；资源上传返回的 hostedUrl 是源引用。

阶段 8：报告结果

打印简洁的汇总表：

字段	原始	转换后	节省
main-image	118,044 B (JPEG)	113,260 B (webp)	4.1%

另请报告：

• 因值为 null、为空、格式错误、已是目标格式或并非图片字段而跳过的字段
• 转换失败情况，以及用户选择了回退还是中止
• 上传失败情况；如有响应正文，也一并提供
• 如果后续 CMS 更新或发布失败，报告成功上传的新资源 ID

示例

用户提示词：

Compress the main image on this CMS item to webp.

响应流程：

I need the collection ID, item ID, image fields, target format, and quality before compressing the CMS image.

Compression Preview

Collection: 65f...
Item: 66a...
Target format: webp
Quality: 85

Fields to process:
- main-image: blog-hero.jpg -> blog-hero.webp

Type `confirm` to download, convert, upload, update the CMS item, and publish.

最终报告：

CMS Image Compression Complete

| Field | Original | Converted | Savings |
|-------|----------|-----------|---------|
| main-image | 842,911 B (JPEG) | 214,330 B (webp) | 74.6% |

Updated and published item 66a...

指南

• 一次处理一个 CMS 项目。对于跨多个项目的批量操作，请对每个项目重新运行此技能，或使用显式循环扩展工作流。
• 不要从 Webflow 资源库中删除原始 JPEG 或 PNG；只更新 CMS 字段引用。
• 保留文件名：去掉原始扩展名并追加目标扩展名。避免出现 hero.jpg.webp 这样的双重扩展名。
• 单张图片转换或上传失败后，继续处理其他已选字段，除非失败字段是唯一目标。
• 如果没有图片成功转换并上传，绝不要更新或发布 CMS 项目。
• 在本地内存中保留原始图片字段值的回滚记录；如果更新成功，请在最终报告中包含该记录。