393 lines
16 KiB
Markdown
393 lines
16 KiB
Markdown
---
|
||
title: ====== SYSTEM / ROLE ======
|
||
source: https://mp.weixin.qq.com/s/Ps17lorncEF8SRimUlprNw
|
||
author: shenwei
|
||
created: 2026-01-05
|
||
description: 前言你在使用AI生图时，是否有“抽盲盒”的无力感：想要一个左侧侧边栏，AI 却给了个顶部导航；想要微调一下背景
|
||
---
|
||
|
||
原创 鳕小堡 *2025年12月27日 23:12*
|
||
|
||
|
||
|
||
|
||
|
||
前言
|
||
|
||
你在使用AI生图时，是否有“抽盲盒”的无力感：
|
||
|
||
- 想要一个左侧侧边栏，AI 却给了个顶部导航；
|
||
- 想要微调一下背景颜色，或者加个文字，结果整个画面“推倒重来”。
|
||
- …
|
||
|
||
为什么提示词有时会失效？是因为 自然语言 存在不稳定性， 难以精准控制 复杂的空间布局 和并保持 内容一致 。
|
||
|
||
|
||
|
||
UI设计图
|
||
|
||
|
||
|
||
*制作架构图
|
||
*
|
||
|
||
|
||
|
||
*风格转换*
|
||
|
||
今天小堡要分享一个进阶玩法：使用 JSON 来“写”图片 ，将生图这件事变得 可控制、可迭代、可复用 ，是真正的 工业级方法 ！
|
||
|
||
老规矩所有 元提示词 、 Agent提示词 均已打包，关注后回复【 json 】即可获得！
|
||
|
||
|
||
|
||
|
||
|
||
目录
|
||
|
||
1. 三分钟搞懂核心工作流
|
||
2. Step1:制作Agent
|
||
3. Step2:检查和优化
|
||
4. Step3:生成图片
|
||
5. 为什么用JSON?
|
||
6. 风格迁移
|
||
7. 复刻APP
|
||
8. 跳过Agent直接生成
|
||
9. 总结
|
||
|
||
文章内容较长，建议点好👍🏻 赞、转发和在看 ❤️ ！慢慢操作！
|
||
|
||
|
||
|
||
三分钟搞懂核心工作流
|
||
|
||
使用 JSON 进行 AI 生图的步骤非常简单，小堡的方法可以概括为以下三步：
|
||
|
||
1. **制作 Agent****编写元提示词，使用 **文本模型** 制作 Agent**
|
||
2. **检查和优化****将 Agent + 需求 输入到 **文本模型** ，生成 JSON 并检查和优化**
|
||
3. **生成图片****使用 **图片模型** ，输入J SON 生成图片**
|
||
|
||
小tips：
|
||
你也可以跳过第一步 制作 Agent，直接到第二步。
|
||
在第二步时，直接让AI 输出JSON，或者你自己设计一个JSON语言让AI按照你的格式输出。
|
||
|
||
|
||
|
||
Step1： 制作 Agent
|
||
|
||
使用元提示词，得到一个 Agent 提示词。
|
||
以产品设计图为例，我制作的元提示词如下，你可以直接copy使用：
|
||
|
||
```
|
||
请为我设计一个 AI Agent 的提示词，请遵循提示词工程规范，包含：角色、任务、few-shot 等工程技巧 。
|
||
|
||
AI Agent 将用于生成 JSON 格式 UI设计语言，基本要求如下：
|
||
- 完全使用JSON格式编写
|
||
……在开始制作 JSON 之前，我希望AI主动询问我一些信息（给我做选择题而不是开放式问答），以确保最终制作的UI图符合用户的要求。
|
||
```
|
||
|
||
元提示词书写有几个关键之处：
|
||
|
||
1. **提示词工程**
|
||
说明你的目的是为了制作Agent，并且使用提示词工程，这样得到的Agent提示词会更鲁棒。
|
||
2. **提出基本要求**
|
||
提出要支持多平台、组件化、真实数据等要求，这样生成的JSON更精准。
|
||
3. **使用反思**
|
||
着重说明不要限制在你提的要求之内，这样AI会 **主动反思** 并制作出更完整设计图提示词。
|
||
4. **主动提问**
|
||
让AI在动手前根据你的需求针对性提问，降低后期返工的概率。这利用到了 **AI规划** 的能力。
|
||
|
||
你会得到一个 Agent 提示词：
|
||
|
||
```
|
||
# ====== SYSTEM / ROLE ======
|
||
你是一名 **专业 UI 图描述工程师 & JSON UI 生成器（Role: UI JSON Generator Agent）**。
|
||
擅长根据用户输入需求生成 **完整 UI 设计图 JSON**，该 JSON 将用于 **渲染真实 UI 画面**。
|
||
|
||
# ====== OBJECTIVE / 目标 ======
|
||
你的任务是：
|
||
1️⃣ 在开始制作 UI JSON 前，通过**选择题**主动向用户确认设计偏好和需求
|
||
……
|
||
|
||
# ====== UI JSON 必须遵循的规范 ======
|
||
- 输出 strictly 使用 JSON 格式（使用代码块包裹）
|
||
……
|
||
|
||
# ====== INTERACTION RULES / 交互方式 ======
|
||
……
|
||
|
||
# ====== FEW-SHOT / 示例学习 ======
|
||
……
|
||
|
||
# ====== ERROR RULES / 错误处理 ======
|
||
……
|
||
|
||
# ====== OUTPUT FORMAT ======
|
||
……
|
||
|
||
# ====== FINAL STEP ======
|
||
……
|
||
```
|
||
|
||
|
||
|
||
Step2：检查和优化
|
||
|
||
将制作的 **Agent + 你的需求** 输入给 **文本大模型** 如DeepSeek、千问、ChatGPT或Gemini 3 Pro 都行。
|
||
不出意外这个 Agent 是会主动规划的，先问你问题，确定好细节后才会开始生成 JSON：
|
||
|
||
|
||
|
||
回复好这些问题，再一次确定好你的需求后，AI才会开始生成：
|
||
|
||
|
||
|
||
|
||
得到 JSON **先别着急生成图片** 。先检查一下生成的JSON是否合理。比如我就发现一些问题需要先调教一下，将修改总结一下一股脑都输入给AI让他修改。
|
||
问题1：mock数据都是英文的
|
||
|
||
```
|
||
1. ui里的mock数据均使用中文
|
||
```
|
||
|
||
问题2：app不完整，尺寸不对
|
||
|
||
```
|
||
2. 确保每一屏都是完整的app界面
|
||
```
|
||
|
||
问题3：直接成了一个大json
|
||
|
||
```
|
||
3. 每个页面单独给出json
|
||
```
|
||
|
||
汇总一起输入给 Agent 进行修改（不用修改元提示词）
|
||
|
||
```
|
||
1. ui里的mock数据均使用中文
|
||
2. 确保每一屏都是完整的app界面
|
||
3. 每个页面单独给出json
|
||
```
|
||
|
||
这样优化大概 2-3 次最佳，这样的 JSON 就比较鲁棒了，就可以去生成图片啦！
|
||
对于图片中的文字，你可以 **手动修改** ，这样更精确，这也是 JSON 的优势。
|
||
|
||
|
||
|
||
Step3：生成图片
|
||
|
||
将第二步得到的 JSON 输入到 **图像大模型** 进行生图，可选模型：NanoBananaPro（推荐）、豆包 SeedDream 4.0（免费）、即梦等。
|
||
为什么推荐 NanoBananaPro？因为：
|
||
|
||
- 中文渲染效果好，不会乱码
|
||
- 审美好，生成的图片也很专业
|
||
- 信息图绘制能力最强
|
||
现在图像最强模型就是NanoBananaPro，没的说。
|
||
|
||
提示词：
|
||
|
||
```
|
||
请按要求制作UI设计图：
|
||
<上一步生成的JSON>
|
||
```
|
||
|
||
下面左图为 NanoBananaPro 生成，右图为豆包生成
|
||
|
||
  
|
||
|
||
为什么用 JSON？
|
||
|
||
如果用自然语言来写：
|
||
|
||
❌ 有以下缺点：
|
||
|
||
- **结构不明确**
|
||
比如上下顺序是banner、学习进度、课程列表、底部栏，底部栏顺序是首页、课程、我的。尤其是课程列表如果细节还需要描述时，会非常复杂， 结构非常不可控 。
|
||
- **效果不稳定**
|
||
有可能出现的不是设计图，而是一些产品渲染图。而且app的内容也不可控制。 堆的提示词越多，效果越不稳定
|
||
- **无法复用**
|
||
如果要修改内容，不知道改哪里，甚至需要重写提示词，而重写提示词后，其他内容又不稳定，可能会被改乱。
|
||
|
||
✅ JSON 有一些天然优势：
|
||
|
||
- **结构化**
|
||
这是最大的优势，尤其是在生成 **重结构** 的图片时，如产品UI、组织架构关系、系统架构这种。
|
||
- **内容稳定**
|
||
什么地方显示什么内容是非常确定的，效果非常稳定。
|
||
- **可编码**
|
||
与自然语言有极大不同，JSON 可以视为 **代码** ，可以被迭代，也可以版本化，像写代码那样来制作图片。 **复用性非常高**
|
||
|
||
|
||
|
||
|
||
那么什么时候时候用JSON，什么时候不适合呢？
|
||
✅ 以下几种情况最适合使用JSON：
|
||
|
||
- 图的结构、层级较为复杂
|
||
- 复用内容以转换风格
|
||
- 需要多次迭代，比如团队内的一些标准，如代码架构，团队架构之类的
|
||
|
||
如果你只是为了 试一下效果、抽卡 这种一次性生图需求，那直接用自然语言是最方便的。
|
||
|
||
JSON的本质是用 **代码生图** ，它的价值在于复用，迭代和精准内容。
|
||
|
||
|
||
|
||
风格迁移
|
||
|
||
在保证 **内容不变** 的情况下，我们可以轻松使用JSON 来制作出不同风格的图片。
|
||
提示词：
|
||
|
||
```
|
||
按照要求生成系统架构图片：
|
||
{
|
||
"entities": [
|
||
……
|
||
],
|
||
"relationships": [
|
||
……
|
||
],
|
||
"layers": [
|
||
……
|
||
]
|
||
}
|
||
```
|
||
|
||
生成效果：
|
||
|
||
|
||
|
||
如果你觉得丑，还可以让ai换个风格：
|
||
|
||
```
|
||
按照要求生成一个现代、极简样式的系统架构图片：
|
||
<你的JSON>
|
||
```
|
||
|
||
效果如下，可以看到模块、调用关系、层都这些内容是非常稳定，没有缺胳膊少腿。
|
||
|
||
|
||
|
||
再换一个：
|
||
|
||
```
|
||
使用炫酷的样式，重新生成一个
|
||
```
|
||
|
||
效果：
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
复刻 APP
|
||
|
||
可以将APP 转为 JSON，之后再根据自己的需求修改里面的排版，内容、图片等内容，达到复刻的效果：
|
||
|
||
|
||
|
||
|
||
|
||
还是使用 Agent + 淘宝app的截图，先生成JSON，然后再进行生图。
|
||
|
||
|
||
|
||
生图JSON：
|
||
|
||
|
||
|
||
 
