一条命令提取网站完整设计系统，支持 Tailwind v4 与多平台输出
用一条命令提取任意网站的完整设计系统。支持 DTCG tokens、语义+基础+复合，提供面向 Claude Code/Cursor/Windsurf 的 MCP server，多平台输出器（iOS SwiftUI、Android Compose、Flutter、WordPress），Tailwind v4，Figma variables，shadcn/ui，CSS 健康审计，WCAG 修复，Chrome 扩展。MIT，Playwright，Node 20+。
MCP 服务会以你的权限运行代码或访问你的数据。安装前请先看项目主页与源码，只给必要的权限；密钥请自行填入，不要提交到仓库。
claude mcp add design-extract -- npx -y designlang@13.3.2
{
"mcpServers": {
"design-extract": {
"command": "npx",
"args": [
"-y",
"designlang@13.3.2"
]
}
}
}安装方式由项目的发布配置推断，并已核对该包确属此仓库；需要的环境变量 / 密钥请看下方「怎么使用」
摘自项目自己的说明，具体以项目主页为准。
npx designlang https://stripe.com # extract everything
npx designlang dna stripe.com # place it in the measured design space: neighbours + percentiles ← v13.1
npx designlang site stripe.com # whole-site: one canonical system + consistency grade ← v12.23
npx designlang fidelity stripe.com --clone localhost:3000 # score a clone vs the original (visual + motion) ← v12.24
npx designlang gallery # static shareable gallery of measured clones ← v12.24
npx designlang studio # live token editor: edit, preview, export, share ← v12.19
npx designlang verify stripe.com # fidelity score: rebuild from tokens vs live ← v12.18
npx designlang pair stripe.com linear.app # fuse two designs (visuals A × voice B) ← v12.8
npx designlang brand stripe.com # full brand-guidelines book (13 chapters) ← v12.7
npx designlang theme-swap stripe.com --primary "#ff4800" # recolour around your brand ← v12.6
npx designlang pack stripe.com # one polished design-system directory ← v12.4
npx designlang remix stripe.com --as cyberpunk # restyle in another vocabulary ← v12.3
npx designlang remix stripe.com --all # emit all 6 vocabs at once ← v12.3
npx designlang grade https://stripe.com --badge # report card + SVG badge ← v12.2
npx designlang battle stripe.com vercel.com # head-to-head graded fight ← v12.2
npx designlang clone https://stripe.com # working Next.js starter
npx designlang --full https://stripe.com # screenshots + responsive + interactions
Drop a live design-score badge in any README: