資產審計 是做什麼的？
分析 Webflow 網站上的資產以進行 SEO 優化。
重要筆記
對所有操作一律使用 Webflow MCP 工具：
- 使用 Webflow MCP 的
data_assets_tool來擷取和更新資產 - 使用 Webflow MCP 的
get_asset_preview（搭配資產的asset_id）來分析圖片內容 - 使用 Webflow MCP 的
data_sites_tool搭配list_sites動作來列出可用網站 - 使用 Webflow MCP 的
webflow_guide_tool來獲取最佳實務 - 請勿使用任何其他工具或方法進行 Webflow 操作
- 所有工具呼叫都必須包含必要的
context參數（15-25 字，第三人稱視角）
操作說明
階段一：網站選擇與資產發現
- 取得網站：識別目標網站。如果使用者未提供網站 ID，請要求提供。
- 擷取所有資產：使用 Webflow MCP 的
data_assets_tool取得網站中的所有資產（每筆資產記錄都包含其asset_id，這是預覽功能所需的）- 對於擁有 50 個以上資產的網站，請以 20 個為一批進行處理
- 顯示進度：「正在處理資產 1-20 / 150...」
- 偵測模式：分析資產命名中的常見模式：
- 相機上傳檔案 (IMG_, DSC_, 等)
- 螢幕截圖 (screenshot, Screen Shot, 等)
- 通用名稱 (untitled, image-1, 等)
- 基於日期的名稱 (2024-01-10, 等)
階段二：問題分析與模式識別
- 識別問題：列出所有符合以下情況的資產：
- 未設定替代文字（null 或空字串）
- 已有替代文字但品質不佳（太短、冗餘詞句等）
- 名稱不利於 SEO
- 是重複或非常相似的資產
- 模式偵測報告：顯示偵測到的模式：
🔍 偵測到的模式： - 15 個資產以 "IMG_" 開頭（相機上傳） - 8 個資產包含 "screenshot" - 建議：對這些模式進行批次重新命名 - 詢問使用者偏好：詢問使用者想要產生：
- 僅替代文字
- 僅 SEO 友善名稱
- 兩者皆要
- 套用命名模式/模板
階段三：分析與建議產生
- 分析資產：使用 Webflow MCP 的
get_asset_preview工具，傳入每個資產的asset_id（來自階段一），以分析需要更新的資產- 錯誤處理：如果 Webflow MCP 的
get_asset_preview失敗，使用備用方案：- 從現有檔案名稱中提取描述
- 使用通用佔位符並附上警告
- 繼續處理其他資產
- 以批次處理以避免逾時
- 錯誤處理：如果 Webflow MCP 的
- 產生經過驗證的建議：
- 替代文字驗證：
- 最多 125 個字元（如果超過則提出警告）
- 無冗餘詞句（"image of", "picture of", "photo of"）
- 必須以標點符號結尾
- 標記通用描述（信心水準 < 50%）
- SEO 名稱驗證：
- 僅允許小寫 a-z、0-9、連字號
- 無雙重副檔名 (.webp.webp) - 先移除現有副檔名
- 最多 100 個字元
- 將空格/底線替換為連字號
- 無特殊字元
- 替代文字驗證：
- 資料夾組織建議：如果偵測到模式，建議資料夾結構：
💡 組織建議： - 為 8 張團隊圖片建立 "team-photos" 資料夾 - 為 15 張產品照片建立 "product-images" 資料夾
階段四：精細核准與套用
- 呈現建議並進行精細核准：
- 顯示帶有複選框的編號清單
- 允許個別切換：「輸入數字以跳過（例如 '2,4'）」
- 選項：「全部」、「無」或特定數字
- 對每個建議顯示驗證警告
- 提供命名模板（如果有多個相似資產）：
🎨 套用命名模式？ 1. [類別]-[描述] (例如：team-john-headshot) 2. [描述]-[位置] (例如：office-workspace-desk) 3. 自訂模式... 4. 跳過模式，使用個別名稱 - 儲存復原資料：在套用變更前，儲存：
- 原始資產名稱
- 原始替代文字
- 時間戳記
- 已修改的資產
- 套用更新：使用 Webflow MCP 的
data_assets_tool僅更新已核准的資產- 顯示批次更新的進度
- 優雅地處理部分失敗
- 分別報告成功與失敗
- 提供復原選項：在套用變更後：
📋 可復原： 上次更新：2 分鐘前修改了 4 個資產 輸入 "undo" 以還原這些變更
範例
使用者提示：
對我的網站執行資產審計。
步驟 1：初始審計報告
📊 SEO 資產審計：MCP Demo #2
總計：4 個資產
🔍 偵測到的模式：
- 4 個資產具有通用數字名稱 (1.webp, 2.webp, 3.webp, 4.webp)
- 所有資產均為 WebP 格式 ✓
⚠️ 缺少替代文字（4 個資產）：
├── 1.webp（替代文字為空）
├── 2.webp（替代文字為空）
├── 3.webp（替代文字為空）
└── 4.webp（替代文字為空）
⚠️ 非 SEO 友善名稱（4 個資產）：
├── 1.webp（通用數字名稱）
├── 2.webp（通用數字名稱）
├── 3.webp（通用數字名稱）
└── 4.webp（通用數字名稱）
---
您想產生什麼？
1. 僅替代文字
2. 僅 SEO 友善名稱
3. 替代文字和 SEO 友善名稱
請選擇一個選項（1、2 或 3）。
含有驗證警告的範例：
📋 建議改善項目：
[1] ✓ IMG_1234.jpg
替代文字：「Professional team member headshot with blue background.」
新名稱：professional-team-member-headshot.jpg
✅ 驗證通過
[2] ✓ screenshot-2024.png
替代文字：「Dashboard analytics overview showing user engagement metrics.」
新名稱：dashboard-analytics-overview.png
✅ 驗證通過
[3] ⚠️ untitled-image.webp
替代文字：「Photo」
⚠️ 警告：替代文字過短 (< 10 個字元) - 需要更多細節
新名稱：untitled-image.webp
⚠️ 警告：無法產生更好的名稱（圖片預覽失敗）
[4] ⚠️ TeamPhoto2024!!!.jpg
替代文字：「Image of a person working on laptop in modern office with plants and natural lighting through large windows in the background.」
⚠️ 警告：替代文字過長（137 個字元） - 建議縮短以利螢幕閱讀器
新名稱：team-photo-2024.jpg
✅ 驗證通過（特殊字元已移除）
您想更新哪些資產？
步驟 2：使用者選擇選項 3 且圖片分析完成後
📋 建議改善項目：
[1] ✓ 1.webp
替代文字：「Podcast host with headphones and microphone recording Webflow podcast episode in studio.」
新名稱：webflow-podcast-host-recording-studio.webp
✅ 驗證通過
[2] ✓ 2.webp
替代文字：「Professional developer wearing glasses working on laptop with Webflow logo in modern office.」
新名稱：developer-working-laptop-webflow-office.webp
✅ 驗證通過
[3] ✓ 3.webp
替代文字：「Webflow homepage hero section with tagline and email signup form.」
新名稱：webflow-homepage-hero-section.webp
✅ 驗證通過
[4] ✓ 4.webp
替代文字：「Speaker presenting on stage at Webflow Conf with audience watching.」
新名稱：webflow-conf-speaker-presentation-stage.webp
✅ 驗證通過
---
您想更新哪些資產？
- 輸入數字以跳過（例如 "2,4" 跳過項目 2 和 4）
- 輸入 "all" 以全部更新
- 輸入 "none" 以取消
步驟 3：使用者確認「全部」後
🔄 正在套用更新...
進度：████████████████████ 100% (4/4 個資產)
✅ 更新成功套用！
SEO 資產審計完成：MCP Demo #2
摘要：
- ✅ 4 個資產更新成功
- ❌ 0 個資產失敗
- ⏭️ 0 個資產已跳過
已套用的變更：
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
└─────────────────────────────────────────────────────────────────┘
📋 可復原：
上次更新：剛剛修改了 4 個資產
輸入 "undo" 以還原這些變更
---
🎉 您的網站資產現在已針對 SEO 和無障礙性進行全面優化！
步驟 3 的替代方案：使用者選擇特定資產（例如「1,3」）
🔄 正在對資產 1 和 3 套用更新...
進度：████████████████████ 100% (2/2 個資產)
✅ 部分更新完成！
摘要：
- ✅ 2 個資產更新成功
- ❌ 0 個資產失敗
- ⏭️ 2 個資產已跳過（依要求）
已套用的變更：
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp │
│ ✓ 已新增替代文字 │
│ ✓ 檔案名稱已更新 │
└─────────────────────────────────────────────────────────────────┘
已跳過的資產（可稍後再次執行審計）：
- [2] 2.webp
- [4] 4.webp
📋 可復原：
輸入 "undo" 以還原這 2 項變更
指導方針
階段一：關鍵驗證（必須遵循）
檔案副檔名處理：
- 在新增副檔名之前，一律先移除現有副檔名
- 不良範例：
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
階段二：批次處理與效能
大型站點處理：
- 擁有 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失敗：- 記錄錯誤（不向使用者顯示）
- 使用備用方案：從檔案名稱中提取描述
- 附上 ⚠️ 警告：「從檔案名稱產生（圖片預覽失敗）」
- 繼續處理其他資產
- 部分成功處理：
- 分別報告成功與失敗
- 顯示：「✅ 15 個已更新，❌ 2 個失敗，⏭️ 3 個已跳過」
- 提供重試失敗資產的選項
階段三：進階功能
精細核准系統：
- 為每個建議編號：
[1]、[2]、[3]等 - 顯示勾選狀態：
✓或✗ - 接受多種格式：
- "all" - 全部核准
- "none" - 取消操作
- "1,3,5" - 跳過項目 1、3 和 5
- "2-5" - 跳過項目 2 到 5
- 始終顯示每個項目的驗證狀態
命名模板： 當偵測到 5 個以上相似資產時，提供模板：
[類別]-[描述]-[修飾詞]- 範例：
product-laptop-front-view.jpg
- 範例：
[描述]-[位置]-[年份]- 範例：
team-photo-office-2024.jpg
- 範例：
[類型]-[名稱]-[變體]- 範例：
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）來瞭解圖片內容