extract-design

提取设计语言

从任意网站 URL 提取完整的设计语言。生成 8 个输出文件，涵盖颜色、字体排版、间距、阴影、组件、断点、动画和无障碍性。

前置条件

确保 designlang 已就绪。如有需要，请安装：

npm install -g designlang

或者使用 npx（无需安装）：

npx designlang <url>

流程

1. 运行提取，处理提供的 URL：

npx designlang <url> --screenshots

若要抓取多个页面：npx designlang <url> --depth 3 --screenshots 若要提取深色模式：npx designlang <url> --dark --screenshots

2. 阅读生成的 Markdown 文件，了解设计：

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

3. 向用户展示关键发现：

   • 带十六进制代码的主色调配色方案
   • 使用的字体系列
   • 间距系统（如检测到，则注明基本单位）
   • WCAG 无障碍性评分
   • 发现的组件模式
   • 值得注意的设计决策（阴影、圆角半径等）

4. 提供后续步骤：

   • 将 *-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 辅助开发的上下文

输出文件（8 个）

文件	用途
*-design-language.md	面向 AI 优化的 Markdown——供大模型使用的完整设计系统
*-preview.html	可视化 HTML 报告，包含色板、字体比例、阴影和无障碍性信息
*-design-tokens.json	W3C Design Tokens 格式
*-tailwind.config.js	可直接使用的 Tailwind CSS 主题
*-variables.css	CSS 自定义属性
*-figma-variables.json	Figma Variables 导入格式
*-theme.js	React/CSS-in-JS 主题对象
*-shadcn-theme.css	shadcn/ui 主题 CSS 变量

其他命令

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

选项

标志	描述
--out <dir>	输出目录（默认：./design-extract-output）
--dark	同时提取深色模式配色方案
--depth <n>	抓取 N 个站内页面，以提取全站设计
--screenshots	截取组件（按钮、卡片、导航）的截图
--wait <ms>	单页应用（SPA）页面加载后的等待时间
--framework <type>	仅生成指定主题（react 或 shadcn）