designlang：给 AI 编程工具用的「设计翻译器」

你是否有过这样的经历：找到一个配色超好看的网站，想在自己的项目里复用它的设计风格，却只能一行行从浏览器 DevTools 里复制颜色值、字号、间距？或者想让 AI 编程助手帮你写 UI，但 AI 完全不知道你想要的视觉风格是什么——背景色多深、圆角多大、主色调是什么？

designlang 就是来解决这个问题的：它像一台「设计翻译器」，把任意网站的设计系统直接翻译成开发者可以直接用的代码文件。一个命令，17+ 种格式任选输出。

图1：designlang 运行效果，支持 DTCG Token、Tailwind 配置、Figma 变量、品牌手册 PDF 等多格式输出

项目起源：一个 AI 编程时代的痛点催生的工具

designlang 由独立开发者 Manavarya Singh（GitHub @Manavarya09）创建，2026 年 4 月正式开源，至今已获得 3038 Stars，社区反馈热烈。

这个项目的诞生背景很清晰——随着 Claude Code、Cursor、Windsurf 等 AI 编程工具的普及，一个新问题浮现出来：AI 很会写代码，但不知道你想要什么风格。想让 AI 生成「Stripe 那种感觉」的页面，用户只能自己先把设计系统提取出来，再喂给 AI 作为参考。

传统的做法是手动复制 CSS 值，或者使用 Figma 等设计工具导出 token。但这些方式要么效率极低，要么需要设计稿。designlang 的思路另辟蹊径：直接用 Playwright 无头浏览器访问目标网站，在真实运行的 DOM 上读取设计属性，从而提取出完整的设计系统。

核心功能：不仅仅是颜色和字体

designlang 远不止提取几个 CSS 变量那么简单。它输出的内容涵盖设计系统的几乎所有维度：

设计 Token 层：

• DTCG（W3C Design Token Community Group）格式的完整 token 文件
• 语义化 token（semantic tokens）：将基础值映射为有含义的名称如 color.text.primary
• 原始 token（primitive tokens）：最底层的具体数值如 #FF4800
• 复合 token（composite tokens）：包含多个属性的复合值

框架适配层：设计语言被翻译成目标框架的直接可用代码，包括 Tailwind CSS v4 配置、shadcn/ui 主题文件、iOS SwiftUI 颜色定义、Android Jetpack Compose 主题、Futter 主题，以及 WordPress 主题文件，覆盖了主流移动端和 Web 框架。

高级能力：

• 响应式行为提取：不只是静态样式，还记录 4 个断点下的布局差异
• 状态交互分析：提取 hover、focus、active 等交互状态的设计值
• WCAG 无障碍审计：自动计算对比度评分，识别不符合 WCAG 标准的地方
• 多页面一致性检查：检查网站不同页面之间设计的一致性
• Drift 监控：与线上真实网站持续对比，发现设计系统与实际页面的漂移
• 视觉diff：当源站设计变化时，用截图对比直观展示差异

MCP Server：AI 编程工具的「设计感知插件」

designlang 最有战略价值的功能是它的 MCP Server（Model Context Protocol Server）。MCP 是 Anthropic 推出的 AI 工具上下文协议，让 AI 模型可以调用外部工具获取更丰富的上下文。

designlang 的 MCP Server 让 Claude Code、Cursor、Windsurf 等 AI 编程工具直接「看见」设计系统。AI 在帮你写代码时，可以调用 designlang 查询某个网站的设计 token，然后把这些设计价值融入到生成的代码里。

举个例子：你想让 AI 生成一个类似 Stripe 风格的结账页面，只需要让 AI 调用 designlang 提取 Stripe 的设计系统，AI 就能知道 Stripe 的主色调是 #635BFF、圆角是 6px、字体是 Instrument Sans，从而生成真正风格一致的页面。

生态扩展：从 CLI 到全平台覆盖

除了核心的 CLI 工具，designlang 还有一个完整的开发生态：

