用途：该技能不是根据文字描述凭空生成 UI，而是把已有的 UI 截图或设计文件还原为尽量接近原设计稿的静态 HTML/CSS 页面，输出单一 HTML 文件。
主要能力：它先强制结构化流程：把页面拆解为结构图（页头、主视觉、功能区、页脚等），区分代码元素与视觉素材，设定设计画布尺寸与浏览器视口，再编写语义化 HTML/CSS；随后在浏览器中截图校验，对比原设计并纠正视觉错误。素材分离策略把简单图形、纯色、基础渐变、阴影交给 CSS，图标和 Logo 用内联 SVG，照片和复杂图形用图片文件，原型阶段可用 data URL 占位。视觉错误分类包含布局位移、尺寸比例、颜色偏差、字体不符、间距、圆角与阴影、对齐问题，并按严重程度排序处理。
使用方式：将技能目录复制到 agent 技能目录，Codex 执行 mkdir -p ~/.codex/skills 后 cp -r ky-design-to-html ~/.codex/skills/，Claude 执行 mkdir -p ~/.claude/skills 后 cp -r ky-design-to-html ~/.claude/skills/。在安装了该技能的智能体中用“使用 ky-design-to-html，把这张 UI 截图还原成一个 HTML/CSS 页面”触发。校验脚本用法为 python scripts/screenshot_page.py <html_file> <output_screenshot.png> [--width 1920] [--height 1080]，需先安装依赖：pip install playwright 和 playwright install chromium。技能目录包含 SKILL.md、agents/openai.yaml、references/asset-handling.md、references/visual-error-taxonomy.md 和 scripts/screenshot_page.py。
适用场景与限制：适合落地页、仪表盘侧边栏、空状态页等设计稿的像素级静态还原。该技能产出固定宽度、静态、像素级还原的 HTML/CSS，不是响应式或可交互的 Web 应用；如需生产使用，需自行补充 JavaScript、响应式适配并接入后端。若不同视口下布局破裂，说明设计是固定宽度，技能本身不负责响应式处理。收费、价格与平台支持范围官方资料暂未提供。