SuperAPI AI 工具集

extract-design

设计与创作

查看项目

更新于 10-16 09:50

技能介绍

用途:从任意网站 URL 提取完整设计语言,输出供 AI 辅助开发、设计交接与主题复用的文件。

主要能力:生成 8 个输出文件,包括 AI 优化的 markdown 设计系统(-design-language.md)、带色板与字号阶梯的 HTML 预览(-preview.html)、W3C Design Tokens 格式 JSON、Tailwind 配置、CSS 自定义属性、Figma Variables 导入 JSON、React/CSS-in-JS 主题对象以及 shadcn/ui 主题 CSS。覆盖颜色、排版、间距、阴影、组件、断点、动画与无障碍。

使用方式:需先确保 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。

可选参数:--out <dir> 指定输出目录(默认 ./design-extract-output);--dark 额外提取暗色配色;--depth <n> 抓取 N 个内部页面做全站提取;--screenshots 截取按钮、卡片、导航等组件;--wait <ms> 为 SPA 设置加载后等待时间;--framework <type> 只生成 react 或 shadcn 主题。附加命令:npx designlang diff <urlA> <urlB> 对比两站;npx designlang history <url> 查看历史。

适用场景:复刻或借鉴某站设计体系、为项目生成 Tailwind/shadcn 主题、导出设计令牌给设计师、把网站视觉信息作为 AI 开发上下文。

限制:资料未提供提取准确率、支持范围、性能、收费或平台限制等信息。