designlang-design-extract

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

DESIGNLANG — Design System Extraction

DESIGNLANG — 设计系统提取工具

Skill by ara.so — Daily 2026 Skills collection.

designlang crawls any website with a headless browser (Playwright), extracts every computed style from the live DOM, and generates 8 output files: AI-optimized markdown, visual HTML preview, Tailwind config, React theme, shadcn/ui theme, Figma variables, W3C design tokens, and CSS custom properties.

由ara.so开发的Skill——属于Daily 2026 Skills合集。

designlang 使用无头浏览器（Playwright）爬取任意网站，从实时DOM中提取所有计算样式，并生成8种输出文件：AI优化的Markdown文档、可视化HTML预览、Tailwind配置、React主题、shadcn/ui主题、Figma变量、W3C设计令牌以及CSS自定义属性。

Installation

安装

bash

undefined

bash

undefined

No install needed — run directly

无需安装——直接运行

npx designlang https://stripe.com

Install globally

全局安装

npm install -g designlang

Install as an agent skill

作为Agent Skill安装

npx skills add Manavarya09/design-extract

undefined

npx skills add Manavarya09/design-extract

undefined

Core Commands

核心命令

Basic Extraction

基础提取

bash

undefined

bash

undefined

Extract everything from a site

提取网站的全部设计内容

npx designlang https://stripe.com

Extract everything with all captures enabled

启用所有捕获选项，提取全部内容

npx designlang https://stripe.com --full

Custom output directory and file prefix

自定义输出目录和文件前缀

npx designlang https://stripe.com --out ./tokens --name stripe

Wait for SPA to load before extracting

等待SPA加载完成后再提取

npx designlang https://app.example.com --wait 2000

Crawl multiple internal pages for site-wide tokens

爬取多个内部页面，提取全站设计令牌

npx designlang https://stripe.com --depth 3

undefined

npx designlang https://stripe.com --depth 3

undefined

Specialized Extraction

专项提取

bash

undefined

bash

undefined

Extract dark mode styles

提取深色模式样式

npx designlang https://vercel.com --dark

Capture at 4 responsive breakpoints

在4个响应式断点下捕获样式

npx designlang https://stripe.com --responsive

Capture hover/focus/active interaction states

捕获悬停/聚焦/激活等交互状态

npx designlang https://stripe.com --interactions

Take component screenshots (buttons, cards, nav, hero)

截取组件截图（按钮、卡片、导航、首页横幅等）

npx designlang https://stripe.com --screenshots

Everything at once

一次性启用所有捕获选项

npx designlang https://stripe.com --full

undefined

npx designlang https://stripe.com --full

undefined

Authentication

身份验证

bash

undefined

bash

undefined

With cookies for protected pages

使用Cookie访问受保护页面

npx designlang https://internal-app.com --cookie "session=abc123" --cookie "user_id=42"

With custom headers

使用自定义请求头

npx designlang https://internal-app.com --header "Authorization:Bearer $TOKEN"

Combined

组合使用

npx designlang https://app.example.com
--cookie "session=$SESSION_COOKIE"
--header "X-API-Key:$API_KEY"

undefined

npx designlang https://app.example.com
--cookie "session=$SESSION_COOKIE"
--header "X-API-Key:$API_KEY"

undefined

Utility Commands

实用命令

bash

undefined

bash

undefined

Score a site's design quality (A-F rating, 7 categories)

为网站的设计质量打分（A-F评级，涵盖7个类别）

npx designlang score https://vercel.com

Compare two sites side-by-side

对比两个网站的设计系统

npx designlang diff https://stripe.com https://paddle.com

Compare N brands in a matrix

以矩阵形式对比多个品牌的设计

npx designlang brands stripe.com vercel.com github.com linear.app

Apply extracted design directly to your project (auto-detects framework)

将提取的设计直接应用到你的项目（自动检测框架）

npx designlang apply https://stripe.com --dir ./my-app

Generate a working Next.js starter with extracted design

生成一个已应用提取设计的可运行Next.js启动项目

npx designlang clone https://stripe.com

Monitor a site for design changes hourly

每小时监控网站的设计变更

npx designlang watch https://stripe.com --interval 60

Sync local tokens with live site

将本地令牌与网站实时设计同步

npx designlang sync https://stripe.com --out ./src/tokens

View design change history

查看设计变更历史

npx designlang history https://stripe.com

undefined

npx designlang history https://stripe.com

undefined

Output Files

输出文件

Running

npx designlang https://stripe.com

produces:

File	Purpose
`stripe-com-design-language.md`	AI-optimized markdown with all 19 design sections
`stripe-com-preview.html`	Visual report with swatches, type scale, a11y score
`stripe-com-design-tokens.json`	W3C Design Tokens format
`stripe-com-tailwind.config.js`	Drop-in Tailwind CSS theme
`stripe-com-variables.css`	CSS custom properties
`stripe-com-figma-variables.json`	Figma Variables import (light + dark)
`stripe-com-theme.js`	React/CSS-in-JS theme (Chakra, Stitches, etc.)
`stripe-com-shadcn-theme.css`	shadcn/ui `globals.css` variables

运行

npx designlang https://stripe.com

会生成以下文件：

文件	用途
`stripe-com-design-language.md`	经过AI优化的Markdown文档，包含全部19个设计模块
`stripe-com-preview.html`	包含色板、字体层级、无障碍评分的可视化报告
`stripe-com-design-tokens.json`	W3C设计令牌格式文件
`stripe-com-tailwind.config.js`	可直接使用的Tailwind CSS主题
`stripe-com-variables.css`	CSS自定义属性文件
`stripe-com-figma-variables.json`	可导入的Figma变量（浅色+深色模式）
`stripe-com-theme.js`	React/CSS-in-JS主题（适用于Chakra、Stitches等框架）
`stripe-com-shadcn-theme.css`	shadcn/ui的 `globals.css` 变量文件

Full CLI Reference

完整CLI参考

bash

designlang <url> [options]

Options:
  -o, --out <dir>         Output directory (default: ./design-extract-output)
  -n, --name <name>       Output file prefix (default: derived from URL)
  -w, --width <px>        Viewport width (default: 1280)
      --height <px>       Viewport height (default: 800)
      --wait <ms>         Wait after page load for SPAs (default: 0)
      --dark              Also extract dark mode styles
      --depth <n>         Internal pages to crawl (default: 0)
      --screenshots       Capture component screenshots
      --responsive        Capture at multiple breakpoints
      --interactions      Capture hover/focus/active states
      --full              Enable all captures
      --cookie <val>      Cookie for auth pages (name=value, repeatable)
      --header <val>      Custom header (name:value, repeatable)
      --framework <type>  Only generate specific theme (react, shadcn)
      --no-history        Skip saving to history
      --verbose           Detailed progress output

bash

designlang <url> [options]

选项:
  -o, --out <dir>         输出目录（默认值：./design-extract-output）
  -n, --name <name>       输出文件前缀（默认值：从URL中提取）
  -w, --width <px>        视口宽度（默认值：1280）
      --height <px>       视口高度（默认值：800）
      --wait <ms>         页面加载后等待时间（适用于SPA，默认值：0）
      --dark              同时提取深色模式样式
      --depth <n>         要爬取的内部页面数量（默认值：0）
      --screenshots       捕获组件截图
      --responsive        在多个断点下捕获样式
      --interactions      捕获交互状态
      --full              启用所有捕获选项
      --cookie <val>      用于认证页面的Cookie（格式：name=value，可重复使用）
      --header <val>      自定义请求头（格式：name:value，可重复使用）
      --framework <type>  仅生成指定框架的主题（react、shadcn）
      --no-history        不保存到历史记录
      --verbose           显示详细的进度输出

Common Patterns

常见使用场景

Pattern 1: Extract and apply to a Tailwind project

场景1：提取设计并应用到Tailwind项目

bash

undefined

bash

undefined

Extract design tokens from a reference site

从参考网站提取设计令牌

npx designlang https://linear.app --out ./design-tokens --name linear

The generated tailwind.config.js can be merged into your project:

生成的tailwind.config.js可合并到你的项目中：

./design-tokens/linear-tailwind.config.js


Generated `tailwind.config.js` looks like:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#5E6AD2',
        background: '#FFFFFF',
        surface: '#F7F8F9',
        // ... all extracted colors
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        xs: ['11px', { lineHeight: '16px' }],
        sm: ['13px', { lineHeight: '20px' }],
        base: ['15px', { lineHeight: '24px' }],
        // ... full type scale
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
        // ... extracted radii
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,0.12)',
        // ... extracted shadows
      },
    },
  },
}


生成的`tailwind.config.js`示例：

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#5E6AD2',
        background: '#FFFFFF',
        surface: '#F7F8F9',
        // ... 所有提取的颜色
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        xs: ['11px', { lineHeight: '16px' }],
        sm: ['13px', { lineHeight: '20px' }],
        base: ['15px', { lineHeight: '24px' }],
        // ... 完整的字体层级
      },
      borderRadius: {
        sm: '4px',
        md: '6px',
        lg: '8px',
        // ... 提取的圆角值
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,0.12)',
        // ... 提取的阴影样式
      },
    },
  },
}

Pattern 2: Feed the markdown to an LLM

场景2：将Markdown文档输入到大语言模型（LLM）

bash

undefined

bash

undefined

Extract the AI-optimized markdown

提取经过AI优化的Markdown文档

npx designlang https://stripe.com --out ./tokens

Then use in a prompt:

然后在提示词中使用：

cat ./tokens/stripe-com-design-language.md |
pbcopy # macOS: copies to clipboard

cat ./tokens/stripe-com-design-language.md |
pbcopy # macOS：复制到剪贴板

Or reference it directly in Claude/Cursor:

或者直接在Claude/Cursor中引用：

"Use the design language in ./tokens/stripe-com-design-language.md

"使用./tokens/stripe-com-design-language.md中的设计语言

to style this component..."

来样式化这个组件..."

undefined

undefined

Pattern 3: Compare competitors

场景3：对比竞品设计

bash

npx designlang brands stripe.com braintree.com paddle.com adyen.com

bash

npx designlang brands stripe.com braintree.com paddle.com adyen.com

Generates:

生成以下文件：

brands.md — markdown comparison matrix

brands.md — Markdown格式的对比矩阵

brands.html — visual side-by-side with color overlap analysis

brands.html — 包含颜色重叠分析的可视化对比报告

undefined

undefined

Pattern 4: Apply to a shadcn/ui project

场景4：应用到shadcn/ui项目

bash

undefined

bash

undefined

Auto-detect project structure and write to the right files

自动检测项目结构并写入对应文件

npx designlang apply https://stripe.com --dir ./my-nextjs-app

Or manually use the generated shadcn theme:

或者手动使用生成的shadcn主题：

Copy stripe-com-shadcn-theme.css content into app/globals.css

将stripe-com-shadcn-theme.css的内容复制到app/globals.css中


Generated `shadcn-theme.css`:

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 238 72% 57%;
    --primary-foreground: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
    /* ... all extracted variables */
  }
}


生成的`shadcn-theme.css`示例：

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 238 72% 57%;
    --primary-foreground: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
    /* ... 所有提取的变量 */
  }
}

Pattern 5: W3C Design Tokens for tooling

场景5：用于工具链的W3C设计令牌

bash

npx designlang https://github.com --out ./tokens

Generated

design-tokens.json

json

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "color": {
    "primary": {
      "$value": "#0969da",
      "$type": "color"
    },
    "background": {
      "default": {
        "$value": "#ffffff",
        "$type": "color"
      }
    }
  },
  "typography": {
    "fontFamily": {
      "sans": {
        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI'",
        "$type": "fontFamily"
      }
    }
  }
}

bash

npx designlang https://github.com --out ./tokens

生成的

design-tokens.json

示例：

json

{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "color": {
    "primary": {
      "$value": "#0969da",
      "$type": "color"
    },
    "background": {
      "default": {
        "$value": "#ffffff",
        "$type": "color"
      }
    }
  },
  "typography": {
    "fontFamily": {
      "sans": {
        "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI'",
        "$type": "fontFamily"
      }
    }
  }
}

Pattern 6: React theme object

场景6：React主题对象

bash

npx designlang https://chakra-ui.com --out ./tokens

Generated

theme.js

export const theme = {
  colors: {
    primary: '#319795',
    secondary: '#553C9A',
    // ...
  },
  fonts: {
    body: 'Inter, system-ui, sans-serif',
    heading: 'Inter, system-ui, sans-serif',
  },
  space: {
    1: '4px',
    2: '8px',
    4: '16px',
    8: '32px',
    // ...
  },
  radii: {
    sm: '4px',
    md: '6px',
    lg: '8px',
    full: '9999px',
  },
}

bash

npx designlang https://chakra-ui.com --out ./tokens

生成的

theme.js

示例：

