借助 Vibe Coding 开发 AI 应用

10 天掌握 AI 应用开发，让全栈工程师梦想触手可及

📚 在线阅读地址 | 🎯 Demo 项目 | 💬 讨论交流

📚 点击学习课程

🎯 课程介绍

在 AI 时代，开发一个 AI 应用不再需要深厚的编程功底。本课程将带你体验全新的 Vibe Coding 开发范式，让你用自然语言描述需求，AI 帮你实现代码，你只需专注于设计和验证。

本课程是一个 2周训练营式的 AI 应用开发教程，从工具生态出发，深入 MarkdownFlow 语法，结合 Vibe Coding 工作流，带你亲手搭建一个前后端完整的 AI 应用（Python FastAPI + React Next.js）。

不同于传统的编程课程，我们采用 MarkdownFlow 语法来精准控制大模型输出，让你用类似 Markdown 的语法就能开发复杂的 AI 交互应用。整个课程强调个性化学习路径，根据你的背景（零基础、有编程经验、前端/后端专长）动态调整内容深度，确保每个人都能高效学习。

✨ 你将收获什么？

🚀 2周快速上手 - 完整的 AI 应用开发全流程体验
🧠 Vibe Coding 范式 - 掌握 AI 辅助编程的正确姿势（人类设计 + AI 实现 + 人类验证）
📝 MarkdownFlow 精通 - 用自然语言控制 AI 输出，告别繁琐的提示词工程
🛠️ 全栈实战项目 - 动手搭建前后端分离的 AI 应用（Python + React）
🎨 个性化学习路径 - 根据你的背景定制课程内容，学你需要的
🌐 工具生态洞察 - 深度对比低代码平台、工作流编排、MarkdownFlow 三种开发模式
💡 快速迭代能力 - 学会用 AGENTS.md 让 AI 理解你的项目，加速开发

📖 课程大纲

第 1 章：课程导论与学习路径规划

节次	标题	核心内容	状态
1.1	课程概览：2 周打造你的第一个 AI 应用	课程架构介绍、Demo 演示、学习成果、学习方法	✅
1.2	课程适用人群与学习前置知识	适合人群、前置知识要求	✅
1.3	学习路径个性化推荐（交互式问卷）	MarkdownFlow 交互问卷、收集学员背景、推荐学习路径	✅
1.4	开发环境准备清单	必备软件安装、Demo 项目运行、LLM API 配置	✅

学习目标: 了解课程全貌，明确学习路径，收集学员背景 建议时间: 第 1-2 天（4 小时学习 + 2 小时环境准备）

第 2 章：AI 应用开发工具生态全景

节次	标题	核心内容	状态
2.1	AI 应用开发的三种模式对比	低代码平台 vs 工作流编排 vs 代码开发、选择决策树	✅
2.2	低代码智能体平台实操体验	扣子平台实操（30 分钟）、Dify 工作流实操（30 分钟）	✅
2.3	MarkdownFlow：代码级精准控制的优势	为什么选择 MarkdownFlow、vs 传统 Prompt 对比	✅
2.4	选型决策：什么场景用什么工具	决策矩阵、本课程选择 MarkdownFlow 的理由	✅

学习目标: 了解 AI 开发工具分类，理解各工具优劣势和适用场景 建议时间: 第 3 天（3 小时学习 + 1 小时实操体验）

第 3 章：Vibe Coding 工作流与项目脚手架

节次	标题	核心内容	状态
3.1	什么是 Vibe Coding？与传统开发的区别	Vibe Coding 定义、核心原则、vs 传统开发对比	✅
3.2	Demo 项目全景导览	项目功能演示、技术栈介绍、目录结构解析	✅
3.3	AGENTS.md：让 AI 理解你的项目	AGENTS.md 文件结构、编写高质量文档、Prompt 设计	✅
3.4	第一次 Vibe Coding 实战：添加一个小功能	添加”生成历史记录”功能、读懂代码、验证调试	✅

学习目标: 掌握 Vibe Coding 开发流程，理解 Demo 项目结构，完成第一次 AI 辅助编程 建议时间: 第 4-5 天（6 小时学习 + 4 小时实践）

第 4 章：AI 应用后端开发实战（Python + MarkdownFlow）

节次	标题	核心内容	状态
4.1	后端架构全景分析	FastAPI/Flask 框架选型、目录结构、RESTful API 设计	📝
4.2	MarkdownFlow 核心概念速成	语法速查表、变量系统、交互元素、保留内容、块分隔符	📝
4.3	后端集成 MarkdownFlow	Python SDK 使用、模板管理、流式输出（SSE）实现	📝
4.4	实战：构建内容生成 API	需求分析、接口设计、核心代码实现、错误处理	📝
4.5	用 Vibe Coding 优化后端代码	性能优化、代码重构、单元测试编写	📝

