---
title: "别再堆提示词了，我用 JSON 拿回了AI 生图的控制权"
source: "https://mp.weixin.qq.com/s/Ps17lorncEF8SRimUlprNw"
author:
  - "[[鳕小堡]]"
published:
created: 2026-01-05
description: "前言你在使用AI生图时，是否有“抽盲盒”的无力感：想要一个左侧侧边栏，AI 却给了个顶部导航；想要微调一下背景"
tags:
  - "clippings"
---
原创 鳕小堡 *2025年12月27日 23:12*

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLMFDK2EVzOj3lOH4wtkso53XV76lW0VUT9h63BqWxzekMsF991fZFwg/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=0)

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=1)

前言

你在使用AI生图时，是否有“抽盲盒”的无力感：

- 想要一个左侧侧边栏，AI 却给了个顶部导航；
- 想要微调一下背景颜色，或者加个文字，结果整个画面“推倒重来”。
- …

为什么提示词有时会失效？是因为 自然语言 存在不稳定性， 难以精准控制 复杂的空间布局 和并保持 内容一致 。

![图片](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLpicFibHGVUYpCb4U5DrAjic79NVTAPEfF8dHUD3tYlSiaSCw8tyr7F0ICQ/640?wx_fmt=jpeg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=2)

UI设计图

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLKj8db2FibReTsqsNemAgibKqwyqRBxmFdlUGCAm7PiccGJNc40sf0Z16A/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=3)

*制作架构图  
*

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLRmGVeYUc3DV1q4HNFZTd6HQMWib2jp9QwR0bOoAfFiaL2DJ0mTlK2AwQ/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=4)

*风格转换*

今天小堡要分享一个进阶玩法：使用 JSON 来“写”图片 ，将生图这件事变得 可控制、可迭代、可复用 ，是真正的 工业级方法 ！  

老规矩所有 元提示词 、 Agent提示词 均已打包，关注后回复【 json 】即可获得！

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLBuIzkw4SQniaSsKVf0jgjJv4QTlLlGuMChdl3IV0frCa3sBo4DjfJUw/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=5)

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=6)

目录

1. 三分钟搞懂核心工作流
2. Step1:制作Agent
3. Step2:检查和优化
4. Step3:生成图片
5. 为什么用JSON?
6. 风格迁移
7. 复刻APP
8. 跳过Agent直接生成
9. 总结

文章内容较长，建议点好👍🏻 赞、转发和在看 ❤️ ！慢慢操作！

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=7)

三分钟搞懂核心工作流

使用 JSON 进行 AI 生图的步骤非常简单，小堡的方法可以概括为以下三步：

1. **制作 Agent****编写元提示词，使用 **文本模型** 制作 Agent**
2. **检查和优化****将 Agent + 需求 输入到 **文本模型** ，生成 JSON 并检查和优化**
3. **生成图片****使用 **图片模型** ，输入J SON 生成图片**