export const theme = {
  colors: {
    primary: '#319795',
    secondary: '#553C9A',
    // ...
  },
  fonts: {
    body: 'Inter, system-ui, sans-serif',
    heading: 'Inter, system-ui, sans-serif',
  },
  space: {
    1: '4px',
    2: '8px',
    4: '16px',
    8: '32px',
    // ...
  },
  radii: {
    sm: '4px',
    md: '6px',
    lg: '8px',
    full: '9999px',
  },
}

Pattern 7: Monitor a design system for changes

场景7：监控设计系统的变更

bash

undefined

bash

undefined

Check every 30 minutes, output to a dedicated folder

每30分钟检查一次，输出到指定文件夹

npx designlang watch https://vercel.com
--interval 30
--out ./design-monitoring

Useful in CI — run once and diff against stored baseline

在CI中很有用——运行一次并与存储的基准版本对比

npx designlang diff
https://vercel.com
./design-monitoring/vercel-com-design-tokens.json

undefined

npx designlang diff
https://vercel.com
./design-monitoring/vercel-com-design-tokens.json

undefined

Pattern 8: Clone a site's design as a Next.js starter

场景8：克隆网站设计作为Next.js启动项目

bash

npx designlang clone https://stripe.com

bash

npx designlang clone https://stripe.com

Creates ./cloned-design/ with:

创建./cloned-design/目录，包含：

- Next.js app with extracted colors/fonts/spacing applied

- 已应用提取的颜色/字体/间距的Next.js项目

- tailwind.config.js pre-populated

- 预配置的tailwind.config.js

- globals.css with CSS variables

- 包含CSS变量的globals.css

- Basic component stubs styled to match

- 已样式化的基础组件模板

cd cloned-design npm install npm run dev

undefined

cd cloned-design npm install npm run dev

undefined

What Gets Extracted

提取内容范围

The markdown output covers 19 sections:

Color Palette — all unique colors with usage context
Typography — font families, weights, sizes, line heights, letter spacing
Spacing — padding/margin/gap values used across the site
Border Radii — all radius values with component context
Box Shadows — elevation system
CSS Custom Properties — all
```
--var
```
declarations
Breakpoints — detected responsive breakpoints
Transitions & Animations — duration, easing, properties animated
Component Patterns — button, card, input, nav with full CSS snippets
Layout System — grid columns, flex patterns, container widths
Responsive Design — what changes across breakpoints (with
```
--responsive
```
)
Interaction States — hover/focus/active deltas (with
```
--interactions
```
)
Accessibility — WCAG 2.1 contrast scores for all fg/bg pairs
Gradients — type, direction, stops, classification
Z-Index Map — layer hierarchy, z-index wars detection
SVG Icons — deduplicated, size/style classified, color palette
Font Files — source (Google/self-hosted/CDN/system),
```
@font-face
```
CSS
Image Style Patterns — aspect ratios, filters, shape treatments
Quick Start — ready-to-use snippet to recreate the design

Markdown输出涵盖19个模块：

调色板 — 所有独特颜色及其使用场景
排版 — 字体家族、字重、字号、行高、字母间距
间距 — 网站中使用的内边距/外边距/间隙值
圆角 — 所有圆角值及其组件使用场景
阴影 — 层级阴影系统
CSS自定义属性 — 所有
```
--var
```
声明
断点 — 检测到的响应式断点
过渡与动画 — 时长、缓动函数、动画属性
组件模式 — 按钮、卡片、输入框、导航等组件的完整CSS代码片段
布局系统 — 网格列数、Flex布局模式、容器宽度
响应式设计 — 不同断点下的样式变化（需启用
```
--responsive
```
）
交互状态 — 悬停/聚焦/激活状态的样式差异（需启用
```
--interactions
```
）
无障碍性 — 所有前景/背景颜色对的WCAG 2.1对比度评分
渐变 — 类型、方向、色标、分类
Z轴层级图 — 图层层级、Z轴冲突检测
SVG图标 — 去重、尺寸/样式分类、调色板
字体文件 — 来源（Google/自托管/CDN/系统）、
```
@font-face
```
CSS代码
图片样式模式 — 宽高比、滤镜、形状处理
快速开始 — 可直接使用的设计复现代码片段

Design Scoring

设计评分

bash

npx designlang score https://your-site.com

Scores 7 categories on a 0–100 scale with A-F grade:

Color Discipline — palette size, harmony, usage consistency
Typography — scale rationality, weight/size combinations
Spacing System — whether spacing follows a scale
Shadows — elevation system coherence
Border Radii — consistency across components
Accessibility — WCAG 2.1 contrast pass rate
Tokenization — CSS custom property usage

