用Markdown语法轻松开发 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	后端架构全景理解	API → Service → Library 三层架构、SSE 流式输出原理、Demo 项目技术栈	✅
4.2	MarkdownFlow 语法深度掌握	基础语法、变量系统、交互元素、保留内容、块分隔符、高级用法	✅
4.3	用 AI 构建后端 API	AI Prompt 模板（5 大场景）、代码审查清单、集成第三方 API	✅
4.4	Demo 项目实战	三个渐进任务：修改内容 → 设计流程 → 添加功能	✅

学习目标: 理解后端架构，精通 MarkdownFlow 语法（40% 篇幅），掌握 AI 协作工作流 建议时间: 第 6-7 天（6 小时学习 + 4 小时实践） 核心特色: 采用 Vibe Coding 教学模式，强调”学会与 AI 协作”而非”记住语法”

第 5 章：AI 应用前端开发实战（React + markdown-flow-ui）

节次	标题	核心内容	状态
5.1	前端架构全景理解	组件层级、状态管理、数据流、Demo 项目组件树	✅
5.2	markdown-flow-ui 组件库使用	`<MarkdownFlow>` 组件完整指南、InteractionPanel、辅助组件、最佳实践	✅
5.3	用 AI 构建前端界面	UI 需求描述模板、AI Prompt 场景（5 大场景）、代码审查清单、实战案例	✅
5.4	Demo 项目实战	三个渐进任务：修改样式 → 添加功能 → 基于项目想法开发	✅

学习目标: 掌握 markdown-flow-ui 组件库（30% 篇幅），学会用 AI 构建前端界面（40% 篇幅） 建议时间: 第 8-9 天（6 小时学习 + 4 小时实践） 核心特色: 强调组件库使用而非 React 语法，Task 3 使用 {{project_idea}} 实现个性化

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

节次	标题	核心内容	状态
6.1	开发模式回顾	Vibe Coding 提效总结（有/无编程基础）、MarkdownFlow 优势、课程收获自查	✅
6.2	最佳实践总结	变量设计原则、交互流程设计技巧、常见问题（8 个）、通用检查清单	✅
6.3	项目部署与发布	部署全景、Docker 思路、Vercel 部署、域名配置、常见问题（7 个）	✅
6.4	进阶学习路径	5 种个性化路径（MarkdownFlow/AI 项目/其他框架/开源/复习）、学习资源、结业认证	✅

学习目标: 巩固核心知识（30%）、掌握部署思路（30%）、规划个性化进阶路径（40%） 建议时间: 第 10 天（3 小时学习 + 1 小时总结） 核心特色: 均衡分配，部署讲思路不讲完整代码，根据 {{next_step}} 推荐个性化路径

💡 如何学习

🎓 适合人群

本课程适合以下人群：

计算机相关专业大学生（本科/研究生）
有一定编程基础的开发者（想快速转型 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 节：环境准备。