CLI design-extract 一条命令提取网站的完整设计系统

做新项目或重写老页面时，最费时的是把参考站的配色、间距、字体、组件结构手动抄一遍。截图量角器既慢又不准，设计稿和代码之间还总对不上。

项目基本信息

信息项	详情
项目名称	design-extract
GitHub地址	https://github.com/Manavarya09/design-extract
项目描述	Extract any website's complete design system with one command. DTCG tokens, semantic+primitive+composite, MCP server for Claude Code/Cursor/Windsurf, multi-platform emitters (iOS SwiftUI, Android Compose, Flutter, WordPress), Tailwind v4, Figma variables, shadcn/ui, CSS health audit, WCAG remediation, Chrome extension. MIT, Playwright, Node 20+.
作者	Manavarya09
开源协议	MIT License
开源状态	公开状态
Languages	HTML
支持平台	Windows / macOS / Linux
最后更新	2026-11-05

一、项目介绍

design-extract 是一个一条命令提取网站的完整设计系统。它聚焦网站开发链路中的具体环节，用更少的配置换来更一致的产出。

它的核心能力覆盖以下方面：

Layout system — grids, flex containers, container widths, gaps — not just tokens.
Responsive — crawls 4 breakpoints and reports what changes (--responsive).
Brand voice — tone, pronoun posture, heading style, CTA verb inventory.
Live-site sync — treat the deployed site as source of truth (designlang sync).

从形态上看，它把命令行相关的能力做了标准化封装，既可以作为独立工具使用，也能通过相应接口嵌入到既有的开发与协作流程中。项目目前仍在活跃迭代，最近更新于 2026-11-05。

二、核心优势

Layout system — grids, flex containers, container widths, gaps — not just tokens.
Responsive — crawls 4 breakpoints and reports what changes (--responsive).
Brand voice — tone, pronoun posture, heading style, CTA verb inventory.
Live-site sync — treat the deployed site as source of truth (designlang sync).
原生提供 MCP 接入，能把能力直接挂到 Claude、Cursor、Continue 等 AI 编程客户端，融入现有工作流。

三、适用场景

从零搭建项目或重写旧页面时，快速对齐成熟设计系统与组件规范。
为组件库/站点生成配套文档，降低新成员的上手成本。
在构建与 CI 流程中自动化质量检查，减少人工遗漏。

四、安装教程

下面给出在常见系统上的安装方式。请先确认已具备对应的运行环境（如 Node.js、Python、Go、.NET 或 JDK 等），版本要求以仓库 README 为准。

npx designlang dna raycast.com
# 或作为 Claude Code / Cursor / Windsurf 的 MCP server / Chrome 扩展使用

常见报错与处理：

网络超时/下载慢：可换用国内镜像或代理，或改用仓库提供的免安装方式（如 npx / uvx 直接运行）。
权限不足：在命令前加 sudo（Linux/macOS）或以管理员身份运行终端（Windows）。
依赖缺失：按报错信息补齐编译器或运行时（如 JDK、.NET SDK、CMake），再重新执行安装。

五、使用示例

以下为真实可运行的用法示例：

designlang clone https://stripe.com        # 生成可运行的 Next.js 应用
designlang apply https://stripe.com -d ./app   # 自动识别框架并写入设计 token
designlang grade https://stripe.com        # 输出可分享的设计体检报告

预期结果：命令执行后，会按上述参数拉起服务或输出结构化结果（如组件信息、报告、trace 等），具体字段以工具实际返回为准。把示例中的路径、URL、项目名替换成你自己的值即可复用到真实项目。

六、常见问题

需要付费吗？

本项目开源发布，可免费自托管使用；部分提供托管版或企业版，按需选择，核心能力不收费。

对运行环境有什么要求？

基于 HTML 实现，Windows、macOS、Linux 均可运行；依赖与版本以仓库 README 的安装说明为准。

支持 MCP 吗？

提供 MCP server / 工具集，可在 Claude、Cursor、Continue 等客户端里直接调用，把能力嵌入 AI 编程流程。

新手如何快速验证？

按本文「安装教程」装好依赖后，直接跑「使用示例」里的命令，几分钟内即可看到实际效果。

七、总结

design-extract 以「一条命令提取网站的完整设计系统」为定位，把原本分散、重复的命令行工作标准化、可复用化。它开源、易于自托管，能平滑接入现有开发与 AI 编程流程，无论是个人提效还是团队沉淀都值得一试。建议先从本文的安装与使用示例入手，跑通最小闭环后再逐步引入到日常工作中。