一、项目介绍

这是一套以 AI 智能体协作 + 多模态内容生成 为核心的项目教程，基于 Spring Boot 3 + Spring AI Alibaba + Vue 3 开发的 AI 图文创作平台，带大家掌握多智能体编排、AI 工作流、7种配图方式（包括 Nano Banana Pro）等前沿技术，大幅提升求职竞争力！

5 大核心能力

1）多智能体协作创作：用户输入选题，由 5 个智能体协作完成从标题、大纲、正文到配图的完整创作流程，采用流式输出让用户实时看到 AI 的创作过程。

2）多种配图方式：支持 Pexels 图库搜索、Mermaid 流程图、Iconify 图标、表情包搜索、SVG 概念示意图、Nano Banana AI 生图等多种配图方式，通过策略模式实现灵活扩展。

3）三阶段人机协作：采用 “Human in the loop” 的设计理念，用户可以在标题选择、大纲编辑、两个阶段与 AI 协作，获得更满意的创作结果。

4）VIP 会员体系：集成 Stripe 国际支付，实现 VIP 会员开通、配额差异化管理、配图方式权限控制等完整的会员体系。

5）智能体可观测性：通过 AOP 注解自动记录智能体执行日志，提供执行耗时统计、成功率分析、用户活跃度等数据统计功能。

当你学会这个项目后，你不仅能开发 AI 爆文创作器，更能灵活开发各种复杂的 AI 应用：AI 写作助手、AI 内容生成器，尽情发挥自己的想象力吧！

为什么做这个项目？

1）解决真实痛点：自媒体时代，内容创作者面临选题难、写作慢、配图烦的问题。AI 图文创作工具能极大提升创作效率，这类产品有真实的市场需求和商业价值。

2）技术含金量高：多智能体协作是 AI 应用开发的进阶能力，本项目让你真正理解如何设计智能体之间的分工与配合，而不是简单地调用一次大模型 API。

3）面试亮点充足：SSE 流式推送、策略模式扩展、异步任务编排、状态机设计、Stripe 支付集成……每一个都是面试官爱问的点，一个项目覆盖多个高频考点。

二、项目优势

项目收获

本项目紧跟 AI 时代、选题新颖、对标实际业务场景、技术丰富。区别于增删改查的烂大街项目，我会带你实战大量新技术和企业应用场景，掌握层层递进的系统设计、项目扩展和优化方案，帮你成为 AI 时代企业的香饽饽，给你的简历和求职大幅增加竞争力！

全栈 AI 项目，技术丰富，玩透 Spring AI Alibaba：

业务场景真实，实践大量企业解决方案。

给大家讲的是 通用的项目开发方法、企业级架构设计套路和最新的 AI 应用开发技术，从这个项目中你可以学到：

如何基于 Spring AI Alibaba 构建 AI 应用，实现多智能体协作？
如何基于 StateGraph 实现 AI 工作流编排，让智能体串行/并行执行？
如何设计 Prompt 模板，实现结构化输出和流式响应？
如何实现 SSE 流式推送，提升用户体验？
如何使用策略模式实现多种配图方式的灵活扩展？
如何设计三阶段人机协作流程，实现 Human in the loop？
如何集成 Stripe 支付，实现国际化的会员体系？
如何通过 AOP 注解实现智能体执行日志的自动记录？
如何设计异步任务处理机制，提升系统并发能力？
如何进行 Docker 容器化部署，实现一键启动？

此外，还能学会很多 AI 编程、系统架构设计、技术方案对比的方法，提升排查问题、自主解决 Bug 的能力。鱼皮还给大家提供了大量的项目扩展点，有能力的同学可以进一步拉开和别人的区分度，无限进步！

鱼皮系列项目优势

鱼皮原创项目系列以实战为主，用 全程直播 的方式，从 0 到 1 带大家学习技术知识，并立即实践运用到项目中，做到学以致用。

此外，还提供如下服务：

详细的文字教程或直播笔记
完整的项目源码
1 对 1 答疑解惑
专属项目交流群
⭐️ 现成的简历写法（直接写满简历）
⭐️ 项目的扩展思路（拉开和其他人的差距）
⭐️ 项目相关面试题、题解和真实面经（提前准备，面试不懵逼）
⭐️ 前端 + Java 后端万用项目模板（快速创建项目）

比起看网上的教程学习，鱼皮项目系列的优势：从学知识 => 实践项目 => 复习笔记 => 项目答疑 => 简历写法 => 面试题解的一条龙服务

从需求分析、技术选型、项目设计、项目初始化、Demo 编写、前后端开发实现、项目优化、部署上线等，每个环节我都 从理论到实践 给大家讲的明明白白、每个细节都不放过！

