设计风格提取与演示模板生成

要解决什么

拿到一个参考网站，想复刻它的视觉风格时，大多数人的流程是盯着截图手动量：主色是什么 HEX？正文用了多少号字？圆角多少像素？然后把这些数值敲进 CSS 变量里，一点点调。问题在于，截图是静态的，规范藏在像素里，提取过程既慢又容易出错，而且提取完还要另外搭一个演示载体，才能把风格真正展示出来。

design-to-template 要做的事情就是把这两步合并成一条流水线：输入一张网页截图，输出设计令牌分析报告 + 一套可用的单文件交互式 HTML 演示模板。

它如何工作

整个流程分为两个阶段，按顺序执行。

阶段一：分析与令牌提取。 技能会读取每张参考图，如果当前模型不具备图像视觉能力，则会退化为替代方案：根据文件名或文件夹结构推断目标品牌，再通过 WebSearch / WebFetch 抓取 styles.refero.design、designmd.cc、DesignLang 等平台的设计系统数据，以及目标网站首页的布局信息。

接着按六维度框架做系统分析：

• 艺术指导与视觉调性
• 色彩系统（背景层级、品牌色、中性色、语义色，含 HEX）
• 字阶与排版（字体族、字号、字重、行高、字间距）
• 间距与网格
• 装饰属性与表面质感（圆角、边框、投影）
• 微观元素与交互暗示（图标风格、按钮形态、动效参数）

每个维度都必须给出可量化的数值（px、HEX、ms），最终产出一份结构化的 设计风格分析报告.md。

阶段二：模板生成。 提取到的令牌会被映射为 :root {} 下的 CSS 自定义属性，如 --color-primary、--font-*、--radius-*、--shadow-*。技能会按风格调性匹配过渡动画——极简 SaaS 用水平推入加淡入淡出，暗色科技向风格用缩放加模糊，活力风格用弹跳上移。然后从版式目录中选择至少 8 种幻灯片版式，实现完整的导航系统（键盘方向键、滚轮、触摸滑动、圆点指示器、上下页按钮、页码显示），最终输出一个包含全部 HTML/CSS/JS 的 .html 文件。

适用边界与注意点

• 输入是网页截图，技能提取的是视觉表现层的令牌，不保证还原组件级交互逻辑和复杂动效细节。
• 图像视觉不可用时的替代方案依赖外部平台数据质量，个别站点的令牌可能缺失或过时。
• 报告和模板生成之后，仍需人工 review 数值合理性，尤其是品牌色和字阶这类容易受反色或截图压缩影响的维度。
• 多个参考风格分别生成独立模板文件，每个模板至少包含 8 种版式与完整导航，便于横向对比。