bash

npx designlang score https://your-site.com

从7个类别进行0-100分的评分，并给出A-F等级：

色彩规范 — 调色板大小、色彩和谐度、使用一致性
排版 — 字体层级合理性、字重/字号组合
间距系统 — 间距是否遵循统一的层级
阴影 — 阴影层级系统的连贯性
圆角 — 组件间的圆角一致性
无障碍性 — WCAG 2.1对比度达标率
令牌化 — CSS自定义属性的使用情况

Troubleshooting

故障排除

Site loads blank or styles are missing

网站加载空白或样式缺失

bash

undefined

bash

undefined

Add wait time for JavaScript-heavy SPAs

为JavaScript驱动的SPA增加等待时间

npx designlang https://app.example.com --wait 3000

Or use a higher viewport for desktop-only layouts

或者为仅支持桌面的布局使用更大的视口

npx designlang https://example.com --width 1440 --height 900

undefined

npx designlang https://example.com --width 1440 --height 900

undefined

Authentication-protected pages

受身份验证保护的页面

bash

undefined

bash

undefined

Get your session cookie from browser DevTools → Application → Cookies

从浏览器开发者工具 → Application → Cookie中获取会话Cookie

npx designlang https://app.example.com
--cookie "auth_token=$AUTH_TOKEN"
--cookie "csrf=$CSRF_TOKEN"

undefined

npx designlang https://app.example.com
--cookie "auth_token=$AUTH_TOKEN"
--cookie "csrf=$CSRF_TOKEN"

undefined

Output files are too large

输出文件过大

bash

undefined

bash

undefined

Only generate a specific framework's theme

仅生成指定框架的主题

npx designlang https://stripe.com --framework react npx designlang https://stripe.com --framework shadcn

Single-page only (no depth crawling)

仅爬取单个页面（不进行深度爬取）

npx designlang https://stripe.com --depth 0

undefined

npx designlang https://stripe.com --depth 0

undefined

Too many colors extracted (utility CSS sites)

提取的颜色过多（使用实用类CSS的网站）

bash

undefined

bash

undefined

Limit to the main page at desktop viewport, no deep crawl

仅在桌面视口下爬取主页面，不进行深度爬取

npx designlang https://tailwindcss.com
--depth 0
--width 1280
--no-history

undefined

npx designlang https://tailwindcss.com
--depth 0
--width 1280
--no-history

undefined

Playwright/browser not found

找不到Playwright/浏览器

bash

undefined

bash

undefined

Playwright needs browsers installed

Playwright需要安装浏览器

npx playwright install chromium

Or if installed globally:

如果已全局安装designlang：

npm install -g designlang playwright install chromium

undefined

npm install -g designlang playwright install chromium

undefined

apply

command doesn't detect my framework

apply

命令无法检测到我的框架

bash

undefined

bash

undefined

Explicitly point to your project root with a tailwind config present

明确指向包含Tailwind配置的项目根目录

npx designlang apply https://stripe.com --dir ./my-app

Ensure ./my-app contains tailwind.config.js or tailwind.config.ts

确保./my-app目录下包含tailwind.config.js或tailwind.config.ts（用于Tailwind检测），或components.json（用于shadcn检测）

for Tailwind detection, or components.json for shadcn detection

—

undefined

undefined

Integration with AI Agents

与AI Agent集成

The

-design-language.md

file is specifically structured for LLM consumption. Feed it directly to Claude, GPT-4, or Cursor to:

Recreate UI components matching the extracted design
Generate new components consistent with the design system
Audit your own components against a reference design
Document your own site's design system automatically

bash

undefined

-design-language.md

文件是专门为大语言模型（LLM）读取而结构化的。可直接将其输入到Claude、GPT-4或Cursor中，以实现：

重新创建与提取设计匹配的UI组件
生成与设计系统风格一致的新组件
对照参考设计审核你自己的组件
自动生成你自己网站的设计系统文档

bash

undefined

Extract your own site's design language for agent context

提取你自己网站的设计语言，作为Agent的上下文

npx designlang https://your-production-site.com
--out ./docs/design
--name my-app

Reference in CLAUDE.md or .cursorrules:

在CLAUDE.md或.cursorrules中引用：

"When creating UI components, follow the design language

"创建UI组件时，请遵循./docs/design/my-app-design-language.md中记录的设计语言"

documented in ./docs/design/my-app-design-language.md"

—

undefined

undefined