designlang — Extract Live Design Systems

简介

designlang 用无头浏览器读取线上网站的 DOM，一条命令输出 17+ 设计产物（DTCG tokens、Tailwind/shadcn 主题、提示词包等），并提供 MCP server 供 Cursor/Claude Code 使用。

• 适合谁： 需要从真实线上站点提取 tokens/主题/交互模式的前端团队
• 可搭配： Node.js；无头浏览器；输出适配 Tailwind、shadcn/ui 与提示词包；支持 MCP 客户端
• 准备时间： 5–20 分钟

实战建议

• 量化信息：一次运行会在 ./design-extract-output/ 写入 17+ 文件（tokens、主题、提示词、报告等）。
• 量化信息：支持 4 个断点的响应式行为分析，并包含 WCAG 对比度评分。

主要内容

一个更“Agent 可消费”的用法：

1. 从线上 URL 提取，而不是只看设计稿，让 tokens 与真实 DOM 一致。
2. 把设计语言文档（*-design-language.md）当硬约束喂给 UI builder（v0/Lovable/Cursor/Claude Artifacts）。
3. 把 grade 报告当门槛：设计变更后重跑 designlang grade 做回归检查。
4. 需要按需查询时开 MCP，让 agent 查 tokens/组件，而不是复制超大 JSON。

注意事项

• 把抓取当成线上流量处理，控制频率并遵守站点条款。
• 生成的 tokens/主题写入设计系统仓库前，务必人工复核。

FAQ

需要安装吗？ 答：不需要；npx designlang <url> 即可运行，npm i -g designlang 只是可选。

哪些内容适合入库？ 答：把需要标准化的 tokens/主题文件入库；报告类可作为 CI 产物保存。

如何与 agent 配合？ 答：启动 MCP（npx designlang mcp）或直接把设计语言 markdown 作为上下文。