设计系统提取

从 UI 里逆向出设计系统，才是重建的第一步

接手一个没有设计文档的老项目，或者准备复刻某个现成网站时，团队往往只能对着页面截图逐像素猜规范。这种做法的结果就是：按钮圆角在不同页面不一致，主色在导航和 CTA 之间漂移，间距像是随手填的。想要真正重建或者保持一致性，需要先把散落在 CSS、内联样式和截图里的视觉规则提取成一份可供程序消费的文档。

设计系统提取 技能负责完成这一步。它能处理线上 URL、本地 HTML、截图，以及 site/public/ 目录和 Stitch 项目，目标是输出一份语义化的 DESIGN.md。

核心能力与工作流

技能的内部流程分六步走：

• 定来源：线上页面用浏览器自动化截图并取回 HTML，本地资源直接读取，截图则只能做视觉近似（相关 hex 值必须标注 ⚠️）。
• 提取原始数据：优先抓 CSS 自定义属性与 @theme，其次 Tailwind 配置、内联 style 和类名，最后才是截图近似。
• 分析 token：把配色归纳成 primary、background、surface、text-primary、text-secondary、border、accent 等语义角色；字体提取家族、字重、字号、行高与字距；组件提取按钮、卡片、导航、表单、Hero 区块；间距记录最大宽度、段距、栅格和留白规则。
• 语义化合成：避免把 #1E40AF 或 rounded-xl 这类裸值直接丢给下游，而是写成「深海蓝 #1E40AF 用于主操作按钮」这样的自然语言描述。
• 写入 DESIGN.md：最终文档固定六段：主题氛围、配色角色表、字体、组件、布局、生成用块。
• 校验：如果环境支持浏览器自动化，就生成一段测试渲染与原站对比，再做微调。

下游 design-loop 可以直接消费这份 DESIGN.md，tailwind-theme-builder 也能把它落地成主题变量。

适用边界与注意点

这个技能并不是无障碍审计工具，也不是纯后端项目的规范检查器。截图输入只能做近似取色，所有估算的 hex 值都会被标注 ⚠️，不能当作精确规范直接投产。对于高度依赖运行时计算或动态换肤的场景，需要额外验证生成 token 与原站实际渲染是否一致。