企业官网建设流程全解析

这次不聊概念，直接聊一个卡住很多人的具体问题：用 GPT-Image-2（下面简称 Image2）生成了一张前端 UI 设计图，接下来怎么把它转成真正能交给 Vibe Coding、能放进前端项目里的切图资源？

很多人的操作路径是：让 Image2 出图 → 截图 → 拖进代码里 → 发现比例不对、按钮带背景、透明区域全丢失、切出来的图莫名其妙是“浏览器的好几个窗口”。然后就没有然后了。

先说结论：Image2 适合做 UI 设计稿生成，不适合直接做切图。它输出的是整张位图，没有图层、没有分组、没有导出标注。切图这件事，应该用“设计工具框选 + 程序化裁剪 + 视觉模型辅助定位”的组合打法来做。

这篇文章会围绕一条可落地的切图工作流展开：统一画布 → 确定切图区域 → 批量裁剪 → 规范命名 → 前端接入 → 接入 Vibe Coding 闭环。整个过程用开源工具就能跑通，脚本可以直接复制改造成自己的本地流水线。

1. 核心能力速览

在展开细节之前，先把这套切图方案的规格放在前面，方便你快速判断到底适不适合自己。

这套流程的核心思路是：把“切图”从图像编辑操作，拆成“区域定义 + 批量裁剪 + 命名输出”三个可重复执行的步骤。不管原图是设计工具导出的还是 AI 生成的，都能用同一套流水线处理。

2. 为什么 Image2 生成的 UI 图不能直接切图

很多同学第一次尝试让 AI 直接切图时，会遇到“切出来的图是浏览器的好几个”这种问题。这不是工具坏了，而是对 AI 生成图片的底层逻辑有误解。

2.1 位图没有图层和分组

Figma 里的切图，本质是把矢量图层或组件按导出规则生成为位图资源。它的前提是存在图层结构：一个按钮是一个 Frame，一个图标是一个 Vector，切图只是“按指定范围导出”。

Image2 生成的图片是一张光栅位图。像素就是像素，没有“这个区域是按钮”“这个图标可以单独导出”的语义信息。你看到的导航栏、卡片、按钮，全是渲染好的颜色和形状，没有分组层级。

2.2 尺寸和比例不稳定

图像生成模型输出尺寸可以指定，但同一段提示词多次生成，画布比例、元素间距、圆角大小都可能出现轻微差异。前端需要的是精确尺寸和固定命名，这两者之间存在天然矛盾。

2.3 模型不理解“切图”的工程约定

如果你直接跟图像模型说“帮我把这张图切一下”，它更可能做的是：

• 重新绘制一遍这张图，并且画成几个画面的拼贴；
• 把页面上出现的浏览器窗口、标签栏、多个视口当成独立内容，拆出“浏览器好几个”；
• 给出一张带切分隔线的示意图，而不是真正可用的透明 PNG 资源。

这不是模型太笨，而是“切图”这个词在图像生成任务里缺少足够明确的工程约束。模型没有坐标概念，没有导出目录概念，也没有 @2x 倍率概念。

所以正确做法是：把切图任务从生成任务里拆出来，交给专门的处理工具完成。

3. 适用场景与使用边界

这套切图工作流适合谁？不适合谁？先说清楚边界，避免你花时间搭起来发现不符合预期。

3.1 适合的场景

• Vibe Coding 开发者：用 AI 生成设计稿，再通过切图脚本拿到图片资源，最后让 AI 写 React / Vue / HTML 页面。
• UI 设计师：快速把 Image2 生成的视觉概念稿切碎成可分析组件，用于参考或二次设计。
• 前端工程师：需要把一张完整设计图快速拆成页面里实际用到的图标、按钮、卡片背景。
• 个人项目 / 快速原型：不追求像素级还原，能拿到可用的图片资源就行。

3.2 不适合的场景

• 需要可编辑矢量源文件的团队：AI 位图切不出 SVG 图层。建议让设计师用 Figma 重绘，或用设计系统组件直接拼。
• 需要严格设计规范的团队：AI 生成图里的字号、间距、颜色不一定符合设计规范，切图只能拿到视觉素材，规范仍需人工定。
• 需要交付整个设计系统：按钮的 hover / disabled / loading 状态，AI 一张图给不全，需要设计师补充或继续定向生成。

