LINUX DO 帖子整理：【设计图完美转 code/figma】焚诀——image-to-code Skill

1. 检查图片元素#

先通读整张 UI 图：元素、文字、尺寸、层级、哪些是文本、哪些必须切图。

（原图）

2. 尺寸统一到 750px#

常见手机逻辑宽 375，2x 为 750。skill 强制把源图等比归一到 750px 宽，建立统一坐标系，方便测量与切图。

3. 建立 layers.manifest.json#

manifest 是布局、切图、代码、Figma 的唯一数据源。禁止先写“看起来差不多”的页面，再回头补图。

4. 预览 bbox#

切图前先把每个资源目标的位置、大小画出来，对齐完整外框（含阴影、浅色底、半透明边缘）。

5. 导出高清资源#

生成 UI 图常像素不足。skill 强制把资源按 asset_scale_factor 放大到 2x / 3x / 4x 导出，但页面显示尺寸仍等于原元素外框——高清的是文件像素，不是布局被撑大。

6. 锁定画板并匹配资源#

• 文本、简单矩形/圆/线/按钮底 → 代码化
• icon、插画、头像、复杂装饰 → 独立透明 PNG，按 manifest 坐标贴回

实测提醒：Codex 偶尔会偷懒，个别图背景没抠干净，所以 skill 里把透明审计写得很死。

7. 自适应#

先产出 750px 锁定稿，再强制加外层 fit wrapper，验证 375px 及其他手机宽度；适配只能整体等比缩放，禁止对子元素重排。

8. 检查#

分模块验收（矢量 / 文本 / 位图），750px 叠图对比，手机端截图复核。

9. 导出到 Figma（可选）#

代码与 QA 完成后，基于同一份 manifest / code / assets 生成可编辑 Figma 图层规格或本地 importer。作者自己还做了 web to figma 插件（帖内多次被催更，截至整理时仍未正式放出）。

最终效果对照#

（原图）

（HTML 文件）

（通过 web to figma 插件复制进 Figma 的效果）

3.1 750px 是基准坐标，不是唯一显示宽#

1
scale = 750 / source_width
2
final_width = 750
3
final_height = round(source_height * scale)

同一 scale 必须应用到：坐标、宽高、圆角、描边、阴影、渐变、字号、行高、字间距。

生产页必须再套一层：

1
scale_fit = min(1, availableWidth / 750)

只缩放外层 wrapper；.artboard 仍是 750 宽锁定稿。

3.2 禁止“近似重绘”#

下列一律算失败，哪怕页面“更规整、更清晰”：

• 用 lucide / Material / SF Symbols 等相似图标替换原图 icon
• 重画钱包、礼盒、徽章、头像等卡片插画
• 为了适配组件，改卡片高度、圆角、间距、图片露出比例
• 用 CSS 临摹复杂位图
• 把局部露出的装饰改成居中/放大

抠不干净 → 保留完整裁片并说明限制；禁止用“看起来差不多”的替代素材。

3.3 透明背景硬规则#

transparent_required: true 的资源（默认：icons / illustrations / 不规则装饰）：

• 必须有 alpha
• 不能带白底、灰底、页面底、卡片底矩形
• 先按完整外框 + 安全留白切，再抠底；禁止先抠再 trim
• 本地 floodfill 不干净时，可用 image2/imagegen 只去背景，禁止重生主体
• 必须在棋盘格 / 黑底 / 白底上验收
• 跑 scripts/audit_png_assets.py --require-transparent-bg

3.4 防裁切硬规则#

• 宁可画布偏大留透明，也不能裁掉阴影/浅色底/抗锯齿边
• 非透明像素贴到四边 → 默认判定裁切失败，扩大 bbox 重出
• 服务宫格、底栏 icon 必须整件导出，不能只截符号局部

3.5 自适应硬规则#

• 没有 375px 验证的交付视为未完成
• 禁止 min-width: 750、横向滚动、浏览器 zoom 冒充适配
• 禁止为了 375 去改子元素字号/间距/坐标

推荐结构：

1
<main class="fit-shell">
2
  <div class="fit-box">
3
    <section class="artboard">...</section>
4
  </div>
5
</main>

1
:root {
2
  --board-w: 750;
3
  --board-h: 1624; /* 按源图比例计算 */
4
  --fit-gutter: 0px;
5
  --board-scale: min(1, calc((100vw - var(--fit-gutter) * 2) / (var(--board-w) * 1px)));
6
}
7
.fit-box {
8
  width: calc(var(--board-w) * 1px * var(--board-scale));
9
  height: calc(var(--board-h) * 1px * var(--board-scale));
10
  overflow: hidden;
11
}
12
.artboard {
13
  position: relative;
14
  width: calc(var(--board-w) * 1px);
15
  height: calc(var(--board-h) * 1px);
16
  transform: scale(var(--board-scale));
17
  transform-origin: top left;
18
}

3.6 Manifest 最小字段#

1
{
2
  "id": "card-wallet-illustration",
3
  "type": "bitmap",
4
  "source_bbox": { "x": 338, "y": 520, "width": 116, "height": 122 },
5
  "scaled_bbox": { "x": 338, "y": 520, "width": 116, "height": 122 },
6
  "z_index": 24,
7
  "asset": "assets/illustrations/card-wallet-illustration.png",
8
  "asset_pixel_width": 232,
9
  "asset_pixel_height": 244,
10
  "asset_scale_factor": 2,
11
  "css_display_width": 116,
12
  "css_display_height": 122,
13
  "transparent_required": true,
14
  "notes": "从当前源图裁切，保持原图露出比例"
15
}

关键等式：

1
asset_pixel_* = css_display_* × asset_scale_factor

布局永远看 CSS 显示尺寸；文件可以是 2x/3x/4x。

6.1 最常见的真实痛点#

• Image2 出图很美，Codex 直接还原复杂页经常崩（尤其深色、大屏、高密度 UI）。
• Figma 官方 MCP 要 Dev 账号（约 $20/月），国内也有人转 MasterGo / 莫高，但积分不便宜。
• 商业插件如 Codia AI Design（Screenshot → Editable Figma） 被多次点名：复杂图、深色背景还原更稳，但收费。
• 大量催更：web to figma 插件、PC 端 skill、Claude 版。

6.2 作者对关键质疑的回应#

6.3 工作流共识（程序员视角）#

评论区逐渐收敛出两条互补路径：

1. Image → Code（本 skill）
   适合：活动页、单一手机界面、快速 HTML/CSS 落地、没有设计源文件。

2. Image → 可编辑 Figma →（MCP）→ Code
   适合：后续还要改稿、深色复杂页、需要接近 100% 精确还原再进工程。

作者路线本质是：

1
Image2 出图
2
  → image-to-code（测量 / 切图 / 750 锁定 / 自适应 QA）
3
  →（可选）web to figma / importer 进入 Figma 微调
4
  → 需要工程化时再接组件与 design 文档

6.4 其他值得记的点#

• 有人问能否切 SVG、可改色 icon：合理增强方向，主帖未实现。
• 有人吐槽 Codex/Image2 难出真正透明图：skill 的价值之一就是程序化抠透明 + 审计，但复杂植物/花草类抠图仍难。
• 有科研开源软件作者表示要二开融合进自己的绘图工具链（帖 #67）。