Design-Extract: 將任何網站轉化為完整設計系統的終極工具 | Design-Extract: The Ultimate Tool to Convert Any Website into a Complete Design System
🔎 工具速覽 / AT A GLANCE
| Category | Developer Tools / Design Ops |
| Pricing | Free (MIT License) |
| BestFor | Frontend Engineers, UI/UX Designers, AI-driven Development |
| GitHub Stars | ⭐ 1159 |
🚀 引言 / Introduction
Design-extract 不僅僅是一個 CSS 提取器，它像開發者閱讀樣式表一樣閱讀網站，將活生生的 DOM 轉化為可工程化的設計語言。 | Design-extract is more than just a CSS extractor; it reads a website the way a developer reads a stylesheet, transforming live DOMs into engineerable design languages.
🛠️ 核心功能 / Key Features
Comprehensive Token Extraction: Generates DTCG tokens, semantic/primitive/composite variables, and CSS custom properties.全方位 Token 提取：生成 DTCG Token、語義化/原生/複合變數及 CSS 自定義屬性。
Multi-platform Emitters: Export directly to iOS SwiftUI, Android Compose, Flutter, WordPress, and Tailwind v4.多平台輸出：直接導出至 iOS SwiftUI, Android Compose, Flutter, WordPress 及 Tailwind v4。
AI & IDE Integration: MCP server support for Claude Code, Cursor, and Windsurf for seamless AI-driven UI implementation.AI 與 IDE 整合：支持 Claude Code, Cursor 與 Windsurf 的 MCP 伺服器，實現無縫的 AI UI 實作。
Advanced Component Anatomy: Maps component clusters into anatomy trees with slots and variant x size x state matrices.進階組件解剖：將組件簇映射為包含插槽（Slots）以及「變體 x 尺寸 x 狀態」矩陣的解剖樹。
Accessibility & Health Audit: Built-in WCAG accessibility scoring and CSS health audits with remediation suggestions.無障礙與健康審計：內建 WCAG 無障礙評分與 CSS 健康稽核，並提供修復建議。
💡 技術亮點 / Tech Highlights
Motion Language Analysis: Detects durations, easings, and scroll-linked animations, classifying the 'feel' (e.g., springy, smooth).動態語言分析：偵測時長、緩動函數與滾動聯動動畫，並將其「感覺」分類（如：彈性、流暢）。
Brand Voice Extraction: Analyzes tone, pronoun posture, and heading styles to capture the brand's verbal identity.品牌語調提取：分析語氣、代名詞姿態與標題風格，捕捉品牌的文字識別特徵。
Drift Checking & Visual Diff: Compare live sites against local tokens or perform visual diffs between two different URLs.漂移檢查與視覺差異：將線上網站與本地 Token 進行對比，或對兩個不同 URL 執行視覺差異分析。
📦 快速上手 / Quick Start
Install via npm: `npm install designlang`透過 npm 安裝：`npm install designlang`
Run extraction command to analyze any target URL.執行提取指令以分析目標 URL。
Review 11+ generated output files including Tailwind configs and Figma variables.審閱 11 個以上的輸出文件，包含 Tailwind 配置與 Figma 變數。
準備好試試 Design-Extract: 將任何網站轉化為完整設計系統的終極工具 | Design-Extract: The Ultimate Tool to Convert Any Website into a Complete Design System 了嗎？
Ready to try Design-Extract: 將任何網站轉化為完整設計系統的終極工具 | Design-Extract: The Ultimate Tool to Convert Any Website into a Complete Design System?
前往 GitHub 頁面 →
留言
張貼留言