把 Image2 生成的 UI 效果图转成前端可用的切图是 Vibe Coding 落地时最容易卡住的一步。生成一张界面图只需要一条提示词可图是单张位图没有 PSD 的分层也没有 Figma 的组件属性按钮、图标、背景、插画、文字全部被固定在同一个画布里。前端拿到图之后面临的问题非常具体哪一块能直接当img用哪一块必须切出来配 CSS哪一块根本不该用图片、而该写成真实 DOM 节点。这篇文章围绕一条完整流程展开先理解 AI 生成图和设计稿的本质差别再选择合适的切图路径然后给出基于 Python 和开源工具的批量切图方案最后讲清如何配合 Vibe Coding 把图直接变成代码。文中所有脚本都给出最小可运行示例原样拷贝到项目里按自己的目录名调整即可。适合三类读者用 Vibe Coding 做原型的前端开发者、需要把 AI 设计稿变成素材的 UI 设计师、以及正在准备前端面试、想系统整理图片资源处理方法的同学。整个切图链路不依赖任何闭源服务主要用到 Pillow、OpenCV、rembg、Real-ESRGAN 这些开源工具代码量不大但背后的判断逻辑值得反复推敲。1. 先搞清楚切图在切什么从“给设计稿切图”到“给 AI 图切图”1.1 传统切图解决什么问题传统前端流程里切图的对象是设计稿。UI 设计师交付 PSD、Sketch 或 Figma 文件前端开发把里面的图标、按钮、背景、插画导出成图片资源再配合 HTML 和 CSS 拼出页面。切图的核心目标有两个一是把“图层”变成“文件”二是让网页在渲染时只请求需要的图片避免整张设计稿被浏览器加载。正因如此切图的产物有固定套路小图标导出 PNG 或 SVG照片导出 JPG 或 WebP多个小图合成雪碧图需要透明背景的一律导出 PNG 并保留 alpha 通道。传统切图之所以轻松是因为设计稿里每个元素都独立存在导出就是选中图层后另存为。1.2 AI 生成 UI 图的三个结构性差异用 Image2 生成 UI 图拿到的是完全不同的东西。可以把生成图理解成“把整个设计稿拍扁成了一层”和设计稿的差异至少有三个方面。第一没有图层结构。图里的所有元素是像素不是矢量形状也不是可编辑文本。生成结果里如果有一段标题文字前端无法像打开设计稿那样直接复制文案只能肉眼读出来重新输入。第二元素边界不干净。AI 生成时会把阴影、渐变、圆角、描边全部融进同一块区域元素与元素之间经常有轻微的投影交叉想靠“一刀切”得到干净素材非常困难。手动裁剪出来之后边缘往往带着上一层的杂色。第三尺寸不是按组件设计的。Image2 生成的是整张画布通常是一个固定宽高比的 PNG 或 JPG。你需要的按钮可能只占画布中很小的区域直接裁剪会得到一个分辨率很低的位图放到 Retina 屏幕上就发虚。这三个差异决定了给 AI 图切图不能照搬“打开设计稿导出图层”的老路必须先判断素材类型再决定用裁剪、抠图、超分还是重绘。1.3 什么时候需要切图什么时候直接转代码AI 生成 UI 图之后通常有三种落地方式各自需要的处理手段完全不同。落地方式适用场景主要动作使用工具整页还原成代码需要可交互、可维护的真实页面截图交给 Vibe Coding 工具直接生成 HTML/CSS/React多模态编码助手抽取静态图片素材只需要图标、插画、背景等资源裁剪、抠图、超分、压缩Python、rembg、Real-ESRGAN原图直接当整幅背景活动页、海报页、视觉展示页缩放、压缩、转 WebPpngquant、cwebp一个常见的错误是拿到 AI 生成图后不管三七二十一先切图再把切出来的图片当成网页的全部。结果页面文字不可选择、不可被搜索引擎收录、放大后模糊、文件体积还大。正确顺序是先把图片里的内容按“位图资源、代码结构、矢量图标”分类再执行对应的处理方案。切图应该只处理那些真正需要保留为图片的部分。2. 切图前的准备生成策略、画布比例和命名规范2.1 在生成阶段就为切图留好条件切图质量很大程度上在生成阶段就已经决定了。如果提示词里没有约束元素边界AI 生成的图就会出现按钮压在图片上、图标和文字重叠、渐变背景铺满整屏等情况后续怎么切都别扭。这里有几条可以写进提示词的规则适用于大部分 UI 场景明确画布比例例如移动端页面指定3:4或9:16Web 端指定16:9。要求“组件化布局”让卡片、导航、按钮、底部栏在视觉上各自独立。要求元素之间保留足够间距避免阴影和描边交叉。如果需要后续抠图可要求关键组件背景为纯白色或纯色方便程序自动识别边界。文字内容使用真实语言不要用乱码占位符否则切图后仍然要重新还原文案。下面是一个参考提示词请生成一张移动端个人中心页面 UI 设计图。 要求 1. 画布比例 9:16宽度按 390 逻辑像素设计。 2. 页面结构从上到下依次为顶部导航、用户信息卡片、功能菜单列表、底部 Tab。 3. 每个区块之间保持 16px 以上间距区块不能重叠。 4. 图标和文字清晰文字使用真实的简体中文。 5. 整体配色偏浅色关键按钮和卡片使用纯白或浅灰背景。 6. 输出为一张完整大图不要输出多张图。这样生成的图后续无论是按坐标裁剪还是交给 Vibe Coding 转代码都有更清晰的边界参考。2.2 按“整页 组件特写”分两轮生成很多人只生成一次整页图然后从里面抠小元素。这个做法在 Image2 这类模型上效果不好因为越小的区域分摊到的像素越少裁剪出来往往只有几十像素宽。推荐改成两轮生成。第一轮生成整页布局图用于确定整体视觉风格和结构。第二轮从整页图里挑选需要重点使用的组件例如 Logo、头像插画、主按钮、背景纹理把这一小块区域通过图像编辑工具裁剪出来再喂给模型生成“组件特写图”。组件特写提示词大致这样写请参考我提供的图片单独生成一个风格一致的按钮素材。 要求 1. 按钮居中四周留白。 2. 背景为纯白色不要加任何阴影。 3. 输出正方形尺寸不小于 512x512。 4. 只输出按钮本身不要包含其他 UI 元素。第二轮的产物比直接裁剪更清晰透明背景也更容易处理。它的代价是生成次数变多但对设计师和前端来说素材质量比省一次生成更重要。2.3 建立切图清单和资源目录切图不是切完就结束。实际项目里前端需要知道每个素材叫什么、放在哪个目录、应该以什么尺寸使用。建议在项目里同时维护一份切图清单 JSON把生成图、裁剪区域、导出格式、目标尺寸全部记录下来。推荐目录结构my-app/ ├── design/ │ ├── ui_design_v1.png # 原始生成图 │ ├── ui_design_v1.prompt.txt # 生成提示词 ├── assets/ │ ├── icons/ # 图标尽量用 SVG │ ├── images/ # 照片、插画等位图 │ ├── buttons/ # 按钮状态图 │ └── sprite/ # 自动生成的雪碧图 ├── scripts/ │ ├── slice.py # 坐标裁剪脚本 │ ├── remove_bg.py # 背景去除脚本 │ └── build_sprite.py # 雪碧图生成脚本 └── manifest.json # 切图清单切图清单示例{ source: design/ui_design_v1.png, scale: 2, assets: [ { name: nav-logo, type: svg, from: recreate, path: assets/icons/nav-logo.svg }, { name: hero-illustration, type: png, region: [120, 260, 760, 920], transparent: true, path: assets/images/hero-illustration.png }, { name: btn-primary, type: png, region: [300, 1580, 620, 1720], transparent: true, path: assets/buttons/btn-primary.png } ] }字段说明 - region裁剪区域按 [left, top, right, bottom] 记录。 - scale原始生成图宽度除以设计逻辑宽度得到的缩放系数。 - type最终素材格式svg、png、webp 或 jpg。 - from素材来源crop 表示从原图裁剪recreate 表示重新绘制。 这份清单在交给 Vibe Coding 工具时可以直接作为上下文让模型知道素材放在哪里、应该怎么引用。 ## 3. 方案一按坐标和边缘检测批量切图 ### 3.1 环境准备Python、Pillow、OpenCV 当 AI 生成图的结构足够清晰时用脚本切图比手工抠图高效得多。这里选择 Python 生态因为 Pillow、OpenCV、rembg 可以覆盖裁剪、检测、抠图、压缩的完整链路。 先创建虚拟环境并安装依赖 bash python -m venv .venv source .venv/bin/activate # Windows 下使用 .venv\Scripts\activate pip install pillow opencv-python numpy rembg onnxruntime 依赖说明Pillow 负责图片的读取、裁剪和保存OpenCV 负责边缘检测和自动分区rembg 负责去除背景onnxruntime 是 rembg 的推理后端。如果网络环境安装较慢可以只安装 pillow opencv-python-headless不装 rembg先把裁剪流程跑通。 ### 3.2 手工坐标裁剪先定位再切割 最直接的切图方式是按坐标把大图裁成若干小块。Pillow 的 crop() 方法接收一个 (left, top, right, bottom) 元组坐标是像素值。 先打印原图尺寸确认坐标系 python from PIL import Image src Image.open(design/ui_design_v1.png) print(src.size) # 例如 (780, 1742) print(src.mode) # 例如 RGB 或 RGBA 如果不知道每个组件的具体坐标可以用 OpenCV 的窗口交互选择区域 python import cv2 img cv2.imread(design/ui_design_v1.png) roi cv2.selectROI(Pick region, img) cv2.destroyAllWindows() x, y, w, h roi print(fleft{x}, top{y}, right{x w}, bottom{y h}) 得到坐标后再用 Pillow 裁剪 python from PIL import Image src Image.open(design/ui_design_v1.png) # 手动填入上一步得到的坐标 left, top, right, bottom 300, 1580, 620, 1720 region src.crop((left, top, right, bottom)) region.save(assets/buttons/btn-primary.png) 这里要注意selectROI 返回的是 (x, y, w, h)而 Pillow 的 crop() 需要的是 (left, top, right, bottom)转换时不要写错。裁剪完成后可以写一个批量循环把清单 JSON 里所有 region 字段一次处理完。 ### 3.3 自动检测分区用边缘和白色分隔线找区域 如果 UI 图是浅色背景、各区块边界明显可以尝试自动分割。思路是先把图片转灰度再用 Canny 边缘检测找轮廓最后用边界框圈出候选区域。 python import cv2 img cv2.imread(design/ui_design_v1.png) gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) edges cv2.Canny(gray, 50, 150) contours, _ cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) for c in contours: x, y, w, h cv2.boundingRect(c) if w * h 2000: continue print(x, y, w, h) 这个脚本输出的每个 (x, y, w, h) 就是一个候选素材区域。实际操作中要加两个过滤条件面积过滤去掉噪点位置过滤排除画布边缘的装饰线。自动检测的结果不一定完美它更适合用来辅助定位而不是完全替代人工确认。 另一种思路是检测水平分隔线。AI 生成图里区块之间往往有留白把“接近纯白的行”找出来就能把页面切成导航区、内容区、底部区。示例脚本只依赖 NumPy python import numpy as np from PIL import Image src Image.open(design/ui_design_v1.png).convert(RGB) arr np.asarray(src) row_mean arr.mean(axis(1, 2)) threshold 245 separators [i for i, v in enumerate(row_mean) if v threshold] # 将连续的白行合并成一条分隔带 bands [] start None for i in separators: if start is None: start i elif i - prev 3: bands.append((start, prev)) start i prev i if start is not None: bands.append((start, prev)) print(bands) text band 里记录的是“白色间隔带”的起始和结束行号用它们可以把整张页面纵向切开。这个方案只适用于浅色、分隔明显的图如果生成图背景是深色渐变建议改用边缘检测或人工裁剪。 ### 3.4 去除背景与透明化 从 UI 大图里裁下来的元素背后通常还带着原图底色。直接用在页面上会有一块突兀的矩形背景。这时可以用 rembg 自动抠图。 命令行方式最简单 bash rembg i assets/buttons/btn-primary.png assets/buttons/btn-primary.png 如果希望在脚本流程里调用用 Python API python from rembg import remove from PIL import Image input_path assets/buttons/btn-primary.png output_path assets/buttons/btn-primary-transparent.png in_img Image.open(input_path) out_img remove(in_img) out_img.save(output_path) rembg 是基于分割模型的开源抠图工具对“主体清晰、背景单一”的 UI 元素效果不错。但它不是万能的遇到主体和背景颜色接近、或者图形本身有大量镂空纹理时抠出来的边缘会残留半透明杂色。这种情况不要反复调参直接回到生成阶段把元素单独生成在纯色背景上抠图质量会明显提高。 ### 3.5 放大和压缩切图之后的必经步骤 从大图裁出来的小元素分辨率往往不够。如果目标是在 Retina 屏幕上使用建议先超分再导出。 Real-ESRGAN 是开源超分工具可以从官方仓库克隆项目后运行 bash git clone https://github.com/xinntao/Real-ESRGAN.git cd Real-ESRGAN pip install -r requirements.txt python inference_realesrgan.py -n RealESRGAN_x4plus \ -i ../assets/buttons/btn-primary.png \ -o ../assets/buttons/btn-primary-4x.png 超分后的图尺寸变大必须再做压缩否则切图流程会造成页面体积失控。常见压缩工具 bash # pngquant 压缩 PNG保留透明通道 pngquant --quality60-80 256 assets/images/hero-illustration.png # cwebp 把 PNG 或 JPG 转成 WebP cwebp -q 75 assets/images/hero-illustration.png -o assets/images/hero-illustration.webp 压缩原则是带透明通道的图用 PNG照片类素材转 WebP小图标尽量用 SVG 而不是位图。这样切图产物在体积、清晰度、兼容性之间才平衡。 ## 4. 方案二让 Vibe Coding 直接承担“切图 转代码” ### 4.1 截图转代码的执行路径 很多 AI 生成 UI 图的最终目标不是“得到素材”而是“得到页面”。如果是这种诉求切图就不该是第一步应该先把整张图交给具备视觉能力的编码助手让它把布局、配色、间距、文字先还原成真实代码再只对图片类素材做切图。 这个路径和传统切图完全不同传统流程是“设计稿 → 切图 → 写代码”Vibe Coding 流程变成了“生成图 → 描述需求 → 生成页面 → 只切必要素材”。执行时要注意AI 编码工具读图能力再强也读不出“按钮没有图层”“文字是位图”这些限制必须由开发者把素材边界判断清楚再通过提示词约束它。 ### 4.2 提示词模板让模型输出切图清单 给 Vibe Coding 工具的一张截图足够表达视觉但不足以表达工程要求。建议在提示词里同时要求它“还原页面”和“输出切图清单”。 text 我把一张 AI 生成的 UI 截图放在 ./design/ui_design.png。 请把它还原成一个 React 页面要求如下 1. 页面宽度按 390 x 844 的逻辑尺寸实现使用 Tailwind CSS。 2. 布局和配色尽量还原截图但文字不要使用截图里的像素文字一律使用真实文本。 3. 图标优先使用 lucide-react 图标库没有对应图标时输出素材清单交给切图脚本处理。 4. 截图中的插画、照片、复杂纹理需要保留为位图资源输出一个 JSON 切图清单 包含素材名称、裁剪坐标、目标尺寸、透明背景标记。 5. 生成后把位图素材放在 public/assets 目录并给出页面组件代码。 这个模板的关键是第一条把“使用真实文本”明确写出来否则 AI 会把截图里的文字区域直接复制成图片页面看起来像但完全不可维护。第三条也很重要图标优先走图标库避免生成一堆位图图标。 ### 4.3 切图成果在代码里的落点 Vibe Coding 生成页面后切图产物要落到代码里而不是停留在设计目录。按常规前端项目素材通常放在 public/assets 或 src/assets通过 import 或绝对路径引用。 tsx import hero from /assets/images/hero-illustration.webp; export default function HomePage() { return ( main classNamemin-h-screen bg-gray-50 header img src/assets/icons/nav-logo.svg altlogo classNameh-8 / /header section classNamepx-6 img src{hero} alt插画 classNamew-full rounded-2xl / /section /main ); } 需要强调一点AI 生成的代码结构只能作为初稿不能直接上线。组件拆分、图片懒加载、alt 文案、响应式断点、错误占位图都要人工过一遍。切图素材表最好也随代码提交到仓库后续设计图更新时通过 diff 就能看出哪些素材变了。 ## 5. 切图后的验证和质量检查 ### 5.1 像素、透明、体积三项检查 切图完成后第一件事不是直接写页面而是做三项基础检查。第一项是尺寸是否符合预期第二项是透明通道是否正确第三项是体积是否在合理范围。 用 file 和 Python 可以快速验证 bash file assets/icons/nav-home.png python from PIL import Image im Image.open(assets/icons/nav-home.png) print(im.size, im.mode) assert im.mode in (RGBA, LA), 透明通道缺失 透过去检查一个常见错误有些压缩工具会把 PNG 的 alpha 通道丢失导出的图在浅色页面看不出问题放到深色背景上就出现一块白底。 ### 5.2 适配 Retina 和响应式场景的尺寸换算 切图最容易出问题的是尺寸换算。AI 生成图的“逻辑设计宽度”和“实际像素宽度”通常不一致。比如整页图实际宽度是 780 像素而设计时按 390 逻辑像素设计那么缩放系数是 2所有从图上量出来的像素都要除以 2。 | 目标场景 | 逻辑尺寸 | 导出建议 | | --- | --- | --- | | 普通 Web 图标 | 24x24 | 导出 24px 即可 | | Retina Web 图标 | 24x24 | 导出 48pxCSS 里写 24px | | 移动端 2x 资源 | 40x40 | 导出 80px | | 全幅背景 | 容器 1440px | 导出 1920px 以上并压缩 | 前端使用多倍图的标准做法是图片实际像素大于 CSS 显示像素尺寸写在 CSS 或 width/height 属性里浏览器会自动缩放。切图脚本里建议统一维护一个 scale 参数避免每个素材各自换算。 ### 5.3 回归验证把素材拼回页面 切好的素材只有在页面里拼起来才能确认坐标和尺寸没有偏差。最小验证方式是写一个临时 HTML把原始生成图和切图产物并排放在一起对比。 html !doctype html html body stylemargin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; div h3原始图/h3 img srcdesign/ui_design_v1.png stylewidth: 100%; / /div div h3切图还原/h3 div stylewidth: 390px; position: relative; img srcassets/images/hero-illustration.webp stylewidth: 100%; border-radius: 16px; / button styleposition: absolute; bottom: 20px; left: 20px; width: 120px; height: 44px; 按钮 /button /div /div /body /html 如果切图角色在页面中的位置、大小、圆角、间距和原始图一致才算真正完成。这一步不能省因为坐标裁剪只能保证“切出来了”不能保证“放对了”。 ## 6. 常见问题排查模糊、黑底、错位、文字不可编辑 ### 6.1 排查顺序 切图出问题时按固定顺序排查能省很多时间。 1. 先看原始生成图的分辨率是否足够。 2. 再看裁剪坐标是否输错(x, y, w, h) 和 (left, top, right, bottom) 有没有混用。 3. 再检查导出格式PNG 是否保留 RGBA 透明通道JPG 是否出现白底。 4. 再检查 DPR 换算图片实际宽度和 CSS 显示宽度是否匹配。 5. 最后检查压缩参数过度压缩会导致边缘发虚和颜色断层。 ### 6.2 问题现象和解决方案对照表 | 问题现象 | 常见原因 | 检查方式 | 处理建议 | | --- | --- | --- | --- | | 切出来模糊 | 原图分辨率不足或放大使用 | 查看原图尺寸和素材尺寸 | 用 Real-ESRGAN 超分后再切或减少使用尺寸 | | 页面里尺寸偏大/偏小 | DPR 或逻辑宽度没有换算 | 对比生成图宽度和设计宽度 | 统一维护 scale 参数并换算 | | 透明图变成黑底/白底 | alpha 通道丢失或保存为 JPG | file 命令查看格式PIL 检查 mode | 使用 PNG/RGBA压缩时保留透明通道 | | 背景抠不干净 | 主体和背景颜色接近 | 放大查看边缘杂色 | 回生成阶段换纯色背景或人工蒙版处理 | | 文字变成一团像素 | 位图不包含文字层 | 在放大视图里看文字边缘 | 在代码里用真实文本重建 | | 素材总体积过大 | 整页图被拆成多个大图 | 统计 assets 目录体积 | 只切必要区域照片转 WebP图标转 SVG | ### 6.3 最容易踩的三个坑 坑一拿整张图直接当背景。AI 生成的 UI 图里包含真实文字整图当背景后文字既不可选中也无法被搜索引擎收录放大屏还会被裁切。正确做法是背景只保留纹理和无文字部分有文字的区域全部用代码重建。 坑二试图从位图里提取“可编辑文字”。Image2 输出的文字就是像素任何切图工具都无法把它还原成可编辑文本。遇到文案要修改只能在 HTML 里重新输入并尽量使用系统字体或 Web 字体而不是再切一张文字图。 坑三裁剪时把内边距和阴影裁进去。素材边缘带上的投影会造成页面里的视觉间距和原图不一致。裁剪时应该记录元素的可视边界再根据阴影范围做几像素的扩展如果是按钮素材建议连按钮背景图一起交给 CSS用 background-size: contain 控制而不是抠到只剩内部图形。 ## 7. 最佳实践一套可复用的切图流程清单 ### 7.1 一次切图应经历的完整步骤 把前面的内容整理成一张可以反复使用的检查清单。 - [ ] 生成前提示词要求组件化布局、元素不重叠、关键组件使用纯色背景。 - [ ] 生成后保存原始图和提示词建立 design/ 目录。 - [ ] 分类判断每个元素是位图资源、代码结构还是 SVG 图标。 - [ ] 生成组件特写图对需要高清晰度的按钮、图标、插画单独生成小图。 - [ ] 裁剪用 selectROI 或手填坐标把区域记录进 manifest.json。 - [ ] 抠图需要透明背景的资源用 rembg 处理。 - [ ] 超分分辨率不足的资源用 Real-ESRGAN 放大。 - [ ] 压缩PNG 用 pngquant照片类转 WebP。 - [ ] 验证检查尺寸、透明通道、体积再拼回页面做回归。 - [ ] 提交素材、切图脚本、manifest.json、提示词一起提交到仓库。 ### 7.2 不同资源类型的技术选型 | 素材类型 | 推荐格式 | 说明 | | --- | --- | --- | | 图标 | SVG | 优先重绘成 SVG避免位图放大锯齿 | | 按钮、卡片 | PNGRGBA | 需要透明背景时使用 PNG | | 照片、插画 | WebP / JPG | 体积优先用 WebP兼容性要求高时用 JPG | | 整幅视觉背景 | WebP | 配合 CSS background-size 使用 | | 大量小图标 | Snowflake/Sprite | 脚本自动生成雪碧图减少请求数 | pngquant 和 cwebp 都支持批量处理切图脚本里可以在完成裁剪后自动执行压缩形成一条完整的流水线。 ### 7.3 后续扩展方向 切图脚本可以继续演进成自动化管线。常见方向有两个一是把 Python 脚本接入到前端项目构建流程里设计图更新后自动输出所有资源和 manifest二是把切图清单纳入代码评审范围每次设计稿变更时通过 diff 明确素材变化避免线上资源被静默替换。 对准备前端面试的同学可以把这套流程里涉及的核心知识点串成回答框架图片格式选型、DPR 适配、透明通道原理、图片懒加载、体积优化、SVG 与位图的取舍。实际动手切一次图比背十个知识点更有说服力。 回到最开始的问题Image2 生成的 UI 图怎么转切图真正的答案不是把图片切成碎片而是把素材按“位图资源、代码结构、矢量图标”三类拆开。封面级的插画、照片继续还原成 PNG 或 WebP按钮、标题、表单、文字在代码里重建图标尽量重绘成 SVG。能判断每一块素材该走哪条路比会写裁剪脚本更重要。这套判断力才是 Vibe Coding 时代前端和 UI 协作里最值钱的部分。 AI生成UI图转前端切图：从像素到代码的完整方案
把 Image2 生成的 UI 效果图转成前端可用的切图是 Vibe Coding 落地时最容易卡住的一步。生成一张界面图只需要一条提示词可图是单张位图没有 PSD 的分层也没有 Figma 的组件属性按钮、图标、背景、插画、文字全部被固定在同一个画布里。前端拿到图之后面临的问题非常具体哪一块能直接当img用哪一块必须切出来配 CSS哪一块根本不该用图片、而该写成真实 DOM 节点。这篇文章围绕一条完整流程展开先理解 AI 生成图和设计稿的本质差别再选择合适的切图路径然后给出基于 Python 和开源工具的批量切图方案最后讲清如何配合 Vibe Coding 把图直接变成代码。文中所有脚本都给出最小可运行示例原样拷贝到项目里按自己的目录名调整即可。适合三类读者用 Vibe Coding 做原型的前端开发者、需要把 AI 设计稿变成素材的 UI 设计师、以及正在准备前端面试、想系统整理图片资源处理方法的同学。整个切图链路不依赖任何闭源服务主要用到 Pillow、OpenCV、rembg、Real-ESRGAN 这些开源工具代码量不大但背后的判断逻辑值得反复推敲。1. 先搞清楚切图在切什么从“给设计稿切图”到“给 AI 图切图”1.1 传统切图解决什么问题传统前端流程里切图的对象是设计稿。UI 设计师交付 PSD、Sketch 或 Figma 文件前端开发把里面的图标、按钮、背景、插画导出成图片资源再配合 HTML 和 CSS 拼出页面。切图的核心目标有两个一是把“图层”变成“文件”二是让网页在渲染时只请求需要的图片避免整张设计稿被浏览器加载。正因如此切图的产物有固定套路小图标导出 PNG 或 SVG照片导出 JPG 或 WebP多个小图合成雪碧图需要透明背景的一律导出 PNG 并保留 alpha 通道。传统切图之所以轻松是因为设计稿里每个元素都独立存在导出就是选中图层后另存为。1.2 AI 生成 UI 图的三个结构性差异用 Image2 生成 UI 图拿到的是完全不同的东西。可以把生成图理解成“把整个设计稿拍扁成了一层”和设计稿的差异至少有三个方面。第一没有图层结构。图里的所有元素是像素不是矢量形状也不是可编辑文本。生成结果里如果有一段标题文字前端无法像打开设计稿那样直接复制文案只能肉眼读出来重新输入。第二元素边界不干净。AI 生成时会把阴影、渐变、圆角、描边全部融进同一块区域元素与元素之间经常有轻微的投影交叉想靠“一刀切”得到干净素材非常困难。手动裁剪出来之后边缘往往带着上一层的杂色。第三尺寸不是按组件设计的。Image2 生成的是整张画布通常是一个固定宽高比的 PNG 或 JPG。你需要的按钮可能只占画布中很小的区域直接裁剪会得到一个分辨率很低的位图放到 Retina 屏幕上就发虚。这三个差异决定了给 AI 图切图不能照搬“打开设计稿导出图层”的老路必须先判断素材类型再决定用裁剪、抠图、超分还是重绘。1.3 什么时候需要切图什么时候直接转代码AI 生成 UI 图之后通常有三种落地方式各自需要的处理手段完全不同。落地方式适用场景主要动作使用工具整页还原成代码需要可交互、可维护的真实页面截图交给 Vibe Coding 工具直接生成 HTML/CSS/React多模态编码助手抽取静态图片素材只需要图标、插画、背景等资源裁剪、抠图、超分、压缩Python、rembg、Real-ESRGAN原图直接当整幅背景活动页、海报页、视觉展示页缩放、压缩、转 WebPpngquant、cwebp一个常见的错误是拿到 AI 生成图后不管三七二十一先切图再把切出来的图片当成网页的全部。结果页面文字不可选择、不可被搜索引擎收录、放大后模糊、文件体积还大。正确顺序是先把图片里的内容按“位图资源、代码结构、矢量图标”分类再执行对应的处理方案。切图应该只处理那些真正需要保留为图片的部分。2. 切图前的准备生成策略、画布比例和命名规范2.1 在生成阶段就为切图留好条件切图质量很大程度上在生成阶段就已经决定了。如果提示词里没有约束元素边界AI 生成的图就会出现按钮压在图片上、图标和文字重叠、渐变背景铺满整屏等情况后续怎么切都别扭。这里有几条可以写进提示词的规则适用于大部分 UI 场景明确画布比例例如移动端页面指定3:4或9:16Web 端指定16:9。要求“组件化布局”让卡片、导航、按钮、底部栏在视觉上各自独立。要求元素之间保留足够间距避免阴影和描边交叉。如果需要后续抠图可要求关键组件背景为纯白色或纯色方便程序自动识别边界。文字内容使用真实语言不要用乱码占位符否则切图后仍然要重新还原文案。下面是一个参考提示词请生成一张移动端个人中心页面 UI 设计图。 要求 1. 画布比例 9:16宽度按 390 逻辑像素设计。 2. 页面结构从上到下依次为顶部导航、用户信息卡片、功能菜单列表、底部 Tab。 3. 每个区块之间保持 16px 以上间距区块不能重叠。 4. 图标和文字清晰文字使用真实的简体中文。 5. 整体配色偏浅色关键按钮和卡片使用纯白或浅灰背景。 6. 输出为一张完整大图不要输出多张图。这样生成的图后续无论是按坐标裁剪还是交给 Vibe Coding 转代码都有更清晰的边界参考。2.2 按“整页 组件特写”分两轮生成很多人只生成一次整页图然后从里面抠小元素。这个做法在 Image2 这类模型上效果不好因为越小的区域分摊到的像素越少裁剪出来往往只有几十像素宽。推荐改成两轮生成。第一轮生成整页布局图用于确定整体视觉风格和结构。第二轮从整页图里挑选需要重点使用的组件例如 Logo、头像插画、主按钮、背景纹理把这一小块区域通过图像编辑工具裁剪出来再喂给模型生成“组件特写图”。组件特写提示词大致这样写请参考我提供的图片单独生成一个风格一致的按钮素材。 要求 1. 按钮居中四周留白。 2. 背景为纯白色不要加任何阴影。 3. 输出正方形尺寸不小于 512x512。 4. 只输出按钮本身不要包含其他 UI 元素。第二轮的产物比直接裁剪更清晰透明背景也更容易处理。它的代价是生成次数变多但对设计师和前端来说素材质量比省一次生成更重要。2.3 建立切图清单和资源目录切图不是切完就结束。实际项目里前端需要知道每个素材叫什么、放在哪个目录、应该以什么尺寸使用。建议在项目里同时维护一份切图清单 JSON把生成图、裁剪区域、导出格式、目标尺寸全部记录下来。推荐目录结构my-app/ ├── design/ │ ├── ui_design_v1.png # 原始生成图 │ ├── ui_design_v1.prompt.txt # 生成提示词 ├── assets/ │ ├── icons/ # 图标尽量用 SVG │ ├── images/ # 照片、插画等位图 │ ├── buttons/ # 按钮状态图 │ └── sprite/ # 自动生成的雪碧图 ├── scripts/ │ ├── slice.py # 坐标裁剪脚本 │ ├── remove_bg.py # 背景去除脚本 │ └── build_sprite.py # 雪碧图生成脚本 └── manifest.json # 切图清单切图清单示例{ source: design/ui_design_v1.png, scale: 2, assets: [ { name: nav-logo, type: svg, from: recreate, path: assets/icons/nav-logo.svg }, { name: hero-illustration, type: png, region: [120, 260, 760, 920], transparent: true, path: assets/images/hero-illustration.png }, { name: btn-primary, type: png, region: [300, 1580, 620, 1720], transparent: true, path: assets/buttons/btn-primary.png } ] }字段说明 - region裁剪区域按 [left, top, right, bottom] 记录。 - scale原始生成图宽度除以设计逻辑宽度得到的缩放系数。 - type最终素材格式svg、png、webp 或 jpg。 - from素材来源crop 表示从原图裁剪recreate 表示重新绘制。 这份清单在交给 Vibe Coding 工具时可以直接作为上下文让模型知道素材放在哪里、应该怎么引用。 ## 3. 方案一按坐标和边缘检测批量切图 ### 3.1 环境准备Python、Pillow、OpenCV 当 AI 生成图的结构足够清晰时用脚本切图比手工抠图高效得多。这里选择 Python 生态因为 Pillow、OpenCV、rembg 可以覆盖裁剪、检测、抠图、压缩的完整链路。 先创建虚拟环境并安装依赖 bash python -m venv .venv source .venv/bin/activate # Windows 下使用 .venv\Scripts\activate pip install pillow opencv-python numpy rembg onnxruntime 依赖说明Pillow 负责图片的读取、裁剪和保存OpenCV 负责边缘检测和自动分区rembg 负责去除背景onnxruntime 是 rembg 的推理后端。如果网络环境安装较慢可以只安装 pillow opencv-python-headless不装 rembg先把裁剪流程跑通。 ### 3.2 手工坐标裁剪先定位再切割 最直接的切图方式是按坐标把大图裁成若干小块。Pillow 的 crop() 方法接收一个 (left, top, right, bottom) 元组坐标是像素值。 先打印原图尺寸确认坐标系 python from PIL import Image src Image.open(design/ui_design_v1.png) print(src.size) # 例如 (780, 1742) print(src.mode) # 例如 RGB 或 RGBA 如果不知道每个组件的具体坐标可以用 OpenCV 的窗口交互选择区域 python import cv2 img cv2.imread(design/ui_design_v1.png) roi cv2.selectROI(Pick region, img) cv2.destroyAllWindows() x, y, w, h roi print(fleft{x}, top{y}, right{x w}, bottom{y h}) 得到坐标后再用 Pillow 裁剪 python from PIL import Image src Image.open(design/ui_design_v1.png) # 手动填入上一步得到的坐标 left, top, right, bottom 300, 1580, 620, 1720 region src.crop((left, top, right, bottom)) region.save(assets/buttons/btn-primary.png) 这里要注意selectROI 返回的是 (x, y, w, h)而 Pillow 的 crop() 需要的是 (left, top, right, bottom)转换时不要写错。裁剪完成后可以写一个批量循环把清单 JSON 里所有 region 字段一次处理完。 ### 3.3 自动检测分区用边缘和白色分隔线找区域 如果 UI 图是浅色背景、各区块边界明显可以尝试自动分割。思路是先把图片转灰度再用 Canny 边缘检测找轮廓最后用边界框圈出候选区域。 python import cv2 img cv2.imread(design/ui_design_v1.png) gray cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) edges cv2.Canny(gray, 50, 150) contours, _ cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) for c in contours: x, y, w, h cv2.boundingRect(c) if w * h 2000: continue print(x, y, w, h) 这个脚本输出的每个 (x, y, w, h) 就是一个候选素材区域。实际操作中要加两个过滤条件面积过滤去掉噪点位置过滤排除画布边缘的装饰线。自动检测的结果不一定完美它更适合用来辅助定位而不是完全替代人工确认。 另一种思路是检测水平分隔线。AI 生成图里区块之间往往有留白把“接近纯白的行”找出来就能把页面切成导航区、内容区、底部区。示例脚本只依赖 NumPy python import numpy as np from PIL import Image src Image.open(design/ui_design_v1.png).convert(RGB) arr np.asarray(src) row_mean arr.mean(axis(1, 2)) threshold 245 separators [i for i, v in enumerate(row_mean) if v threshold] # 将连续的白行合并成一条分隔带 bands [] start None for i in separators: if start is None: start i elif i - prev 3: bands.append((start, prev)) start i prev i if start is not None: bands.append((start, prev)) print(bands) text band 里记录的是“白色间隔带”的起始和结束行号用它们可以把整张页面纵向切开。这个方案只适用于浅色、分隔明显的图如果生成图背景是深色渐变建议改用边缘检测或人工裁剪。 ### 3.4 去除背景与透明化 从 UI 大图里裁下来的元素背后通常还带着原图底色。直接用在页面上会有一块突兀的矩形背景。这时可以用 rembg 自动抠图。 命令行方式最简单 bash rembg i assets/buttons/btn-primary.png assets/buttons/btn-primary.png 如果希望在脚本流程里调用用 Python API python from rembg import remove from PIL import Image input_path assets/buttons/btn-primary.png output_path assets/buttons/btn-primary-transparent.png in_img Image.open(input_path) out_img remove(in_img) out_img.save(output_path) rembg 是基于分割模型的开源抠图工具对“主体清晰、背景单一”的 UI 元素效果不错。但它不是万能的遇到主体和背景颜色接近、或者图形本身有大量镂空纹理时抠出来的边缘会残留半透明杂色。这种情况不要反复调参直接回到生成阶段把元素单独生成在纯色背景上抠图质量会明显提高。 ### 3.5 放大和压缩切图之后的必经步骤 从大图裁出来的小元素分辨率往往不够。如果目标是在 Retina 屏幕上使用建议先超分再导出。 Real-ESRGAN 是开源超分工具可以从官方仓库克隆项目后运行 bash git clone https://github.com/xinntao/Real-ESRGAN.git cd Real-ESRGAN pip install -r requirements.txt python inference_realesrgan.py -n RealESRGAN_x4plus \ -i ../assets/buttons/btn-primary.png \ -o ../assets/buttons/btn-primary-4x.png 超分后的图尺寸变大必须再做压缩否则切图流程会造成页面体积失控。常见压缩工具 bash # pngquant 压缩 PNG保留透明通道 pngquant --quality60-80 256 assets/images/hero-illustration.png # cwebp 把 PNG 或 JPG 转成 WebP cwebp -q 75 assets/images/hero-illustration.png -o assets/images/hero-illustration.webp 压缩原则是带透明通道的图用 PNG照片类素材转 WebP小图标尽量用 SVG 而不是位图。这样切图产物在体积、清晰度、兼容性之间才平衡。 ## 4. 方案二让 Vibe Coding 直接承担“切图 转代码” ### 4.1 截图转代码的执行路径 很多 AI 生成 UI 图的最终目标不是“得到素材”而是“得到页面”。如果是这种诉求切图就不该是第一步应该先把整张图交给具备视觉能力的编码助手让它把布局、配色、间距、文字先还原成真实代码再只对图片类素材做切图。 这个路径和传统切图完全不同传统流程是“设计稿 → 切图 → 写代码”Vibe Coding 流程变成了“生成图 → 描述需求 → 生成页面 → 只切必要素材”。执行时要注意AI 编码工具读图能力再强也读不出“按钮没有图层”“文字是位图”这些限制必须由开发者把素材边界判断清楚再通过提示词约束它。 ### 4.2 提示词模板让模型输出切图清单 给 Vibe Coding 工具的一张截图足够表达视觉但不足以表达工程要求。建议在提示词里同时要求它“还原页面”和“输出切图清单”。 text 我把一张 AI 生成的 UI 截图放在 ./design/ui_design.png。 请把它还原成一个 React 页面要求如下 1. 页面宽度按 390 x 844 的逻辑尺寸实现使用 Tailwind CSS。 2. 布局和配色尽量还原截图但文字不要使用截图里的像素文字一律使用真实文本。 3. 图标优先使用 lucide-react 图标库没有对应图标时输出素材清单交给切图脚本处理。 4. 截图中的插画、照片、复杂纹理需要保留为位图资源输出一个 JSON 切图清单 包含素材名称、裁剪坐标、目标尺寸、透明背景标记。 5. 生成后把位图素材放在 public/assets 目录并给出页面组件代码。 这个模板的关键是第一条把“使用真实文本”明确写出来否则 AI 会把截图里的文字区域直接复制成图片页面看起来像但完全不可维护。第三条也很重要图标优先走图标库避免生成一堆位图图标。 ### 4.3 切图成果在代码里的落点 Vibe Coding 生成页面后切图产物要落到代码里而不是停留在设计目录。按常规前端项目素材通常放在 public/assets 或 src/assets通过 import 或绝对路径引用。 tsx import hero from /assets/images/hero-illustration.webp; export default function HomePage() { return ( main classNamemin-h-screen bg-gray-50 header img src/assets/icons/nav-logo.svg altlogo classNameh-8 / /header section classNamepx-6 img src{hero} alt插画 classNamew-full rounded-2xl / /section /main ); } 需要强调一点AI 生成的代码结构只能作为初稿不能直接上线。组件拆分、图片懒加载、alt 文案、响应式断点、错误占位图都要人工过一遍。切图素材表最好也随代码提交到仓库后续设计图更新时通过 diff 就能看出哪些素材变了。 ## 5. 切图后的验证和质量检查 ### 5.1 像素、透明、体积三项检查 切图完成后第一件事不是直接写页面而是做三项基础检查。第一项是尺寸是否符合预期第二项是透明通道是否正确第三项是体积是否在合理范围。 用 file 和 Python 可以快速验证 bash file assets/icons/nav-home.png python from PIL import Image im Image.open(assets/icons/nav-home.png) print(im.size, im.mode) assert im.mode in (RGBA, LA), 透明通道缺失 透过去检查一个常见错误有些压缩工具会把 PNG 的 alpha 通道丢失导出的图在浅色页面看不出问题放到深色背景上就出现一块白底。 ### 5.2 适配 Retina 和响应式场景的尺寸换算 切图最容易出问题的是尺寸换算。AI 生成图的“逻辑设计宽度”和“实际像素宽度”通常不一致。比如整页图实际宽度是 780 像素而设计时按 390 逻辑像素设计那么缩放系数是 2所有从图上量出来的像素都要除以 2。 | 目标场景 | 逻辑尺寸 | 导出建议 | | --- | --- | --- | | 普通 Web 图标 | 24x24 | 导出 24px 即可 | | Retina Web 图标 | 24x24 | 导出 48pxCSS 里写 24px | | 移动端 2x 资源 | 40x40 | 导出 80px | | 全幅背景 | 容器 1440px | 导出 1920px 以上并压缩 | 前端使用多倍图的标准做法是图片实际像素大于 CSS 显示像素尺寸写在 CSS 或 width/height 属性里浏览器会自动缩放。切图脚本里建议统一维护一个 scale 参数避免每个素材各自换算。 ### 5.3 回归验证把素材拼回页面 切好的素材只有在页面里拼起来才能确认坐标和尺寸没有偏差。最小验证方式是写一个临时 HTML把原始生成图和切图产物并排放在一起对比。 html !doctype html html body stylemargin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; div h3原始图/h3 img srcdesign/ui_design_v1.png stylewidth: 100%; / /div div h3切图还原/h3 div stylewidth: 390px; position: relative; img srcassets/images/hero-illustration.webp stylewidth: 100%; border-radius: 16px; / button styleposition: absolute; bottom: 20px; left: 20px; width: 120px; height: 44px; 按钮 /button /div /div /body /html 如果切图角色在页面中的位置、大小、圆角、间距和原始图一致才算真正完成。这一步不能省因为坐标裁剪只能保证“切出来了”不能保证“放对了”。 ## 6. 常见问题排查模糊、黑底、错位、文字不可编辑 ### 6.1 排查顺序 切图出问题时按固定顺序排查能省很多时间。 1. 先看原始生成图的分辨率是否足够。 2. 再看裁剪坐标是否输错(x, y, w, h) 和 (left, top, right, bottom) 有没有混用。 3. 再检查导出格式PNG 是否保留 RGBA 透明通道JPG 是否出现白底。 4. 再检查 DPR 换算图片实际宽度和 CSS 显示宽度是否匹配。 5. 最后检查压缩参数过度压缩会导致边缘发虚和颜色断层。 ### 6.2 问题现象和解决方案对照表 | 问题现象 | 常见原因 | 检查方式 | 处理建议 | | --- | --- | --- | --- | | 切出来模糊 | 原图分辨率不足或放大使用 | 查看原图尺寸和素材尺寸 | 用 Real-ESRGAN 超分后再切或减少使用尺寸 | | 页面里尺寸偏大/偏小 | DPR 或逻辑宽度没有换算 | 对比生成图宽度和设计宽度 | 统一维护 scale 参数并换算 | | 透明图变成黑底/白底 | alpha 通道丢失或保存为 JPG | file 命令查看格式PIL 检查 mode | 使用 PNG/RGBA压缩时保留透明通道 | | 背景抠不干净 | 主体和背景颜色接近 | 放大查看边缘杂色 | 回生成阶段换纯色背景或人工蒙版处理 | | 文字变成一团像素 | 位图不包含文字层 | 在放大视图里看文字边缘 | 在代码里用真实文本重建 | | 素材总体积过大 | 整页图被拆成多个大图 | 统计 assets 目录体积 | 只切必要区域照片转 WebP图标转 SVG | ### 6.3 最容易踩的三个坑 坑一拿整张图直接当背景。AI 生成的 UI 图里包含真实文字整图当背景后文字既不可选中也无法被搜索引擎收录放大屏还会被裁切。正确做法是背景只保留纹理和无文字部分有文字的区域全部用代码重建。 坑二试图从位图里提取“可编辑文字”。Image2 输出的文字就是像素任何切图工具都无法把它还原成可编辑文本。遇到文案要修改只能在 HTML 里重新输入并尽量使用系统字体或 Web 字体而不是再切一张文字图。 坑三裁剪时把内边距和阴影裁进去。素材边缘带上的投影会造成页面里的视觉间距和原图不一致。裁剪时应该记录元素的可视边界再根据阴影范围做几像素的扩展如果是按钮素材建议连按钮背景图一起交给 CSS用 background-size: contain 控制而不是抠到只剩内部图形。 ## 7. 最佳实践一套可复用的切图流程清单 ### 7.1 一次切图应经历的完整步骤 把前面的内容整理成一张可以反复使用的检查清单。 - [ ] 生成前提示词要求组件化布局、元素不重叠、关键组件使用纯色背景。 - [ ] 生成后保存原始图和提示词建立 design/ 目录。 - [ ] 分类判断每个元素是位图资源、代码结构还是 SVG 图标。 - [ ] 生成组件特写图对需要高清晰度的按钮、图标、插画单独生成小图。 - [ ] 裁剪用 selectROI 或手填坐标把区域记录进 manifest.json。 - [ ] 抠图需要透明背景的资源用 rembg 处理。 - [ ] 超分分辨率不足的资源用 Real-ESRGAN 放大。 - [ ] 压缩PNG 用 pngquant照片类转 WebP。 - [ ] 验证检查尺寸、透明通道、体积再拼回页面做回归。 - [ ] 提交素材、切图脚本、manifest.json、提示词一起提交到仓库。 ### 7.2 不同资源类型的技术选型 | 素材类型 | 推荐格式 | 说明 | | --- | --- | --- | | 图标 | SVG | 优先重绘成 SVG避免位图放大锯齿 | | 按钮、卡片 | PNGRGBA | 需要透明背景时使用 PNG | | 照片、插画 | WebP / JPG | 体积优先用 WebP兼容性要求高时用 JPG | | 整幅视觉背景 | WebP | 配合 CSS background-size 使用 | | 大量小图标 | Snowflake/Sprite | 脚本自动生成雪碧图减少请求数 | pngquant 和 cwebp 都支持批量处理切图脚本里可以在完成裁剪后自动执行压缩形成一条完整的流水线。 ### 7.3 后续扩展方向 切图脚本可以继续演进成自动化管线。常见方向有两个一是把 Python 脚本接入到前端项目构建流程里设计图更新后自动输出所有资源和 manifest二是把切图清单纳入代码评审范围每次设计稿变更时通过 diff 明确素材变化避免线上资源被静默替换。 对准备前端面试的同学可以把这套流程里涉及的核心知识点串成回答框架图片格式选型、DPR 适配、透明通道原理、图片懒加载、体积优化、SVG 与位图的取舍。实际动手切一次图比背十个知识点更有说服力。 回到最开始的问题Image2 生成的 UI 图怎么转切图真正的答案不是把图片切成碎片而是把素材按“位图资源、代码结构、矢量图标”三类拆开。封面级的插画、照片继续还原成 PNG 或 WebP按钮、标题、表单、文字在代码里重建图标尽量重绘成 SVG。能判断每一块素材该走哪条路比会写裁剪脚本更重要。这套判断力才是 Vibe Coding 时代前端和 UI 协作里最值钱的部分。