截图丢给它就出网页？这个 Claude Skill 让 AI 按流程截图修图，不再翻车

看到设计稿想秒变网页？直接丢给 AI 让它”按图写代码”，十次有八次翻车——按钮挤变形、图片画糊、比例跑偏、字号全乱。把任务全砸给一个模型，它要同时理解结构、复刻样式、临时生成视觉资产，三件事一起做，质量铁定崩。

今天刷到一个叫 ky-design-to-html 的 Skill，专门治这个毛病。它来自 GitHub 用户 KyrieCheungYep，仓库 KyrieCheungYep/ky-design-to-html-skill，2 个月攒到 156 star，思路很清晰——不追求一次成稿，让 AI 按流程干活。

它到底干了什么

这个 Skill 不是简单的 prompt 模板，而是一整套还原流程。它强制 AI 走五步：

• 拆解页面地图：先把整个 UI 切成区块，标记哪里是 HTML/CSS、哪里必须当图片资产
• 分离代码结构和视觉资产：复杂图标、插画直接引用，不让 AI 现场瞎画
• 设置画布比例：按设计稿的真实尺寸定画布，避免自适应把布局压扁
• 写 HTML/CSS：基于前面的拆解输出代码
• 浏览器截图验证 + 视觉误差修正：跑 Playwright 截图，对比原图，哪里不像改哪里

最后一步是这个 Skill 的灵魂。Scripts 目录里塞了一个 screenshot_page.py，直接拿 Playwright 把生成的 HTML 截图，跟原设计稿对比，逼着 AI 进入”修-截-修”的循环。

适配场景实测

仓库作者明说它不是 UI 生图 Skill，而是给已有截图/设计稿做还原。我把它的官方推荐场景列出来给你：

• landing page 设计稿 → 静态网页
• SaaS 产品页、后台 Dashboard、空状态页还原
• 设计稿里的复杂视觉资产（插画、icon、图表）当图片引用，不硬编码成 SVG

设计师交付的 Figma 截图、客户丢过来的 mockup、推上收藏的漂亮 landing page——只要你想拿到一份像素级接近的 HTML 草稿，这个 Skill 都能上手。

怎么装怎么用

两种 Agent 都能装。Claude 装法：

• 把 ky-design-to-html 文件夹丢到 ~/.claude/skills/
• Codex 用户丢到 ~/.codex/skills/
• 对话里直接喊：Use $ky-design-to-html to recreate this UI screenshot，中文也行：使用 ky-design-to-html，把这张 UI 截图还原成 HTML/CSS 页面

附带一个 OpenAI agents 配置（agents/openai.yaml）和两份参考文档（asset-handling.md / visual-error-taxonomy.md），把视觉资产的分类规则和常见误差谱都列好了。文件夹结构干净，5 分钟就能跑起来。

为什么这个 Skill 值得收

市面上”截图转代码”的工具不少（screenshot-to-code、v0、Lovable 都是），但它们是独立 SaaS，需要把图传上去、依赖它们的模型和工作流。这个 Skill 的不同在于它是Claude/Codex 的本地工作流——你的设计稿不出本机、模型你自己选（Opus 4.7 / Sonnet 4.6 / GPT-5 随便切）、资产你自己存。

对独立设计师和前端开发者来说，这就是一份”打开就能用”的还原工具链，比再开一个浏览器标签方便得多。

仓库地址：https://github.com/KyrieCheungYep/ky-design-to-html-skill

GitHub: https://github.com/KyrieCheungYep/ky-design-to-html-skill