用途:从指定网页采集设计令牌,产出 DESIGN.md 设计规范文档与 Tailwind CSS v4 主题文件 globals.css,并保存视觉参考截图。
主要能力:采集颜色、字体、间距、圆角、阴影、过渡与动画等令牌;生成覆盖视觉主题与氛围、色彩系统、字体系统、组件规范、布局与间距、深度阴影与边框、动效、响应式行为、Prompt guide 的 9 段式 DESIGN.md;生成遵循 shadcn/ui 命名规范的 globals.css,含深色模式与 @theme inline 映射。
使用方式:前置条件为 Node.js >= 18,并已安装 extract-page-data 或 clone-page 技能。先采集数据与截图,例如 node <extract-page-data>/scripts/extract.mjs <url> --theme --screenshot --scroll -o ./theme-data,或用 clone-page 采集多视口与 section 截图;随后分析全页、响应式与 section 截图,再读取 theme.json 归类令牌,最后生成产物。
适用场景:需要从现有网站提取设计系统、生成主题或设计规范文档时。
限制:theme.json 为机器提取,可能有遗漏或偏差;当令牌数据与截图冲突时以截图为准。缺少来源证据时需明确写“未采集到明确规则,按保守默认处理”,不得伪造品牌规则或组件细节。具体收费、价格与平台支持情况暂未提供。