3.3 使用边界与合规提醒

• AI 生成的 UI 图可能参考了训练数据中已有产品的视觉风格，商用前请做相似度检查，避免直接套用他人完整的界面布局和图标组合。
• 如果设计稿中包含真实产品的 Logo、品牌标识、人物肖像，必须确认拥有使用授权。
• 切图后用于文档、博客或分享时，避免把未公开的产品设计稿直接外发。
• 涉及自动化批量处理时，建议先在本地测试环境跑通，再上生产目录。

4. 推荐切图工作流

把整个流程理顺，能少踩很多坑。核心是：先定标准，再生成，最后切分。

4.1 整体流程

Image2 生成 UI 设计图 ↓ 检查原图与目标分辨率 ↓ 统一画布尺寸（可选，脚本等比缩放） ↓ 确定切图区域 ├── 手动框选：Figma / PS / 在线工具 ├── 网格切分：规则九宫格或横向条带 └── AI 视觉识别：让多模态模型返回区域坐标 ↓ 批量裁剪 + 命名 + 保存 ↓ 前端目录接入 / 交给 Vibe Coding 写组件

4.2 生成 UI 图时的提示词建议

切图之前，第一步是让 Image2 生成一张“适合切分的图”。提示词里提前加约束，能显著降低后续处理成本：

• 明确视口尺寸：例如“1440px wide web page design”。
• 明确单视口：例如“single browser viewport, no multiple windows”。
• 明确组件边界：例如“distinct sections with clear spacing”。
• 避免复杂艺术字体：例如“use simple UI typography”。

这样出来的图，区域边界更清晰，裁剪时不容易把相邻组件带进来。

4.3 切图前统一画布

不同批次的 UI 图宽度可能不一致。前端页面引用图片时，需要确定的尺寸基线。建议先写一个统一预处理脚本，把所有设计图等比缩放到目标宽度。

from pathlib import Path from PIL import Image src_dir = Path("design_images") out_dir = Path("normalized") out_dir.mkdir(exist_ok=True) target_width = 1440 for png in src_dir.glob("*.png"): img = Image.open(png) ratio = target_width / img.width new_size = (target_width, int(img.height * ratio)) img = img.resize(new_size, Image.LANCZOS) img.save(out_dir / png.name) print(f"normalized: {png.name} -> {img.size}")

统一后再切图，坐标才能落到同一套参照系里。

5. 手动切图：Figma / PS / 在线工具

如果你只想快速处理一两张图，手动工具是最直接的路径。

5.1 Figma 批量导出

Figma 的优势是框架导出方便，适合人工圈定切图区域。

1. 新建 Figma 文件，把 Image2 生成的图片直接拖进画布。
2. 用Frame工具在需要切分的组件上画边框，例如导航栏、按钮、卡片、图标区域。
3. 在右侧Export面板设置导出格式，通常选 PNG，倍率选1x/2x/3x。
4. 勾选多个 Frame，点击Export批量导出。
5. 导出后文件会自动按 Frame 名称命名。

需要注意：Figma 里框选的是图片范围，不是图层。所以要手动调整 Frame 边界，确保贴合组件边缘。

5.2 Photoshop 导出

Photoshop 适合精细处理圆角、阴影和边缘杂色。

1. 打开图片，用矩形选框工具圈住目标区域。
2. 按Ctrl+J复制图层。
3. 右键图层按快速导出为 PNG。
4. 如果原图不是透明背景，要先抠图或增加蒙版。

同样的流程可以配合动作录制，做成批处理，但工作量比 Figma 略大。

5.3 在线工具

在线裁剪工具适合临时裁一张图，不需要完整工作流。但要注意：不要把涉及隐私或未公开的设计稿上传到不明网站。建议优先使用本地工具或开源脚本。

这里更推荐的是后面这套程序化方案，因为可以复用、可批量、可版本管理。

6. 程序化切图：Python 批量裁剪

手动切一张图可以，切 100 张图就必须程序化。用 Python + Pillow 可以很快搭出一套本地切图流水线。

6.1 准备环境

# 创建虚拟环境（可选） python -m venv .venv source .venv/bin/activate # Windows 下为 .venv\Scripts\activate # 安装依赖 pip install pillow opencv-python