学习目标: 理解后端架构设计，掌握 MarkdownFlow 集成方式，能够独立开发后端 API 建议时间: 第 6-7 天（6 小时学习 + 4 小时实践）

第 5 章：AI 应用前端开发实战（React）

节次	标题	核心内容	状态
5.1	前端架构全景分析	React 技术栈选型（Vite、Tailwind CSS）、组件化设计、状态管理	📝
5.2	核心组件解析	TemplateSelector、ParameterForm、ContentDisplay、StreamOutput	📝
5.3	实战：构建内容生成前端界面	组件设计实现、API 调用、流式数据接收（SSE）	📝
5.4	交互体验优化	加载状态、错误提示、重试机制、响应式设计	📝
5.5	用 Vibe Coding 加速前端开发	组件快速生成、样式优化、调试与性能分析	📝

学习目标: 掌握 React 前端开发，实现流式交互界面，优化用户体验 建议时间: 第 8-9 天（6 小时学习 + 4 小时实践）

第 6 章：项目总结与进阶路径

节次	标题	核心内容	状态
6.1	Vibe Coding 开发模式回顾	效率对比、适用场景与局限性、最佳实践总结	📝
6.2	MarkdownFlow 最佳实践总结	模板设计模式、变量管理策略、性能优化技巧	📝
6.3	项目部署与发布	后端部署（Docker、云服务器）、前端部署（Vercel、Netlify）	📝
6.4	进阶学习路径	LLM 开发、前端进阶、后端进阶、开源社区参与	📝

学习目标: 总结学习成果，规划后续学习方向，参与开源社区 建议时间: 第 10 天（2 小时学习 + 1 小时总结）

图例: ✅ 已完成 | 📝 待编写 | 🚧 进行中

💡 如何学习

🎓 适合人群

本课程适合以下人群：

计算机相关专业大学生（本科/研究生）
有一定编程基础的开发者（想快速转型 AI 应用开发）
对 AI 感兴趣的产品经理或设计师（想理解 AI 应用开发流程）
零基础但有强烈学习意愿的初学者（需要投入更多时间）

📋 前置知识要求

✅ 必须: 基本的计算机操作能力（文件管理、命令行基础）
🔶 推荐: 了解 Python 或 JavaScript 基础语法
⭐ 加分项: 使用过 Git、了解 HTTP 协议、用过 ChatGPT/Claude

注: 即使你完全不会编程，也可以跟随本课程学习，我们会根据你的背景调整内容深度。

🛤️ 学习路径建议

零基础路径（预计 30-40 小时）

第 1-2 章重点学习 - 打好基础，理解概念
第 3 章多次实践 - 熟悉 Vibe Coding 工作流
第 4-5 章跟随 Demo - 逐行理解代码，不要求自主开发
第 6 章选择进阶方向 - 决定后续深入前端还是后端

有编程基础路径（预计 20-30 小时）

第 1-2 章快速过 - 重点关注 MarkdownFlow 和工具对比
第 3 章深入理解 - 掌握 Vibe Coding 核心思想
第 4-5 章自主实现 - 尝试扩展 Demo 功能
第 6 章开发自己的项目 - 应用所学知识

进阶路径（预计 15-25 小时）

第 1-3 章略读 - 快速了解课程体系
第 4-5 章源码阅读 - 深入理解 MarkdownFlow 解析器和 UI 组件库
第 6 章二次开发 - 贡献开源项目或开发复杂应用

📚 学习建议

在学习本课程的过程中，建议：

理论与实践结合 - 每学完一章立即动手实践
多使用 AI 工具 - 善用 Claude Code、Cursor、GitHub Copilot 等工具
参与开源社区 - 遇到问题在 Issue 区提问，学有余力可以贡献代码
记录学习笔记 - 用 MarkdownFlow 写学习笔记，加深理解
分享学习成果 - 在社交媒体或技术社区分享你的 AI 应用

🔧 环境准备

必备软件

软件	版本要求	安装指南
Python	3.9+	官网下载
Node.js	16+	官网下载
Git	最新版	官网下载
VS Code / Cursor	最新版	VS Code \| Cursor
LLM API Key	Claude / OpenAI	详见 1.4 环境准备

快速启动 Demo 项目

# 1. 克隆项目
git clone https://www.gitlink.org.cn/ai-shifu/vibe-coding-app.git
cd demo

# 2. 修改配置文件
# 将.env.example 文件复制为 .env
# 修改 .env 文件中的内容
LLM_BASE_URL="https://xxx"
LLM_API_KEY="xxx"
LLM_MODEL="xxx"

# 3. 启动后端
pip install -r requirements.txt
python main.py

# 4. 启动前端（新终端）
cd frontend
npm install
npm run dev

详细的环境配置指南请参见 第 1.4 节：环境准备。