extract-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Extract Design Language

提取设计语言

Extract the complete design language from any website URL. Generates 8 output files covering colors, typography, spacing, shadows, components, breakpoints, animations, and accessibility.

从任意网站URL提取完整的设计语言。生成8种输出文件，涵盖颜色、排版、间距、阴影、组件、断点、动画和可访问性相关内容。

Prerequisites

前置条件

Ensure

designlang

is available. Install if needed:

bash

npm install -g designlang

Or use npx (no install required):

bash

npx designlang <url>

确保

designlang

可用。如有需要请安装：

bash

npm install -g designlang

或使用npx（无需安装）：

bash

npx designlang <url>

Process

操作流程

Run the extraction on the provided URL:

bash

npx designlang <url> --screenshots

For multi-page crawling:

npx designlang <url> --depth 3 --screenshots

For dark mode:

npx designlang <url> --dark --screenshots

Read the generated markdown file to understand the design:

bash

cat design-extract-output/*-design-language.md

Present key findings to the user:
- Primary color palette with hex codes
- Font families in use
- Spacing system (base unit if detected)
- WCAG accessibility score
- Component patterns found
- Notable design decisions (shadows, radii, etc.)
Offer next steps:
- Copy
```
*-tailwind.config.js
```
  into their project
- Import
```
*-variables.css
```
  into their stylesheet
- Paste
```
*-shadcn-theme.css
```
  into globals.css for shadcn/ui users
- Import
```
*-theme.js
```
  for React/CSS-in-JS projects
- Import
```
*-figma-variables.json
```
  into Figma for designer handoff
- Open
```
*-preview.html
```
  in a browser for a visual overview
- Use the markdown file as context for AI-assisted development

执行提取操作：针对提供的URL运行提取：

bash

npx designlang <url> --screenshots

如需多页面爬取：

npx designlang <url> --depth 3 --screenshots

如需提取深色模式：

npx designlang <url> --dark --screenshots

查看生成的markdown文件以了解设计细节：

bash

cat design-extract-output/*-design-language.md

向用户展示关键发现：
- 带有十六进制代码的主色调色板
- 使用的字体族
- 间距系统（如检测到基础单位）
- WCAG可访问性评分
- 发现的组件模式
- 值得关注的设计决策（阴影、圆角等）
提供后续操作建议：
- 将
```
*-tailwind.config.js
```
  复制到项目中
- 将
```
*-variables.css
```
  导入样式表
- 对于shadcn/ui用户，将
```
*-shadcn-theme.css
```
  粘贴到globals.css中
- 为React/CSS-in-JS项目导入
```
*-theme.js
```
- 将
```
*-figma-variables.json
```
  导入Figma以实现设计师交接
- 在浏览器中打开
```
*-preview.html
```
  查看可视化概览
- 将markdown文件作为AI辅助开发的上下文

Output Files (8)

输出文件（共8种）

File	Purpose
`*-design-language.md`	AI-optimized markdown — the full design system for LLMs
`*-preview.html`	Visual HTML report with swatches, type scale, shadows, a11y
`*-design-tokens.json`	W3C Design Tokens format
`*-tailwind.config.js`	Ready-to-use Tailwind CSS theme
`*-variables.css`	CSS custom properties
`*-figma-variables.json`	Figma Variables import format
`*-theme.js`	React/CSS-in-JS theme object
`*-shadcn-theme.css`	shadcn/ui theme CSS variables

文件	用途
`*-design-language.md`	AI优化的markdown — 面向大语言模型的完整设计系统
`*-preview.html`	可视化HTML报告，包含色板、字体层级、阴影、可访问性信息
`*-design-tokens.json`	W3C设计令牌格式
`*-tailwind.config.js`	可直接使用的Tailwind CSS主题
`*-variables.css`	CSS自定义属性
`*-figma-variables.json`	Figma变量导入格式
`*-theme.js`	React/CSS-in-JS主题对象
`*-shadcn-theme.css`	shadcn/ui主题CSS变量

Additional Commands

附加命令

Compare two sites:
```
npx designlang diff <urlA> <urlB>
```
View history:
```
npx designlang history <url>
```

对比两个网站：
```
npx designlang diff <urlA> <urlB>
```
查看历史记录：
```
npx designlang history <url>
```

Options

参数选项

Flag	Description
`--out <dir>`	Output directory (default: `./design-extract-output` )
`--dark`	Also extract dark mode color scheme
`--depth <n>`	Crawl N internal pages for site-wide extraction
`--screenshots`	Capture component screenshots (buttons, cards, nav)
`--wait <ms>`	Wait time after page load for SPAs
`--framework <type>`	Generate only specific theme ( `react` or `shadcn` )

参数	说明
`--out <dir>`	输出目录（默认值： `./design-extract-output` ）
`--dark`	同时提取深色模式配色方案
`--depth <n>`	爬取N个内部页面以实现全站提取
`--screenshots`	捕获组件截图（按钮、卡片、导航等）
`--wait <ms>`	页面加载后的等待时间（适用于单页应用）
`--framework <type>`	仅生成特定主题（ `react` 或 `shadcn` ）