zanwei/design-dna

解決的問題

將主觀的視覺設計需求（例如：「讓它看起來像這個網站」）轉換為精確且機器可讀的規格，稱為「Design DNA」。這可防止AI代理偏離通用設計預設值，或無法捕捉品牌視覺識別的細微差異等常見問題。

作用方式

本專案提供一個遵循三階段流程的代理技能：

1. 結構：定義設計標籤、質性風格與視覺效果的完整架構。
2. 分析：從截圖、圖片或URL中提取量化JSON配置檔，涵蓋可測量的標籤（顏色、字型）、質性感知（氛圍、品牌語氣）以及進階視覺效果（WebGL、著色器、玻璃擬態）。
3. 產生：使用提取的DNA JSON與使用者內容，實作忠實的UI，通常以自包含的HTML/CSS/JS形式輸出。

為確保準確性，專案包含可選的決定性測量腳本。這些腳本使用實際像素上的k-means聚類，提取精確的十六進位碼，並驗證最終實作與原始參考的一致性，以消除LLM的顏色感知漂移。

適用對象

使用AI代理（如Cursor或Claude Code）的開發者與設計師，希望在不同專案中一致地重現特定視覺識別，或在團隊間共享設計規格。

主要特色

• 三維分析：捕捉設計標籤、質性風格與超越標準CSS的複雜視覺效果。
• 決定性驗證：使用像素級測量確保顏色與樣式在數學上精確，而非基於LLM感知。
• 可攜式規格：輸出可版本控制並在不同代理與專案中重用的JSON「DNA」檔案。
• 廣泛代理相容性：與Agent Skills規格相容，可透過skills CLI在各種AI編輯器與代理中安裝。