Pillow 负责图片读取、裁剪、缩放，OpenCV 负责边缘检测和自动轮廓提取（辅助用）。

6.2 区域裁剪脚本

把切图区域定义放到一个 JSON 文件里，然后用 Python 脚本批量执行。这样每次要切新图时，只需要改 JSON，不用改代码。

import json from pathlib import Path from PIL import Image def load_regions(json_path): with open(json_path, "r", encoding="utf-8") as f: return json.load(f) def crop_ui(input_path, regions, output_dir): img = Image.open(input_path) output_dir = Path(output_dir) output_dir.mkdir(parents=True, exist_ok=True) for region in regions: name = region["name"] x = int(region["x"]) y = int(region["y"]) w = int(region["width"]) h = int(region["height"]) # 裁剪，超出图像边界时做 clamp box = ( max(0, x), max(0, y), min(img.width, x + w), min(img.height, y + h) ) crop = img.crop(box) # 可选：按 @2x 倍率放大 scale = region.get("scale", 1) if scale != 1: crop = crop.resize( (int(crop.width * scale), int(crop.height * scale)), Image.LANCZOS ) output_path = output_dir / f"{name}.png" crop.save(output_path) print(f"saved: {output_path} ({crop.size})") if __name__ == "__main__": crop_ui("normalized/ui_design.png", load_regions("regions.json"), "output")

对应的regions.json示例：

[ {"name": "navbar", "x": 0, "y": 0, "width": 1440, "height": 80}, {"name": "hero-title", "x": 120, "y": 160, "width": 800, "height": 120}, {"name": "btn-primary", "x": 120, "y": 320, "width": 180, "height": 48}, {"name": "card-cover", "x": 940, "y": 200, "width": 380, "height": 240} ]

6.3 批量处理整个目录

把输入从单张图改成目录遍历，就变成批量流水线了。

from pathlib import Path from PIL import Image src_dir = Path("normalized") out_dir = Path("output") out_dir.mkdir(exist_ok=True) for png in src_dir.glob("*.png"): img = Image.open(png) # 示例：按视觉区块习惯切两条 top = img.crop((0, 0, img.width, img.height // 2)) bottom = img.crop((0, img.height // 2, img.width, img.height)) top.save(out_dir / f"{png.stem}_top.png") bottom.save(out_dir / f"{png.stem}_bottom.png") print(f"processed: {png.name}")

6.4 OpenCV 自动找区域（辅助）

如果 UI 图里的组件边界比较明显，可以用 OpenCV 的轮廓检测自动生成候选区域，再人工筛选，减少手动写坐标的工作量。

