图片网页设计复刻规范生成器

解决的问题

前端复刻网页时常见问题：只产出一个“看起来差不多”的 HTML，后续生成新页面时颜色、字体、间距、组件状态全部漂移。本技能面向需要从 URL 或截图逆向出可维护风格基线，再交给其他页面生成 Skill 的场景。

工作方式

它把输入页面拆成三层约束：

• index.html：单文件、语义化、可编辑的高保真基准页，包含完整内嵌 CSS，并在高置信度下补充少量交互。
• design-style-spec.md：面向人和 AI 的风格锁定规范，覆盖布局、颜色、字体、圆角、阴影、组件状态、图像与响应式规则。
• design-tokens.json：结构化设计令牌，提供 colors、typography、spacing、components、responsive、constraints 等字段，便于代码和后续 Skill 直接读取。

核心步骤包括布局系统分析、视觉设计系统提取、组件与交互推断、技术实现策略制定，以及上下文和设计意图推断。输出会强调必须保留的风格锚点、允许变化的内容与禁止偏移的方向，避免后续页面把原页面改成通用模板风。

适用边界

该技能不负责批量扩展页面。输入截图时以截图视觉为最高优先级；如果 URL 与截图不一致，需以截图为准。它适合复刻、抽象和锁定风格，不适合凭空发明复杂交互或加入原图没有的视觉语言。