Vibecoding 案例分享：零代码打造 AI 绘本生成器
面向人群：无编程基础的纯小白
项目周期：约 2 周（边学边做）
最终成果：一个能把任意文档自动转换成儿童绘本的 AI 应用
🖼️ 效果展示
50%
50%
上图展示了一本由 AI 自动生成的儿童绘本《狐狸大冒险》，包含封面、内容页、互动页、角色参考图等完整内容。
📚 学习路线图
第一阶段：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
我想做一个 AI 绘本生成器。请帮我创建一个最简单的版本：1. 用 Python + Gradio 做界面2. 用户输入一段文字描述3. 调用 AI 生成一张绘本风格的图片4. 显示出来先帮我创建项目结构和必要的文件。
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.comNANO\_BANANA\_MODEL=nano-banana-pro
#HSWKbrCppRrV text{white-space:pre}.fb0{stroke:var(--N900-FG, 0.15)}.fx0{stroke-miterlimit:10}.fa1{fill:#bbbfc4}.fx1{font:normal 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}.fx2{text-anchor:middle}.fx3{dominant-baseline:central}.fx4{stroke:none}.fc0{fill:var(--text-caption)}.fa2{fill:var(--text-link-disabled)}.fa3{fill:rgb(240, 238, 230)}.fc1{stroke:var(--B500)}.fx5{font:400 normal 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"}.fx6{text-anchor:start}.fx7{dominant-baseline:alphabetic}.fc2{fill:rgb(115, 114, 108)}.fx8{font:400 normal 12px LarkHackSafariFont, LarkEmojiFont, "ui-monospace", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Noto Sans", Tahoma, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", STHeiti, SimHei, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", system-ui}.fc3{fill:rgb(20, 20, 19)}.fc4{fill:rgb(61, 61, 58)}.fx9{font:400 normal 12px ui-monospace}.fc5{fill:var(--B500)}.fb1{fill:var(--N900-FG, 0.15)}.fb2{fill:rgb(240, 238, 230)}.fa4{fill:var(--bg-body)}ABC1234配置项说明默认值NANO_BANANA_API_KEYNANO_BANANA_API_BASENANO_BANANA_MODELnano-banana-pro你的 API 密钥API 服务地址使用的模型必填https://grsai.com
可选模型：
•
nano-banana-fast - 快速生成，质量一般
•
nano-banana-pro - 专业版（推荐）
1.3
让 AI 帮你接入
把下面这段话复制给 AI：
代码块
Plain Text
请帮我接入 Nano Banana Pro 图片生成 API。API 信息：- 基础 URL: https://grsai.com- 绘画接口: POST /v1/draw/nano-banana- 结果查询: POST /v1/draw/result- 认证方式: Bearer Token (放在 Authorization header)请求参数：- model: 模型名称，如 "nano-banana-pro"- prompt: 图片描述- aspectRatio: 图片比例，如 "16:9"- imageSize: 图片大小，如 "2k"返回结果是异步的，需要轮询 /v1/draw/result 接口获取生成结果。请帮我：1. 创建一个 image_service.py 服务类2. 从 .env 读取 API Key3. 实现生成图片和等待结果的逻辑
AI 会帮你生成完整的接入代码！
如果AI生成的代码有错误, 可以打开接入文档:https://grsai.com/dashboard/documents/nano-banana, 然后把所有的 api 调用信息copy 过来, 让AI帮你实现具体的接入逻辑, 而你只需要配置下 Token 就可以了。
Step 6：运行看效果！
AI 会告诉你运行命令，通常是：
代码块
Plain Text
pip install gradio openaipython app.py
然后打开浏览器，访问 http://localhost:7860，你就能看到一个简单的界面了！
🎉 恭喜！你已经做出了第一个 AI 应用！
Demo 阶段小结
#iXACWHRhozht text{white-space:pre}.fb0{stroke:var(--N900-FG, 0.15)}.fx0{stroke-miterlimit:10}.fa1{fill:#bbbfc4}.fx1{font:normal 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}.fx2{text-anchor:middle}.fx3{dominant-baseline:central}.fx4{stroke:none}.fc0{fill:var(--text-caption)}.fa2{fill:var(--text-link-disabled)}.fa3{fill:rgb(240, 238, 230)}.fx5{font:400 normal 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"}.fx6{text-anchor:start}.fx7{dominant-baseline:alphabetic}.fc1{fill:rgb(115, 114, 108)}.fc2{fill:rgb(61, 61, 58)}.fb1{fill:var(--N900-FG, 0.15)}.fb2{fill:rgb(240, 238, 230)}.fa4{fill:var(--bg-body)}AB1234你学到了什么说明AI 编辑器对话式开发快速验证Cursor/Windsurf 是你的"程序员朋友"用自然语言描述需求，AI 帮你写代码先做最小版本，看到效果再继续
🚀 第二阶段：上手（1-2 天完成完整项目）
上面的 Demo 只是开胃菜，下面是完整的项目开发过程。
📖 什么是 Vibecoding？
Vibecoding = 用自然语言告诉 AI 你想要什么，让 AI 帮你写代码。
你不需要懂编程语法，只需要：
清晰描述你的想法
和 AI 对话迭代
测试并反馈问题
就像和一个程序员朋友聊天，告诉他你想做什么，他帮你实现。
🎯 项目目标
痛点
•
幼儿园老师想把教案变成绘本给小朋友看，但不会画画
•
家长想把孩子喜欢的故事做成图文并茂的绘本
•
培训机构想把枯燥的知识点变成有趣的图画书
解决方案
上传一个文档 → 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呢？
全能的文档解析神器全能的文档解析神器
精准解析 高效提取 全面助力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：
代码块
Plain Text
你是一位世界级的儿童绘本设计师和故事讲述者。你制作的绘本能根据源素材和目标受众进行调整。凡事皆有故事，而你要找到最佳的讲述方式。每一页必须包含以下 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 块。
解决：
代码块
Plain Text
# ❌ 错误：直接写在代码里api_key = "sk-xxxxxxxxxxxxx"# ✅ 正确：写在 .env 文件里# .env 文件（不要上传到 GitHub）OPENAI_API_KEY=sk-xxxxxxxxxxxxx# 代码里这样读取import osapi_key = os.getenv("OPENAI_API_KEY")
记住：创建 .gitignore 文件，把 .env 加进去。
坑 2：生成的图片风格不统一
问题：第一页是卡通风格，第二页变成写实风格了。
解决：在每个图片生成的 Prompt 里，都加上风格描述。
代码块
Plain Text
# ❌ 错误：只描述内容prompt = "画一只狐狸在森林里"# ✅ 正确：内容 + 风格prompt = """画一只狐狸在森林里。风格要求：- 迪士尼皮克斯 3D 动画风格- 明亮温暖的色调- 角色有大眼睛、圆润的线条- 背景简洁，有柔和的光线"""
坑 3：角色长得不一样
问题：同一个角色，每一页长得都不一样。
解决：
先生成一张角色参考图
每次生成页面时，把参考图传给 AI
在 Prompt 里强调"必须和参考图一致"
坑 4：生成太慢，用户以为卡死了
问题：生成一本绘本要 5 分钟，用户盯着白屏。
解决：
加进度条
每完成一步就更新状态
每生成一张图就立刻显示
坑 5：Prompt 太长，AI 忘记前面的要求
问题：Prompt 写了 2000 字，AI 只记住了最后几句。
解决：
把最重要的要求放在 Prompt 的开头和结尾
用 加粗 或 ⚠️ 重要 标记关键要求
把长 Prompt 拆成多个短 Prompt
🎯 Prompt 模板：拿来就用
这些是我调试好的 Prompt，直接复制使用。
模板 1：大纲生成 Prompt
代码块
Plain Text
你是一位世界级的儿童绘本设计师和故事讲述者。## 任务根据以下文档内容，设计一本 10-15 页的儿童绘本大纲。## 文档内容{这里粘贴文档内容}## 输出要求为每一页提供：1. **标题**：叙事性标题（不是"标题：副标题"格式）2. **叙事目标**：这一页在故事中的作用3. **关键内容**：要展示的文字4. **视觉画面**：场景、角色动作、表情5. **布局**：构图建议## 禁止事项- 禁止使用"让我们一起..."、"小朋友们..."等说教语气- 禁止"不仅仅是X，而是Y"等 AI 味道的句式- 禁止以"谢谢观看"结尾## 输出格式JSON 格式，便于程序解析
模板 2：图片生成 Prompt
代码块
Plain Text
模板 3：角色设定图 Prompt
代码块
Plain Text
创建一张角色设定图（Character Reference Sheet）。## 角色信息名称：{角色名}描述：{外观描述}## 设定图要求1. 展示角色的 3 个角度：正面、3/4 侧面、侧面2. 展示 3-4 种表情：开心、好奇、惊讶、思考3. 展示全身和面部特写4. 使用干净的白色背景5. 标注关键特征（发色、眼睛颜色、服装细节）## 风格{风格描述，如"迪士尼皮克斯 3D 动画风格"}## 布局横向 16:9，像专业的角色设计稿一样排列
优化阶段小结
🌊 第四阶段：深水区（理解原理，举一反三）
这一节帮你理解"为什么"，而不只是"怎么做"。理解了设计思路，你就能举一反三，做出自己的 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 生成角色参考图 │ │ 确保主角在每一页长得一样 │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ 第 4 步：AI 批量生成每页插图 │ │ 根据大纲，一页一页画出来 │ └─────────────────────────────────────┘ ↓ ┌─────────────────────────────────────┐ │ 第 5 步：导出成品 │ │ 打包成 PPT/PDF，还能生成动画视频！ │ └─────────────────────────────────────┘ ↓ 一本完整的 AI 绘本诞生！🎉
系统架构图
架构说明：
完整技术流程（进阶版）
代码块
Plain Text
┌─────────────────────────────────────────────────────────────────────────────┐│ AI 绘本生成完整流程 │└─────────────────────────────────────────────────────────────────────────────┘用户输入├── 主题/文档内容 (parsed_content)├── 风格关键词 (style_keyword): "疯狂动物城"、"宫崎骏"├── 参考图片 (reference_images): 风格参考图└── 素材图片 (source_images): 需要嵌入绘本的真实照片 ↓┌─────────────────────────────────────────────────────────────────────────────┐│ Stage 1: 风格生成 (Style Generator) │├─────────────────────────────────────────────────────────────────────────────┤│ 输入: ││ - theme (主题) ││ - style_keyword (风格关键词) ││ - reference_images (参考图片) ← 多模态 LLM 分析图片风格 ││ - target_audience (目标受众) ││ ││ 输出: ││ - style_config JSON (设计美学、配色、字体、视觉元素、角色风格) │└─────────────────────────────────────────────────────────────────────────────┘ ↓ style_config┌─────────────────────────────────────────────────────────────────────────────┐│ Stage 2: 大纲生成 (Outline Generator) │├─────────────────────────────────────────────────────────────────────────────┤│ 输入: ││ - parsed_content (文档内容) ││ - background_knowledge (联网搜索的背景知识) ││ - style_config (来自 Stage 1) ││ - source_images (素材图片列表) ← 告知 LLM 有多少张图片可用 ││ - user_prompt, target_audience, subject, theme_character ││ ││ 输出: ││ - 完整绘本大纲 JSON ││ - title, style_config, sections ││ - 每页 slide: title, narrative_goal, content, visual_description, ││ layout, embedded_images (如 ["IMG_1", "IMG_2"]) │└─────────────────────────────────────────────────────────────────────────────┘ ↓ 大纲 + embedded_images┌─────────────────────────────────────────────────────────────────────────────┐│ Stage 3: 图片生成 (Image Generator) │├─────────────────────────────────────────────────────────────────────────────┤│ 对每个 slide 执行: ││ ││ 1. 检查 embedded_images 是否为空 ││ ├── 有图片 → 使用 REALITY_PATCH_TEMPLATE ││ └── 无图片 → 使用 STANDARD_TEMPLATE ││ ││ 2. 拼接视觉指令: ││ - style_config.design_aesthetic ││ - slide.visual_description ││ - Reality Layer / Illustration Layer / The Glue (如有图片) ││ ││ 3. 调用多模态 API: ││ - prompt: 拼接后的视觉指令 ││ - images: source_images 中对应的真实图片 (IMG_1 → source_images[0]) ││ ││ 输出: ││ - 每页的生成图片 (Mixed Media: 插画 + 真实照片融合) │└─────────────────────────────────────────────────────────────────────────────┘ ↓最终绘本 (图片 + 文字)
🧠 核心设计原则
原则 1：流水线思维 —— 把大问题拆成小步骤
问题：直接让 AI "把文档变成绘本" 太模糊，AI 不知道从哪下手。
解决：拆成 5 个清晰的步骤，每一步只做一件事。
代码块
Plain Text
❌ 错误思路：一步到位 "AI，把这个 PDF 变成绘本" → AI 懵了，不知道要做什么✅ 正确思路：流水线 步骤1：提取文字 → 步骤2：生成大纲 → 步骤3：画角色 → 步骤4：画每页 → 步骤5：打包 → 每一步都很清晰，AI 能精准执行
原则 2：Prompt 是灵魂 —— 好的提示词决定一切
类比：Prompt 就像你给厨师的菜谱
•
菜谱写"做一道好吃的菜" → 厨师随便做
•
菜谱写"用鸡胸肉、西兰花、蒜末，先煎后炒，少盐多蒜" → 厨师精准执行
原则 3：分层架构 —— 让代码像乐高积木
代码块
Plain Text
┌─────────────────────────────────────────────────────────────┐│ 🎨 界面层 (Gradio) - 用户看到的界面 │└─────────────────────────────────────────────────────────────┘ ↓┌─────────────────────────────────────────────────────────────┐│ 🔧 服务层 (Services) - 具体的业务逻辑 │└─────────────────────────────────────────────────────────────┘ ↓┌─────────────────────────────────────────────────────────────┐│ 🤖 AI 层 (Providers) - 和各种 AI 模型通信 │└─────────────────────────────────────────────────────────────┘ ↓┌─────────────────────────────────────────────────────────────┐│ 💾 数据层 (Database) - 存储绘本信息 │└─────────────────────────────────────────────────────────────┘
好处：想换一个 AI 模型？只改 AI 层，其他层不用动。
原则 4：异步处理 —— 别让用户干等
代码块
Plain Text
❌ 同步处理：点击"生成" → 白屏 5 分钟 → 突然全部出来✅ 异步处理：点击"生成" → "正在解析文档..." → "正在生成大纲..." → "第 1 页生成完成 ✓" [显示图片] → "第 2 页生成完成 ✓" [显示图片]
📊 项目文件结构（参考）
代码块
Plain Text
AI绘本/├── backend/ # 后端代码│ ├── app.py # Flask 应用入口│ ├── config.py # 配置文件│ ├── requirements.txt # Python 依赖│ ├── .env # 环境变量（API Key 放这里）│ ││ ├── controllers/ # API 接口│ ├── services/ # 业务逻辑│ ├── models/ # 数据模型│ ├── prompts/ # Prompt 模板│ └── utils/ # 工具函数│├── uploads/ # 上传的文件├── outputs/ # 生成的绘本└── docs/ # 文档
📝 常见问题
Q: 我完全不懂代码，真的能做出来吗？
A: 可以！关键是：把需求描述清楚、遇到问题及时问 AI、不要怕报错。
Q: 需要花多少钱？
A: AI 编辑器免费版够用，API 测试阶段大概几十块，开发阶段用本地电脑免费。
Q: 生成一本绘本要多久？
A: 文档解析 10-30 秒 + 大纲生成 20-40 秒 + 图片生成 2-5 分钟 = 总计约 3-6 分钟
🔗 相关资源
•
项目代码：就在这个文件夹里
•
API 文档：docs/API文档-文件上传与解析.md
•
SSE 文档：docs/SSE-API文档.md
•
Prompt 设计：docs/AIPromot-AI 绘本生成完整流程.md
🌟 进阶方向
深水区小结
💬 最后的话
Vibecoding 不是让你变成程序员，而是让你不需要成为程序员也能创造软件。
这个 AI 绘本项目，从想法到成品，全程都是和 AI 对话完成的。
你也可以。