🎨 Vibecoding 案例分享：零代码打造 AI 绘本生成器

面向人群：无编程基础的纯小白​

项目周期：约 2 周（边学边做）​

最终成果：一个能把任意文档自动转换成儿童绘本的 AI 应用​

🖼️ 效果展示​

​

​

​

​

40%

​

​

​

​

60%

​

​

上图展示了一本由 AI 自动生成的儿童绘本《狐狸大冒险》，包含封面、内容页、互动页、角色参考图等完整内容。​

📚 学习路线图​

​

#bSkRTLPcfooQ text { white-space: pre; }#bSkRTLPcfooQ .fb0 { stroke: var(--N900-FG, 0.15); }#bSkRTLPcfooQ .fb0 {stroke: rgba(31,35,41, 0.15)}#bSkRTLPcfooQ .fx0 { stroke-miterlimit: 10; }#bSkRTLPcfooQ .fx0 {stroke-miterlimit: 10}#bSkRTLPcfooQ .fa1 { fill: rgb(187, 191, 196); }#bSkRTLPcfooQ .fa1 {fill: rgb(187, 191, 196)}#bSkRTLPcfooQ .fx1 { font: 400 12px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#bSkRTLPcfooQ .fx1 {font-style: normal}#bSkRTLPcfooQ .fx2 { text-anchor: middle; }#bSkRTLPcfooQ .fx2 {text-anchor: middle}#bSkRTLPcfooQ .fx3 { dominant-baseline: central; }#bSkRTLPcfooQ .fx3 {dominant-baseline: central}#bSkRTLPcfooQ .fx4 { stroke: none; }#bSkRTLPcfooQ .fx4 {stroke: none}#bSkRTLPcfooQ .fc0 { fill: var(--text-caption); }#bSkRTLPcfooQ .fc0 {fill: #646a73}#bSkRTLPcfooQ .fa2 { fill: var(--text-link-disabled); }#bSkRTLPcfooQ .fa2 {fill: rgb(187, 191, 196)}#bSkRTLPcfooQ .fa3 { fill: rgb(240, 238, 230); }#bSkRTLPcfooQ .fa3 {fill: rgb(240, 238, 230)}#bSkRTLPcfooQ .fx5 { font: 400 14px MonospacedNumber, LarkHackSafariFont, LarkEmojiFont, LarkChineseQuote, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Tahoma, "PingFang SC", "Microsoft Yahei", Arial, "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }#bSkRTLPcfooQ .fx5 {font-style: normal}#bSkRTLPcfooQ .fx6 { text-anchor: start; }#bSkRTLPcfooQ .fx6 {text-anchor: start}#bSkRTLPcfooQ .fx7 { dominant-baseline: alphabetic; }#bSkRTLPcfooQ .fx7 {dominant-baseline: alphabetic}#bSkRTLPcfooQ .fc1 { fill: rgb(115, 114, 108); }#bSkRTLPcfooQ .fc1 {fill: rgb(115, 114, 108)}#bSkRTLPcfooQ .fc2 { fill: rgb(61, 61, 58); }#bSkRTLPcfooQ .fc2 {fill: rgb(61, 61, 58)}#bSkRTLPcfooQ .fb1 { fill: var(--N900-FG, 0.15); }#bSkRTLPcfooQ .fb1 {fill: rgba(31,35,41, 0.15)}#bSkRTLPcfooQ .fb2 { fill: rgb(240, 238, 230); }#bSkRTLPcfooQ .fb2 {fill: rgb(240, 238, 230)}#bSkRTLPcfooQ .fa4 { fill: var(--bg-body); }#bSkRTLPcfooQ .fa4 {fill: #fff}ABCD12345阶段目标时间难度🎯 Demo 阶段🚀 上手阶段⚡ 优化阶段🌊 深水区5 分钟跑通第一个 AI 应用完成完整的绘本生成器解决实际问题，提升质量理解原理，举一反三5 分钟1-2 天持续进阶⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

​

🎯 第一阶段：Demo（5 分钟看到效果）​

​

核心理念：别看理论，先动手！5 分钟内让你看到效果。​

​

Step 1：下载 AI 编辑器（2 分钟）​

打开浏览器，搜索 "Cursor 下载" 或 "Windsurf 下载"​

下载安装包，双击安装​

用邮箱注册账号​

Step 2：创建项目文件夹​

在电脑上随便找个地方，新建一个文件夹：我的AI绘本​