Chrome 扩展：在浏览器地址栏一键提取当前页面设计系统，无需命令行。

Raycast 扩展 和 VSCode 扩展：在开发者常用工具中直接调用设计提取功能。

GitHub Action：集成到 CI/CD 流程中，自动化监控设计漂移（Design Drift Detection）。

Figma 插件：双向同步 Figma 变量与设计系统。

smithery.dockerfile：提供容器化部署方案，可在 Docker 环境中运行。

品牌手册 PDF 生成：输出完整的品牌指南文档，包含 13 个章节，涵盖色彩、字体、排版、图标规范等。

技术架构：Playwright 驱动的设计 DOM 解析器

designlang 的技术栈非常精炼：

层级	技术选型
运行环境	Node.js >= 20
浏览器引擎	Playwright（Chromium）
MCP 协议	@modelcontextprotocol/sdk
CLI 框架	Commander.js
终端输出	Chalk（彩色日志）+ Ora（加载动画）

代码结构采用模块化插件架构：

• src/extractors/：负责从 DOM 中提取各类设计属性（颜色、字体、间距等）
• src/formatters/：将提取的数据翻译成不同框架的目标格式
• src/classifiers/：对设计属性进行语义分类
• src/vocabularies/：定义不同「视觉词汇」（cyberpunk、minimal 等）的转换规则
• src/mcp/：MCP Server 实现

项目使用 ES Module（"type": "module"），主入口 bin/design-extract.js，提供 designlang npm 包，可全局安装或通过 npx 直接运行。

上手门槛：命令行老手福音

designlang 是一个纯 CLI 工具，对命令行有一定要求，但门槛并不高：

# 安装前置：Node.js >= 20
npx designlang https://stripe.com

一行命令即可提取 Stripe 的完整设计系统。更多高级用法：

designlang pair stripe.com linear.app    # 融合两个网站的设计（视觉A × 文案B）
designlang brand stripe.com              # 生成完整品牌手册（13章节）
designlang theme-swap stripe.com --primary "#ff4800"  # 重新配色
designlang remix stripe.com --as cyberpunk  # 用赛博朋克风格重绘
designlang clone https://stripe.com      # 克隆为可运行的 Next.js 项目
designlang grade https://stripe.com --badge  # 输出设计健康度报告卡

零配置，无需 API Key，纯本地运行。

局限与争议

designlang 并非完美，使用时需要注意以下问题：

1. 依赖 Playwright + Chromium：首次运行需要下载 Chromium（约 150MB），在国内网络环境下可能需要配置镜像。

2. 动态渲染内容的局限性：对于完全依赖 JavaScript 动态渲染的 SPA（单页应用），可能需要额外参数（--full）来等待内容完全加载。

3. 版权与伦理风险：提取其他公司的设计系统涉及版权问题，项目 README 特别提供了 SECURITY.md 和使用指南，提示用户遵守目标网站的 robots.txt 和服务条款。

4. token 语义化的准确性：自动语义分类（将 #FF4800 标记为 color.brand.primary）依赖启发式规则，对复杂设计系统的语义理解仍有局限。

行业意义：AI 时代设计系统的新范式

designlang 的出现代表了一个趋势：设计系统正在从「设计师手工作业」向「机器可读的自动化管道」演进。

随着 AI 编程工具越来越强，设计与代码之间的 gap 越来越成为效率瓶颈。designlang 通过将任意网站的设计系统自动化提取出来，为 AI 提供了「视觉上下文」，让 AI 生成代码时不再盲目。

从增长数据看，项目 2026 年 4 月创建，到 5 月已有 3038 Stars、272 Forks，且持续活跃更新（最近推送 2026-05-28），是一个正处于高速成长期的项目。

代表趋势：AI 代码生成 → 需要设计上下文 → designlang 填补空白 → 设计系统民主化。

如果你正在使用或考虑接入 AI 编程工具，designlang 值得作为必备的设计上下文工具纳入工作流。