工程開發
buildwithclaude avatar

buildwithclaude

透過瀏覽器自動化工具分析網站設計靈感,提取色彩、排版、佈局結構與 UI 模式。

簡介

Inspiration Analyzer 是一項專為開發人員、UI/UX 設計師與產品創作者設計的專業技能,旨在將網站設計靈感轉化為可執行的技術需求。透過整合的瀏覽器控制工具,此技能可訪問目標網址,並對視覺與結構元素執行自動化審核。這對於啟動新設計專案、競品基準測試或為設計系統收集元件特別有用,無需手動截圖與檢查樣式。

  • 自動化的瀏覽器導航與視窗管理,包含行動裝置 (375x812) 與桌面版視窗。

  • 全面的色彩盤提取,包含主色、輔助色、背景色及強調色的十六進位代碼 (Hex codes)。

  • 深入的字體分析,包含字體家族、粗細、字元間距及層級比例的文件記錄。

  • 佈局模式分解,識別網格系統、間距設計、導航樣式及區段結構。

  • 自動捕捉英雄區、滾動內容與互動式 UI 狀態(如懸停效果)的螢幕截圖。

  • 產生結構化的 Markdown 格式靈感報告,可直接整合至設計文件或情緒板 (Moodboard)。

  • 當提供特定網址時,此技能運作最佳;它能自動化網站探索,節省大量手動檢查 CSS 的時間。

  • 預期輸出包含表格化的色彩清單、字體建議與佈局見解,指導後續開發流程。

  • 若瀏覽器存取受限,此技能會進入後備模式,引導用戶提供手動截圖與描述性資訊以繼續分析。

  • 建議提供高保真度的網址;當網站具備定義明確的 CSS 計算樣式時,分析效果最為顯著。

  • 用戶可留意終端機的瀏覽器反饋,並在過程中提供感興趣的特定區塊或元素,以進一步精煉分析結果。

倉庫統計

Star 數
2,834
Fork 數
328
Open Issue 數
6
主要語言
Python
預設分支
main
同步狀態
閒置
最近同步時間
2026年4月28日 上午11:54
在 GitHub 查看