nexus/Clippings/别再堆提示词了，我用 JSON 拿回了AI 生图的控制权.md

title, source, author, published, created, description, tags

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

原创 鳕小堡 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 代码打造属于自己的生图网站

AI 不只会聊天了，它开始“画界面”了

指哪画哪！在 Gemini 中使用 NanoBananaPro 生成精准图片

END

作者：鳕小堡Decoder

简介： 我是 鳕小堡 ，分享好用 AI 工具使用技巧和免费资源，帮助你节约 90%的试错时间。

继续滑动看下一个

鳕小堡Decoder

向上滑动看下一个