image-to-code：把 UI 截图、设计稿或 Figma 导出还原成自适应代码和透明切图的 Codex Skill

image-to-code 是给 Codex 用的图片还原 Skill，仓库由 yuzhworkhard-wq 维护。它不负责重新设计，也不套通用模板，而是把一张选定的 UI 图、截图或 Figma 导出稿，按固定的测量流程还原成可运行的移动端页面、透明 PNG 素材和一份图层清单。按官方 README 整理，未在本机完整实测。

750px 是测量基准，不是最终宽度

移动端设计稿常用 750px 宽，这个项目把它当作坐标基准：先算 scale = 750 / source_width，再把坐标、宽高、圆角、描边、阴影、字体和渐变位置统一缩放到 750px 画板。这样同一个元素在源图、代码和 QA 截图里能对上位置。

最终页面并不固定在 750px。README 要求在外层加一个 fit wrapper，让整块画板按容器或视口等比缩放，缩放比例取 min(1, availableWidth / 750)。.artboard 仍然保持 750px，子图层不重新排版；375px 手机演示时比例约为 0.5，还要再检查至少一个其他手机宽度。换句话说，它优先保证像素级还原，而不是让内容自然重排。

manifest 把测量结果固定下来

layers.manifest.json 是整条流程的共同数据源，记录每个图层的源图 bbox、750px 基准 bbox、z-index、资源路径、PNG 真实像素尺寸和 CSS 显示尺寸。README 的建议很明确：不要先写一个近似页面再补图，先把 manifest 建好，代码、切图和 Figma 导出都从它派生。

文本和简单图形尽量用代码实现；图标、头像、插画、复杂装饰和产品图则切成独立 PNG。manifest 里的 css_display_width/height 决定布局占位，PNG 的 asset_pixel_width/height 决定清晰度，两者混用会让高清图把页面撑大。这样每个关键图层都能追溯到 manifest，而不是靠肉眼对齐。

切图、透明背景与审计

切图默认至少 2x；小于 64px 的图标、源图压缩明显、边缘脏、抠底困难或页面里发糊时，用 3x 或 4x。文件像素变大，但 CSS 显示尺寸不变：

scripts/extract_png_asset.py source.png assets/icons/icon-home-01.png \
  --x 120 --y 88 --width 32 --height 32 \
  --scale-factor 3 \
  --css-width 32 --css-height 32 \
  --remove-bg floodfill \
  --manifest layers.manifest.json \
  --id icon-home-01

导出后还要审计透明通道和裁边：

scripts/audit_png_assets.py assets/icons assets/illustrations assets/images \
  --require-transparent-bg \
  --manifest layers.manifest.json

如果出现没有 alpha 通道、四角不透明或非透明像素贴边，README 的建议是扩大 bbox、重新抠图或提高倍数后重出资源。透明留白不能自动 trim，半透明边缘也要保留。

安装与触发

把整个目录放到 Codex 的 skills 目录，通常是 ~/.codex/skills/image-to-code，再安装脚本依赖：

python3 -m pip install -r requirements.txt

当前脚本依赖 Pillow 和 NumPy。触发时可以点名 Skill，也可以直接描述任务，例如“把这张移动端设计图还原成 HTML/CSS，图标和插画按 2x 切透明 PNG，后面要能导入 Figma”。Figma 输出是可选步骤，要等代码和 QA 完成后再基于同一份 manifest 生成可编辑图层或本地 importer，而不是把整页截图塞进去。

一个典型交付场景

设计师给一张 750px 宽的移动端首页，要求页面适配 320–430px 手机、图标单独切图、后续能在 Figma 里改文案。比较稳妥的顺序是：先确认源图尺寸和目标技术栈，建立 manifest；再切图、写 750px 画板、加 fit wrapper；最后截 750px 基准图对比原图，再截 375px 和另一个手机宽度，检查有没有横向滚动、溢出或未缩放的内容撑开页面。

与直接让模型看图写页面相比

直接让模型看图写 HTML，得到的是近似布局，元素位置很难复核；Figma Dev Mode 能导出样式，但切图、透明背景和移动端 QA 仍要手工做。image-to-code 的价值在于把测量、切图、代码和 QA 绑到同一份 manifest 上，出了问题能定位到具体图层。代价是流程更长，源图质量和版权问题也不会因为用了 Skill 就消失。

边界与风险

重新设计不在它的职责范围内，源图本身不合理时只能照搬。整块画板等比缩放意味着不会发生真正的响应式重排，内容很长或需要动态布局的页面并不适合这套方法。脚本依赖 Python、Pillow 和 NumPy；Figma 写入还需要相应的 API、MCP 或本地 importer 权限。README 写得详细，但没有给出独立性能数据或还原准确率，实际效果仍取决于源图和所用模型。

项目入口

仓库与 README：yuzhworkhard-wq/image-to-code
许可：以仓库为准
适合：需要把移动端视觉稿稳定还原成代码和切图的前端、设计工程师