告別手動拆解！design-extract：一鍵將任何網站轉化為完整設計系統 Stop Manual Audits! design-extract: Transform Any Website into a Complete Design System with One Command
🔎 工具速覽 / AT A GLANCE
| Category | Developer Tools / Design Ops |
| Pricing | Free (MIT License) |
| BestFor | Frontend Engineers, UI/UX Designers, AI Agent Users |
| GitHub Stars | ⭐ 1088 |
🚀 引言 / Introduction
對於開發者和設計師來說，最痛苦的過程之一就是「還原」一個現有網站的設計規範。你需要反覆打開 Chrome DevTools，手動記錄顏色、字體大小、間距，還要推測其響應式佈局的邏輯。這種重複性勞動不僅低效，且極易出錯。
For developers and designers, one of the most painful processes is "reconstructing" an existing website's design specifications. You have to repeatedly open Chrome DevTools, manually record colors, font sizes, and spacing, and guess the logic behind its responsive layout. This repetitive labor is not only inefficient but also highly prone to error.`design-extract` (npm package: `designlang`) 徹底改變了這一點。它不僅是一個顏色抓取工具，而是一個強大的「設計語言解析器」，能將活生生的網站直接轉化為結構化的設計系統。
`design-extract` (npm package: `designlang`) completely changes this. It is not just a color picker, but a powerful "design language parser" that transforms live websites directly into structured design systems.🛠️ 核心功能 / Key Features
- **全方位輸出 (8-in-1 Export)**：一次生成 8 種格式，包括 AI 優化的 Markdown、Tailwind 配置、Figma 變數、shadcn/ui 主題及 W3C 標準 Token。
**Comprehensive Output (8-in-1 Export)**: Generates 8 formats in one go, including AI-optimized Markdown, Tailwind configs, Figma variables, shadcn/ui themes, and W3C standard tokens.- **佈局系統提取 (Layout Extraction)**：不僅抓取「顏色」，還能分析網格 (Grid)、彈性盒子 (Flexbox) 與容器寬度，揭露網站的結構骨架。
**Layout System Extraction**: Beyond just "colors," it analyzes Grid, Flexbox, and container widths, revealing the structural skeleton of the website.- **多斷點響應式捕捉 (Multi-Breakpoint Capture)**：自動在 4 種視窗尺寸下抓取樣式，完整紀錄行動端到桌面端的設計變化。
**Multi-Breakpoint Capture**: Automatically captures styles across 4 viewport sizes, recording the full design transition from mobile to desktop.- **跨平台Emitter (Multi-platform Emitters)**：支持將提取的設計直接轉換為 iOS SwiftUI, Android Compose, Flutter 或 WordPress 主題代碼。
**Multi-platform Emitters**: Supports converting extracted designs directly into iOS SwiftUI, Android Compose, Flutter, or WordPress theme code.- **AI 代理集成 (AI Agent Integration)**：內建 MCP 伺服器，可直接對接 Claude Code, Cursor 與 Windsurf，讓 AI 助手直接讀取網站設計規範。
**AI Agent Integration**: Built-in MCP server that connects directly to Claude Code, Cursor, and Windsurf, allowing AI assistants to read website design specs directly.💡 技術亮點 / Tech Highlights
- **AI-Optimized Markdown**：生成的 Markdown 包含 19 個詳細章節（從 Z-index 映射到 WCAG accessibility 評分），可直接餵給 LLM 完美複刻設計。
**AI-Optimized Markdown**: The generated Markdown contains 19 detailed sections (from Z-index maps to WCAG accessibility scores), allowing LLMs to perfectly replicate the design.- **CSS 健康診斷 (CSS Health Audit)**：內建 WCAG 2.1 Accessibility 審核，幫助開發者在提取設計的同時優化可訪問性。
**CSS Health Audit**: Integrated WCAG 2.1 Accessibility audit, helping developers optimize accessibility while extracting designs.- **互動狀態紀錄 (Interaction Recording)**：能捕捉 Hover, Focus, Active 等交互狀態，而不僅僅是靜態快照。
**Interaction Recording**: Captures Hover, Focus, and Active states, rather than just static snapshots.📦 快速上手 / Quick Start
**快速開始 / Quick Start:**
無需安裝，直接使用 npx 即可提取任何網站（例如 Stripe）：
No installation needed, use npx to extract any site (e.g., Stripe):```bashnpx designlang https://stripe.com```
若要獲取所有 8 種輸出文件及完整分析：
To get all 8 output files and full analysis:```bashnpx designlang https://stripe.com --full```
準備好試試 告別手動拆解！design-extract：一鍵將任何網站轉化為完整設計系統 Stop Manual Audits! design-extract: Transform Any Website into a Complete Design System with One Command 了嗎？
Ready to try 告別手動拆解！design-extract：一鍵將任何網站轉化為完整設計系統 Stop Manual Audits! design-extract: Transform Any Website into a Complete Design System with One Command?
前往 GitHub 頁面 →
留言
張貼留言