3个月前还在手写CSS，今天用Trae+Gemini 3零代码生成3D塔罗牌。复盘全流程：从SVG绘制到Supabase部署，AI如何接管前后端？

0. 前言

在 2025年的尾巴上，发生了一件非常有趣的事，我在微信公众号上的 AI 四格漫画 意外爆火。之前公众号上发的技术文章，基本上阅读量不过 300，每天广告收益也就几毛钱。目前最火的美杜莎，浏览量已经达到惊人的 5W。这样让我不禁感叹:

十年技术无人问，一曲漫笑广人闻。

---

火爆之后，带来的最直接价值就是迎来了泼天富贵。从未想过有一天，我的日广告收益能达到 250+ ，目前已经连续三天高位。除了金钱，自己的作品受到欢迎，以及大家在评论区的吐槽、讨论，也为我带来了很大的情绪价值。

-	-

---

1. 缘起

先简单介绍一下：我是一个籍籍无名的编程技术小博主，全网统一名号 张风捷特烈 。 编程之王 是我维护的公众号，一直是输出编程技术的文章，主要以 Flutter 技术为主。
但技术文章更新的不是非常频繁，而公众号每天有一篇发文的机会。本着 不想浪费 的优良传统，在 AI 重塑一切的浪潮中，我想用 AI 画些四格漫画的笑话试试。于是开启了 慧心一笑 专栏， 《小火柴的倒霉日常》 就是第一篇，现在还没火。大家也可以点开看看，内容非常精简，就是一幅图+提示词。

这个系列整体是诙谐幽默的，下面是第一篇的内容：

一开始我是用自然语言的提示词，感觉效果并不是太好，四格漫画有着连续的信息和一致性的人物、场景等。由于编程出身，在 结构一致性 方面有着天然的敏锐嗅觉。于是基于 yaml 文件来定义统一的场景、角色、样式、色调等信息：

comic_info:
  type: "四格漫画"
  style: "手绘简笔画、柔软线条、轻松冷幽默、统一角色"
  color_scheme: "暖黄主色调，红橙色点缀，柔和明暗层次"
  character:
    name: "小火柴"
    appearance: "细长圆柱身体、红色火柴头、两根短竖眉毛、圆点眼睛、呆萌可爱"
    personality: "迷糊、天真、略倒霉"
  background_style: "白色简约背景，搭配少量手绘街景或物件增强生活感"

面板列表放在 panels 节点下，每个宫格由 panel[x] 固定场景内容。包括描述、场景、动作、表情、细节、文本等：

panels:
  panel1:
    description: "第一格：日常铺垫"
    scene: "温暖的手绘街道：地面为淡黄色纹理，简单的路灯、几株小草、远处一座小房子，空气里飘着幾颗小亮点"
    action: "小火柴双手背在身后，踩着轻快的小步子前进"
    expression: "轻松微笑，眼睛微弯"
    details: "路灯用细线勾勒，小草三两稀疏点缀，天空加几朵柔软的白云"
    text: "今天天气真好呀～"

定义完结构，一个 yaml 文件就对应了一个四格故事，把这个内容丢给 AI 生图的工具，就能得到对应的图片。

---

2. 关于 AI 生图工具与质量

我的理念是: 文本是一种序列的约定：

它可以视为一个四格漫画的 基因，而 AI 工具会将基因 实例化 为个体。

所以，生成图的好坏取决于两个因素：基因序列 和 成长环境。也就是提示词好不好，以及 AI 工具厉不厉害。 AI 生图的工具有很多，单目前大多数，对于标准的四格漫画都无法准确输出，下面列举几个:

• 即梦 AI

• 豆包

• Nano Banana

目前来看，国产的 AI 仍有很大的进步空间，Nano Banana 能符合我对图片产品的预期。但是 AI 正在蓬勃发展中， AI 生图也是最近一两年才逐渐可用的，我对他们的未来持有乐观的态度，包括我们国产的大模型。所以如果 成长环境 将会越来越好，那么 基因序列 本身将会成为非常重要的因素。
目前我只是简单设计了一下 yaml，按照版本控制，称为 v0.0.1 吧，后续随着创作需求的升级，我也会逐步迭代整体结构，设计更合理的 DNA 结构 😁

---

3. 选定方向? Flow Heart

有人问我，你是怎么想到这些稀奇古怪的方向的，而且你是怎么坚持下来的。

对于一个创作者来说，拓宽自己的边界是一个很必要的事。特别是对一个编程创作者，广泛涉猎是家常便饭。使用一切手段，解决自己遇到的问题；没有问题时就去发展自己，在新的领域中寻找问题。至于坚持嘛，遵循内心的指引，做自己喜欢的事，是不需要坚持的，就像你每天都要喝水一样自然。

可能有人会问，如果 AI 的笑话漫画没有火，你还会坚持下去吗？刚做前两个漫画文章时，还没有火，一天收入 1 块钱，我已经觉得很美滋滋了。投入的产出符合我的预期，毕竟只需要准备个笑话雏形，其他都交给 AI 写就行了。我还和女朋友炫耀：

-	-

最后还是想强调一点：如果一件事，对社会、对他人没有危害，自己做着觉得开心，起来没有负担和压力，就会大胆去做。反之，可以在其他方面继续延伸，找到自己喜欢的那个领域。AI 工具的加持，让个体拥有了前所未有的能力，个人的边界可以极度拓宽。

---

4. 为什么会火？

第一次感觉会火，是因为擎天柱 这篇，浏览量异常上升：

从数据统计来看，发布第一天只有 102 个浏览量，和往常没什么区别。持续一周，没有任何波澜，突然在 12-20 号，增加了近 5000 的浏览量，第二天持续上涨过万，然后逐渐平息：

---

在第一篇爆火的后一天，慧心一笑#03 | 爸爸去钓鱼~ 数据开始上升，感觉像是连带效应：

---

为了验证一下是不是偶然火爆，我在 20号和 21 号又发表了两篇小笑话。结果不温不火，似乎感觉也不是必然的。 在 23 号，我发布了 慧心一笑#06 | 被美杜莎石化...，这篇在当晚直接火爆，

从数据来看，第二天浏览量直接过 2.6W，后面还有持续几天的流量：

至于为什么火爆，从阅读渠道构成来看 98.7% 的阅读量来自于公众号推荐。只能说是老天喂饭吃 ~

---

5. 小结一下

接下来几天的 慧心一笑#07 | 爸爸回来了... 和 慧心一笑#09 | 农夫与蛇 也阅读过 3万。目前慧心一笑系列发布了 9 篇，阅读量超过 2.5W 的爆款有 5 篇，比例算是很高了。

感觉微信公众号的推荐阅读机制应该有所变化。另外也不是每篇都会火爆，应该和作品本身质量、流传度也有关系。这个有趣的现象让我非常欣喜，后续我还会继续创作更有意思的四格漫画，来继续验证数据。大家也可以关注 《编程之王》 公众号和我一起见证。等到第 30 篇后，我会再写一个复盘报告，和大家分享。

另外可能会有人问，你发这个就不怕别人也抄你的模式，跟你竞争吗。我只想说：

---

更多文章和视频知识资讯，大家可以关注我的公众号、掘金和 B 站 。让我们一起成长，变得更强。我们下次再见~

• QQ交流群： 1046304516
• 掘金账号： 张风捷特烈
• bilibli 账号： 张风捷特烈
• 公众号： 编程之王

从“前端模块化”到“AI输出格式”，我们都在和混乱做斗争**

---

🧠 引子：当 AI 开始“自由发挥”

你有没有遇到过这样的场景？

你辛辛苦苦写了一堆提示词（prompt），满怀期待地调用大模型，结果它回你一段：

“好的！关于 Promise，这是一个 JavaScript 中用于处理异步操作的对象。它的核心思想是……（省略 300 字小作文）”

而你真正想要的，只是一个干净、结构化的 JSON！

{
  "name": "Promise",
  "core": "用于处理异步操作的代理对象",
  "useCase": ["网络请求", "定时任务", "并发控制"],
  "difficulty": "中等"
}

是不是想砸键盘？别急——LangChain 的 JsonOutputParser 就是来拯救你的！

---

📦 背景小剧场：从前端模块化说起

在讲 LangChain 之前，咱们先穿越回“远古时代”的前端开发。

🕰️ 没有模块化的年代

<script src="a.js"></script>
<script src="b.js"></script>
<script>
  const p = new Person('张三', 18);
  p.sayName(); // 希望 a.js 里定义了 Person...
</script>

那时候，JS 文件之间靠“默契”共享变量，一不小心就全局污染、命名冲突、依赖顺序错乱……简直是“混沌宇宙”。

后来，Node.js 带来了 CommonJS，ES6 推出了 import/export，前端终于有了清晰的模块边界。

模块化 = 约定 + 结构 + 可预测性

而今天，我们在调用大模型时，也面临同样的问题：输出太“自由”，缺乏结构。
于是，LangChain 给我们带来了“AI 世界的模块化工具”——OutputParser。

---

🔧 LangChain 的救星：JsonOutputParser

JsonOutputParser 是 LangChain 提供的一个输出解析器，专门用来把 LLM 返回的“散文”变成结构化数据（比如 JSON）。配合 Zod（一个超好用的 TypeScript 校验库），还能自动校验字段类型、枚举值、数组结构等。

✨ 它能做什么？

• 强制模型只输出 JSON（通过提示词约束）
• 自动解析字符串为 JS 对象
• 用 Zod Schema 验证数据合法性
• 报错时告诉你哪里不符合预期（而不是默默返回 undefined）

---

🛠️ 实战：用 LangChain 解析“前端概念”

假设我们要让 AI 解释一个前端概念（比如 Promise），并返回标准化 JSON。

第一步：定义 Schema（用 Zod）

import { z } from 'zod';

const FrontendConceptSchema = z.object({
  name: z.string().describe("概念名称"),
  core: z.string().describe("核心要点"),
  useCase: z.array(z.string()).describe("常见使用场景"),
  difficulty: z.enum(['简单', '中等', '复杂']).describe("学习难度")
});

这就像给 AI 发了一份“填空试卷”，还规定了每道题只能填什么类型！

第二步：创建 Parser 和 Prompt

import { JsonOutputParser } from '@langchain/core/output_parsers';
import { PromptTemplate } from '@langchain/core/prompts';

const jsonParser = new JsonOutputParser(FrontendConceptSchema);

const prompt = PromptTemplate.fromTemplate(`
你是一个只会输出 JSON 的 API，不允许输出任何解释性文字。

⚠️ 你必须【只返回】符合以下 Schema 的 JSON：
- 不允许增加或减少字段
- 字段名必须完全一致
- 返回结果必须能被 JSON.parse 成功解析

{format_instructions}

前端概念：{topic}
`);

注意 {format_instructions} ——这是 JsonOutputParser 自动生成的格式说明，会告诉模型具体该怎么写 JSON！

比如它可能生成：

The output should be a markdown code snippet formatted in the following schema:

{
  "name": "string",
  "core": "string",
  "useCase": ["string", ...],
  "difficulty": "简单" | "中等" | "复杂"
}

第三步：组装 Chain 并调用

const chain = prompt.pipe(model).pipe(jsonParser);

const response = await chain.invoke({
  topic: 'Promise',
  format_instructions: jsonParser.getFormatInstructions(),
});

console.log(response);
// ✅ 得到干净的 JS 对象！

---

😂 为什么这很重要？——因为 AI 太“人性化”了！

大模型天生喜欢“聊天”，它总想多说几句：“亲，你还想知道 async/await 吗？”
但我们的程序需要的是确定性，不是“贴心客服”。

AI 的自由 = 程序员的噩梦
结构化的输出 = 自动化的基石

用 JsonOutputParser，相当于给 AI 戴上“嘴套”，只让它吐 JSON，不许废话！

---

🚀 进阶思考：不只是 JSON，更是契约

其实，JsonOutputParser 背后的思想，和前端模块化、API 设计、TypeScript 类型系统一脉相承：

明确输入输出，才能构建可靠系统。

当你用 Zod 定义 Schema 时，你不仅是在约束 AI，更是在建立人与 AI 之间的契约。这个契约让后续的数据处理、UI 渲染、数据库存储变得安全可靠。

---

✅ 总结：三句话记住 JsonOutputParser

