@KyrieCheungYep: 给大家介绍一下这个 Skill，这是我在向一些客户做项目介绍的时候，沉淀下来的 Skill，经过了我自己多番实战验证 这是一个专门把「可见 UI 参考图」高质量还原成 HTML/CSS 的 Codex&Claude Skill 它会把设计…
摘要
KyrieCheungYep 发布了一个名为 ky-design-to-html 的 Codex/Claude Skill，用于将 UI 截图或设计稿高质量还原为 HTML/CSS，通过拆解设计结构、分离代码与资产、画布适配及浏览器截图校验等工作流减少视觉偏差。
查看缓存全文
缓存时间: 2026/06/05 17:17
给大家介绍一下这个 Skill，这是我在向一些客户做项目介绍的时候，沉淀下来的 Skill，经过了我自己多番实战验证
这是一个专门把「可见 UI 参考图」高质量还原成 HTML/CSS 的 Codex&Claude Skill
它会把设计还原拆解成一套可验证的工作流：先做页面结构拆解，再区分哪些元素应该用代码实现、哪些应该作为图片资产保留，最后通过真实浏览器截图反复校准，减少那种“差不多但很廉价”的视觉偏差
核心能力：
1、截图 / Mockup / Figma 导出图转 HTML 适合把 SaaS 页面、Dashboard、Landing Page、空状态、产品界面截图等视觉参考，转换成高还原度的 HTML/CSS 页面
2、先拆设计，再写代码 会先生成简洁的页面地图：布局比例、组件层级、颜色系统、字体层级、间距、圆角、阴影和复杂视觉资产，避免直接从图片跳到代码导致结构跑偏
3、代码 UI 与图片资产分离 导航、卡片、表单、按钮、表格等用 HTML/CSS 实现；Logo、复杂插画、产品截图、人物图、3D 视觉等作为资产处理，不硬用 CSS 乱画
4、画布尺寸与浏览器预览适配 会明确区分参考画布和展示视口，避免固定尺寸设计在浏览器里出现溢出、裁切、缩放错位、黑边过大等问题
5、真实浏览器截图校验 实现后会用浏览器渲染并截图，对比参考图检查布局、比例、间距、字体、颜色、裁切和整体密度，再针对具体误差迭代修正
6、适合做高质量视觉复刻，不适合纯文字出设计 这个 Skill 主要用于“已有视觉参考”的还原。如果只是描述一个页面想法，没有截图或 mockup，就应该走普通前端设计流程，而不是触发这个工作流
一个把 UI 截图变成高质量 HTML/CSS 的视觉还原工作流 Skill，通过拆解、资产分离、画布适配和截图校验，把模糊的视觉转换成可编辑的资产文件
也可以用这个 Skill 来还原自己想要的某一个模块的设计
用一个日历截图示例来直接生成，效果非常不错 https://github.com/KyrieCheungYep/ky-design-to-html-skill…
KyrieCheungYep/ky-design-to-html-skill
Source: https://github.com/KyrieCheungYep/ky-design-to-html-skill
KY Design to HTML Skill
KY Design to HTML 不是一个 UI 生图 skill。它主要面向已有 UI 截图或设计稿的 HTML/CSS 还原，重点是资产分离、画布适配、截图验证和视觉误差修正。 适用于 Codex / Claude 的 设计截图 转 HTML/CSS skill。
它适合用在这类场景：
- 给 AI 一张 UI 截图，让它还原成 HTML/CSS
- 把 landing page 设计稿做成静态网页
- 把 SaaS 页面、后台页面、空状态页面还原成前端页面
- 避免 AI 直接照图写 HTML 后，把页面挤变形、资产画糊、比例跑偏
这个 skill 解决什么问题？
很多人会直接对 AI 说：
根据这张图生成 HTML
但这样容易翻车。
因为 AI 被迫同时做三件事：
- 理解页面结构
- 复刻视觉样式
- 临时画出复杂视觉资产
这个 skill 会让 AI 先把任务拆开：
- 哪些部分应该用 HTML/CSS 写
- 哪些部分应该当作图片资产
- 页面应该按什么画布比例展示
- 写完后应该截图验证哪里不像
核心流程是：
- 先拆解页面地图
- 分离代码结构和视觉资产
- 设置设计稿画布和浏览器展示比例
- 写 HTML/CSS
- 浏览器截图验证
- 对比修正视觉误差
安装方法
Codex
把 ky-design-to-html 文件夹复制到：
~/.codex/skills/ky-design-to-html
Claude
把 ky-design-to-html 文件夹复制到：
~/.claude/skills/ky-design-to-html
使用方法
在 Codex 或 Claude 里，可以这样说：
Use $ky-design-to-html to recreate this UI screenshot as a standalone HTML/CSS page.
也可以直接用中文：
使用 ky-design-to-html，把这张 UI 截图还原成一个 HTML/CSS 页面。
文件结构
ky-design-to-html/
├── SKILL.md
├── agents/
│ └── openai.yaml
├── references/
│ ├── asset-handling.md
│ └── visual-error-taxonomy.md
└── scripts/
└── screenshot_page.py
备注
这个 skill 的目标不是让 AI 一次生成完美页面。
它的目标是让 AI 按正确流程工作：
拆解 → 分离资产 → 设置画布 → 写代码 → 截图 → 对比 → 修正
真正的还原质量来自后面的截图校准。
Kyrie (@KyrieCheungYep): 已经整理成 skill 放到 GitHub了 当拿到一个 AI 图稿或者说其它自己喜欢的设计，想要做成 HTML 的时候，就可以用这个 skill 去生成👇🏻
相似文章
@Saccc_c: 想让 Codex 具备设计师级别的审美？分享3个我实测有效的design skills： 1、impeccable 综合表现比 uiuxpromax 那些热门设计 skill 实用得多 ：https://impeccable.style …
Impeccable is a set of design skills for AI agents like Codex that respects design systems, uses product context, enforces design rules, and detects anti-patterns to ensure high-quality UI/UX output.
@yaohui12138: 卧槽！本以为claude design已是最强，没想到这个项目也这么好用啊 周六晚上，朋友做的一个 SaaS 后台 UI AI味太重，丑到客户发了个「呵呵」..... 我直接用一个 GitHub 项目1小时帮他重做完。其实就是一个叫 DE…
The article introduces 'awesome-design-md', an open-source collection of DESIGN.md files that reverse-engineer the design systems of major tech companies. It allows developers to use AI coding agents like Claude or Cursor to generate UI with specific brand styles by simply adding a markdown file to their project.
@dotey: 之所以研究 Claude Design，是因为最近摸索出一套不错的开发模式： 1. 先用 Claude Design 去设计 App 的 UI 和 UX，第一版本越简单越好。 Claude Design 交付的结果是 HTML + CSS…
作者分享了一套结合 Claude Design 和本地 AI agent（如 Cursor、Codex）的开发流程，并开源了 baoyu-design 工具，使开发者无需依赖网页版即可在本地运行 Claude Design 进行 UI 设计。
@Moting284: https://x.com/Moting284/status/2065292889207558556
介绍一款名为“小黑配图”的Codex skill，用于生成符合文章正文的手绘风格配图，解决AI配图空洞或PPT化的问题。文章详细说明skill的安装、使用方法和最佳实践，强调认知锚点提取和生成后质检。
@AlchainHust: 别吵了！我开源了一个 Skill，可实现 MD 与 HTML 之间的自由转换 https://github.com/alchaincyf/huashu-md-html…
huashu-md-html 是一款开源 Skill，支持将多种文件格式转换为 Markdown 或带有样式的 HTML，专为兼容 Claude Code 和 Cursor 等 AI 编程代理而设计。