小tips：  
你也可以跳过第一步 制作 Agent，直接到第二步。  
在第二步时，直接让AI 输出JSON，或者你自己设计一个JSON语言让AI按照你的格式输出。

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=8)

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 ======
……
```

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=9)

Step2：检查和优化

将制作的 **Agent + 你的需求** 输入给 **文本大模型** 如DeepSeek、千问、ChatGPT或Gemini 3 Pro 都行。  
不出意外这个 Agent 是会主动规划的，先问你问题，确定好细节后才会开始生成 JSON：  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfL2pmM7GZLoeLpia6juKHIUo0ghO304CYTtQ3k4meChKL2RtEXW2aWgKw/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=10)

回复好这些问题，再一次确定好你的需求后，AI才会开始生成：  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLTdW2tUdeetYRiayYZF9zWGMyXPQL62WNEZk8vuZf8bDdXP5ibtrHShcg/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=11)

  
得到 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 的优势。

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=12)

Step3：生成图片

将第二步得到的 JSON 输入到 **图像大模型** 进行生图，可选模型：NanoBananaPro（推荐）、豆包 SeedDream 4.0（免费）、即梦等。  
为什么推荐 NanoBananaPro？因为：

- 中文渲染效果好，不会乱码
- 审美好，生成的图片也很专业
- 信息图绘制能力最强  
	现在图像最强模型就是NanoBananaPro，没的说。

提示词：

```
请按要求制作UI设计图：
<上一步生成的JSON>
```

下面左图为 NanoBananaPro 生成，右图为豆包生成

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLjNP1GW3Q8ff9wicGcOoaOia2yyYmrU83vbtLv4ficAQF1MkGJHJaGdHxQ/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=13) ![图片](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLMYbojSflKnNNxicxdZON9ey8dykLKPhrLibTnBQ1FyXaPdeexaodl0QQ/640?wx_fmt=jpeg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=14) ![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=15)

为什么用 JSON？

如果用自然语言来写：

❌ 有以下缺点：

- **结构不明确**
	比如上下顺序是banner、学习进度、课程列表、底部栏，底部栏顺序是首页、课程、我的。尤其是课程列表如果细节还需要描述时，会非常复杂， 结构非常不可控 。
- **效果不稳定**
	有可能出现的不是设计图，而是一些产品渲染图。而且app的内容也不可控制。 堆的提示词越多，效果越不稳定
- **无法复用**
	如果要修改内容，不知道改哪里，甚至需要重写提示词，而重写提示词后，其他内容又不稳定，可能会被改乱。

✅ JSON 有一些天然优势：

- **结构化**
	这是最大的优势，尤其是在生成 **重结构** 的图片时，如产品UI、组织架构关系、系统架构这种。
- **内容稳定**
	什么地方显示什么内容是非常确定的，效果非常稳定。
- **可编码**
	与自然语言有极大不同，JSON 可以视为 **代码** ，可以被迭代，也可以版本化，像写代码那样来制作图片。 **复用性非常高**
![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLD0YPicY80iavgQBAjuCp50EqTNJZeCbjNz0ExzWanKgZhP8aqww3fGMA/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=16)

  

那么什么时候时候用JSON，什么时候不适合呢？  
✅ 以下几种情况最适合使用JSON：

- 图的结构、层级较为复杂
- 复用内容以转换风格
- 需要多次迭代，比如团队内的一些标准，如代码架构，团队架构之类的

如果你只是为了 试一下效果、抽卡 这种一次性生图需求，那直接用自然语言是最方便的。  

JSON的本质是用 **代码生图** ，它的价值在于复用，迭代和精准内容。

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=17)

风格迁移

在保证 **内容不变** 的情况下，我们可以轻松使用JSON 来制作出不同风格的图片。  
提示词：

```
按照要求生成系统架构图片：
{
  "entities": [
        ……
  ],
  "relationships": [
        ……
  ],
  "layers": [
        ……
  ]
}
```

生成效果：  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLcWibStpSlyYNQpMhCB0agYtCbiaQtrWb830CfKVucjGkia04XiaScoFsicQ/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=18)

如果你觉得丑，还可以让ai换个风格：

```
按照要求生成一个现代、极简样式的系统架构图片：
<你的JSON>
```

效果如下，可以看到模块、调用关系、层都这些内容是非常稳定，没有缺胳膊少腿。  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLKj8db2FibReTsqsNemAgibKqwyqRBxmFdlUGCAm7PiccGJNc40sf0Z16A/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=19)

再换一个：

```
使用炫酷的样式，重新生成一个
```

效果：  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLRmGVeYUc3DV1q4HNFZTd6HQMWib2jp9QwR0bOoAfFiaL2DJ0mTlK2AwQ/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=20)

  

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=21)

复刻 APP

可以将APP 转为 JSON，之后再根据自己的需求修改里面的排版，内容、图片等内容，达到复刻的效果：

  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLaEdcsTQYmLzZcBvcCa27rdfwphu6cfgYqoJiadFMDrGXDwGXhjicQoGA/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=22)

还是使用 Agent + 淘宝app的截图，先生成JSON，然后再进行生图。

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLDtOSNLduIaQQsJemCThjJniaK02MCZhb8kdv8ocbExKyibFRWECEzTMw/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=23)

生图JSON：

  

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLLlJUk7ot8SGCXyDgZ3IrYsEic28c17EO0wJ2fibv6UUtoicb7uePD0kvg/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=24) ![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLWdGWURIFVRhfibDcxZK1ebn6BtoJw9ictsTx3ia1uVd3OXibUjsy4mJEicA/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=25)

商品详情页JSON：

```
制作这个app的另一个界面，确保与之前的页面风格保持一致，尺寸保持一致，设计保持一致：
<JSON>
```

购物车JSON：

```
制作这个app的另一个界面，确保与之前的页面风格保持一致，尺寸保持一致，设计保持一致：
<JSON>
```

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=26)

跳过 Agent 直接生成

如果你觉得元提示词太麻烦，你也可以直接一步到位。比如，生成一个年度报告（假的，不是真实数据。。）：

```
生成一个JSON格式描述的 个人代码年度总结报告，JSON需要结构化的描述报告内容，要求包括以下内容：
1. 名字、头像
2. 年度活跃图。类似github的活跃图那样
3. 提交数量、代码行数等细节
4. 合作伙伴
其他内容帮忙补充一下
```

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLEgmibOicAHW8rqticv8ogaOaA0jG4c1JvNKDP7AuF8hIzibvM40KK06Cibg/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=27)

这样你就可以得到一个完整的 JSON 了，直接绕过 Agent 构建。然后再用 JSON 生图：

![图片](https://mmbiz.qpic.cn/sz_mmbiz_png/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLB3WnnicnSJOz4ib1yFchNpa0YkUftDDicEdvCs6B4L22RCJWBkNBF8mcg/640?wx_fmt=png&from=appmsg&watermark=1&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=28)

提示词：

```
生成一个极简风格的个人编码年度报告汇总图片：

{
  "user_profile": {
    ……
  },
  "year_summary": {
    ……
  },
  "visualization": {
    ……
  }
}
```

![标题图标](https://mmbiz.qpic.cn/sz_mmbiz_jpg/xQ7lEMiafQyjTc44SmjYsAVnD4ob3xsfLu1UF5aIvANx2MAoOAs3yY6NXmUetkAo5WCRvuGCWRaMUBmd49KUhVw/640?wx_fmt=other&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1#imgIndex=29)

总结

从自然语言到 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

向上滑动看下一个