企业官网建设流程全解析

最近社区里讨论“用 GPT-Image-2 生成 UI 图，然后直接拿去切图开发”的声音越来越多。很多人第一次看到 AI 生成的高保真前端设计图时，第一反应是“这还要设计师干嘛”，第二反应才是问题：这张图好看是好看，但我要怎么做成页面？图标在哪一层？按钮怎么按？字体能不能复制出来？更现实的是，开发提测时，设计图根本没法交付。

这篇文章就想把这件事讲透：AI 生成 UI 图之后，到底能不能切图？怎么切图？切出来的资源是直接扔给前端，还是要经过中间层处理？Vibe Coding 和 UI 设计师在这条链路里分别承担什么角色？

先给一个明确判断：从当前生态看，AI 生成 UI 设计图的能力已经接近可用的水平，但从“图”到“前端代码资源”的最后一公里，仍然要靠一套规范的工程化流程来补足。真正拉开工作效率差距的，不是生成图片那一刻，而是切图、标注、命名、导出和落地接入这个环节。

读这篇文章，你会搞明白 AI 生成 UI 图的边界在哪，传统切图和 AI 场景下的切图有什么不同，以及从一张设计图到前端可用的多倍率资源，完整链路应该怎么搭。顺手也会解决几个高频坑：切出来的图不清晰、命名乱、边缘毛刺、图标不能改色、自动生成代码没法用等等。

1. 这篇文章真正要解决的问题

如果你最近在刷 Vibe Coding 相关的内容，一定见过这种场景：开发者打开一个 AI 编程平台，输入一句话，AI 直接生成一个界面。左边聊天，右边预览，全程不写一行代码，页面就出来了。看起来前端开发好像要被 AI 取代了。

但真实工程里，事情没有这么简单。

Vibe Coding 这个词强调“用感觉写代码”，让 AI 根据自然语言描述生成应用界面和交互。对内部工具、Demo、原型验证、个人项目来说，这套打法效率极高。可一旦进入正式产品开发，尤其是多端上线、品牌视觉统一、组件库复用、性能和可访问性有要求的项目，AI 直接生成的整页代码通常并不够用。原因很多，比如生成结果不稳定、没有走设计规范、和现有项目结构对不上。不过这些都是代码层的问题，不是本文的核心。

本文想解决的是另一个被低估的环节：如果你手里只有一张 AI 生成的 UI 图片，比如用 GPT-Image-2 生成的高保真界面图，如何把它转成前端真正可用的切图资源？哪些部分可以直接切，哪些部分必须重绘或重做？UI 设计师拿到 AI 图之后，应该改什么、留什么？前端开发拿到 AI 图之后，先做什么、后做什么？

这个问题的核心是：AI 一次生成的是一张像素图，而不是一套可编辑的设计源文件。切图，本质上是从“平面视觉”到“界面资源”的工程转换，中间夹着图层拆解、尺寸规范、资源命名、多倍率导出、格式选择等一连串决策。

很多新手踩的坑，就是把 AI 生成图直接当成设计稿，拿 PS 一格格抠，最后要么切出来是毛边，要么图标和背景粘连，要么导出 1 倍图在 Retina 屏幕上糊成一片。这些问题都不是靠“更仔细抠图”能解决的，而是流程设计问题。

所以，这篇文章不是要教你怎么用 GPT-Image-2 生成 UI 图，而是重点讲生成之后的事。从概念、工具、流程到前端接入，一条线跑通。

2. 基础概念：AI 生成 UI、切图、Vibe Coding，到底各指什么

2.1 AI 生成 UI 图

AI 生成 UI 图，目前主流做法是直接用文生图模型生成界面视觉稿。GPT-Image-2 这类模型在生成界面时，已经能在一定程度上理解布局、配色、卡片、按钮、导航栏等界面元素，生成结果很像真实 App 截图或者 Web 页面。

