# designlang — Extract Live Design Systems

> designlang reads a live URL and emits 17+ outputs (DTCG tokens, Tailwind/shadcn themes, prompts) plus an MCP server for Cursor/Claude Code.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

1. Run once (no install needed):
   ```bash
   npx designlang https://stripe.com
   npx designlang pack stripe.com
   npx designlang grade https://stripe.com --badge
   ```
2. Optional: start the MCP server:
   ```bash
   npx designlang mcp
   ```

## Intro

designlang reads a live URL and emits 17+ outputs (DTCG tokens, Tailwind/shadcn themes, prompts) plus an MCP server for Cursor/Claude Code.

- **Best for:** frontend teams who need tokens/themes/UX patterns captured from a real deployed site
- **Works with:** Node.js; headless browser; outputs for Tailwind, shadcn/ui, and prompt packs; MCP clients
- **Setup time:** 5–20 minutes

## Practical Notes

- Quant: one run writes **17+ files** into `./design-extract-output/` (tokens, themes, prompts, reports).
- Quant: it reports **responsive behavior across 4 breakpoints** and includes WCAG contrast scoring.

## Main

A reliable “agent-ready” pattern is:

1. **Extract** from the deployed URL, not design mockups, so tokens match reality.
2. **Feed the design language** (`*-design-language.md`) into your UI builder (v0/Lovable/Cursor/Claude Artifacts) as a hard constraint.
3. **Use the grade report** as a QA gate: rerun `designlang grade` after design changes.
4. **Run the MCP server** when you want an agent to query tokens/components on demand instead of pasting giant JSON blobs.

**Watchouts**
- Treat scraping as production traffic; throttle and respect site terms.
- Always review generated tokens/themes before committing them to a design system repo.

### FAQ

**Q: Do I need to install anything?**
A: No—`npx designlang <url>` works; `npm i -g designlang` is optional.

**Q: What do I commit?**
A: Commit the design tokens/theme outputs you want to standardize; keep reports as CI artifacts if preferred.

**Q: How do I use it with agents?**
A: Start the MCP server (`npx designlang mcp`) or paste the design-language markdown as context.

## Source & Thanks

> Source: https://github.com/Manavarya09/design-extract
> License: MIT
> GitHub stars: 2,497 · forks: 228

---

<!-- ZH -->

## 快速使用

1. 直接运行（无需安装）：
   ```bash
   npx designlang https://stripe.com
   npx designlang pack stripe.com
   npx designlang grade https://stripe.com --badge
   ```
2. 可选：启动 MCP server：
   ```bash
   npx designlang mcp
   ```

## 简介

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 作为上下文。

## 来源与感谢

> Source: https://github.com/Manavarya09/design-extract
> License: MIT
> GitHub stars: 2,497 · forks: 228


---
Source: https://tokrepo.com/en/workflows/designlang-extract-live-design-systems
Author: Script Depot