让 AI "根据这张图生成 HTML"，听起来简单，做出来经常翻车。
页面挤变形、图标画成色块、间距全凭感觉——因为 AI 被迫同时做三件事：理解结构、复刻样式、临时画出复杂视觉资产。一件事都没做好。
KY Design to HTML Skill 换了个思路：不让 AI 一次性搞定，而是按流程分步走。
核心流程
拆解页面 → 分离资产 → 设置画布 → 写代码 → 截图验证 → 对比修正关键区别在于截图验证这一步。写完代码后，Skill 会用脚本自动截图，和原始设计稿对比，找出视觉误差，然后修正。不是写完就结束，而是写到像为止。
适合什么场景
- 有设计稿，需要快速还原成静态 HTML/CSS
- Landing page、SaaS 页面、后台管理页面的设计还原
- UI 截图转可用的前端页面
怎么用
安装
Codex 用户：
cp -R ky-design-to-html ~/.codex/skills/ky-design-to-htmlClaude Code 用户：
cp -R ky-design-to-html ~/.claude/skills/ky-design-to-html使用
直接给 AI 一张截图，加上指令：
Use $ky-design-to-html to recreate this UI screenshot as a standalone HTML/CSS page.中文也行：
使用 ky-design-to-html，把这张 UI 截图还原成一个 HTML/CSS 页面。AI 会按流程走：先拆解页面结构，把图标、插画等视觉资产分离出来单独处理，设置好设计稿画布比例，再写 HTML/CSS，最后截图对比修正。
和直接让 AI 写有什么区别
| 直接让 AI 写 | 用 KY Design to HTML | |
|---|---|---|
| 流程 | 一步到位 | 拆解→还原→验证→修正 |
| 资产处理 | 全靠 AI 画 | 分离代码和图片资产 |
| 画布适配 | 不考虑 | 按设计稿比例设置 |
| 质量验证 | 靠人眼看 | 截图对比自动修正 |
| 适合场景 | 简单页面 | 复杂设计稿还原 |
链接
- GitHub：KyrieCheungYep/ky-design-to-html-skill
- 协议：MIT License
- 平台：Codex / Claude Code