KunalKumarkkr01/design-system-extractor

# design-system-extractor [](https://www.npmjs.com/package/design-system-extractor) [](./LICENSE) 它的工作原理是通过 Chrome DevTools MCP 驱动**真实浏览器**，并从**运行中的页面直接读取真实数据**——包括计算样式、CSS 自定义属性、字体、响应式行为——而不是通过猜测截图来推断样式。输出的规范可以让另一个 agent 在完全没有见过原网站的情况下直接据其进行构建。 这是一个 **agent 技能**。将你的 agent 指向一个 URL 并要求它提取设计系统；它会自动探索网站并为你编写参考文档。 ## ⚠️ 前置条件：Chrome DevTools for agents 此技能**必须依赖 [Chrome DevTools for agents](https://developer.chrome.com/docs/devtools/agents) 才能运行**——这是官方提供的 Chrome 工具，**同时内置了 MCP 服务器和 agent 技能**（`chrome-devtools-mcp`，由 Chrome DevTools 团队开发）。正是它让 agent 能够在真实的 Chrome 实例中导航页面、读取计算样式并进行截图。 你需要 **Node.js LTS** 和 **Chrome（当前稳定版或更新版本）**。可以通过以下任一方式进行配置： - **官方 Chrome DevTools 插件（推荐）** — 包含 MCP 及 Chrome 官方使用技能： /plugin marketplace add ChromeDevTools/chrome-devtools-mcp /plugin install chrome-devtools-mcp@chrome-devtools-plugins - **本包的 Claude Code 插件**（见下文）内置了 `chrome-devtools` MCP 服务器入口，因此安装它也会同时配置好驱动程序。你可以使用此插件或官方插件中的任意一个来提供 MCP——但不要同时使用两者——以避免出现重复的服务器。 - **手动配置 MCP**（适用于任何 agent）： { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"] } } } **没有安装 Chrome？** `chrome-devtools-mcp` 会使用你系统中的 Chrome，并且不会自动为你下载。请正常安装 Chrome，或者获取一个 Chrome for Testing 版本并将服务器指向它： ``` npx puppeteer browsers install chrome # then pass --executablePath or --channel stable ``` 如果未检测到 MCP 工具，该技能会提示你并停止运行，而不是进行盲目猜测。 ## 安装 选择适合你环境的安装方式。这三种方式安装的都是同一个技能。 ### 1. 通过 skills.sh 生态系统（`npx skills`） 直接从此 GitHub 仓库安装——这是一个直接使用该仓库本身的示例： ``` npx skills add https://github.com/KunalKumarkkr01/design-system-extractor --skill design-system-extractor ``` ### 2. 通过 npm（独立的 `npx` 安装程序） ``` # 到当前项目中 (./.claude/skills) npx design-system-extractor # 或全局范围 (~/.claude/skills) npx design-system-extractor --global # 或自定义 skills 目录 npx design-system-extractor --dir path/to/skills ``` ### 3. 作为 Claude Code 插件（内置 Chrome DevTools MCP） ``` /plugin marketplace add KunalKumarkkr01/design-system-extractor /plugin install design-system-extractor@design-system-extractor ``` 然后重启 Claude Code，以便启动内置的 `chrome-devtools` MCP 服务器。 ## 用法 安装完成后（并且 Chrome DevTools MCP 正在运行），只需输入以下指令： ``` Extract the design system of https://stripe.com into a design reference. ``` ``` I want my app to look like linear.app — document their design tokens and components. ``` 该技能将自动探索网站，截取桌面端和移动端的屏幕截图，读取真实的 token，并生成一份 `design.md` 文件，你可以将其直接交给任何开发者。 ## 你将获得什么 一个独立的文件夹，你可以将其放入另一个项目中或提供给另一个 agent： ``` -design-reference/ ├── design.md # the reference spec └── screenshots/ ├── 01-hero.png ├── 02-nav.png └── ... ``` `design.md` 包含： - **美学方向** + 明确的“禁止事项”护栏（防止开发者偏离设计，退化回通用的默认样式） - **颜色 token** — 包含已解析的主题色板以及任何 `--token` 色阶，均以十六进制 (hex) 格式呈现 - **排版** — 字体族、完整的比例，以及每种字体对应的角色 - **布局与间距** — 容器宽度、网格、圆角、边框、排列节奏 - **组件** — 每个组件独立成节，并附带截图 - **交互与动画** — hover/focus/active 状态，以及过渡效果 - **响应式行为** — 每个断点处的具体变化 - **实现说明** — 检测到的技术栈、字体、图标 - 一个 **可直接引入的 token 代码块**（CSS `:root` 变量），只需一次粘贴即可开始实现 ## 示例：一次真实的提取过程 查看 [`examples/pico-css/`](./examples/pico-css/)，这是一个针对 [Pico CSS](https://picocss.com)（MIT 开源许可）的完整提取案例——这也正是你会得到的输出结果： - **[`examples/pico-css/design.md`](./examples/pico-css/design.md)** — 完整的参考文档： 包含深色**和**浅色模式的 `--pico-*` token 表格（解析为十六进制）、排版比例（Figtree / system-ui / Fira Code）、组件说明、响应式注意事项，以及可直接引入的 CSS 代码块。 - **[`examples/pico-css/screenshots/`](./examples/pico-css/screenshots)** — 捕获的页面帧。 | Hero — light | Hero — dark | |---|---| |  |  | 由通过该技能执行 *“提取 picocss.com 的设计系统”* 指令生成。 ## 工作原理 1. 导航至目标 URL 并设置标准的桌面端视口。 2. 对无障碍树进行快照，以梳理页面结构并发现子页面。 3. 通过 `evaluate_script` 读取设计 token —— 包含 `:root` 自定义属性和已解析的计算样式 —— 并将现代的 `lab()` / `oklch()` 颜色转换为通用的十六进制格式。 4. 逐个组件截取屏幕截图，并捕获移动端断点的截图。 5. 探索各种状态（hover/focus）及关键的次要页面，并记录其中有意的特例。 6. 严格按照模板生成 `design.md`，该模板专为那些从未见过原网站的开发者量身打造。 提取脚本和 `design.md` 模板位于 [`skills/design-system-extractor/references/`](./skills/design-system-extractor/references) 目录下。 ## 仓库结构 ``` design-system-extractor/ ├── .claude-plugin/ │ ├── plugin.json # Claude Code plugin manifest (bundles chrome-devtools MCP) │ └── marketplace.json # so `/plugin marketplace add` works on this repo ├── skills/ │ └── design-system-extractor/ │ ├── SKILL.md # the skill │ └── references/ # extraction snippets + design.md template ├── bin/cli.js # the `npx design-system-extractor` installer ├── package.json ├── LICENSE # MIT └── README.md ``` ## 许可证 [MIT](./LICENSE) © 2026 Kunal Kumar ## 鸣谢 由 Kunal Kumar 使用 [Claude Code](https://claude.com/claude-code) (Anthropic) 构建。 依赖于 Chrome DevTools 团队开发的 [Chrome DevTools for agents](https://developer.chrome.com/docs/devtools/agents) ([`chrome-devtools-mcp`](https://github.com/ChromeDevTools/chrome-devtools-mcp))。

标签：Chrome DevTools, Claude, CVE检测, MITM代理, 云资产清单, 暗色界面, 自定义脚本, 设计系统, 逆向工程