From 50086ae71dfe0b94fd3694dbb00b23b253612438 Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Tue, 13 Jan 2026 10:34:12 +0800 Subject: [PATCH] feat(docs): integrate ElementPlus and enhance learning map content - Add ElementPlus UI library to VitePress theme configuration - Improve learning map documentation with collapsible sections and UI components - Add progress indicators and card components to enhance visual presentation --- docs/.vitepress/theme/index.js | 5 + docs/stage-0/0.1-learning-map/index.md | 112 ++++++++++-------- .../index.md | 91 +++++++++++++- 3 files changed, 156 insertions(+), 52 deletions(-) diff --git a/docs/.vitepress/theme/index.js b/docs/.vitepress/theme/index.js index 2c7c5e4..97bae8e 100644 --- a/docs/.vitepress/theme/index.js +++ b/docs/.vitepress/theme/index.js @@ -1,4 +1,6 @@ import DefaultTheme from 'vitepress/theme' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' import Viewer from 'viewerjs' import 'viewerjs/dist/viewer.css' import TypeIt from 'typeit' @@ -8,6 +10,9 @@ import './style.css' export default { extends: DefaultTheme, + enhanceApp({ app }) { + app.use(ElementPlus) + }, setup() { const route = useRoute() const { frontmatter } = useData() diff --git a/docs/stage-0/0.1-learning-map/index.md b/docs/stage-0/0.1-learning-map/index.md index 5f50fad..f83a8a1 100644 --- a/docs/stage-0/0.1-learning-map/index.md +++ b/docs/stage-0/0.1-learning-map/index.md @@ -2,9 +2,13 @@ 我们正身处由大语言模型（LLM）推动的人工智能应用爆发期。与以往AI开发高度依赖算法研究不同，**当前行业的重心已转向如何有效利用现有强大模型，构建具有实际价值的应用。**这一转变大幅降低了AI开发的门槛，将焦点从"从零开始构建模型"转移到"将AI能力封装为可落地的解决方案"。 +::: tip 💡 核心机遇 对大多数人而言，如今最大的机遇并非发明新算法，而是学会如何借助AI编码工具快速实现想法。 +::: +::: info 🚀 Vibe Coding 的核心 AI coding的出现正在改写传统编程学习的规则。你不再需要花费数年时间精通某门语言的每个细节，而是可以通过与AI协作，**以"vibecoding"的方式将创意直接转化为可运行的代码**。会使用大模型生成代码片段只是起点。 +::: 当前真正的挑战在于：如何引导AI生成高质量、可维护的代码？如何将前后端代码组装成完整应用并成功部署上线？在AI时代，如何将文本生成、图像处理、语音识别等AI能力集成到你的应用中？本课程正是为应对这些挑战而设计。 @@ -16,17 +20,21 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花 ## 三个阶段的成长路径：从“会用 AI”到“会做 AI 产品” -**第零阶段：体验 AI 编程的魔力** -通过贪吃蛇等小游戏，你将第一次体验到 AI 辅助编程的能力与边界。这个阶段不需要任何编程基础，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 vibecoding 的强大。 +::: info 🎮 第零阶段：体验 AI 编程的魔力 +通过贪吃蛇等小游戏，你将第一次**体验到 AI 辅助编程的能力与边界**。这个阶段**不需要任何编程基础**，只需要你愿意动手尝试——看着 AI 在几分钟内帮你生成一个可玩的游戏，你会直观感受到 **vibecoding 的强大**。 +::: -**第一阶段：掌握产品开发的完整闭环** -学会使用 AI IDE（如 Cursor、Claude 等工具）将想法转化为可运行的 Web 应用原型。你将学习如何拆解需求、设计多页面应用、接入 AI 能力（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用。 +::: tip 🛠️ 第一阶段：掌握产品开发的完整闭环 +学会使用 **AI IDE（如 Cursor、Claude 等工具）**将想法转化为可运行的 Web 应用原型。你将学习如何**拆解需求、设计多页面应用、接入 AI 能力**（文本生成、图像处理等），并用模拟数据完成一个完整的产品 demo。这个阶段结束时，你能**独立完成一个像“霍格沃茨画像”那样接入 AI 能力的前端应用**。 +::: -**第二阶段：成为能上线产品的工程师** -这是质的飞跃。你将学习现代 Web 开发的核心技能：从 Figma 设计稿到组件化前端实现，从 Supabase 数据库到 API 接口开发，从 Git 版本管理到 Zeabur 部署上线。更重要的是，你将学会集成支付系统（如 Stripe），让你的应用具备真实的商业价值。通过 Dify 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。 +::: warning 💻 第二阶段：成为能上线产品的工程师 +这是质的飞跃。你将学习**现代 Web 开发的核心技能**：从 **Figma 设计稿**到组件化前端实现，从 **Supabase 数据库**到 API 接口开发，从 Git 版本管理到 **Zeabur 部署上线**。更重要的是，你将学会**集成支付系统（如 Stripe）**，让你的应用具备真实的商业价值。通过 **Dify** 等工具，你还将掌握知识库与工作流的构建，为应用注入更强的 AI 能力。 +::: -**第三阶段：构建跨平台的复杂应用** -掌握多平台开发能力，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 MCP 等高级工具扩展 IDE 能力，深入理解 RAG 原理并使用 LangGraph 等框架设计复杂的 AI 工作流。这个阶段你将具备高级工程师的思维方式和工具链。 +::: danger 🚀 第三阶段：构建跨平台的复杂应用 +掌握**多平台开发能力**，将同一个应用部署到 Web、微信小程序、安卓等多个平台。学习 **MCP 等高级工具**扩展 IDE 能力，深入理解 **RAG 原理**并使用 **LangGraph** 等框架设计复杂的 AI 工作流。这个阶段你将具备**高级工程师的思维方式和工具链**。 +::: ## 你将获得的核心能力 @@ -37,63 +45,67 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花 - **AI 能力集成：** 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。 - **产品思维与运营能力：** 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。 -# 第一阶段学习目标 +# 各阶段学习目标 + +## 第一阶段学习目标 本阶段本质上是一套“AI 产品经理 Vibe Coding 能力培训课程”，主要面向希望进入 AI 产品方向、但编程基础较弱或几乎为零的同学，目标是在 AI 的帮助下完成一个“能跑、能展示”的 Web 应用原型。 -``` -## 模块一：AI 时代，会说话就会编程 -- 1.1 普通人的困境与机会？ -- 1.2 AI 能帮你做到什么程度？ -- 1.3 动手：你的第一个 AI 原生应用 +::: details 第一阶段完整课程大纲 (点击收起) +**模块一：AI 时代，会说话就会编程** +- **1.1** 普通人的困境与机会？ +- **1.2** AI 能帮你做到什么程度？ +- **1.3** 动手：你的第一个 AI 原生应用 -## 模块二：认识 AI IDE 工具 -- 2.1 写代码需要什么环境和工具 -- 2.2 什么是 IDE，为什么需要 IDE -- 2.3 AI IDE 和普通 IDE 有什么不同 -- 2.4 界面上每个按钮是干什么的 -- 2.5 怎么跟 AI 说话才有效 +**模块二：认识 AI IDE 工具** +- **2.1** 写代码需要什么环境和工具 +- **2.2** 什么是 IDE，为什么需要 IDE +- **2.3** AI IDE 和普通 IDE 有什么不同 +- **2.4** 界面上每个按钮是干什么的 +- **2.5** 怎么跟 AI 说话才有效 -## 模块三：动手做出原型 -- 3.1 把需求变成代码的过程 -- 3.2 从一个单页面开始 -- 3.3 遇到报错了怎么办 -- 3.4 做多个页面的应用 -- 3.5 把原型做得像那么回事 +**模块三：动手做出原型** +- **3.1** 把需求变成代码的过程 +- **3.2** 从一个单页面开始 +- **3.3** 遇到报错了怎么办 +- **3.4** 做多个页面的应用 +- **3.5** 把原型做得像那么回事 -## 模块四：给原型加上 AI 能力 -- 4.1 什么是 AI 能力接入（API 调用） -- 4.2 如何接入文生图能力 -- 4.3 如何接入视频生成能力 -- 4.4 其他常见 AI 能力的接入方法 -- 4.5 成本控制和错误处理 +**模块四：给原型加上 AI 能力** +- **4.1** 什么是 AI 能力接入（API 调用） +- **4.2** 如何接入文生图能力 +- **4.3** 如何接入视频生成能力 +- **4.4** 其他常见 AI 能力的接入方法 +- **4.5** 成本控制和错误处理 -## 模块五：完整项目实战 -- 5.1 制造模拟数据让原型看起来真实 -- 5.2 收集反馈并快速调整 -- 5.3 展示你的成果 +**模块五：完整项目实战** +- **5.1** 制造模拟数据让原型看起来真实 +- **5.2** 收集反馈并快速调整 +- **5.3** 展示你的成果 -## 大作业 +**大作业** - 做一个完整的 Web 应用原型并展示 -## 附录A：产品思维补充 -- A.1 什么是好的产品想法 -- A.2 如何发现用户真正的需求 -- A.3 功能优先级怎么排 -- A.4 MVP 思维：最小可行产品 +**附录A：产品思维补充** +- **A.1** 什么是好的产品想法 +- **A.2** 如何发现用户真正的需求 +- **A.3** 功能优先级怎么排 +- **A.4** MVP 思维：最小可行产品 -## 附录B：常见报错及解决方案 -- B.1 页面显示空白或不加载 -- B.2 数据保存不成功 -- B.3 样式显示不正常 -- B.4 点击按钮没反应 -- B.5 API 调用失败 -- B.6 如何把报错信息有效地反馈给 AI -``` +**附录B：常见报错及解决方案** +- **B.1** 页面显示空白或不加载 +- **B.2** 数据保存不成功 +- **B.3** 样式显示不正常 +- **B.4** 点击按钮没反应 +- **B.5** API 调用失败 +- **B.6** 如何把报错信息有效地反馈给 AI +::: # 为什么要用项目制来训练？ +::: warning ⚠️ 现实世界的挑战 原因其实很简单：按照大多数同学现在的状态，直接走入职场，很可能会在真实项目和老板 / 客户的“社会毒打”下寸步难行。现实世界更常见的场景是： +::: > 你的导师 / 老板：我们要做一个 xxx，目标是达到 yyy 的效果。 > diff --git a/docs/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/stage-0/0.2-ai-capabilities-through-games/index.md index b5d67c4..7153bdc 100644 --- a/docs/stage-0/0.2-ai-capabilities-through-games/index.md +++ b/docs/stage-0/0.2-ai-capabilities-through-games/index.md @@ -1,30 +1,94 @@ # 初级一：AI 时代，会说话就会编程 + 这是一个**基于项目制学习**的学习教程。我们鼓励你跟随步骤一步步操作，并尝试复现结果。 不要担心犯错或修改内容，我们永远相信你可以做到，请你永远记住： -🎉 **完成比完美更重要**。 +::: tip 🎉 核心理念 +**完成比完美更重要**。 +::: + ## 本章导读 +::: info 🎯 学习目标 在这一节，你会用对话式 AI 做出第一个 AI 原生小游戏——一款会“吃单词、写诗、画画”的贪吃蛇，并借此搞清楚 AI 编程的初步效果。 +::: - 预计时间：约 **4 小时**，可分多次完成 - 预期产出：1 个可运行的 AI 原生贪吃蛇 + （可选）1 个你自创的 AI 原生小游戏或 Demo - Assignment：复现贪吃蛇，并（可选）实现一种你感兴趣的 AI 原生游戏 +
+ + + + + + +
+ ## 1. 普通人的困境与机会 很多人脑子里有一堆产品点子：一款帮自己记账的小工具、一个记录孩子成长的网页、甚至一款小游戏。但一想到要写代码、要找程序员,就直接劝退。 AI 出现之后,第一次给了普通人一个全新的可能：你不需要会写代码,只需要学会对 AI 说清楚你想要什么。来自 GitHub Copilot 的[数据显示](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics),超过1500万开发者正在用AI辅助编程,平均46%的代码都是AI生成的! 在Java项目中这个比例能达到61%。 -让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。 + + + + + +
+
55%
+
开发速度提升
+
+ + +
+
2.4 天
+
提交周期 (原9.6天)
+
+ + +
+
81%
+
当天安装率
+
+ + +
+
96%
+
代码采纳率
+
+ + + +
+ 让人真正兴奋的是效率的飞跃：开发者完成任务的速度提升了 55%。原本需要 9.6 天才能提交的代码，现在只要 2.4 天就能搞定。 这种肉眼可见的效率提升，说明 AI 不再只是一个“可选工具”，而是正在成为开发流程中不可或缺的编程助手。 +

