Manavarya09/design-extract

解決的問題

designlang 是一個從任意即時網站中提取完整設計系統的工具。它透過程式化讀取 DOM，消除手動重製樣式、權杖與版面的勞力，自動產生開發者可用的資源，例如 Tailwind 設定、Figma 變數與 React 組件範本。

工作原理

該工具使用無頭瀏覽器（Chromium）分析 URL 的即時 DOM。它提取顏色、排版、間距與動效，並可爬取多個頁面，合成一個統一且去重的設計系統。同時，它還分析版面模式、四個斷點下的響應式行為以及互動狀態（懸停/聚焦/激活）。

適用對象

需要克隆、複製或分析現有網站設計語言的前端開發者、UI/UX 設計師以及 AI 編碼代理，以加速開發或確保視覺一致性。

主要亮點

• 全面輸出：產生超過 17 個檔案，包括 W3C DTCG 權杖、Tailwind 設定、shadcn 主題與 Figma 變數。
• 保真度測量：透過像素差異與動效分析，將克隆網站與原始網站進行對比，提供 0-100 分的評分與排序後的修正方案。
• 設計 DNA：在顏色、字型、空間、形狀、動效五個維度上，將設計與其他系統進行對比，確定其在設計空間中的相對位置。
• AI 整合：以 Claude Code 插件與 MCP 伺服器形式提供，允許 AI 代理直接存取設計權杖與組件。
• 高階提取：捕捉執行時動效（交錯、編排、滾動配方）與 WCAG 對比度評分，支援無障礙存取。
• 全站合成：爬取多個頁面，根據覆蓋率將網站級權杖與頁面級選擇分離。