没写一行代码！我用 ChatGPT 5.6 (Sol) 做了一个智慧充电站 3D 大屏

原文链接：https://mp.weixin.qq.com/s/LY4REqf5UGNfb7pyM2Ppfg

先说结论。从设计稿到能在浏览器里打开、点击充电桩弹出状态面板的 3D 可视化大屏，我没有写任何一行代码，没有在 Blender 里手动拖过一次控件，也没有切过一张图。

先说结论。

从设计稿到能在浏览器里打开、点击充电桩弹出状态面板的 3D 可视化大屏，我没有写任何一行代码，没有在 Blender 里手动拖过一次控件，也没有切过一张图。

整条链路交给了 ChatGPT 5.6 (Sol)。

但这篇文章不是来吹 AI 有多厉害的。我想说的是：这条路上我踩了哪些坑，以及为什么同样的工具，用法不同，结果差了十万八千里。顺便对有了大屏设计稿还不够，我又用Gpt-image-2把里面的素材全扒了出来 这篇文章做一个补充和资源切割提示词的修复。

这个是我最终实现的网页效果，我觉得效果还行。

四个步骤，每一步的输入都是上一步的输出

链路本身不复杂：

设计稿 → 切割透明素材 → Blender 自动建模 → 3D 大屏网页

工具组合是 Codex（ChatGPT 5.6 (Sol)）、blender、blender-mcp、还有一个是我之前做的 @lius1314/visual-dashboard-scaffold 的大屏脚手架。

听起来很顺。实际上还是碰到很多的问题的，那我们按照步骤来看看整体流程遇到的问题和如何解决的吧。

第一步：设计稿

设计稿不是一次成型的，来回定了好几轮。先是照着一张暗色科技等距沙盘风格的参考图生成第一版充电站概念图，看完觉得质感不够，又重做成最高画质的 16:9 版本。到这一步设计稿已经能用了，但为了配合后面的切图流程，我又单独出了一版预留透明背景的稿子——因为素材切割终归是要把图标、边框从背景里挖出来，源头设计稿如果本身没有为分离预留干净的边界，后面怎么切都费劲。

上面的设计稿是主体蓝的，我觉得做这种太多了，然后它的界面我觉得太大众了，所以我就重新设计了设计稿，下面的暗黑色的是我觉得还不错的。

这一步花的时间不算少，但没出什么坑，跳过不细说，直接进第二步。

第二步：切图

第一版，27 个素材，全部白切

设计稿定稿后，我让 Codex 按坐标把图标、卡片边框、分割线抠出来。提示词是使用之前这篇文章的提示词有了大屏设计稿还不够，我又用Gpt-image-2把里面的素材全扒了出来 —背景色 #0B1426，抠出图标和边框，校验一下尺寸和 RGB。

跑出来 27 个素材，数字上什么都对：12 个图标、7 个卡片外框、6 个装饰件，尺寸和颜色校验全部通过。

然后我把它们贴到页面上。

图标放大到 200%，全是虚的。原图里很多图标本身只有二三十像素见方，切图脚本直接插值放大凑数，边缘发糊，内部镂空的地方糊成一片。更离谱的是背景压根不透明——贴到页面上，只要页面背景和 #0B1426 差一点，图标周围就多出一圈矩形色块，像贴了一块膏药。

27 个素材，等于白切了。

后来我想明白了。当时的提示词里有一句”RGB 无 Alpha、#0B1426 背景色校验”——这句话自己就打架。既然要求 RGB 无 Alpha 通道，背景只能是实色，根本谈不上透明。模型照着这句话做，做出来的东西完全符合要求，但就是没法用。

这不是模型的问题，是我的问题。提示词只写了要做什么，没写怎么判断做得够不够好。没有判定标准，模型就会挑最省事的路走——插值放大代替清晰，实色背景代替真透明，给你一个看起来合格的结果。

第二版，把”验收标准”写进提示词

我没有在原来的提示词上打补丁，直接推倒重写。核心变化就一个：把”描述任务”改成”描述任务 + 每一步验收标准”。

透明度按死：图标、卡片底板、标题背景、分割装饰，全部必须输出 PNG-32 RGBA，空白区域 Alpha 必须为 0。白底、黑底、棋盘格伪透明，全部列为禁止项。

清晰度分路处理：原图主体大于 64 像素、轮廓还看得清，走精确抠取，保留原始像素；原图本身就糊，走受约束的高清重建——但只能照着原图的外轮廓、比例、线宽去理清边缘，不允许凭空加纹理，不允许加原本没有的细节；要是连重建的依据都不够，直接跳过并说明原因，不硬凑一个将就能用的版本。

验收动作也写进流程里：每个素材切完，分别放到纯白和纯黑背景下看边缘有没有残留描边，再用透明棋盘格确认 Alpha 通道是不是真的生效。以前这一步靠人工事后抽查，现在模型给结果之前先自查一遍。

另外定了一条硬规矩：一图一资产，每个元素单独成文件。之前模型有时候图省事把图标拼成一张宫格图，这版直接禁掉。

用新提示词跑下来，20 个素材，四角 Alpha 全部为 0，白底黑底验边全部通过。

这里就列举了一些，貌似切割的资源还是不是很超清，但是已经很够用了。

拉开效果差距的，不是换了更强的模型，是把验收标准写进了提示词。这句话值得记一下。

下面是新的切割素材资源提示词，需要的可以自取

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-
-

1

`# 高级 UI 资产透明拆解专家 v5.1``> 输入：一张完整的可视化大屏设计稿（通常为 1920×1080 PNG）``>``> 输出：按批次拆分、可直接用于前端项目的独立透明 PNG 素材``你是一名专业的 UI 资产拆解与图像抠取专家。你的任务是识别设计稿中的可复用视觉元素，将它们逐个分离，输出轮廓清晰、边缘干净、背景真实透明的生产级素材。``---``## 最高优先级硬约束``以下规则优先于本文其他要求；发生冲突时，以本节为准。``1. **真实透明**：除 BATCH-05 外，全部输出 `PNG-32 RGBA`。元素外区域的像素必须为 `Alpha=0`。``2. **禁止伪透明**：严禁使用白底、黑底、深色底、纯色底或棋盘格模拟透明；棋盘格只能出现在预览界面，不能被写入图片。``3. **一图一资产**：每个文件只包含一个独立元素。禁止输出宫格、拼图、联系表、带标签的预览板。``4. **清晰优先**：禁止把低分辨率裁片仅靠 Lanczos、双三次插值或锐化放大后冒充高清素材。``5. **忠实原稿**：保持元素的轮廓、比例、颜色、线宽、光效、透视和视觉含义，不得改变设计语言或添加原稿中不存在的细节。``6. **边缘无污染**：发光、阴影、羽化、抗锯齿必须正确过渡到透明，不能残留原设计稿底色形成深色描边、色边或矩形光晕。``7. **无法保证则不输出**：若当前工具不能导出真实 Alpha PNG，必须停止并明确说明，禁止用带底色图片代替。``---``## 任务指令``基于上传的设计稿，每次只处理一个批次，严禁混合输出：``- 【BATCH-01】通用图标：功能、状态、导航、UI 图标``- 【BATCH-02】卡片底板：空心边框、信息容器``- 【BATCH-03】标题背景：标题底板、标题装饰条``- 【BATCH-04】分割与装饰：线条、角标、科技装饰``- 【BATCH-05】模块背景：大面积分区底板、整体背景``- 【RESCAN】补扫：提取指定批次中遗漏的元素``每个视觉元素只能归入一个批次，禁止重复提取。``---``## 输出常量``| 项目 | 要求 |``|---|---|``| BATCH-01～04 背景 | 真透明，空白区域 Alpha=0 |``| BATCH-01～04 格式 | PNG-32 RGBA，sRGB |``| BATCH-05 格式 | PNG-24 RGB 或 PNG-32 RGBA，按原稿保留 |``| 安全边距 | 5%～10%；最小 8px；发光元素最小 16px |``| 图标画布 | 256×256px；主体占画布 70%～85% |``| 文件命名 | `{batch编号}_{序号}_{英文描述}.png` |``原设计稿底色只用于识别元素和消除边缘污染，不得写入 BATCH-01～04 的最终图片。``---``## 统一拆解流程``每个资产必须依次完成以下步骤：``1. **定位**：从上到下、从左到右扫描，记录元素在原图中的位置。``2. **判类**：根据元素的主要功能分配批次，不按颜色或大小随意归类。``3. **判定独立性**：仅提取轮廓完整、未被遮挡、可与周围内容分离的元素。``4. **选择处理方式**：``- 原图足够清晰：执行像素级精确抠取。``- 原图过小或已有明显像素化：执行一次“受约束高清重建”。``5. **去除背景**：删除元素之外的所有像素，使空白区域 Alpha=0。``6. **边缘净化**：消除原大屏底色造成的色边，同时保留合理的半透明抗锯齿和光效。``7. **规范画布**：等比缩放、居中放置、保留透明安全边距，严禁拉伸。``8. **双底检查**：分别放在纯白和纯黑背景上检查边缘，再用透明棋盘格确认 Alpha 通道。``9. **独立导出**：每个元素输出为一个单独 PNG 文件。``---``## 清晰度处理规则``### A. 像素级精确抠取``符合以下条件时使用：原图中元素主体短边 ≥64px，且轮廓、细线和内部镂空清楚可辨。``- 最大限度保留原始像素和原始视觉效果。``- 不做风格化、重绘、过度锐化或对比度增强。``- 如需缩放，仅进行一次等比高质量重采样。``### B. 受约束高清重建``仅在元素短边 ＜64px、明显模糊或放大后无法使用时启用。``- 原图是唯一视觉依据，重建的是同一个图标，不是创作相似图标。``- 必须锁定：外轮廓、长宽比例、内部结构、线宽关系、颜色、渐变方向、发光强度和朝向。``- 仅恢复清晰边缘与连续线条，不得增加纹理、符号、层级或装饰。``- 简单线性图标应具有稳定线宽、连续轮廓和干净内孔。``- 禁止用加粗描边、强锐化、过度发光或提高对比度制造“清晰”假象。``若无法忠实重建，应跳过该元素并说明原因。``---``## 复杂元素归类规则``1. 传递功能或状态含义 → BATCH-01``2. 用于容纳或框住内容 → BATCH-02``3. 专门服务于标题区域 → BATCH-03``4. 用于分隔、角部点缀或科技装饰 → BATCH-04``5. 构成大面积区域整体底图 → BATCH-05``6. 与文字、图表或其他元素严重粘连且无法可靠分离 → 跳过``---``## 分批次规则``### 【BATCH-01】通用图标``属于：独立功能图标、状态图标、导航图标、UI 操作图标。``不属于：图表数据点、标题装饰、卡片角标、与卡片不可分离的业务图形。``要求：``- 每个图标输出为独立的 256×256px 透明 PNG。``- 图标主体在画布内视觉居中，占画布 70%～85%，不得贴边。``- 保留完整轮廓、内孔、细线、发光和阴影；不得断线、粘连或堵孔。``- 不得把原图中包含底色的矩形裁片直接作为输出。``- 不得包含任何文字、数字、水印、名称或编号。``逐图验收：``- [ ] PNG 为 RGBA，四角像素 Alpha=0``- [ ] 透明区域没有白底、黑底、深蓝底或棋盘格像素``- [ ] 白底和黑底预览均无矩形底、深色边、杂色边或异常光晕``- [ ] 100% 显示清晰；200% 显示时轮廓连续、细线无断裂、内孔未堵塞``- [ ] 图标形状、颜色、比例和视觉含义与原稿一致``- [ ] 文件内只有一个图标且无文字``### 【BATCH-02】卡片底板``属于：完整边框容器、独立面板外框。``不属于：标题栏、模块整体背景。``要求：``- 只保留外边框、科技角、描边、边缘发光和多层装饰结构。``- 移除标题、文字、数字、图标、图表、数据和内部填充。``- 容器外部与中心区域均须真实透明，形成可直接叠加的空心边框。``- 输出宽度 ≥512px，高度等比，透明安全边距完整。``### 【BATCH-03】标题背景``属于：标题区域底板、标题装饰条。``不属于：完整卡片边框、独立角标。``要求：``- 移除所有标题文字，仅保留装饰底板。``- 保留复杂轮廓、渐变、节奏线条和两端渐隐。``- 渐隐与发光必须自然过渡到 Alpha=0。``- 输出宽度 ≥640px、高度 ≥128px。``### 【BATCH-04】分割线与装饰``属于：独立分隔线、科技线条、角标装饰。``不属于：卡片边框的一部分、标题装饰条。``要求：``- 线条和角标必须分别独立导出。``- 保留线条端部羽化，并自然过渡到 Alpha=0。``- 水平线长度 ≥512px；垂直线高度 ≥512px；角标画布 ≥128×128px。``### 【BATCH-05】模块背景``属于：大面积分区底板、整体面板背景区域。``要求：``- 保留纹理、网格、渐变和发光轮廓。``- 移除文字、数字、图标、图表和业务内容。``- 最小输出 1920×1080；若原图更大则保持原始尺寸。``- 本批次本身是背景层，可保留原稿背景，不受透明背景硬约束。``---``## 排除条件``遇到以下情况应跳过并说明，不得强行输出劣质资产：``- 元素被遮挡、被画面边缘截断或与其他元素无法可靠分离``- 去除文字后无法合理恢复底层结构``- 原始信息不足，无法忠实重建形状或内部结构``- 去背景后出现无法消除的严重色边、断线或透明孔洞``- 输出仍包含文字、数字、业务数据或其他批次元素``---``## 不合格重做条件``以下任一条件成立，必须重做：``| 检查项 | 不合格条件 |``|---|---|``| 透明背景 | 四角任一像素 Alpha≠0，或存在纯色底/棋盘格底 |``| 边缘污染 | 白底或黑底预览出现原背景色描边、杂色边、矩形光晕 |``| 清晰度 | 100% 即可见模糊；200% 出现断线、堵孔、双重边缘或严重锯齿 |``| 忠实度 | 轮廓、比例、颜色、线宽或视觉含义偏离原稿 |``| 完整性 | 发光、阴影、羽化或边角被裁切 |``| 内容纯净 | 存在文字、数字、水印、标签或其他无关元素 |``| 文件组织 | 多个元素被合并到同一张图 |``---``## 数量与命名``- 单批次每轮最多输出 12 个资产。``- 文件命名格式：`{batch编号}_{序号}_{英文描述}.png`。``- 示例：`b01_03_settings-icon.png`、`b02_01_card-frame-large.png`。``- 达到 12 个时停止并提示：``> 本批次已提取 12 个资产。回复「继续」提取剩余元素，或指定新批次。``---``## RESCAN 补扫模式``触发示例：`````text``补扫 BATCH-01，左侧面板第 3 个图标未提取``仅提取明确指出的遗漏元素，不重复已完成资产；仍须通过原批次全部透明度、清晰度和忠实度检查。`

第三步：建模与烘焙

设计稿切完，四周的图标、边框、分割线交给前端 UI 层；中间那块 3D 场景插画不进前端，拿去给 blender-mcp （地址获取 https://github.com/ahujasid/blender-mcp）当参照图，让 Codex 照着它在 Blender 里自动建模。

先验证了一下连通性，让 Codex 在场景里建一个正方体，确认 MCP 通道能跑通。通了之后，拿设计稿中间那张暗色科技等距沙盘图重新生成一张更完整的充电站参考图，然后让 Codex 照着这张图逐个模块建出来：场地底座、光伏顶棚、充电桩、车辆、储能电池舱、变压配电设备、控制室、发光地面线路、悬浮 UI 面板。整个过程不用人工在 Blender 里手动操作，Codex 通过 MCP 下发的是可重复执行的建模脚本，哪里不对改脚本重跑，不用从头摆一次场景。

第一版模型的问题：形状对了，没有质感

建出来之后感觉哪里不对，但说不清楚。盯着看了一会儿才反应过来：材质是平的。金属没有高光，地面纯色没有微纹理，玻璃没有透射，车漆像塑料——整个场景像是一个精确的玩具，而不是一个真实的场地。

重做时把 PBR 材质流程补齐：金属件的金属度和粗糙度分开调，地坪加微纹理，玻璃做透射，车漆加清漆层，光伏板加反射。建模颗粒度也往上拉，最终建出来一千多个对象，四辆车、四套充电桩、双排储能柜、冷却设备、线槽都单独建出来，不再用简化的占位模型糊弄。

烘焙前先分组，别等前端接入了才想起来

模型精细了，但没法直接扔给前端实时渲染——这么多物体的 PBR 材质，帧率根本扛不住。所以要把光照和材质信息烘焙成贴图。但烘焙也有讲究，不是一把梭全烘成静态图就完事。

在烘焙之前，我先按”将来要不要交互”把所有物体分了一次组。会被点击的——车辆、充电桩、终端机、电池柜、服务器、变压器、控制台，二十多个根节点，各自单独烘焙贴图，保留独立材质通道，前端可以单独控制它们的高亮和状态切换。纯粹是背景的——地面、建筑主体、光伏顶棚、固定附件，按区域合并成几组图集一起烘焙，减少渲染开销。

每组贴图统一导出 BaseColor、Normal、ORM、Emission 四张。ORM 这张把 AO、粗糙度、金属度分别塞进 RGB 三个通道，前端一张图拿到三种材质信息。玻璃部件要保留透射效果，没有参与合并，单独留成透明子物体。

这一步的判断标准只有一条：凡是交互逻辑会碰到的物体，宁可多花烘焙成本也要保留独立性；纯粹填场景的，能合并就合并。这个分组做在烘焙阶段，而不是等到前端接入时再补——正是因为提前想清楚了，后面接脚手架的时候基本没有返工。

最终实测：源 GLB 约 77.3 MB，Web 优化后压到 25.32 MB，107 张内嵌 WebP，贴图最大边 1024，23 个交互根节点完整保留。

第四步：拼成网页

前面三步产出的是三堆各自独立的东西：透明 UI 素材、烘焙好贴图的 Blender 场景、材质通道文件。这些东西要变成用户能打开的网页，还差一层骨架——页面布局、区块管理、屏幕自适应。这部分接了 @lius1314/visual-dashboard-scaffold 这个大屏脚手架(可以看这篇文章可视化大屏设计器脚手架：从设计到交付的一站式方案，如果你需要源码的话可以看这篇可视化大屏脚手架源码：一周下载突破 700，为什么这么多人选它？)，一个不绑定具体图表库的 React 大屏容器，默认 1920×1080，跟前面切图流程里素材尺寸的约束刚好对得上。

业务图表或者 3D 场景不用改脚手架源码，通过 registerBlock 把组件注册成一个区块 ID，脚手架负责区块的拖拽、缩放、层级和样式；预览模式下接 autofit.js 做整体等比缩放，边调边看，不用来回换分辨率去试。

烘焙阶段做的那个分组在这里起作用：中心 3D 场景包一层 Three.js 渲染组件挂到对应区块位置上，充电桩、储能柜这些单独烘焙过的物体各自是可交互对象；背景和建筑那部分只作为一张整体贴图渲染，不参与交互逻辑，渲染开销压得住。

切图流程产出的图标、边框、分割线，按脚手架约定的静态资源目录放进去就能用。信息卡片、告警列表、能耗曲线这些常规区块，是标准 React 组件按区块 ID 注册。整套配置最后导出成 JSON 作为初始配置加载，后面调布局不用改代码，直接在编辑模式里拖。

最后

做完这整条链路，我觉得有两件事值得单独拎出来说。

第一件事，提示词里有没有验收标准，决定了你拿到的是素材还是无法使用的。没有可执行的判定标准，模型永远挑最省事的路。它不是在糊弄你，它只是在照章办事——你说的章，本来就没写清楚。把验收标准显式写进提示词之后，产出质量的提升比换一个更强的模型明显得多，这让我多少有点意外。

第二件事，前期的分层决策，决定了后期的返工量。烘焙阶段有没有提前想清楚哪些物体将来要被点击，直接决定前端接入时要不要重来一遍。做在正确的时间点，后面每一步都会顺；做晚了，代价是把整个场景重新烘焙一遍。

Codex（ChatGPT 5.6 Sol）在切图、生成参照图、下发 Blender 建模脚本这几个环节都能给出结构化、可执行的结果，中间不需要人再补细节。这是整条链路能接起来的前提。但前提之外，还是得自己想清楚每一步要的是什么。

另外发现 gpt5.6 sol在 3D建模方面还是不能真正的还原设计图，也没有做到那种工业级的质感，不过做的模型确实也很不错了，未来可期。

预览地址：https://liush.top/solar-storage-charging-ems

关注公众号 回复 智慧充电站3D大屏 获取源码。

💬 本文评论区已开启，但暂无读者留言。

本文转载自微信公众号，如有侵权请联系删除。