注意：它生成的本质上是一张位图。这个“位图”意味着什么？意味着图片上每一个像素都是独立的颜色值，没有图层概念。你看到的一个按钮，在图像数据里并不是一个“按钮”，只是一堆像素的集合。你不能像打开 Figma 源文件那样，点一下按钮，然后修改它的文字颜色。

这是理解后续所有切图痛点的基础。

2.2 切图

传统 UI 切图，就是把设计稿中的图标、按钮、背景、插图等切分成独立图片文件，供前端在页面中引用。切图不只是“抠图”，它还包含：

• 确定切片范围，保证不留白、不切破；
• 选择合适的格式，图标用 PNG/SVG，照片用 JPEG/WebP；
• 导出 1x、2x、3x 等多倍率资源；
• 规范化命名，方便开发和维护；
• 标注尺寸、间距、颜色等设计信息。

过去，UI 设计师在 Sketch、PS、Figma 里切完图，交给开发；现在 AI 生成图没有现成的图层结构，切图就从“设计稿导出”变成了“图像识别 + 重建 + 导出”的组合任务。

2.3 Vibe Coding 与切图的关系

Vibe Coding 本身不依赖切图，因为 AI 编程工具生成的是代码，不是图片资源。但在实际工作流里，Vibe Coding 生成前端页面时，通常也需要视觉参考：要么是用户上传一张参考图，要么是 AI 自己生成一张界面图，再照着实现。

这里就出现了资源缺口：AI 编程工具虽然能“照着图片”写出相似布局的代码，但它很难把图片里的图标、纹理、特殊字体精确切出来并应用到代码里。真到了要精确还原品牌视觉、使用特定插画、贴入某个背景素材时，开发还是需要一张张切好的资源图。

所以，Vibe Coding 工作流里，切图的角色没有消失，而是变成了“按需生成”的思路：AI 负责搭骨架，人为切图负责补血肉。

3. AI 生成 UI 图的适用边界：哪些能切，哪些必须重画

不少 UI 设计师第一次接触 AI 生成图时，心态很矛盾：一方面觉得 AI 生成的界面很有灵感，另一方面觉得这东西根本没法进入生产流程。更稳妥的判断是：AI 生成图更适合作为高保真概念稿、灵感参考、组件风格探索，而不是直接作为交付稿。

下面按元素类型分析切图难度。

3.1 适合直接切图的部分

• 背景纹理、渐变背景、噪点、光效，这类元素对像素精度要求不高，切成整图后前端直接铺底即可；
• 插画、3D 渲染图、装饰性图形，这些本来就以图片形式存在，切出来直接用没有太大问题；
• 通栏横幅、卡片封面、运营位配图，它们本身是“内容图片”而不是“界面控件”，切图边界明确；
• 非标准形状的异形按钮背景，在 CSS 难以实现的纹理质感场景下，切图是合理方案；
• 特殊字体渲染效果（如艺术字标题），如果产品设计要求必须用位图保证效果，也可以切图兜底。

3.2 不适合直接切图，必须重绘或重建的部分

• 按钮、输入框、导航栏等基础控件。这类元素用代码实现更容易维护，如果切成图片，尺寸一变就糊，换主题色就得重新切；
• 图标。AI 生成的图标通常边缘不干净，且只有单一尺寸。正确做法是找到或重绘成 SVG，或者从图标库替换；
• 需要响应用户交互的控件状态（hover、active、disabled），AI 图只有静态一态，必须由设计师补做；
• 包含可选中、可复制的文字。AI 生成图里的文字是像素，不能被搜索引擎索引、不能被屏幕阅读器读取、不能复制，生产环境必须用真实文字替换；
• 需要多语言适配的界面。图片上的文字无法做国际化，必须重建为代码文本。

这里有一个很实用的判断公式：如果这个元素在未来产品中可能是“活”的（要变化、要交互、要适配、要替换），就不要切图；如果是“死”的（纯视觉、不变化、可整图替换），才考虑切图。

3.3 一个例子

假设你用 GPT-Image-2 生成了一张音乐 App 播放页。页面里有封面图、遮罩层、进度条、控制按钮、歌词文字。

正确切图思路是：封面图切成一张方图，遮罩层用半透明渐变实现，进度条和控制按钮用代码实现，歌词用真实文本排版，唱片机中心的装饰纹理可以切图。

错误做法是：整个播放页截成一张大图，然后在一张图上覆盖透明按钮。这种方案看似省事，实际上会让整个页面失去动态性和可访问性，任何微调都牵一发动全身。

4. 从 AI 生成图到前端切图资源的完整流程

下面给出一个工程上可行的 AI UI 图转切图流程。这套流程不需要你是一个资深 UI 设计师，但它要求你具备基本的图像处理和前端资源管理常识。

4.1 第一步：整理 AI 生成图

先用工具对 AI 生成图做预处理。如果原图包含多余边框、水印、文字说明，先裁掉；如果图片分辨率过低，先升分辨率再做后续步骤。清晰的原图是切图质量的前提。

预处理建议：

• 使用图片编辑工具（如 Photoshop、GIMP、Figma）裁掉多余区域；
• 降噪、提高对比度，让边缘更清晰；
• 如果需要放大，可以使用支持超分能力的开源工具，但不要盲目依赖，放大的同时要检查细节是否失真。

4.2 第二步：按“活/死”原则拆分界面

在 Photoshop、Figma 或在线设计工具里，把 AI 生成图拆成多个独立的图层或画板。

这里建议手动拆分，而不是依赖一键 AI 抠图。为什么？因为界面切图不只要抠出元素，还要确定元素之间的相对位置、尺寸、间距。手动拆分时，你可以顺便记下这些信息。

拆分时按以下维度：

• 背景层：整图背景、渐变、纹理；
• 图片位：封面、头像、插画、运营图；
• 图标与控件：按钮、输入框、Tab 栏、开关、图标；
• 文字层：标题、正文、按钮文字（需要替换为真实文本）；
• 装饰层：光效、投影、特殊形状。

每个独立元素都要放在单独的图层或画板里，元素之间不要互相粘连。

4.3 第三步：命名切片

很多团队的前端资源命名混乱，根源是切图阶段就不规范。建议从一开始就建立命名规则。

常用规则示例：

模块_元素_状态_倍率.png player_btn_play_normal@2x.png nav_icon_back_normal@3x.png

命名要满足：

• 小写字母、数字、下划线或连字符；
• 不允许中文；
• 不允许空格；
• 状态写在最后面，方便批量替换；
• 倍率后缀跟在文件名末尾。

如果项目里已经存在组件库和资源规范，直接沿用团队现有命名规则，别自创一套。

4.4 第四步：导出多倍率资源

移动端开发中，1x、2x、3x 是最常见的设计倍率。如果 AI 生成图尺寸本身较大，可以从高分辨率版本逐级缩放导出。注意不要从低分辨率放大，宁可重新生成或重绘关键元素。

导出工具方面：

• Figma 可以直接按切片导出多倍率；
• Photoshop 可以靠“导出为”或插件批量导出；
• 如果用的是在线一键切图工具，注意检查导出结果是否包含透明通道、是否有白底、命名是否符合规则。

导出后，前端项目里通常按以下结构组织资源：

assets/ images/ common/ module-a/ module-b/

4.5 第五步：生成前端接入代码

切图完成后，前端工作反而简单了。

典型的接入方式有两种：一种是直接写 CSS/HTML，把切图作为背景或 img 标签引用；另一种是放入组件库，封装成 UI 组件，供页面调用。

在 Vibe Coding 场景下，可以让 AI 编程工具根据你提供的资源目录和设计说明，自动生成页面代码，再人工微调。这样 AI 负责效率和骨架，切图负责视觉还原精度，两边各干各擅长的。

5. 环境准备与前置条件

为了跑通本文的完整流程，建议准备以下环境。注意：版本以实际项目为准，下面只列用途和一般选择，不捆绑具体版本号。

5.1 硬件与系统

• 一台可运行图像处理软件的电脑，操作系统不限，Windows、macOS、Linux 均可；
• 8GB 以上内存，16GB 更稳妥；
• 对本地运行 Comfy UI 等图像工作流的读者，建议具备独立显卡，显存越大越好。

5.2 图像处理工具

必须有至少一款支持图层、切片、导出的工具。推荐优先级：

• Figma（在线，免费版够用，团队协作方便）；
• Photoshop（功能最强，适合精细化抠图）；
• 即时设计或 MasterGo（国产替代，操作逻辑贴近 Figma）；
• GIMP（开源免费，适合不依赖商业软件的场景）。

5.3 前端开发环境

• Node.js 环境，建议 LTS 版本；
• 包管理器 npm 或 pnpm；
• 一个前端项目脚手架，Vite 或 Webpack 都可以；
• 代码编辑器，VS Code 足够。

5.4 辅助脚本

后面会给出一个 Python 批处理脚本，用来批量生成多倍率资源。需要 Python 环境，版本 3.8 以上即可，依赖 Pillow 库。

安装依赖：

pip install Pillow

6. 完整示例：从 AI UI 图到前端资源

下面用一个最小示例，把整个流程走一遍。假设我们有一张 AI 生成的音乐播放页 UI 图，现在需要把封面图、播放按钮、进度条切片、背景切片取出来，接入到前端项目里。

6.1 目录结构

先规划项目资源目录：

project/ public/ images/ player/ bg_dark.png album_cover.png progress_bar.png progress_thumb.png btn_play@2x.png btn_play@3x.png src/ components/ Player.vue App.vue

6.2 在 Figma 中切片

在 Figma 中把 AI 生成图拖入画布，选中需要导出的元素，点击右侧 “Slice”（切片）按钮，框选区域。命名切片时，按模块_元素_状态规则填写。

Figma 的切片面板会显示每个切片的导出选项。勾选 1x、2x、3x，选择 PNG 格式，点击导出，就会生成一组多倍率资源。

这个过程本质上和传统设计稿切图没有区别，区别只在于：传统设计稿有矢量图层，导出的资源边缘是纯矢量光滑的；AI 位图切片则需要观察边缘是否有白边、锯齿，必要时在导出前手动清理。

6.3 使用 Python 脚本批量缩放生成多倍率资源

如果手上的工具不方便按倍率导出，可以用脚本批量生成。下面这个脚本会把当前目录下的source文件夹里的原始 PNG 文件，按 1x、2x、3x 比例缩放到output文件夹。

# 文件路径：scripts/generate_multiplier_images.py from PIL import Image from pathlib import Path BASE_SCALE = 1.0 MULTIPLIERS = [1, 2, 3] SOURCE_DIR = Path("source") OUTPUT_DIR = Path("output") def main(): OUTPUT_DIR.mkdir(exist_ok=True) for img_path in SOURCE_DIR.glob("*.png"): name = img_path.stem for multiplier in MULTIPLIERS: with Image.open(img_path) as img: new_width = int(img.width * multiplier * BASE_SCALE) new_height = int(img.height * multiplier * BASE_SCALE) resized = img.resize((new_width, new_height), Image.LANCZOS) output_file = OUTPUT_DIR / f"{name}@{multiplier}x.png" resized.save(output_file) print(f"Generated: {output_file} ({new_width}x{new_height})") if __name__ == "__main__": main()

使用方式：

mkdir -p source output # 把原始切图放入 source 目录 python scripts/generate_multiplier_images.py

脚本说明：

• 读取source下的全部 PNG 文件；
• 依次按 1 倍、2 倍、3 倍缩放；
• 输出文件名带@1x、@2x、@3x后缀；
• 使用Image.LANCZOS插值算法，缩放质量相对更好。

注意：这个脚本假设原始图片已经是最佳质量。如果原始图片本身就不清晰，缩放只是把同样的模糊放大到更多像素，并不能恢复细节。

6.4 前端组件接入示例

切图资源准备好后，前端组件代码很直接。下面是一个 Vue 3 组件的示例，演示如何引用多倍率图标和背景切图。

<!-- 文件路径：src/components/Player.vue --> <template> <div class="player"> <div class="player-bg"></div> <img class="player-cover" src="/images/player/album_cover.png" alt="专辑封面" /> <div class="player-progress"> <div class="player-progress-bar"></div> <div class="player-progress-thumb"></div> </div> <button class="player-play" aria-label="播放"> <img src="/images/player/btn_play@2x.png" srcset="/images/player/btn_play@2x.png 2x, /images/player/btn_play@3x.png 3x" alt="播放按钮" /> </button> </div> </template> <script setup> // 播放逻辑省略，本文只演示切图资源接入方式 </script> <style scoped> .player { position: relative; width: 375px; height: 667px; overflow: hidden; border-radius: 16px; } .player-bg { position: absolute; inset: 0; /* 背景切图 */ background: url("/images/player/bg_dark.png") center / cover no-repeat; } .player-cover { position: absolute; top: 80px; left: 50%; width: 240px; height: 240px; transform: translateX(-50%); border-radius: 12px; /* 封面切图 */ } .player-progress { position: absolute; left: 32px; right: 32px; bottom: 120px; height: 4px; } .player-progress-bar { width: 60%; height: 100%; border-radius: 2px; background-color: #ff5a5f; } .player-progress-thumb { position: absolute; top: -6px; left: calc(60% - 8px); width: 16px; height: 16px; border-radius: 50%; background-color: #ffffff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .player-play { position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%); border: none; background: none; cursor: pointer; } .player-play img { width: 56px; height: 56px; } </style>

6.5 启动前端项目验证

在项目根目录执行：

npm install npm run dev

浏览器打开本地地址，检查播放页是否按预期渲染。重点检查：

• 背景是否铺满、是否变形；
• 封面图是否清晰；
• 播放按钮在不同 DPR 屏幕下是否模糊；
• 控件和切图边缘有没有毛刺。

7. 运行结果与效果验证

7.1 如何判断切图质量合格

判断切图质量，不能只看“图能不能显示”。建议按以下清单逐项检查：

7.2 用浏览器校验多倍率资源

打开浏览器开发者工具，把设备模拟切换到 iPhone 类设备，查看Network面板中btn_play的请求记录。如果加载的是btn_play@3x.png，说明srcset生效；如果只加载了btn_play@2x.png，说明当前模拟设备的 DPR 是 2，属正常现象。

在普通电脑显示器上，有时候 DPR 是 1，这时候即使提供了 2x、3x 资源，浏览器也会优先加载 1x 资源的匹配 URL。这是预期行为，不代表资源配错。

7.3 失败时先看哪里

如果页面切图显示异常，按以下顺序排查：

1. 先看浏览器 Network 面板，资源是否请求成功，路径是否存在；
2. 再检查生成的文件名和后缀，@2x前的名称是否和代码引用一致；
3. 检查切片时是否选了错误的画板，导致导出空白或导出尺寸为 0；
4. 检查图片格式，透明背景需要 PNG，如果误用 JPG 会显示白底；
5. 检查 CSS 中是否错误设置了固定宽高比例，导致图片被拉伸变形。

8. 常见问题与排查思路

9. 最佳实践与工程建议

9.1 能矢量就矢量，能代码就代码，位图只做最后兜底

AI 生成 UI 图最大的误区，是把它当成唯一的视觉真源。更合理的定位是：用 AI 图做概念探索和灵感参考，进入开发前，把界面拆成代码结构 + 少量位图切片的组合。按钮、输入框、导航栏这类高频控件，优先用代码实现；只有背景纹理、复杂插画、运营配图这类“内容型图片”，才考虑切图使用。

这样做的收益非常直接：代码可控、体积更小、易于响应式适配、方便换肤和国际化。

9.2 建立自己的资源命名规范

建议每个团队都有一套切图命名约定。没有规范的团队，资源目录会随时间迅速腐化。一个好的约定至少包含：

