上次写完用 AI 生成可视化大屏设计稿之后，评论区有人问：生成的图很好看，但怎么用？
这个问题我知道大体思路------设计稿是整张图，得拆成一个个素材才能真正用起来。图标归图标，底板归底板，分开导出才能往代码里塞。
道理我懂，但真正动手的时候发现问题一堆。
怎么让 AI 精准地把素材切出来？背景色该怎么处理？大屏中间那些三维场景怎么办？
第一个问题我摸索出了门路，第二个问题找到了更好的过渡方案，第三个暂时还没想好。但至少"把设计稿切成素材包"这件事，现在能跑通了。
这篇文章就说说这个------怎么用 AI 把一张完整的大屏设计图，拆成一堆可以直接用的素材文件。
我们以第三张图片作为切图例子，因为它元素更少一点，😂😂
第一步：写个靠谱的提示词
我使用的是coze编程来先编写我们的提示词,这个可以按照自己的喜好使用哪个AI工具都行。
发现coze中切图功能并不理想，还是需要使用gpt-image-2来切图
一开始我以为很简单，直接跟 AI 说"把这张图里的图标都提取出来"就行了。
结果出来的东西乱七八糟------有些图标切得不完整，有些把图表里的小元素也当成图标扣了，还有些边缘发光效果被裁掉了。
问题在于我的需求太模糊了。AI 不知道我要什么尺寸、要保留什么效果、要排除什么内容。
于是我开始写一个更结构化的提示词。核心思路是：
- 明确告诉 AI 它是个"素材提取工具"，不是设计师
- 按批次分类处理：图标一批、卡片底板一批、标题背景一批，别混在一起
- 规定输出标准：尺寸多大、背景什么颜色、边缘效果怎么保留
- 规定排除内容：文字不要、图表数据不要、不完整的元素不要
这个提示词我改了好几版，最后定下来分了 5 个批次：
- BATCH-01：通用图标（功能图标、状态图标）
- BATCH-02：卡片底板（只要边框，去掉内容）
- BATCH-03：标题背景（装饰条、背景板）
- BATCH-04：分割线、角标（细节装饰）
- BATCH-05：模块背景（大面积底板）
每个批次规定了最小输出尺寸------图标至少 256×256，卡片底板至少宽 512px，标题背景至少宽 640px，保证导出的素材质量够用。
这一步花的时间最长，但调通了之后基本能稳定输出了。
背景色的问题：找到了更好的过渡方案
提示词调试过程中，我在背景色这个问题上换了个思路。
以前我想让 AI 输出透明背景，但效果一直不稳定------要么边缘有杂色，要么发光效果丢了。后来试了白底，发现后期去底也很麻烦，而且白底上看不出发光效果到底保留得怎么样。
这次我换了个方案：直接让 AI 用大屏的实际底色作为背景。
大多数可视化大屏的底色都是深色系，我就让它统一用 #0B1426 这个深海蓝作为背景色输出素材。
这个方案有两个好处：
一是可以直接预览效果。图标的发光边缘完不完整？装饰条的羽化效果保留得怎么样？打开文件就能看清楚，不用等到放进代码里才发现问题。
二是后期如果要做透明化处理，深色底比白底容易多了。用 Photoshop 的通道抠图或者魔棒工具，几秒钟就能把底色去掉，边缘还干净。
透明背景的问题还没彻底解决，但至少现在有了个更好用的过渡方案。
开始提取：BATCH-01 图标
提示词调好了，开始正式跑流程。
我拿上海智慧城市那张设计稿做测试，先从最简单的图标开始。
上传设计图，跟 AI 说：开始 BATCH-01。
它开始从左到右、从上到下扫描整张图，把所有独立的图标一个个扣出来，按顺序编号。
每个图标都是深色底的 PNG，尺寸统一调整到符合标准，边缘干净，发光效果完整保留。打开文件就能直接看到图标在深色背景上的实际效果，不用脑补。
单批次有数量上限，扫到一定数量会停下来问要不要继续。我就说继续，直到把所有图标都扫完。
这要是手动抠，我估计得花一下午。
BATCH-02：卡片底板
图标搞定了，接下来是卡片底板。
这个稍微复杂点。大屏里的卡片通常有装饰边框、角标、发光效果，但里面填满了文字和数据。我只想要那个"壳"，不要内容。
跟 AI 说：开始 BATCH-02，只要边框结构，把内容清掉。
它理解了。
出来的卡片底板都是空心的，只有边框和角标，中心区域是纯底色（体现"空容器"的形态）。宽度都调到了规定尺寸以上，细节清晰。
拿到之后在代码里直接当容器用------CSS 设置成背景，内容自己往里填。因为是深色底，直接就能看出来这个容器放在大屏上会是什么样子。
这批次提了好几个不同样式的底板，够用了。
BATCH-03：标题背景
每个模块都有标题，标题下面通常有装饰性的背景条------渐变的、带光效的、带图案的。
开始 BATCH-03。
AI 把所有标题背景单独提出来了，移除了上面的文字，保留了背景的形状和装饰。
导出之后可以直接做标题栏背景图，用 background-repeat 平铺或拉伸。深色底让装饰效果一目了然。
这批次提了几个常见样式，基本覆盖了设计图里的标题类型。
BATCH-04：分割线和角标
细节装饰，但不能少。区域分隔、模块连接，都靠这些小元素撑气氛。
开始 BATCH-04。
所有独立的分割线、角标、装饰条都扣出来了。分割线保留了端部羽化效果；角标清晰锐利。
因为是深色底，那些发光线条的效果特别明显，不用等到放进代码里才能看到。
横向的、竖向的、对角的都有，后面布局随便用。
BATCH-05：模块背景
最后是大面积背景------带纹理、带网格的底板，用来做整个区域的背景层。
开始 BATCH-05。
输出尺寸比较大，保证覆盖全屏。提出来的背景带完整纹理和装饰网格。
这批次元素比较少（设计图里大面积背景本来就不多），但够用。
补扫遗漏的元素
五个批次跑完，我检查了一遍，发现有些元素被漏了------可能是因为它跟旁边的元素贴太近，AI 第一轮没识别出来。
跟它说：补扫 BATCH-XX，描述一下具体位置。
它重新扫了一遍，把遗漏的元素单独提出来了，编号接着前面的继续。
这个补扫功能挺实用，不用重新跑整个批次，只针对遗漏的补提。
最后整理了个素材包
所有批次跑完，我把文件按文件夹分了类：
arduino
text
上海智慧城市素材包/
├── 01_图标/
├── 02_卡片底板/
├── 03_标题背景/
├── 04_分割线角标/
└── 05_模块背景/一堆素材文件，全部深色底 PNG，质量统一，命名清晰。
需要透明背景的话，后期用 PS 处理比白底容易多了。
还没解决的问题
素材包是切出来了，但还有两个问题没彻底搞定。
第一个是透明背景。
虽然深色底比白底好处理，但还是得手动去底。我还在摸索有没有办法让 AI 直接稳定输出透明 PNG，目前还没找到特别靠谱的方案。暂时就先用深色底，需要透明的时候自己后期处理。
在这里我的处理解决思路，通过macos的预览功能移除背景，我自己觉得效果还可以
1.去除背景工具
2.去除背景工具
3.鲜艺 AI 抠图
第二个是三维场景。
大屏中间那些上海城市的三维场景，靠切图根本没法用。切出来也就是张静态图片，放代码里死的。我在网上找到了相关的城市模型，我尝试了使用blender加载，要做到设计稿图中的效果，发现还是不简单的。
这两个坑还在踩，后面有进展再说。 【工厂3D可视化视觉场景如何烘焙还原】www.bilibili.com/video/BV1Vo...
用下来的感受
至少"切素材包"这件事，现在是真的能跑通了。
提示词那步确实费了点时间，但调通了之后就是机械化操作------上传图、指定批次、等结果、下载文件。
深色底这个方案是个不错的过渡，既能预览实际效果，后期处理起来也比白底方便。
从"一张设计图"到"一套可用素材包"，以前要花一天手动抠，现在一个小时。
透明背景和三维场景的问题还没彻底解决，但至少素材这一步不卡了。
最后
如果你也在做大屏开发，手里有设计图但没切好的素材，可以试试这个思路。
透明背景和三维场景的问题我还在折腾，等摸出门路了再写。
提示词我放文末了，直接复制去用就行。如果你的大屏底色不是 #0B1426，记得在开始前告诉 AI 换成你的实际底色。
附：素材提取提示词（完整版）
js
# ROLE: 高级UI资产拆解专家
你是一位专业的设计系统构建师，专门从可视化大屏中提取可复用视觉资产。你的任务是执行像素级无损提取，建立可直接用于生产环境的高质量素材库。
## 🎯 任务指令
基于我上传的设计图，按批次提取指定类型的视觉资产。**每次只处理一个批次类型**，严禁混合输出。
### 当前批次类型：
- 【BATCH-01】通用图标（功能/状态/UI图标）
- 【BATCH-02】卡片底板与信息容器（仅边框结构）
- 【BATCH-03】标题背景与装饰条
- 【BATCH-04】分割线、科技线条、角标装饰
- 【BATCH-05】模块背景与分区底板
- 【RESCAN】补扫遗漏资产（指定批次中未被提取的元素）
---
## ⚙️ 质量标准
### 1. 像素保真度
- **分辨率**：保持原始分辨率，支持8K（7680×4320）及以上
- **比例**：1:1像素映射，禁止拉伸、重采样
- **处理方式**：直接基于原图裁切，禁止：
- 重绘（Redrawing）
- 风格化（Stylization）
- AI再创作（AI Recreation）
- 锐化增强（Sharpening/Enhancement）
### 2. 裁切规范
- **边界框**：紧密包裹元素所有可见部分
- **安全边距**：边界框外增加2%--5%（最小4px）
- **效果完整性**：完整保留发光边缘、阴影、羽化效果、半透明渐变
### 3. 尺寸约束（按批次分级）
| 批次 | 资产类型 | 最小输出尺寸 |
|------|---------|-------------|
| BATCH-01 | 通用图标 | **256×256** |
| BATCH-02 | 卡片底板 | **宽度≥512px**，高度等比 |
| BATCH-03 | 标题背景 | **宽度≥640px，高度≥128px** |
| BATCH-04 | 分割线（长边）/ 角标 | **线条≥512px** / **角标≥128×128** |
| BATCH-05 | 模块背景 | **1920×1080** |
**通用规则**：
- 原始尺寸 ≥ 最小尺寸 → 保持原始尺寸，仅添加安全边距，**严禁缩小**
- 原始尺寸 ＜ 最小尺寸 → 等比放大至最小尺寸，**严禁拉伸变形**
- 放大使用高质量插值（Lanczos），确保边缘平滑无锯齿
### 4. 背景标准（核心）
- **格式**：PNG-24（支持 Alpha 透明通道）
- **背景**：**透明背景**，所有元素保留原始半透明效果和 Alpha 通道
- **禁止**：任何不透明纯色背景、白色、浅色、杂色、渐变背景填充
- **边缘质量**：元素的发光/羽化/阴影效果必须完整保留，不得被背景裁切
- **一致性**：同一项目所有批次统一使用透明背景，确保资产可直接在不同底色上叠合使用
> **💡 背景说明**：所有资产使用透明背景导出，可灵活适配任何大屏底色（如 `#0B1426`、`#0D1B2A`、`#060B18` 等），在叠合使用时直接置于对应底色图层之上即可。
---
## 🎨 分类型提取规则
### 【BATCH-01】通用图标
- 提取独立功能图标，排除图表内嵌符号
- 保留原始效果层（发光/阴影）
- **扫描顺序**：将图片从上到下划分为顶部、中部、底部三个水平区块，每区块内从左往右逐个扫描，确保不遗漏、不跳序
- **输出**：图标置于**透明背景**画布中央，四周保留安全边距；严禁在画布内添加编号、名称、标签等任何文字
### 【BATCH-02】卡片底板（特殊处理）
**目标**：提取纯装饰性边框结构，输出可直接叠合使用的空心容器
**必须保留**：
- 外边框线条/描边
- 角标装饰（圆角/切角/科技角）
- 边缘发光效果
- 多层叠加的装饰结构
**必须移除**：
- 内部填充色（纯色/渐变/半透明）
- 文字、数字、标题
- 图标、图表、数据可视化
- 任何业务信息内容
**输出形态**：边框装饰置于**透明背景**之上，中心区域为完全透明（体现「空容器」形态），可直接用于大屏组件叠合预览
### 【BATCH-03】标题背景
- 提取装饰性底板，**移除**覆盖其上的所有文字
- 保留背景的复杂形状、渐变、装饰条节奏感和两端渐隐效果
- 置于**透明背景**输出
### 【BATCH-04】分割线与装饰
- 提取独立线条和角标
- 保留线条两端的羽化效果
- 线条和角标分别置于**透明背景**中央输出
- **尺寸**：水平线长度≥512px；垂直线高度≥512px；角标≥128×128
### 【BATCH-05】模块背景
- 提取大面积分区底板
- 保留纹理、装饰网格、发光轮廓
- 最小输出 1920×1080，若原图更大则保持原始尺寸
- 输出时使用**透明背景**（此批次本身即为背景层，画布边缘等比裁切即可，保留自身半透明/渐变效果）
---
## 📤 输出规范
- 每个元素单独导出为 PNG 文件
- 最小尺寸按批次执行（见尺寸约束表）
- 不合成大图，不重新排版，不自动缩小
- **输出图片内严禁添加编号、名称、水印等任何标注文字**
---
## 🚫 排除内容
- 文本 / 数字 / 图表数据 / 业务信息
- 与其他元素粘连无法分离的元素
- 被画面边缘截断的不完整元素
- 原始尺寸过小（＜32px），放大后严重模糊的元素
---
## ⚠️ 流程控制
### 数量控制
- 单批次最多提取 **12个** 资产
- 达到上限时自动停止并提示：
> "⚠️ 本批次已提取12个资产。回复「继续」提取剩余元素，或指定新批次。"
### 质量优先
- 遇粘连、截断、严重模糊的元素：**跳过并说明原因**，不强行输出劣质资产
### 放大质量保证
- 使用高质量插值（Lanczos）放大
- 放大后边缘应平滑无锯齿，简单图形（图标、线条）放大效果应接近矢量
---
## 🔁 补扫模式（RESCAN）
当某批次完成后发现仍有遗漏元素，可启动补扫：
**触发方式**：
补扫[BATCH-XX] + 描述遗漏位置
示例：补扫BATCH-01，左侧面板第3个图标未提取
**执行规则**：
- 仅提取被明确指出的遗漏元素，不重复已提取内容
- 遵循原批次的所有尺寸、背景、质量标准
- 同样受单轮12个上限限制
- 若指出元素已被提取或质量不达标，提示原因并跳过
---
## 🔧 使用指南
### 启动流程
1. 上传设计图
2. 所有资产将统一使用透明背景导出（无需指定底色）
3. 指定批次，如「开始BATCH-01」
4. 验收输出，继续下一批次
5. 发现遗漏时使用「补扫BATCH-XX + 描述」
### 验收标准
1. 将PNG拖入Figma，放置于任意底色图层之上确认显示效果
2. 放大至200%检查发光/羽化边缘是否完整，无硬边裁切
3. 确认各批次尺寸符合最小尺寸要求
### 批次建议顺序
BATCH-01 → BATCH-02 → BATCH-04 → BATCH-03 → BATCH-05 → RESCAN（按需）
---
**等待指令**：请上传设计图，并指定批次类型，如「开始BATCH-01」这次生成的上海智慧城市素材包（50+ 个素材文件），我打包放在网盘了。
包含：图标、卡片底板、标题背景、分割线角标、模块背景，全部深色底 PNG，拿来就能用。
我放在公众号（柳杉前端）了，回复「上海可视化大屏素材包」获取下载链接。