|
||
|
||
商品详情页JSON：
|
||
|
||
```
|
||
制作这个app的另一个界面，确保与之前的页面风格保持一致，尺寸保持一致，设计保持一致：
|
||
<JSON>
|
||
```
|
||
|
||
购物车JSON：
|
||
|
||
```
|
||
制作这个app的另一个界面，确保与之前的页面风格保持一致，尺寸保持一致，设计保持一致：
|
||
<JSON>
|
||
```
|
||
|
||
|
||
|
||
跳过 Agent 直接生成
|
||
|
||
如果你觉得元提示词太麻烦，你也可以直接一步到位。比如，生成一个年度报告（假的，不是真实数据。。）：
|
||
|
||
```
|
||
生成一个JSON格式描述的 个人代码年度总结报告，JSON需要结构化的描述报告内容，要求包括以下内容：
|
||
1. 名字、头像
|
||
2. 年度活跃图。类似github的活跃图那样
|
||
3. 提交数量、代码行数等细节
|
||
4. 合作伙伴
|
||
其他内容帮忙补充一下
|
||
```
|
||
|
||
|
||
|
||
这样你就可以得到一个完整的 JSON 了，直接绕过 Agent 构建。然后再用 JSON 生图：
|
||
|
||
|
||
|
||
提示词：
|
||
|
||
```
|
||
生成一个极简风格的个人编码年度报告汇总图片：
|
||
|
||
{
|
||
"user_profile": {
|
||
……
|
||
},
|
||
"year_summary": {
|
||
……
|
||
},
|
||
"visualization": {
|
||
……
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
总结
|
||
|
||
从自然语言到 JSON 结构，这不仅仅是提示词格式的变化，更是一种 **从“对话”到“编程”的思维升级。**
|
||
|
||
JSON 赋予了更强的 **确定性、可维护性和复用性** 。
|
||
|
||
正如我们在文中看到的，你可以轻松复刻淘宝的购物界面，也可以一键迁移系统架构的视觉风格！
|
||
|
||
|
||
|
||
小堡往期推荐：
|
||
|
||
[批量出图、4K超清，0 代码打造属于自己的生图网站](https://mp.weixin.qq.com/s?__biz=MzE5ODU2MTU3OA==&mid=2247485711&idx=1&sn=4eaad1c437239f3b71ddd3725393e2d9&scene=21#wechat_redirect)
|
||
|
||
[AI 不只会聊天了，它开始“画界面”了](https://mp.weixin.qq.com/s?__biz=MzE5ODU2MTU3OA==&mid=2247485651&idx=1&sn=65658e67748c3184a82ae2e9830d1683&scene=21#wechat_redirect)
|
||
|
||
[指哪画哪！在 Gemini 中使用 NanoBananaPro 生成精准图片](https://mp.weixin.qq.com/s?__biz=MzE5ODU2MTU3OA==&mid=2247485498&idx=1&sn=70a21df1efbe6fde2796633fff0342b2&scene=21#wechat_redirect)
|
||
|
||
**END**
|
||
|
||
|
||
|
||
|
||
|
||
作者：鳕小堡Decoder
|
||
|
||
简介： 我是 鳕小堡 ，分享好用 AI 工具使用技巧和免费资源，帮助你节约 90%的试错时间。
|
||
|
||
|
||
|
||
继续滑动看下一个
|
||
|
||
鳕小堡Decoder
|
||
|
||
向上滑动看下一个 |