将第三方提供的视觉稿系统性还原为可维护、可接入数据、可视觉验收的 HTML/CSS/素材。它服务于 App、网页、H5、宣传页和固定版式物料；不会把某一种设备宽度或某一个项目的 CSS 数值当成通用规则。
输入可以是 1 张或多张 PNG/JPG，也可以是 Figma、Sketch、PSD 等设计文件。输出不是“整张图当背景”的演示页面，而是具备语义化 DOM、可复用 Token、可替换素材和可追溯验收记录的前端实现。
- 需要把设计图还原为 HTML、页面或组件，并为后续开发保留可维护结构
- 需要从多张页面中提取共享设计标准、组件和素材策略
- 需要以项目实际画布、页面状态和数据进行高保真视觉验收
- 设计稿来自截图、PNG/JPG、Figma、Sketch 或 PSD
不用于纯业务流程讨论、后端开发，或没有视觉稿的从零产品设计。
- 项目先定标：先确认画布、DPR、响应式策略、设计稿/CSS 换算和金样版本；390px 只可能是某个移动端项目的配置。
- 动态内容保留为 DOM：名称、金额、日期、状态、列表、按钮和交互控件不导出成图片。
- 静态素材按证据提取：规则图标优先 SVG；摄影、纹理、手写字和复杂插画使用合适的位图或已有矢量源。
- 先校准一页，再批量实现：先解决全局字体、容器、密度、素材和截图条件问题，避免误差扩散。
- 基于证据验收：在真实 CSS 视口、DPR、状态和数据下截图；长页面检查首屏、核心区和页尾锚点。
P0 项目基准
→ T0 设计稿盘点与页面分级
→ T1 共享设计标准（按需）
→ T2 单页视觉拆解 + T3 素材清单
→ 校准代表页
→ HTML/CSS 实现
→ T4 截图对比与验收
| 阶段 | 关键产物 | 目的 |
|---|---|---|
| P0 | 项目基准与金样映射 | 定义画布、断点、DPR、字体、路由、状态和金样版本 |
| T0 | 页面盘点与 A/B/C 分级 | 明确范围、共享组件、风险与精修优先级 |
| T1 | 全局设计标准 | 为多页项目提供唯一 Token 和组件规格来源 |
| T2 | 单页视觉拆解 | 明确区块层级、页面例外、动态字段和关键锚点 |
| T3 | 素材清单 | 记录素材来源、裁切、处理、用途与风险 |
| T4 | 对比与验收记录 | 留存截图条件、差异清单、受限项和复验结果 |
完整模板见 templates.md。
| Gate | 关注点 |
|---|---|
| G0 / P0 | 画布、金样版本、换算、状态和不确定项已确认 |
| G1 | Token、字体映射与重复组件规格一致 |
| G2 | 动态字段、核心素材、裁图风险和页面特例均有方案 |
| G3 | 校准代表页已完成真实画布复验 |
| G4 | HTML、路由、交互和数据字段可开发、可维护 |
| G5 | 截图、关键锚点和差异清单已完成 |
| G6（精修） | 有证据支撑高保真结论，或已明确受限项 |
“90%+”只用于用户明确要求精修的页面，且必须由同画布、同状态、同数据的对比证据支持；不能凭主观感觉或单张缩略图宣称达标。
design-to-html/
├── SKILL.md # 主流程、模式选择、质量关卡
├── references/
│ ├── project-config.md # P0：项目配置与金样映射
│ ├── asset-pipeline.md # 素材分类、裁切与登记
│ ├── implementation-and-validation.md # 校准页、实现顺序、视觉验收
│ └── templates.md # P0、T0–T4 成果物模板
├── README.md
└── .gitignore
在支持 Skill 的开发助手中引用 design-to-html，并同时提供：
- 设计稿或金样文件；
- 需要还原的页面范围与目标技术栈；
- 如已知，目标画布/断点、路由和优先级；
- 若要求高保真验收，明确指定页面和验收预期。
常见触发语句包括：
- “将这批设计图转换成可开发的 HTML”
- “按设计稿高保真还原这个 App 页面”
- “把 Figma/截图还原成响应式网页”
- “为这组页面建立设计规范、素材清单并输出 HTML”
v1.4.0 — 支持项目级画布配置、校准代表页、素材处理管线和可追溯视觉验收。
MIT