对比维度	跟学鱼皮项目	自学网上免费项目	⭐️ 鱼皮项目优势
项目选题	✅ 选题新颖，刻意避开网上热门项目	传统项目场景（博客、商城、管理系统）	增加区分度，提高简历通过率
学习人数	✅ 少，不容易撞车	百万以上，烂大街	增加区分度，提高简历通过率
教学方式	✅ 全程直播，带你敲每一行代码、带你踩坑和解决 Bug，不漏过每一个细节	录制课程，视频虽然看起来简短、一帆风顺，但你遇到错误无从下手	降低学习门槛，减少学习时长
直播笔记	✅ 详细的官方笔记 + 精选学员优质笔记	有笔记，但未经筛选	学到更多知识细节
视频内容	✅ 项目教程 + 经验分享	项目教程	学到更多编程经验
项目源码	✅ 完整源码仓库 + 每章的提交记录 + 定期更新	只有代码包、不更新	节省时间，避免踩坑
项目答疑	✅ 各项目交流群 + 答疑解惑 + 常见问题整理	无免费的答疑服务，遇到问题自行解决	节省时间
简历写法	✅ 现成的简历写法	无	节省时间、提高简历通过率
项目扩展	✅ 给出扩展思路 + 学员作品共享	无	开拓思路、拉开和其他人的差距
项目面试	✅ 项目相关面试题、题解和真实面经	无	提前准备，面试不懵逼

编程导航已有 20+ 套项目教程！ 每个项目的学习重点不同，几乎全都是前端 + 后端的 全栈项目。

详细请见：https://codefather.cn/course（在该页面右侧有教程推荐和学习建议）

往期项目介绍视频：https://bilibili.com/video/BV1YvmbYbEgS

三、业务流程

核心业务流程

从用户注册登录 => 输入选题 => AI 创作 => 查看/导出文章：

三阶段创作流程

AI 爆款文章创作器采用 "Human in the loop" 的设计理念，将创作过程分为三个阶段：

阶段 1：标题生成

用户输入选题和文章风格后，智能体 1 生成 3 ~ 5 个爆款标题方案供用户选择，用户还可以补充描述来引导后续创作方向。

阶段 2：大纲生成

根据用户选择的标题，智能体 2 生成结构化的文章大纲。用户可以直接编辑大纲，也可以让 AI 根据修改建议优化大纲，直到满意为止。

阶段 3：正文+配图生成

智能体 3 ~ 5 协作完成正文创作和配图生成：

智能体 3：根据大纲生成 Markdown 格式的正文（带配图占位符）
智能体 4：分析正文内容，确定配图位置和搜索关键词
智能体 5：调用多种配图服务获取图片并上传到云存储

最终输出完整的图文内容。

四、功能模块

五、技术选型

后端

技术	版本	说明
Spring Boot	3.5.x	Web 框架
Spring AI Alibaba	1.1.0	多智能体编排框架
DashScope	-	通义千问大模型
MyBatis-Flex	1.11.x	ORM 框架
MySQL	8.0	数据存储
Redis	7.x	分布式 Session + 缓存
Redisson	3.50.x	分布式锁
Stripe	31.x	国际支付集成
腾讯云 COS	-	对象存储

前端

技术	版本	说明
Vue	3.5	前端框架
TypeScript	5.8	类型安全
Ant Design Vue	4.2	UI 组件库
Vite	7.0	构建工具
Pinia	3.0	状态管理
Axios	-	HTTP 请求
markdown-it	-	Markdown 渲染
highlight.js	-	代码高亮

工具

开发工具

Cursor 编辑器：AI Vibe Coding
JetBrains IDEA：后端开发
JetBrains WebStorm：前端开发

部署工具

Docker：容器化部署
Docker Compose：服务编排
Nginx：反向代理

六、架构设计

从客户端发送请求开始，自上而下经过一系列处理，最终得到响应结果。架构图如下：

架构分层说明

接入层

前端 Vue 3 应用通过 HTTP/SSE 与后端通信
Nginx 提供静态资源服务和反向代理

接口层

Spring Boot 提供 RESTful API
SSE 端点提供流式推送能力
AOP 拦截器处理权限校验和日志记录

业务层

用户服务：注册、登录、权限管理
文章服务：创建、查询、删除
智能体服务：5 个智能体的协作调度
配图服务：多种配图方式的策略选择
支付服务：Stripe 支付与 Webhook 处理
统计服务：执行日志与数据分析

智能体层

TitleGeneratorAgent：标题生成智能体
OutlineGeneratorAgent：大纲生成智能体
ContentGeneratorAgent：正文生成智能体
ImageAnalyzerAgent：配图分析智能体
ParallelImageGenerator：并行配图生成器

数据层