Step 3：复制这段话给 AI​

打开 Windsurf/Cursor，按 Cmd+L（Mac）或 Ctrl+L（Windows）打开 AI 对话框。​

复制粘贴这段话：​

​

代码块​

Plain Text

​

Step 4：跟着 AI 做（2 分钟）​

AI 会告诉你：​

•

创建哪些文件​

•

安装什么依赖​

•

怎么运行​

你只需要：点击 AI 给的"Apply"按钮，它会自动帮你创建文件。​

Step 5：接入 Nano Banana Pro API​

Nano Banana Pro 是一个强大的 AI 图片生成服务，用于生成绘本插图。​

1.1

申请 API Key​

打开 https://grsai.com (注: 这个网站目前是我用着相对性价比感觉比较高的nano banana pro模型服务商, 如果有其他更好的模型服务商, 欢迎在评论区分享)​

​

​

注册账号并登录​

进入控制台，创建 API Key(按需购买积分, 按照我的经验来说, 10 元以内对于测试项目是完全够用的, 非广告推销, 只是为了测试与接入nano banana pro做图片生成功能使用)​

​

​

重要：妥善保存你的 API Key，不要泄露！​

1.2

配置环境变量​

在项目根目录创建 .env 文件（如果没有的话），添加以下配置：​

​

代码块​

Plain Text

# Nano Banana Pro API（用于 AI 图片生成）​

NANO_BANANA_API_KEY=sk-7832cba5ad4e4119bbd1bf756ea721ab(这里提供一个可直接用来做测试的 api_key, 有额度限制, 建议实践的同学后续换成自己的 api_key，注意不要泄露，避免被他人使用)​

NANO_BANANA_API_BASE=https://grsai.com​

NANO_BANANA_MODEL=nano-banana-pro​

​

​

​

可选模型：​

•

nano-banana-fast - 快速生成，质量一般​

•

nano-banana-pro - 专业版（推荐）​

1.3

让 AI 帮你接入​

把下面这段话复制给 AI：​

​

代码块​

Bash

请帮我接入 Nano Banana Pro 图片生成 API。​

​

API 信息：​

- 基础 URL: https://grsai.com​

​

AI 会帮你生成完整的接入代码！​

如果AI生成的代码有错误, 可以打开接入文档:https://grsai.com/dashboard/documents/nano-banana, 然后把所有的 api 调用信息copy 过来, 让AI帮你实现具体的接入逻辑, 而你只需要配置下 Token 就可以了。​

​

​

Step 6：运行看效果！​

AI 会告诉你运行命令，通常是：​

​

代码块​

Plain Text

pip install gradio openai​

python app.py​

​

然后打开浏览器，访问 http://localhost:7860，你就能看到一个简单的界面了！​

🎉 恭喜！你已经做出了第一个 AI 应用！​

Demo 阶段小结​

​

​

🚀 第二阶段：上手（1-2 天完成完整项目）​

​

上面的 Demo 只是开胃菜，下面是完整的项目开发过程。​

​

🎯 项目目标​

痛点​

•

幼儿园老师想把教案变成绘本给小朋友看，但不会画画​

•

家长想把孩子喜欢的故事做成图文并茂的绘本​

•

培训机构想把枯燥的知识点变成有趣的图画书​

解决方案​

上传一个文档 → AI 自动生成一本完整的绘本​

包含：故事大纲、角色设计、每页插图、最终 PPT/PDF​

🛠️ 完整实战过程​

第一轮对话：从零开始​

我对 AI 说：​

​

"我想做一个 AI 绘本生成器。用户上传一个 PDF 文档，系统自动把它变成一本儿童绘本。需要有：文档解析、大纲生成、图片生成、导出 PDF 这几个功能。用 Python Flask 做后端。"​

​

AI 帮我生成了：​

•

项目目录结构​

•

Flask 应用入口文件​

•

数据库模型（存储绘本信息）​

•

基础 API 接口​

第二轮对话：完善文档解析​

我对 AI 说：​

​

"文档解析这块，我想支持 PDF、Word、TXT 格式。PDF 可能有图片，需要用 OCR 识别。帮我接入mineru 这个 OCR 服务。"​

​

AI 帮我实现了：​

•

文件上传接口​

•

根据文件类型选择不同解析方式​

•

调用 mineru API 解析 PDF​

•

提取文档中的图片并生成描述​

如何申请与接入 mineru API呢？​

https://mineru.net/​

全能的文档解析神器全能的文档解析神器​

精准解析 高效提取 全面助力AI Ready数据自由​

打开网址, 注册账号, 进入首页.​

​

​

点击 'API'，先进行 API 申请, "MinerU API 申请问卷", 提交后很快就会收到通过的申请.​

​

​

申请通过后，就可以创建 API Token 了(注意, 该 Token 要保存好，后面要用到, 且不要轻易泄漏)。​

​

​

mineru当前每天支持 10000 次的免费调用，基本可以满足我们的测试需求!​

在接入阶段, 将API文档页中关于如何接入 API 的全部内容 copy 过来, 让AI帮我实现具体的接入逻辑, 而你只需要配置下 Token 就可以了。​

​

​

第三轮对话：设计 Prompt（最关键！）​

我对 AI 说：​

​

"大纲生成的 Prompt 不太好，生成的内容太像 AI 写的，没有童趣。我想要：​

让 AI 扮演'世界级儿童绘本设计师'​

每页要有叙事目标、关键内容、视觉画面、布局结构​

避免 AI 废话，比如'不仅仅是 X，而是 Y'这种​

封面要有冲击力，封底要有仪式感"​

​

AI 帮我优化了 Prompt：​

​

代码块​

JSON

你是一位世界级的儿童绘本设计师和故事讲述者。​

​

你制作的绘本能根据源素材和目标受众进行调整。​

凡事皆有故事，而你要找到最佳的讲述方式。​

​

每一页必须包含以下 4 个部分：​

// NARRATIVE GOAL (叙事目标)​

// KEY CONTENT (关键内容) ​

// VISUAL (视觉画面)​

// LAYOUT (布局结构)​

​

**至关重要 (CRITICAL):**​

- 避免"标题：副标题"格式，这很 AI 感​

- 禁止"不仅仅是 [X]，而是 [Y]"这种废话​

- 封底不要用"谢谢观看"，要有设计感的结束语​

​

第四轮对话：解决角色一致性问题​

我发现的问题：​

​

"生成的绘本里，同一个小狐狸在不同页面长得不一样！第一页是橙色的，第三页变成红色了。"​

​

我对 AI 说：​

​

"怎么让角色在每一页都保持一致？"​

​

AI 给出的方案：​

先生成一张"角色设定图"（正面、侧面、不同表情）​

生成每一页时，把角色设定图作为参考传给 AI​

在 Prompt 里强调"必须和参考图保持一致"​

​

​

角色设定图示例：包含全身姿势（站立、挥手、坐下、行走）、面部表情（开心、好奇、惊讶、坚定）、关键特征标注（发型、眼睛、服装）​

​

代码块​

Plain Text

## 🎭 Character Consistency (CRITICAL)​

You MUST maintain character consistency with the reference image.​

- Keep the same: face shape, eye color, hair style, clothing​

- Only change: pose, expression, and interaction with the scene​

​

第五轮对话：添加实时进度​

我对 AI 说：​

​

"生成一本绘本要好几分钟，用户干等着体验很差。能不能实时显示进度？比如'正在解析文档...'、'正在生成第 3 页...'这样。"​

​

AI 帮我实现了 SSE（服务器推送事件）：​

•

用户创建任务后，获得一个 task_id​

•

前端通过 SSE 订阅进度​

•

后端每完成一步就推送进度更新​

•

每生成一张图就实时显示出来​

第六轮对话：支持用户上传照片​

我对 AI 说：​

​

"有个新需求：用户可以上传自己的照片（比如孩子的照片），让 AI 把照片融入到绘本插图里。比如画一个卡通场景，但里面有真实的照片。"​

​

AI 帮我设计了 Mixed Media 方案：​

​

代码块​

Plain Text

🖼️ Reality Layer (真实照片层)​

└── 用户上传的照片，保持 100% 真实质感​

​

🦊 Illustration Layer (插画层)​

└── AI 生成的卡通角色和场景​

​

🌓 The Glue (融合层)​

└── 光影统一、边缘交互​

​

上手阶段小结​

​

​

⚡ 第三阶段：优化（解决实际问题）​

​

项目跑起来了，但会遇到各种问题。这一节教你怎么解决。​

​

💡 Vibecoding 的关键技巧​

先描述"做什么"，再说"怎么做"​

❌ 错误示范：​

​

"帮我写一个 Flask 路由，用 POST 方法，接收 multipart/form-data..."​

​

✅ 正确示范：​

​

"我需要一个文件上传功能，用户可以上传 PDF 文件，系统保存后返回一个任务 ID"​

​

遇到问题，描述现象而非猜测原因​

❌ 错误示范：​

​

"数据库连接池是不是有问题？"​

​

✅ 正确示范：​

​

"上传文件后，有时候会报错'connection timeout'，大概 10 次里有 2 次"​

​

用具体例子说明期望​

❌ 错误示范：​

​

"生成的内容不够好"​

​

✅ 正确示范：​

​

"现在生成的标题是'狐狸的故事：一个关于友谊的冒险'，我想要更有童趣的，比如'嘿！这就是你要找的狐狸入门指南'"​

​

分步骤迭代，不要一次说太多​

❌ 错误示范：​

​

"帮我做一个完整的绘本系统，要有用户登录、文件上传、AI 生成、导出 PDF、分享到微信..."​

​

✅ 正确示范：​

​

"我们先做文件上传功能。用户上传一个 PDF，系统保存到本地，返回文件路径。"​

​

​

​

🚨 踩坑指南：我遇到的问题和解决方案​

​

这些坑我都踩过，分享出来让你少走弯路。​

​

坑 1：API Key 泄露​

问题：把 API Key 写在代码里，上传到 GitHub，被人盗用，一夜之间扣了 500 块。​

解决：​

​

代码块​

Python

# ❌ 错误：直接写在代码里​

api_key = "sk-xxxxxxxxxxxxx"​

​

# ✅ 正确：写在 .env 文件里​

# .env 文件（不要上传到 GitHub）​

OPENAI_API_KEY=sk-xxxxxxxxxxxxx​

​

# 代码里这样读取​

import os​

​

记住：创建 .gitignore 文件，把 .env 加进去。​

坑 2：生成的图片风格不统一​

问题：第一页是卡通风格，第二页变成写实风格了。​

解决：在每个图片生成的 Prompt 里，都加上风格描述。​

​

代码块​

Python

# ❌ 错误：只描述内容​

prompt = "画一只狐狸在森林里"​

​

# ✅ 正确：内容 + 风格​

