designlang

活跃
GitHub JavaScript MIT

简介

一条命令从任意网站提取完整设计系统，输出 DTCG tokens、Tailwind、Figma 变量与多平台组件代码，并可作为 MCP 服务。

核心特性

  • 一键提取设计系统 — 指向任意 URL 即可读取实时 DOM 中的完整设计体系
  • 多格式输出 — 生成 DTCG tokens、Tailwind 配置、shadcn 主题、Figma 变量等 17+ 文件
  • 响应式与状态分析 — 跨 4 个断点解析布局与 hover/focus/active 状态
  • WCAG 合规评分 — 自动检测对比度与无障碍问题
  • MCP 服务 — 作为 MCP 接入 Claude Code、Cursor、Windsurf 等编码 Agent
  • 多平台发射 — 输出 iOS SwiftUI、Android Compose、Flutter、WordPress 等平台代码

适用场景

💡 快速复刻参考网站的设计语言用于自家产品
💡 为设计到代码的 Agent 工作流提供结构化设计 tokens
💡 审计现有网站的无障碍与设计一致性
💡 生成可直接粘贴给 v0、Lovable、Cursor 的提示包

标签

design-system mcp design-to-code tailwind figma

分类

🔌 MCP 工具

快速开始

# 无需安装，直接提取网站设计系统
npx designlang https://stripe.com
# 启动可视化 token 编辑器
npx designlang studio
访问 GitHub 访问官网

相关项目