MySQL：用户、文章、支付记录、智能体日志
Redis：Session 存储、配额缓存
腾讯云 COS：图片存储

外部服务

通义千问：大模型调用
Pexels API：图库搜索
Bing API：表情包搜索
Stripe API：支付处理
Iconify API：图标检索
Nano Banana API: 图片生成

七、准备工作

AI 基础知识

请先观看鱼皮的《程序员保姆级 AI 指南》，了解 AI 基础知识和学习路线，后续在项目中实战时会有个大致的印象，便于学习理解。

⭐️ 推荐观看视频版：https://www.bilibili.com/video/BV1i9Z8YhEja

文字版：https://www.codefather.cn/course/1907378983347892226

如果项目经验不多、或者自主学习能力一般，建议学这个项目前，先学习鱼皮的 AI 超级智能体项目，这样学这个项目时会更加轻松。

工具资源

项目教程中涉及 AI 编码（Vibe Coding），建议至少准备一款 AI 开发工具或插件，首推 Cursor 和 Claude Code，个人实测能够满足需求。

当然，即使没有 AI 工具，也不影响项目的学习，因为鱼皮会提供现成的代码。

需要准备的账号和资源：

阿里云百炼平台账号：获取通义千问 API Key，有免费额度
Pexels 账号：获取图库 API Key，免费
腾讯云账号：开通 COS 对象存储，按量付费
Stripe 账号（可选）：用于支付功能测试

新建代码仓库

利用 GitHub 搭建开源代码仓库，点 star 的都是精神股东~

代码仓库：https://github.com/yuyuanweb/ai-passage-creator

AI 学习资源

1、AI 面试题

建议大家在学习 AI 项目的过程中，持续阅读 AI 大模型相关的面试题，巩固知识点。这块鱼皮已经帮大家拿捏了，我们的程序员面试刷题神器面试鸭搞了个 AI 大模型面试题库，建议没事就阅读一些题目来学习学习。

2、开源 AI 知识库

由于 AI 技术日新月异，建议大家平时多关注 AI 相关的资讯动态，比如鱼皮开源的 AI 知识库，汇总了热门的 AI 大模型和工具，比如 Deepseek 使用指南、提示词技巧分享、知识干货、应用场景、AI 变现、行业资讯、教程资源等一系列内容，帮助你快速掌握 AI 技术，走在时代前沿。

3、鱼皮 AI 导航网站

鱼皮 AI 导航网站为大家提供了免费 AI 教程、AI 资源大全、最新 AI 资讯、AI 学习交流社区，大家可以畅所欲言，共同拥抱 AI。

八、学习大纲

为了帮大家循序渐进地学习，我将项目拆分为 10 期，可以根据自己的时间和水平按需学习。

第 1 期：项目总览

项目介绍
项目优势
业务流程
功能模块
技术选型
架构设计
学习大纲

第 2 期：项目初始化 + 用户模块

后端项目初始化（Spring Boot 3.5 + Java 21）
前端项目初始化（Vue 3 + TypeScript + Vite）
用户模块（后端）：库表设计、注册登录、权限控制
用户模块（前端）：登录注册页面、全局状态管理

第 3 期：AI 核心创作流程 · 后端

Spring AI Alibaba 框架入门
智能体 1-5 的设计与实现
SSE 流式推送（SseEmitter）
异步任务处理（@Async + 线程池）
文章管理接口（CRUD）

第 4 期：AI 核心创作流程 · 前端

创作页面组件开发
SSE 实时连接（EventSource）
流式内容渲染
文章详情页面（Markdown 渲染 + 代码高亮）
文章历史列表页面

第 5 期：多配图方式扩展

配图策略模式设计
Mermaid 流程图生成
Iconify 图标库检索
表情包搜索（Bing 图片）
SVG 概念示意图生成
Nano Banana AI 生图
腾讯云 COS 统一上传

第 6 期：用户交互增强

三阶段创作流程设计
任务状态机（ArticlePhaseEnum）
标题确认与用户补充描述
大纲编辑与 AI 优化
文章风格预设
前端交互优化

第 7 期：VIP 会员与 Stripe 支付

VIP 会员体系设计
Stripe 支付集成
Webhook 签名验证与幂等处理
配额差异化与权限控制
前端 VIP 页面

第 8 期：智能体日志与统计分析

智能体执行日志设计
@AgentExecution 注解 + AOP
日志查询与统计接口
前端统计页面

第 9 期：多智能体编排（Spring AI Alibaba Graph）

StateGraph 核心概念
智能体编排重构
并行配图生成优化
流处理上下文

第 10 期：项目部署上线

Linux 宝塔面板部署
Docker 容器化
Docker Compose 编排
Nginx 反向代理

编程导航教程