项目发布后迅速获得超过4159颗星，社区关注度高。
Extracts DTCG tokens, semantic+primitive+composite
前端开发者
Frontend developers
目标用户 · 非用户评价Target user · not a testimonial
SKILLS & AGENTS/Skill 与 Agent·MCP-SERVER
Manavarya09/design-extract
4159 星，一条命令抽出任何网站的设计系统4,159 stars, and one `npx designlang` command pulls a complete design system from any site.
一条命令提取任意网站的设计系统，生成可复用的样式代码。Extract any website's complete design system with one npx command — tokens, code, and accessibility fixes.
怎么装：Install: npx designlang https://stripe.com # extract everything
02 / 现在的位置02 / Why now
首次发现FIRST SEEN
03 OCT 202603 OCT 2026
增长GROWTH
历史不足Not enough history
只有 1 个快照，还不足以计算增长Only 1 snapshots so far — not enough to compute growth
讨论DISCUSSION
暂无None
还没有采集到外部讨论No external discussion collected yet
状态STATUS
持续活跃Active
质量 AQuality A
项目发布后迅速获得超过4159颗星，社区关注度高。Extracts DTCG tokens, semantic+primitive+composite
03 / 它能帮你做什么03 / What it helps you do
一键提取任意网站的设计系统
生成可复用的设计令牌
克隆网站为可运行的Next.js项目
对比两个网站的设计一致性
在线编辑并导出设计令牌
Extract design tokens from any public website.
Generate platform-specific UI code for mobile and web.
Audit CSS health and fix accessibility issues.
Compare two sites' design systems side by side.
Edit and export tokens with a live editor.
04 / 谁在用04 / WHO IT’S FOR
项目发布后迅速获得超过4159颗星，社区关注度高。
Extracts DTCG tokens, semantic+primitive+composite
前端开发者
Frontend developers
目标用户 · 非用户评价Target user · not a testimonial
近7天仍有提交，维护活跃。
Generates code for SwiftUI, Compose, Flutter, WordPress
设计师
Design system engineers
目标用户 · 非用户评价Target user · not a testimonial
从版本号看（v12到v13），功能迭代频繁。
Includes CSS health audit and WCAG remediation
技术创业者
UI designers
目标用户 · 非用户评价Target user · not a testimonial
项目发布后迅速获得超过4159颗星，社区关注度高。
Extracts DTCG tokens, semantic+primitive+composite
独立开发者
Accessibility auditors
目标用户 · 非用户评价Target user · not a testimonial
不适合谁Not for同样来自文档，不是我们的判断Also from the docs, not our judgement
05 / 安装05 / Install
$ README 里给出的安装方式。The installation method given in the README.
$ README 里给出的安装方式。The installation method given in the README.
两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.
使用 `npm i -g designlang` 全局安装，然后运行 `designlang install-browser` 安装浏览器驱动。Run `npx designlang https://example.com` to extract a design system, or install globally with `npm i -g designlang`.
06 / 限制与风险06 / Limits and risk
风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.
限制LIMITS
需检查Needs review
静态扫描STATIC SCAN
01控制浏览器Controls a browserreadme
It's driven by the *actual* extraction (the browser's CDP screencast streamed
02执行 Shell 命令Runs shell commandsskills/extract-design/SKILL.md
allowed-tools: Bash
03读写本地文件Reads and writes local filesskills/extract-design/SKILL.md
allowed-tools: Write
静态扫描发现中等风险：控制浏览器、执行 Shell 命令、读写本地文件。The tool controls a browser, executes shell commands, and reads/writes local files to perform extraction. These permissions are necessary for its functionality but should be reviewed before use.
这里只做静态扫描：读 README、SKILL.md 和依赖清单，不执行代码。没有命中不代表安全。This is static scanning only: we read the README, SKILL.md and dependency list, and never execute code. No findings does not mean safe.
依赖：Dependencies:@modelcontextprotocol/sdk, chalk, commander, ora, pdf-lib, pixelmatch, playwright, pngjs
{
"agents": [
{
"agent": "claude-code",
"evidence": "tree: .claude/"
},
{
"agent": "windsurf",
"evidence": "readme: …ools for Cursor, Claude Code, Windsurf, etc. See [`docs/MCP-REGISTRY…"
},
{
"agent": "vscode",
"evidence": "readme: …l>` | Main entry point. | | **VS Code extension** | [`vscode-extens…"
}
],
"apiKey": "osted models. ```bash export ATLASCLOUD_API_KEY=\"<atlascloud-api-key>\" export ATLASCLOU",
"docker": null,
"taxonomy": {
"scores": {
"design": 15,
"ai-tools": 4,
"dev-tools": 3,
"indie-web": 1,
"skill-agent": 7,
"productivity": 0
},
"primary": "skill-agent",
"secondary": "mcp-server"
},
"localRuntime": null,
"skillMdTotal": 25,
"skillMdErrors": [],
"treeTruncated": false,
"categoryScores": {
"data": 3,
"agent": 0,
"media": 0,
"design": 36,
"browser": 9,
"devtool": 0,
"security": 0,
"marketing": 0,
"productivity": 1
},
"classification": [
{
"signal": "25 SKILL.md with name + description",
"weight": 0.95
},
{
"signal": "smithery.yaml",
"weight": 0.85
},
{
"signal": "package.json depends on @modelcontextprotocol/sdk + MCP framing",
"weight": 0.8
},
{
"signal": "skills/ directory with 1 markdown files",
"weight": 0.75
},
{
"signal": "README describes a Claude / Agent Skill",
"weight": 0.7
},
{
"signal": "Claude Code plugin manifest",
"weight": 0.7
},
{
"signal": "MCP topic + README",
"weight": 0.6
},
{
"signal": "description mentions AI",
"weight": 0.2
}
],
"scannedSources": [
"readme",
"skills/extract-design/SKILL.md",
"website/public/gallery/cal-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/clerk-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/coinbase-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/discord-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/duolingo-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/framer-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/loom-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/mintlify-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/netflix-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/perplexity-ai/.claude/skills/designlang/SKILL.md",
"website/public/gallery/planetscale-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/posthog-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/postman-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/railway-app/.claude/skills/designlang/SKILL.md",
"website/public/gallery/ramp-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/raycast-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/render-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/replit-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/resend-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/retool-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/sentry-io/.claude/skills/designlang/SKILL.md",
"website/public/gallery/supabase-com/.claude/skills/designlang/SKILL.md",
"website/public/gallery/v0-dev/.claude/skills/designlang/SKILL.md",
"website/public/gallery/webflow-com/.claude/skills/designlang/SKILL.md"
],
"skillMdFetched": 25
}