2eb0ed7021
|
||
|---|---|---|
| courses | ||
| demo | ||
| .gitignore | ||
| README.md | ||
README.md
用Markdown语法轻松开发 AI 应用
10 天掌握 AI 应用开发，让全栈工程师梦想触手可及
📚 点击学习课程
🎯 课程介绍
在 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 节：环境准备。
🤝 如何贡献
我们欢迎任何形式的贡献！
- 🐛 报告问题 - 发现课程内容错误或技术问题，请提交 Issue
- 💡 功能建议 - 有好的课程改进想法，告诉我们
- 📝 内容完善 - 帮助改进课程内容（错别字、表述优化、案例补充）
- 🔧 代码优化 - 提交 Pull Request 改进 Demo 项目代码
- 📖 学习笔记分享 - 在 issues 分享你的学习心得
📚 参考资源
核心依赖项目
- MarkdownFlow 官网 - MarkdownFlow 语法和生态
- Demo - Demo 项目完整源码
- markdown-flow-agent-py - Python 后端解析器
- remark-flow - 前端解析器
- markdown-flow-ui - React UI 组件库
学习资料
- Vibe Coding 介绍文章 - 深入理解 Vibe Coding 范式
- MarkdownFlow 语法速查表 - 快速查阅语法
- AI 辅助编程最佳实践 - 提升效率的技巧
🙏 致谢
特别感谢
- 感谢所有为本课程提供反馈和建议的学员
- 感谢开源社区的贡献者们 ❤️
📜 开源协议
本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。
⭐ 如果这个课程对你有帮助，请给我们一个 Star！
📧 交流方式
Made with ❤️ by AI Shifu Team