1. AI 天生爱啰嗦，JsonOutputParser 让它闭嘴只吐 JSON。
2. Zod Schema 是“法律”，parser 是“警察”，确保输出合法合规。
3. 结构化输出 = 自动化流水线的第一块砖。

---

一款能让你 写一句话，自动生成 UI 页面 的工具，你用过吗？本文带你从 0 上手 MasterGo AI，快速生成网页 / APP / 后台管理系统等高保真设计稿，全程 AI 一键完成，适合产品、设计、开发快速原型沟通！

---

🧩什么是 MasterGo AI？

MasterGo 是一款国产在线 UI 设计工具，类似 Figma，但更轻便、学习门槛低。其 AI 功能支持：

• 一句话生成高保真 UI 页面
• 支持移动端、网页、后台等多种场景
• 输入产品描述、上传原型图、修改颜色风格等参数
• 支持自动生成 Vue/React 框架代码（适配常用组件库）

---

🛠️使用步骤概览

✅ 第一步：新建设计文件

• 登录 MasterGo 官网，点击右上角【新建文件】
• 进入空白设计画布

---

✅ 第二步：启用 AI 生成界面功能

• 点击上方工具栏中的【AI 图标】
• 选择“AI 生成界面”，进入 AI 输入页

---

✅ 第三步：输入产品描述

在输入框中描述你想要的页面内容，比如：

• 页面类型：移动端 / 网页 / 后台
• 页面结构：导航栏、轮播图、商品列表等
• 页面风格：颜色、圆角、字体大小、明暗模式等
• 

---

🎯实战案例：快速生成健身电商 APP 页面

🧾 描述输入如下：

设计一个售卖健身器材的APP：首页包含搜索栏、轮播图、分类导航（跑步机、哑铃等），展示热门产品（含图片、名称、价格、评分、加入购物车按钮），底部有四个导航图标：首页、分类、购物车、我的。

• 主题色设置为 #FA2549
• 回车后，等待 10 秒左右 AI 生成页面结构
• 点击“开始生成”后自动完成界面设计

✅ 生成效果展示（首页 UI）

• 若有细节不满意，可输入 “文字放大1.5倍”、“优化组件间距”等进行调整
• 点击“插入到画布”，进入可编辑设计图层

---

✨生成商品详情页

复制上一页，输入：

生成跑步机商品详情页，包含商品图、价格、评分、详情介绍、购买按钮等

即刻生成新页面：

---

🖥️后台管理系统：生成健身器材后台

描述示例：

健身器材后台：包含登录页、订单管理（搜索、筛选）、产品管理、销售统计看板

页面效果如下：

• ✅ 订单管理模块
• ✅ 可添加弹窗功能，如“新建订单”
• ✅ 生成销售数据看板

---

🧾上传原型图自动生成 UI

你还可以上传草图/白板图，AI 自动还原成设计图！

👇 上传一张新闻网站原型图

🔧 输入提示：

根据上图生成新闻网站首页，包含导航栏、新闻分类、头条推荐、搜索功能等。

✅ 最终效果图如下：

---

🌟多模态AI项目 UI 快速生成

除了通用网页，你还可以用它设计生产级 AI 应用平台，如：

✅ 笔记管理模块界面

✅ 聊天管理模块界面

✅ AI 绘画模块界面

🎯 从产品思路 → 页面原型 → 界面设计 → 代码输出，全流程 AI 帮你搞定

✨更多扩展能力

✅ 英文输入 → 生成英文页面

直接输入英文描述，自动生成英文 UI（可配合海外产品原型）

✅ 一键生成前端框架代码

• 支持 Vue / React
• 可选组件库（Element Plus、AntD 等）
• 自动生成页面结构代码，点击可复制

---

📌总结

MasterGo AI 不仅是设计工具，更是一个面向 产品/设计/开发全链路协作 的高效原型工具。你只需要提供一句话描述，就能生成设计图、代码，快速验证想法、推进开发。

✅ 支持多端页面自动生成✅ 支持原型图上传自动识别✅ 支持代码导出与团队协作

绘制下面的UI 界面的结构拆解与组件关系示意图 ，还需要熟悉这款设计软件的基础操作