buildwithclaude

Inspiration Analyzer 是一款專為設計師和前端開發者設計的技能，旨在從現有網站中提取可執行的設計見解。透過整合瀏覽器自動化工具，此技能可訪問目標網址、執行全頁面與捲動截圖，並檢查計算後的 CSS 樣式，以解構複雜的網頁設計。它透過將原始網頁數據轉化為結構化且適合開發人員使用的報告，填補了視覺靈感與技術實現之間的鴻溝。

• 自動化瀏覽器導航與視窗截圖，收集包括首屏區域、捲動內容及互動懸停狀態在內的視覺狀態。

• 智能提取設計代碼，包括精確的色彩組合（主色、輔色、強調色、背景色）、排版規格（字體、粗細、字級、行高）以及網格佈局結構。

• 識別重複出現的 UI 模式，如按鈕樣式、卡片組件、圖標系統及排版間距邏輯。

• 生成結構化報告，將視覺發現轉化為清晰的重點總結、具體的技術建議以及「應避免的坑」，以確保設計一致性。

• 內建回退機制，當瀏覽器工具受限時，引導用戶手動提供截圖與相關資訊，保持工作流程的連續性。

• 行動裝置響應式分析，驗證佈局如何適應較小的視窗並標記媒體查詢的斷點。

• 用戶應提供作為當前專案設計靈感的特定網址。

• 此技能需要存取 MCP 瀏覽器工具（tabs_context_mcp, navigate, computer）才能在自動化模式下運行。

• 輸出為 Markdown 格式的報告，非常適合複製到設計文件、情緒板或專案需求規格中。

• 分析多個網站時，工具會自動總結共同主題，並提供不同設計風格之間的比較見解。

• 最佳實踐包括檢查網頁原始碼中的顏色變數，並觀察間距一致性，以確保準確提取底層設計系統。