import cv2 img = cv2.imread("normalized/ui_design.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 i, cnt in enumerate(contours): x, y, w, h = cv2.boundingRect(cnt) # 过滤过小区域 if w < 30 or h < 30: continue print(f"region_{i}: x={x}, y={y}, width={w}, height={h}")

轮廓检测只是辅助。UI 切图真正稳定的是人工定义 + 视觉模型识别，因为页面上很多组件没有明显物理边界，比如文字、留有大量留白的卡片。

7. 用多模态模型辅助切图

如果你已经在用 Image2 这类多模态工具，其实可以顺路再让一个视觉模型帮你“读出”切图区域。思路是：

1. 输入原图。
2. 让它返回所有可切图组件的 JSON 坐标。
3. 解析 JSON 写入regions.json。
4. 再交给 Python 裁剪脚本执行。

这样就形成了一个“AI 识别区域 → 脚本执行切图”的半自动流水线。

7.1 请求示例

不同服务的接口不同，这里给一个通用的 OpenAI 兼容接口模板，实际使用时替换为你的服务地址、模型名和密钥。

import requests import base64 API_URL = "https://api.example.com/v1/chat/completions" API_KEY = "your-api-key" MODEL_NAME = "your-vision-model" def encode_image(image_path): with open(image_path, "rb") as f: return base64.b64encode(f.read()).decode("utf-8") def get_crop_regions(image_path): base64_image = encode_image(image_path) payload = { "model": MODEL_NAME, "messages": [ { "role": "user", "content": [ { "type": "text", "text": ( "这是一个 UI 设计图。" "请识别图中所有可独立导出为图片资源的组件区域，" "例如导航栏、按钮、图标、卡片、封面图、Logo 等。" "只输出 JSON，不要输出解释。" "JSON 格式为：" "[{\"name\": \"组件名\", \"x\": 0, \"y\": 0, " "\"width\": 100, \"height\": 50}]" ) }, { "type": "image_url", "image_url": { "url": f"data:image/png;base64,{base64_image}" } } ] } ] } headers = { "Authorization": f"Bearer {API_KEY}", "Content-Type": "application/json" } response = requests.post(API_URL, json=payload, headers=headers, timeout=120) response.raise_for_status() content = response.json()["choices"][0]["message"]["content"] return content

7.2 解析坐标并运行裁剪

视觉模型返回的内容可能带 Markdown 代码块，先清理再解析 JSON。

import json import re def extract_json(text): match = re.search(r"```json\s*(\[.*?\])\s*```", text, re.DOTALL) if match: return json.loads(match.group(1)) return json.loads(text) raw = get_crop_regions("normalized/ui_design.png") regions = extract_json(raw) # 方便你检查识别结果 print(json.dumps(regions, ensure_ascii=False, indent=2)) # 直接写入 regions.json with open("regions.json", "w", encoding="utf-8") as f: json.dump(regions, f, ensure_ascii=False, indent=2)

拿到regions.json之后，重新运行 6.2 的裁剪脚本即可。

7.3 注意识别边界

• 视觉模型返回的坐标是估算值，常常需要加安全边距。
• 建议把裁剪脚本里加一个padding参数，例如每个区域向外扩展 4px，避免圆角阴影被切掉。
• 模型返回的name字段可能是不稳定英文，最好在脚本里做一次重命名映射。

8. 切图命名规范与 Vibe Coding 接入

切图只是前半段。真正让工作流好用的是：把切出来的资源按规范命名、按目录组织，再让 AI 写代码时不迷路。

8.1 命名规范

推荐使用类型-位置-状态的结构：

前端项目里常见的目录结构：

src/ assets/ images/ navbar/ navbar-logo.png buttons/ btn-primary-normal.png btn-primary-hover.png icons/ icon-close-24.png cards/ card-cover.png

脚本输出的output/目录就是assets/images/的候选目录，整理好后直接复制进前端工程。

8.2 图片资源尺寸

AI 生成的位图切出来可能很大，不建议直接引用原尺寸。前端项目里通常约定：

• 图标用 24、32、48 像素；
• 按钮背景切图控制在几 KB 内；
• 封面图按组件实际占位尺寸输出。

在裁剪脚本里用scale参数控制缩放，就能输出多倍率资源。

8.3 接入 Vibe Coding

当切图资源准备好后，交给 Vibe Coding 的上下文应该是这样的：

请根据 design_images/ui_design.png 这个设计稿，实现一个 React 页面。 图片资源都在 src/assets/images/ 目录下，已有以下命名： - navbar-logo.png - btn-primary-normal.png - card-cover.png - icon-close-24.png 布局参考原图，图片直接引用 assets/images 下对应文件。 先实现整体框架，再优化间距和细节。

这个流程比“随手丢一张大图让 AI 猜”要稳定得多。因为 AI 拿到的是明确的资源路径、明确的目录结构和明确的命名语义，生成代码时引用图片不会出错。

8.4 不需要切图的部分

以下几个部分不需要切图，建议在 Vibe Coding 里直接写前端：

• 正文文字：AI 生成图里的文字经常有乱码，切图后反而无法检索和修改。直接用 HTML 文本替代。
• 背景渐变：用 CSSlinear-gradient实现，体积更小，适配性更好。
• 基础圆角卡片：用 CSS 盒子模型实现。
• 简单图标：优先找开源图标库，例如 Lucide、Tabler Icons 等，而不是从 AI 位图里抠。

切图的价值在于“无法用代码低成本还原的视觉素材”，比如复杂插画、纹理背景、真人大图、特定样式的封面。别把整张 UI 图都切碎。

9. 批量处理效率与资源观察

切图这件事跟 AI 推理不同，纯 Python 脚本跑的话对显卡没有硬性要求。但批量任务仍然要看几个维度。

9.1 显存与内存

• 纯 Pillow / OpenCV 裁剪，不吃显存，普通 CPU 就能跑。
• 如果启用本地视觉模型来识别区域，显存取决于模型大小。从实践经验看，中小规模视觉模型通常建议从 8G 显存起步测试，具体以模型文档为准。
• 批量处理大量大图时，内存占用主要来自同时打开的图片对象。建议逐张处理，不要一次性把所有图片读进内存。

9.2 性能影响因素

9.3 观察方式

在脚本里加简单的时间统计：

import time start = time.time() # ... 处理逻辑 print(f"elapsed: {time.time() - start:.2f}s")

批量任务建议输出日志文件，方便排查哪张图失败、哪个区域坐标越界。

9.4 怎么降低资源占用

• 先压缩、缩放，再裁剪。
• 使用Image.open()的懒加载特性，处理完立即关闭文件句柄。
• 大批量任务分批执行，例如每批 50 张，处理完休息几秒再继续。
• 如果有 API 调用，增加超时和失败重试，避免某一个请求卡住整个队列。

10. 常见问题与排查方法

下面这些问题是切图流水线里最容易踩的坑，按现象整理成排查表。

10.1 透明背景处理

AI 生成的 UI 图通常没有 alpha 通道。切出来的图标如果直接放页面上，会出现白底或杂色底。常见处理方式是：

1. 在 Figma / PS 里手动抠图。
2. 使用开源抠图工具 rembg 做透明背景提取。

# rembg 使用示例，需要按实际环境安装 pip install rembg rembg i input.png output.png

剪裁脚本可以和 rembg 串起来用：先裁剪，再统一去背景，最后导出 PNG。

10.2 坐标不稳定的处理

视觉模型返回的坐标每次可能有几像素偏差。工程化的做法是：

• 把识别结果先保存为regions.json，人工检查一遍再执行裁剪。
• 对关键资源加固定坐标模板，不依赖每次识别。
• 对同一区域连续识别 3 次取交集或平均值。

11. 最佳实践与合规建议

流程能跑通之后，还是要养成工程化习惯，否则时间长了会发现资源越来越乱。

11.1 工程化建议

• 第一次先切 1 张图，不要直接上批量。
• 保留一套最小可运行配置：regions.json+crop_ui.py+output/。
• 模型文件、输入素材、输出结果分目录管理，不要混在一个文件夹里。
• 批量任务要加日志和失败重试，失败原因写清楚，方便回看。
• 接口服务如果要开放给其他人使用，限制访问范围，不要裸奔在公网。
• 涉及人脸、声音、版权素材时必须确认授权。
• 发布或商用前要做效果复核，重点检查切图边缘、命名、尺寸和清晰度。

11.2 版权与合规

• Image2 生成的 UI 图如果来源于模型训练数据中的既有设计模式，做商业产品前建议做相似度比对，避免直接产出与真实产品高度相似的界面。
• AI 生成图中出现的字体字形可能涉及字体版权。切图后如果是作为图片素材使用，需要注意字体授权范围；更好的做法是用前端字体替换文本内容。
• 不要用内部未公开设计稿随意上传到在线切图工具，避免信息泄露。
• 如果团队有明确设计规范和品牌资产要求，AI 生成图只能作为方案探索或参考，正式切图交付仍需经过设计确认。

12. 总结与下一步

这套工作流把“Image2 生成 UI 图 → 切图 → 前端资源 → Vibe Coding”串成了一个可重复执行的闭环。最值得先试的部分是：准备一张 Image2 生成的 UI 图，跑通 Pillow 裁剪脚本，然后人工核对切图结果。别急着上视觉模型识别，先把基础流程搞顺畅。

最容易踩的坑有两个：一是原图尺寸不一致导致坐标偏移，二是切出的图标带背景底色。解决前者靠预处理缩放，解决后者靠去背工具。这两步处理好，后面批量任务基本不会有大问题。

后续可以继续扩展的方向包括：把裁剪脚本改成 FastAPI 接口服务，接进团队内部工具链；或者把视觉模型识别结果做成可编辑的坐标面板，人工确认后一键生成全部资源；再往后，可以让 AI 根据切图命名自动生成前端组件代码，进入更深的 Vibe Coding 流水线。

建议先把这套最小配置保存好，下次再遇到“AI 生成设计图怎么转切图”时，直接套用就行。