prompt = """​

画一只狐狸在森林里。​

​

风格要求：​

- 迪士尼皮克斯 3D 动画风格​

​

坑 3：角色长得不一样​

问题：同一个角色，每一页长得都不一样。​

解决：​

先生成一张角色参考图​

每次生成页面时，把参考图传给 AI​

在 Prompt 里强调"必须和参考图一致"​

坑 4：生成太慢，用户以为卡死了​

问题：生成一本绘本要 5 分钟，用户盯着白屏。​

解决：​

加进度条​

每完成一步就更新状态​

每生成一张图就立刻显示​

坑 5：Prompt 太长，AI 忘记前面的要求​

问题：Prompt 写了 2000 字，AI 只记住了最后几句。​

解决：​

把最重要的要求放在 Prompt 的开头和结尾​

用 加粗 或 ⚠️ 重要 标记关键要求​

把长 Prompt 拆成多个短 Prompt​

🎯 Prompt 模板：拿来就用​

​

这些是我调试好的 Prompt，直接复制使用。​

​

模板 1：大纲生成 Prompt​

​

代码块​

Markdown

​

模板 2：图片生成 Prompt​

​

代码块​

Markdown

你是一位专业的儿童绘本插画师。​

​

## 任务​

为绘本的第 {页码} 页绘制插图。​

​

## 页面内容​

标题：{标题}​

文字：{内容}​

场景：{视觉描述}​

​

## 风格要求​

- 迪士尼皮克斯 3D 动画风格​

​

模板 3：角色设定图 Prompt​

​

代码块​

Markdown

创建一张角色设定图（Character Reference Sheet）。​

​

优化阶段小结​

​

​

🌊 第四阶段：深水区（理解原理，举一反三）​

​

这一节帮你理解"为什么"，而不只是"怎么做"。理解了设计思路，你就能举一反三，做出自己的 AI 应用。​

​

📊 项目成果展示​

功能清单​

​

​

技术栈（你不需要懂，AI 帮你选的）​

•

后端：Python Flask​

•

数据库：SQLite（开发）/ PostgreSQL（生产）​

•

文档解析：MinerU OCR​

•

AI 模型：GPT-4o（文本）+ GPT-Image-1 / Gemini（图片）​

•

动画生成：可灵 AI / 通义万象​

🏗️ 项目架构​

小白版（快速理解）​

​

代码块​

Plain Text

你上传一个 PDF/Word 文档​

↓​

┌─────────────────────────────────────┐​

│ 第 1 步：文档解析 │​

│ 把文档里的文字和图片提取出来 │​

└─────────────────────────────────────┘​

↓​

┌─────────────────────────────────────┐​

│ 第 2 步：AI 生成绘本大纲 │​

│ 决定分几页、每页讲什么、画什么 │​

└─────────────────────────────────────┘​

↓​

┌─────────────────────────────────────┐​

│ 第 3 步：AI 生成角色参考图 │​

│ 确保主角在每一页长得一样 │​

└─────────────────────────────────────┘​

↓​

┌─────────────────────────────────────┐​

​

系统架构图​

​

​

架构说明：​

​

​

完整技术流程（进阶版）​

​

代码块​

JavaScript

┌─────────────────────────────────────────────────────────────────────────────┐​

│ AI 绘本生成完整流程 │​

└─────────────────────────────────────────────────────────────────────────────┘​

​

用户输入​

├── 主题/文档内容 (parsed_content)​

├── 风格关键词 (style_keyword): "疯狂动物城"、"宫崎骏"​

├── 参考图片 (reference_images): 风格参考图​

└── 素材图片 (source_images): 需要嵌入绘本的真实照片​

​

↓​

​

┌─────────────────────────────────────────────────────────────────────────────┐​

│ Stage 1: 风格生成 (Style Generator) │​

├─────────────────────────────────────────────────────────────────────────────┤​

│ 输入: │​

│ - theme (主题) │​

​

🧠 核心设计原则​

原则 1：流水线思维 —— 把大问题拆成小步骤​

问题：直接让 AI "把文档变成绘本" 太模糊，AI 不知道从哪下手。​

解决：拆成 5 个清晰的步骤，每一步只做一件事。​

​

代码块​

Plain Text

​

原则 2：Prompt 是灵魂 —— 好的提示词决定一切​

类比：Prompt 就像你给厨师的菜谱​

•

菜谱写"做一道好吃的菜" → 厨师随便做​

•

菜谱写"用鸡胸肉、西兰花、蒜末，先煎后炒，少盐多蒜" → 厨师精准执行​

​

​

原则 3：分层架构 —— 让代码像乐高积木​

​

代码块​

Plain Text

┌─────────────────────────────────────────────────────────────┐​

│ 🎨 界面层 (Gradio) - 用户看到的界面 │​

└─────────────────────────────────────────────────────────────┘​

↓​

┌─────────────────────────────────────────────────────────────┐​

│ 🔧 服务层 (Services) - 具体的业务逻辑 │​

└─────────────────────────────────────────────────────────────┘​

↓​

┌─────────────────────────────────────────────────────────────┐​

│ 🤖 AI 层 (Providers) - 和各种 AI 模型通信 │​

└─────────────────────────────────────────────────────────────┘​

↓​

┌─────────────────────────────────────────────────────────────┐​

│ 💾 数据层 (Database) - 存储绘本信息 │​

​

好处：想换一个 AI 模型？只改 AI 层，其他层不用动。​

原则 4：异步处理 —— 别让用户干等​

​

代码块​

Plain Text

❌ 同步处理：点击"生成" → 白屏 5 分钟 → 突然全部出来​

​

✅ 异步处理：点击"生成" → "正在解析文档..." → "正在生成大纲..."​

→ "第 1 页生成完成 ✓" [显示图片] → "第 2 页生成完成 ✓" [显示图片]​

​

​

​

📊 项目文件结构（参考）​

​

代码块​

Bash

AI绘本/​

├── backend/ # 后端代码​

│ ├── app.py # Flask 应用入口​

​

📝 常见问题​

Q: 我完全不懂代码，真的能做出来吗？​

A: 可以！关键是：把需求描述清楚、遇到问题及时问 AI、不要怕报错。​

Q: 需要花多少钱？​

A: AI 编辑器免费版够用，API 测试阶段大概几十块，开发阶段用本地电脑免费。​

Q: 生成一本绘本要多久？​

A: 文档解析 10-30 秒 + 大纲生成 20-40 秒 + 图片生成 2-5 分钟 = 总计约 3-6 分钟​