From e15bac802de48db7f9baffaf3a337bdf122c8d8d Mon Sep 17 00:00:00 2001 From: sanbuphy Date: Sun, 8 Feb 2026 12:38:47 +0800 Subject: [PATCH] docs: improve content formatting and structure - add bold text support in ChapterIntroduction component - enhance text emphasis in multiple markdown files - restructure sidebar and navigation for better organization - simplify learning map content for clarity --- docs/.vitepress/config.mjs | 34 +++++++--- .../theme/components/ChapterIntroduction.vue | 7 ++ docs/zh-cn/stage-0/0.1-learning-map/index.md | 68 +++---------------- .../index.md | 8 +-- docs/zh-cn/stage-0/index.md | 59 +++++++++++++--- .../1.1-introduction-to-ai-ide/index.md | 29 +++----- .../stage-1/1.2-building-prototype/index.md | 14 ++-- .../1.3-integrating-ai-capabilities/index.md | 6 +- .../1.4-complete-project-practice/index.md | 6 +- .../appendix-industry-scenarios/index.md | 2 +- 10 files changed, 119 insertions(+), 114 deletions(-) diff --git a/docs/.vitepress/config.mjs b/docs/.vitepress/config.mjs index 01a2e47..7e8ac99 100644 --- a/docs/.vitepress/config.mjs +++ b/docs/.vitepress/config.mjs @@ -216,7 +216,7 @@ const productManagerSidebar = [ ] }, { - text: '产品经理', + text: '产品原型实战', collapsed: false, items: [ { @@ -234,25 +234,37 @@ const productManagerSidebar = [ { text: '4. 完整项目实战', link: '/zh-cn/stage-1/1.4-complete-project-practice/' - }, + } + ] + }, + { + text: '附录：业务思维', + collapsed: false, + items: [ { - text: '附录 A：产品思维补充', + text: '产品思维补充', link: '/zh-cn/stage-1/appendix-a-product-thinking/' }, { - text: '附录 B：常见报错及解决方案', + text: '产业场景方向参考', + link: '/zh-cn/stage-1/appendix-industry-scenarios/' + } + ] + }, + { + text: '附录：技术方案', + collapsed: false, + items: [ + { + text: '常见报错及解决方案', link: '/zh-cn/stage-1/appendix-b-common-errors/' }, { - text: '附录 C：产业多分类场景方向参考', - link: '/zh-cn/stage-1/appendix-industry-scenarios/' - }, - { - text: '扩展阅读 1：7 款主流 Vibe Coding 在线平台实测对比', + text: '7 款主流 Vibe Coding 平台实测对比', link: '/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial' }, { - text: '扩展阅读 2：用编程和设计智能体开发网站', + text: '用编程和设计智能体开发网站', link: '/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents' } ] @@ -313,7 +325,7 @@ export default defineConfig({ nav: [ { text: '首页', link: '/zh-cn/' }, { - text: '新手与产品原型', + text: '零基础入门', link: '/zh-cn/stage-0/' }, { diff --git a/docs/.vitepress/theme/components/ChapterIntroduction.vue b/docs/.vitepress/theme/components/ChapterIntroduction.vue index f054f36..4060385 100644 --- a/docs/.vitepress/theme/components/ChapterIntroduction.vue +++ b/docs/.vitepress/theme/components/ChapterIntroduction.vue @@ -162,6 +162,13 @@ const hasTags = computed(() => props.tags && props.tags.length > 0) padding-top: 10px; } +/* Support for bold text in slot content */ +.description-text :deep(strong), +.description-text :deep(b) { + font-weight: 700; + color: var(--vp-c-text-1); +} + .objective-tag { display: inline-flex; align-items: center; diff --git a/docs/zh-cn/stage-0/0.1-learning-map/index.md b/docs/zh-cn/stage-0/0.1-learning-map/index.md index 651626f..00b95ab 100644 --- a/docs/zh-cn/stage-0/0.1-learning-map/index.md +++ b/docs/zh-cn/stage-0/0.1-learning-map/index.md @@ -160,69 +160,21 @@ AI coding的出现正在改写传统编程学习的规则。你不再需要花 - **AI 能力集成：** 学会调用各类多模态 AI API，将文本、图像、语音等 AI 能力无缝集成到你的应用中，并通过 RAG 等技术构建智能化产品。 - **产品思维与运营能力：** 从用户研究到需求拆解，从 MVP 设计到产品迭代，从支付集成到用户管理，形成完整的产品开发与运营闭环。 -# 各阶段学习目标 +# 学完能做什么？ -## 第一阶段学习目标 +## 第一阶段：做出你的第一个产品原型 -本阶段本质上是一套“AI 产品经理 Vibe Coding 能力培训课程”，主要面向希望进入 AI 产品方向、但编程基础较弱或几乎为零的同学，目标是在 AI 的帮助下完成一个“能跑、能展示”的 Web 应用原型。 +这个阶段适合完全没编程基础，或者只会一点点但不太自信的同学。你不用先学一堆理论知识，而是直接跟着做，在做的过程中学会用 AI 工具写代码。 -::: details 第一阶段完整课程大纲 (点击收起) -**模块一：AI 时代，会说话就会编程** +**学完你能**： +- 用 AI 编程工具独立完成一个网页应用 +- 把产品想法变成能点击、能交互的原型 +- 给原型加上 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 说话才有效 - -**模块三：动手做出原型** - -- **3.1** 把需求变成代码的过程 -- **3.2** 从一个单页面开始 -- **3.3** 遇到报错了怎么办 -- **3.4** 做多个页面的应用 -- **3.5** 把原型做得像那么回事 - -**模块四：给原型加上 AI 能力** - -- **4.1** 什么是 AI 能力接入（API 调用） -- **4.2** 如何接入文生图能力 -- **4.3** 如何接入视频生成能力 -- **4.4** 其他常见 AI 能力的接入方法 -- **4.5** 成本控制和错误处理 - -**模块五：完整项目实战** - -- **5.1** 制造模拟数据让原型看起来真实 -- **5.2** 收集反馈并快速调整 -- **5.3** 展示你的成果 - -**大作业** - -- 做一个完整的 Web 应用原型并展示 - -**附录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 - ::: +我们可以先通过小游戏感受 AI 编程，然后学会用 AI 编程工具帮你写代码、改报错。接着从简单页面开始，逐步做出能交互的多页面应用，再加上文生图、智能对话这些 AI 功能。最后独立完成一个完整项目，让你的创意能够真正拥有落地的可能。 # 为什么要用项目制来训练？ diff --git a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md index 99bd89f..c047977 100644 --- a/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md +++ b/docs/zh-cn/stage-0/0.2-ai-capabilities-through-games/index.md @@ -17,11 +17,11 @@ const duration = '约 4 小时，可分多次完成' -如果你完全不会编程，或者只会一点皮毛，这一章就是为你准备的。我们会从最基础的开始：用对话的方式让 AI 帮你写代码，不需要记语法、不需要配环境，直接在网页上就能跑起来。 +如果你完全不会编程，或者只会一点皮毛，这一章就是为你准备的。我们会从最基础的开始：用对话的方式让 AI 帮你写代码，不需要记语法、不需要配环境，直接在网页上就能跑起来。 -你会亲手做出第一个能运行的程序——一款会"吃单词、写诗、画画"的贪吃蛇。通过这个实战，你会体验到 AI 编程到底是什么感觉：不是 AI 代替你思考，而是你把想法说出来，AI 帮你实现。 +你会亲手做出第一个能运行的程序——一款会"吃单词、写诗、画画"的贪吃蛇。通过这个实战，你会体验到 AI 编程到底是什么感觉：不是 AI 代替你思考，而是你把想法说出来，AI 帮你实现。 -所有的创造都是从 0 到 1 开始的，很高兴能将每一份信心与专业度传递与你，于你而言，执行力 is all you need。 +所有的创造都是从 0 到 1 开始的，很高兴能将每一份信心与专业度传递与你，于你而言，执行力 is all you need。 @@ -101,7 +101,7 @@ AI 出现之后,第一次给了普通人一个全新的可能：你不需要会 在本节中，我们只讨论一个问题：如果你完全不会写代码，现在的 AI 能帮你做到什么程度？ -大致来说，你可以把当前大模型的能力理解为：可以胜任简单的内部小工具、数据可视化看板，以及一些轻量级小游戏的开发。这些能力用来做自用工具、从产品经理视角验证需求，基本已经足够。但若想一键生成可直接商用的成熟产品，通常仍需要人工在流程设计、细节打磨上持续优化。 +大致来说，你可以把当前大模型的能力理解为：可以胜任**简单的内部小工具**、**数据可视化看板**，以及一些**轻量级小游戏**的开发。这些能力用来做**自用工具**、从**产品经理视角验证需求**，基本已经足够。但若想一键生成可直接**商用的成熟产品**，通常仍需要人工在**流程设计**、**细节打磨**上持续优化。 接下来，我们就以贪吃蛇为例，具体看看 AI 编程目前到底能做到什么程度。 diff --git a/docs/zh-cn/stage-0/index.md b/docs/zh-cn/stage-0/index.md index 710c335..ac45655 100644 --- a/docs/zh-cn/stage-0/index.md +++ b/docs/zh-cn/stage-0/index.md @@ -1,6 +1,6 @@ -# 新手与产品原型 +# 动手做第一个 AI 产品 -欢迎来到 **AI 产品经理** 阶段！这是 Easy-Vibe 教程的起点，专为零基础学习者设计。 +欢迎来到 **动手做第一个 AI 产品** 阶段！这是 Easy-Vibe 教程的起点，专为零基础学习者设计。 ## 你将学到什么 @@ -23,7 +23,7 @@ /> -### 产品经理 +### 产品原型实战 掌握 Vibe Coding 工作流，学会拆解需求，独立完成高保真 Web 应用原型： @@ -48,16 +48,55 @@ title="4. 完整项目实战" description="综合运用所学知识，从 0 到 1 完成一个完整的产品原型开发。" /> + + +### 附录：业务思维 + +**为什么需要**：当你需要提升产品思维、了解行业应用场景时，这些内容能帮你建立更全面的产品视角。 + +**什么时候看**： +- 在动手做原型前，先了解产品思维，能帮你更好地规划和设计 +- 当你有产品想法但不确定方向时，参考产业场景案例 +- 完成项目后，用产品思维复盘和优化你的作品 + + + + + +### 附录：技术方案 + +**为什么需要**：在开发过程中遇到技术问题或想了解更优工具时，这些技术附录能提供即查即用的解决方案。 + +**什么时候看**： +- 遇到报错不知道如何解决时，查阅常见报错及解决方案 +- 想对比不同 AI 编程工具时，参考平台实测对比 +- 想学习更高级的开发技巧时，查看智能体开发案例 + + + + ## 适合人群 @@ -67,10 +106,14 @@ - 对 AI 编程感兴趣的非技术背景人士 - 希望提升原型设计能力的设计师 -## 学习路径 +## 怎么学？ + +建议按这个顺序进行操作： ``` -新手入门 → 产品经理基础 → AI 能力集成 → 完整项目实战 +先玩玩游戏建立信心 → 跟着教程做原型 → 给原型加上 AI 功能 → 独立完成一个完整项目 ``` -准备好开始你的 AI 编程之旅了吗？点击左侧导航开始学习吧！ +不用一口气看完，边做边学效果最好。遇到问题时，记得去附录里查查解决方案。 + +现在就开始吧，左侧导航选第一节！ diff --git a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md index 209c8bc..8115541 100644 --- a/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md +++ b/docs/zh-cn/stage-1/1.1-introduction-to-ai-ide/index.md @@ -13,11 +13,11 @@ const duration = '约 1 天，可分多次完成' -前面我们在 z.ai 上体验了 AI 编程，但网页版有很多限制——不能随时保存、不好管理文件、也没法做复杂项目。这一章就是帮你把开发环境搬到自己的电脑上，让你能真正独立做东西。 +前面我们在 z.ai 上体验了 AI 编程，但网页版有很多限制——不能随时保存、不好管理文件、也没法做复杂项目。这一章就是帮你把开发环境搬到自己的电脑上，让你能真正独立做东西。 -我们会先搞清楚 IDE 和 AI IDE 到底有什么区别，为什么后者能让你效率翻倍；然后手把手教你用 Trae 在本地做一个贪吃蛇游戏，走完从安装到运行的完整流程；最后还会分享一些和 AI 对话的实用技巧，让你少走弯路。 +我们会先搞清楚 IDE 和 AI IDE 到底有什么区别，为什么后者能让你效率翻倍；然后手把手教你用 Trae 在本地做一个贪吃蛇游戏，走完从安装到运行的完整流程；最后还会分享一些和 AI 对话的实用技巧，让你少走弯路。 -学完这一章，你将会掌握和程序员相似的开发流程。 +学完这一章，你将会掌握和程序员相似的开发流程。 @@ -50,25 +50,16 @@ const duration = '约 1 天，可分多次完成' ### 1.2 为什么需要环境和工具 -从“能不能写代码”，到“能不能把一个项目长期、稳定地维护下去”，对环境和工具的要求是完全不同的。 +从"试着写几行代码"到"做可长期维护的项目"，对环境和工具的要求完全不同。 -理论上，只用系统自带的记事本或者 Word 文档也能写代码——它们本质上都是能输入纯文本的工具。对于刚刚试着写几行代码、完成一次性的小实验来说，这样做勉强可行。 +理论上用系统自带的记事本也能写代码，但问题很快会出现： -但一旦进入持续开发，问题就会立刻暴露出来：看不到语法高亮，错误位置只能靠肉眼去找；没有自动补全，每个标识符都要从头敲到尾；缺少项目结构视图，文件一多就很难迅速定位；代码运行出错时，也缺乏调试工具协助排查。这些“缺失”，会让开发变得既低效又容易出错。 +- **代码全是黑色文字**，关键字、字符串、注释混在一起，很难一眼看出结构 +- **没有智能提示**，每个单词都要完整手敲，拼错一个字母就要反复检查 +- **文件多了就乱套**，十几个文件来回切换，经常找不到要改的那一行在哪 +- **出错只能猜**，程序崩了不知道哪里出问题，只能一行行打印日志试错 -> 这里提到的几个概念简单解释一下，方便还不熟悉计算机术语的同学理解： -> -> **语法高亮：** 编辑器会根据代码的语法，把不同类型的内容用不同颜色显示，比如关键字是蓝色、字符串是绿色，这样更容易看清代码结构，也更容易发现拼写或语法错误。 -> -> **自动补全：** 当你只敲出代码的一部分单词或函数名时，编辑器会自动联想后面的内容，帮你补全，或者列出候选项，让你点一下就行，既省力也能减少输错。 -> -> **标识符：** 给代码里的各种“东西”起的名字，比如变量名、函数名、类名等，就像给不同文件夹贴上“图片”“作业”“账单”这样的标签，方便后面找到和使用。 -> -> **项目结构视图：** 用树状或列表的方式，把一个项目里的所有文件和文件夹展示出来，你不用在电脑里一层层点路径，只要在侧边栏点一下文件名，就能快速打开对应代码。 -> -> **调试工具：** 专门用来帮你查错的工具。它可以让代码一行一行地执行、在中途暂停、查看每个变量当前的值，从而找到“到底是哪一步出了问题”，而不是只能反复打印日志、到处猜。 - -因此，当目标从“试着写几行代码”升级为“做一个可以长期维护、持续迭代的项目”时，仅有一个能高亮语法的代码编辑器还不够，你通常需要选择并熟悉至少一款 IDE，把它作为自己的主要开发环境。我们会在接下来详细介绍什么是 IDE。 +因此，你需要一款 IDE（集成开发环境）。它会把代码用不同颜色显示、输入时自动提示、文件按项目整理、还能一步步追踪错误，让开发更高效、更少出错。 ## 2. 什么是 IDE，为什么需要 IDE diff --git a/docs/zh-cn/stage-1/1.2-building-prototype/index.md b/docs/zh-cn/stage-1/1.2-building-prototype/index.md index a06efef..4a79a47 100644 --- a/docs/zh-cn/stage-1/1.2-building-prototype/index.md +++ b/docs/zh-cn/stage-1/1.2-building-prototype/index.md @@ -13,16 +13,16 @@ const duration = '约 8 小时' -前面玩的是 AI 游戏，这一章却要解决一个现实问题：老板丢给你一句"用 AI 提高商品发布到电商平台的效率" —— 你怎么把它变成能用的产品原型？ +前面玩的是 AI 游戏，这一章却要解决一个现实问题：老板丢给你一句"用 AI 提高商品发布到电商平台的效率" —— 你怎么把它变成能用的产品原型？ -和前面做贪吃蛇、计算器不同，真实业务不能凭空想功能： +和前面做贪吃蛇、计算器不同，真实业务不能凭空想功能： -1. **明确痛点**：找运营聊聊，从模糊的"提高效率"里挖出真正的痛点 -2. **挑重点做**：一堆问题里先解决最痛的那个，别想着一次性做全 -3. **快速验证**：用 AI IDE 先做单页面原型，跑通了再扩展成多页面 -4. **做出能用的东西**：最后交付一个能演示、能操作的电商素材工作台 +1. 明确痛点：找运营聊聊，从模糊的"提高效率"里挖出真正的痛点 +2. 挑重点做：一堆问题里先解决最痛的那个，别想着一次性做全 +3. 快速验证：用 AI IDE 先做单页面原型，跑通了再扩展成多页面 +4. 做出能用的东西：最后交付一个能演示、能操作的电商素材工作台 -我们将学会从做玩具到做应用的转变，学会共情和思考客户的真实需求。 +我们将学会从做玩具到做应用的转变，学会共情和思考客户的真实需求。 diff --git a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md index c4d25d8..ff6ee0a 100644 --- a/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md +++ b/docs/zh-cn/stage-1/1.3-integrating-ai-capabilities/index.md @@ -13,11 +13,11 @@ const duration = '约 1 天' -前面两章我们学会了用 AI IDE 搭建原型，也掌握了从业务需求到产品设计的完整流程。但现在的原型还不能真正运行——点击按钮不会真的生成内容，页面上的文字都是写死的。 +前面两章我们学会了用 AI IDE 搭建原型，也掌握了从业务需求到产品设计的完整流程。但现在的原型还不能真正运行——点击按钮不会真的生成内容，页面上的文字都是写死的。 -这一章要让原型"活"起来：我们会接入真实的 AI 能力，从拿到 API Key 开始，到读懂官方文档、让 AI IDE 帮你把接口集成进代码里。你会以 DeepSeek 文本模型为例，学会怎么让应用真正调用大模型生成内容；如果感兴趣，还可以选做图像生成的接入。 +这一章要让原型"活"起来：我们会接入真实的 AI 能力，从拿到 API Key 开始，到读懂官方文档、让 AI IDE 帮你把接口集成进代码里。你会以 DeepSeek 文本模型为例，学会怎么让应用真正调用大模型生成内容；如果感兴趣，还可以选做图像生成的接入。 -学完这章，你的原型就不再是静态页面，而是能调用真实 AI 能力的应用。 +学完这章，你的原型就不再是静态页面，而是能调用真实 AI 能力的应用。 diff --git a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md index 28e6d05..c004a91 100644 --- a/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md +++ b/docs/zh-cn/stage-1/1.4-complete-project-practice/index.md @@ -13,11 +13,11 @@ const duration = '约 3 天' -上一章接入了 AI 能力，Demo 能跑起来了，但离真正的"产品"还差得远：页面一刷新数据就没了，报错就白屏，列表里只有"测试数据 1、测试数据 2"，用户点错了也没法撤销... +上一章接入了 AI 能力，Demo 能跑起来了，但离真正的"产品"还差得远：页面一刷新数据就没了，报错就白屏，列表里只有"测试数据 1、测试数据 2"，用户点错了也没法撤销... -这一章要把这些坑都填上：我们会补全产品的完整链路，用 AI 生成逼真的业务数据替代假数据，加上错误处理和用户反馈，最后打磨出一个拿得出手、能给别人演示的完整原型。 +这一章要把这些坑都填上：我们会补全产品的完整链路，用 AI 生成逼真的业务数据替代假数据，加上错误处理和用户反馈，最后打磨出一个拿得出手、能给别人演示的完整原型。 -这是初级阶段的最后一章，走完这一步，你就完成了从"完全不会编程"到"能独立做出 AI 产品原型"的蜕变。 +这是初级阶段的最后一章，走完这一步，你就完成了从"完全不会编程"到"能独立做出 AI 产品原型"的蜕变。 diff --git a/docs/zh-cn/stage-1/appendix-industry-scenarios/index.md b/docs/zh-cn/stage-1/appendix-industry-scenarios/index.md index 7e4bd30..2df17d1 100644 --- a/docs/zh-cn/stage-1/appendix-industry-scenarios/index.md +++ b/docs/zh-cn/stage-1/appendix-industry-scenarios/index.md @@ -327,7 +327,7 @@ const resetSelection = () => { -本文档汇总了 LLM 大模型在多个产业中的落地应用场景，为 AI 应用开发者提供参考。每个场景都具备实际落地的可行性，涵盖从需求分析到技术实现的完整思路。 +本文档汇总了 LLM 大模型在多个产业中的落地应用场景，为 AI 应用开发者提供参考。每个场景都具备实际落地的可行性，涵盖从需求分析到技术实现的完整思路。