SuperAPI AI 工具集

extract-design

前端与建站

查看项目

更新于 10-16 00:05

技能介绍

用途:从任意网站 URL 提取完整设计语言,覆盖颜色、字体、间距、阴影、组件、断点、动画与无障碍,共生成 8 个输出文件,便于复用设计系统或辅助 AI 开发。

主要能力与输出:-design-language.md(面向 LLM 的完整设计系统)、-preview.html(含色板、字号、阴影与无障碍的可视化报告)、-design-tokens.json(W3C Design Tokens)、-tailwind.config.js(Tailwind 主题)、-variables.css(CSS 自定义属性)、-figma-variables.json(Figma Variables)、-theme.js(React/CSS-in-JS 主题对象)、-shadcn-theme.css(shadcn/ui 主题变量)。

使用方式:需先确保 designlang 可用,可执行 npm install -g designlang,或直接使用 npx designlang <url>。常用流程:npx designlang <url> --screenshots;多页爬取用 npx designlang <url> --depth 3 --screenshots;深色模式用 npx designlang <url> --dark --screenshots。随后 cat design-extract-output/*-design-language.md 阅读生成结果。

其他命令:对比两站 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 主题。

适用场景:复制站点设计语言、对接 Tailwind/shadcn/ui/Figma、为 AI 辅助开发提供上下文。限制:具体定价、平台支持范围与效果未在资料中提供。