🚀 design-extract: One Command to Bridge the Gap Between Web Design and Code | 一鍵提取網站設計系統，終結前端對接噩夢
對於開發者來說，最痛苦的時刻莫過於拿到一個『只要參考這個網站』的指令，卻得花數小時在 Chrome DevTools 中反覆切換、手動抄寫顏色代碼、字體大小和間距。即使有了 Figma，現實中的網站實作往往與設計稿存在落差。design-extract 擊碎了這種低效的『手動對齊』過程。在 AI 驅動開發的時代，LLM 需要精確的上下文（Context）才能生成高品質 UI，而此工具能將整個網站的設計語言轉化為 AI 可讀的 Markdown 與 Token，讓 AI 能精準地幫你重建任何視覺風格，將數天的對接時間縮短至秒級。
For developers, one of the most frustrating experiences is being told to 'just refer to this website' and spending hours toggling through Chrome DevTools, manually copying color codes, font sizes, and spacing. Even with Figma, real-world implementations often drift from original designs. design-extract shatters this inefficient 'manual alignment' process. In the era of AI-driven development, LLMs require precise context to generate high-quality UI. By transforming a website's design language into AI-optimized Markdown and Tokens, this tool allows AI to accurately recreate any visual style, reducing days of manual bridging to mere seconds.
🛠️ 核心功能 | Key Features
- 全自動設計提取： 一行指令即可抓取所有計算後的樣式（Computed Styles），免去手動對比。
- 8 種多平台輸出： 同時生成 Tailwind v4 配置、Figma 變數、shadcn/ui 主題、W3C Token 等，無需重複定義。
- 深度捕捉佈局與交互： 不僅是顏色，還能提取 Grid/Flexbox 佈局、4 個斷點的響應式行為以及 Hover/Focus 交互狀態。
- WCAG Accessibility 審計： 自動評估無障礙分數並提供修復建議，將合規性檢查納入自動化流程。
- AI 友好的 Markdown 報告： 提供包含 19 個章節的詳細設計語言文檔，直接餵給 Claude 或 GPT 即可快速開發。
- Automated Design Extraction: Extract all computed styles with a single command, eliminating manual inspection.
- 8 Multi-platform Outputs: Simultaneously generate Tailwind v4 configs, Figma variables, shadcn/ui themes, and W3C Tokens—no more redundant definitions.
- Deep Layout & Interaction Capture: Beyond colors, it captures Grid/Flexbox patterns, responsive behavior across 4 breakpoints, and interaction states (hover/focus).
- WCAG Accessibility Audit: Automatically scores accessibility and provides remediation paths, integrating compliance into the workflow.
- AI-Optimized Markdown Reports: A detailed 19-section design language document that can be fed directly into Claude or GPT for rapid development.
💡 技術亮點 | Why It Matters
與傳統的 CSS 提取器不同，design-extract 的核心創新在於其「語義化轉換能力」。它不只是抓取單一屬性，而是將其組織成完整的設計系統（Semantic + Primitive + Composite）。此外，它針對現代 AI 工作流（如 Cursor, Windsurf）提供了 MCP Server 支持，讓 AI 助手能直接從磁碟讀取設計健康數據與組件定義，真正實現從『視覺觀察』到『代碼生成』的閉環自動化。
Unlike traditional CSS extractors, the core innovation of design-extract lies in its 'Semantic Translation Capability.' It doesn't just scrape attributes; it organizes them into a full design system (Semantic + Primitive + Composite). Furthermore, it provides MCP Server support for modern AI workflows (like Cursor or Windsurf), enabling AI assistants to read design health data and component definitions directly from disk, achieving a true closed-loop automation from 'visual observation' to 'code generation.'
📦 快速上手 | Quick Start
無需安裝，直接使用 npx 即可解決問題：
# 快速提取基礎設計系統
npx designlang https://stripe.com
# 提取完整版（含所有 8 種輸出文件）
npx designlang https://stripe.com --fullNo installation required; solve your design gap instantly using npx:
# Quick extraction of basic design system
npx designlang https://stripe.com
# Full extraction (including all 8 output files)
npx designlang https://stripe.com --fulldesign-extract 將網站從一個「不可編輯的視覺結果」轉變為「可工程化的設計數據」。無論你是需要快速遷移風格的前端工程師，還是希望 AI 精準生成 UI 的開發者，這都是目前最強大的設計同步工具。立即前往 GitHub 探索！
👉 查看 GitHub 倉庫
design-extract transforms websites from 'uneditable visual results' into 'engineerable design data.' Whether you are a frontend engineer needing rapid style migration or a developer wanting AI to generate precise UI, this is the most powerful design sync tool available. Explore it on GitHub now!
👉 Visit GitHub Repository
留言
張貼留言