• 模块前缀，如nav_、player_、profile_；
• 元素名称，如btn_、icon_、bg_、cover_；
• 状态后缀，如_normal、_pressed、_disabled；
• 倍率后缀，如@2x、@3x。

命名不规范，后期维护成本非常高，尤其是当多个开发同时在改同一页面时。

9.3 自动化切图流程

如果你经常需要处理 AI 生成的 UI 图，建议把“切图 + 导出 + 重命名 + 压缩”做成半自动化脚本。Python 脚本可以处理重复性缩放任务，Figma 插件可以用来导出多倍率资源，Git 管理资源变更可以保证协作可追溯。

还可以考虑在项目里配置图片压缩工具（如 TinyPNG API 或本地压缩库），在打包时自动压缩位图资源，减小产物体积。

9.4 高风险操作注意事项

在切图过程中，如果要对原始生成图做缩放、裁剪、颜色调整，请保留一份原始未修改文件。不要直接在原图上反复覆盖保存，否则之后想重新切图会找不到干净素材。

涉及到公开上线的产品，要确认 AI 生成素材是否符合项目的版权与合规要求。部分模型和服务对生成内容的使用范围有约定，团队在正式商用前需要核实，不清晰的引用场景宁可联系设计团队重做。

9.5 和 Vibe Coding 结合时，给 AI 一个“资源清单”

如果你在用 AI 编程工具辅助开发，不要把 AI 生成的整张 UI 图直接丢给工具让它生成代码。更高效的做法是：先人工完成切片，把切图放到项目资源目录，然后在给 AI 的指令里写清楚资源文件路径、命名规则和设计要点。例如：

使用 /public/images/player/bg_dark.png 作为播放页背景， 封面图使用 /public/images/player/album_cover.png， 播放按钮使用 /public/images/player/btn_play@2x.png，并提供 @2x/@3x 适配。 布局结构参考音乐播放器，底部放置播放控制条。

这样 AI 生成的代码会更可控，而不是自己从图片里“猜”一堆并不存在的图层，然后写出一堆偏离目标的 CSS。

9.6 UI 设计师的新工作方式

对 UI 设计师来说，AI 生成 UI 图不一定是冲击，反而可以是提效工具。设计师可以把 AI 生成图当成高保真草稿，直接在 Figma 里临摹结构、重建组件、补状态、做标注。AI 负责快速产出视觉灵感，设计师负责把它变成真正可交付的工程稿。

这种模式下，设计师的核心能力从“从零画图”转向“判断 + 重构 + 规范化”。这也解释了为什么很多人说，AI 时代设计师的价值不在于能不能画出来，而在于能不能把一张好看的图变成一套能维护的设计系统。

10. 总结与后续学习方向

写到最后，把关键判断再强调一遍：AI 生成的 UI 图很好用，但它只是起点，不是终点。把 AI 图转成切图资源，靠的不是某个神奇的“一键切图”工具，而是一套包含元素拆分、活死判断、命名规范、多倍率导出和前端接入的完整工程流程。

在这条链路里，Vibe Coding 解决的是“怎么写代码更高效”的问题，AI 图像生成解决的是“怎么快速得到视觉参考”的问题，切图解决的是“怎么把视觉变成真实运行资源”的问题。三者不是替代关系，而是叠加关系。

如果你是 UI 设计师，下一步可以尝试在 Figma 里把自己的 AI 生成稿重构成组件库，看看哪些元素被抽象成设计变量，哪些元素必须保留为位图资源。如果你是前端开发者，建议先拿一个自己负责的页面做实验：把现有页面截图反推到 AI 生成图，再走一遍本文的切图流程，你会直观感受到两种工作流之间的差异。

以后看到“AI 一分钟生成 UI，前端要失业”这类说法，不用急着焦虑，也不用急着反驳。你只要追问一句：那切图呢？这个看似不起眼的问题，往往能区分出谁在跟风讨论 AI，谁在真的用 AI 做工程。