+ 采用率的数据也印证了这一点：在获得访问权限的当天，就有 81% 的开发者第一时间完成安装并开始使用；其中 96% 的人更是在当天就开始采纳 AI 提供的代码建议。换句话说，开发者几乎是立刻把 AI 融入了日常编码工作。 +
+ 对于普通人来说,这个趋势更有意义:如果专业程序员都在大量依赖AI写代码,那我们这些**不会编程的人,为什么不能直接跟AI对话来实现自己的想法呢**? 这门课的目标是帮你练成新技能：通过自然语言对话就能做应用。我们将教你怎么跟 AI 用计算机的语言沟通、怎么让AI帮你把脑子里的想法变成真实可用的产品。 +
+ + + + + + +
+ ## 2. AI 能帮你做到什么程度 在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？ @@ -80,6 +144,9 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会 在这个边界内，你可以把对话式 AI 看作一位执行力不错的“辅助开发者”。你只需在每一轮用自然语言细化和修正需求，就能快速得到可用的原型。 +**AI 独立完成小型项目的成功率：** + + #### 大型项目需要“流程视角” 一旦超出小而清晰的范围，只指望靠几轮对话让 AI 端到端完成复杂系统，很快就会遇到上限。大型项目往往要接后端、连数据库、整合第三方服务，还牵涉权限、安全、并发和大量业务规则，目标是交付一整套与现有业务深度打通的系统，而不是一页网页。 @@ -94,13 +161,24 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会 一个可参考的经验是： +::: warning ⚠️ 适用场景指南 - **原型 / Demo / 内部自用工具**：非常适合先交给 AI 打第一版，再由你迭代细节。 - **面向真实用户的大型产品**：通常需要工程师在架构、抽象、性能和维护上长期投入。 - **强安全 / 强合规系统（如支付、风控、医疗等）**：在当前阶段，不宜“生成完就直接上线”，必须引入严格的审查与测试流程。 +::: 在当下，你可以相对安心地把 AI 视作一个高效的 Demo 与自用工具搭档： 只要你愿意多测试、多迭代，多问几轮“这里不对，帮我修一下并解释原因”，在原型与内部工具这一级别，整体质量通常是足够且具备实践价值的。 +
+ + + + + + +
+ ## 3. 动手：你的第一个 AI 原生应用 让我们回到动手部分，在前一部分，我们已经用 AI 快速做出了一个可以玩的贪吃蛇原型，也大致知道了 AI 能做什么、不能做什么。接下来我们将学习如何用最基础的 **vibe coding** 技巧创建一个**现代版**的 AI 贪吃蛇游戏。我们将让蛇吃掉文字字符而不是豆子。最后让游戏根据吃掉的文字字符生成一首诗，并画一幅画。 @@ -190,6 +268,15 @@ z.ai 的回复将会是这样的： ![](images/image58.png) +
+ + + + + + +
+ ### 3.3 尝试制作其他小游戏 除了贪吃蛇（游戏），我们可以让想象力尽情驰骋。