Appearance

中文站课程结构重整设计 V2 ​

状态 ​

已确认，等待用户审阅。

本文档收敛并更新 2026-06-03-zh-cn-course-structure-redesign-design.md。核心方向仍是“路线重塑，内容轻重写”，但本版根据评审结果进一步降低首屏复杂度：学习路线页默认推荐入门路线，不在首屏做复杂分流。

背景 ​

Easy-Vibe 中文站已经有首页、学习路线页、Stage 1/2/3、项目作业、用户故事和大量附录内容。当前问题不是内容不足，而是新手进入后容易不知道从哪开始、下一步去哪、学完一章离目标还有多远。

这次重整不是新增功能，也不是多语言改版。第一版只把中文站包装成一条更清楚的课程路径，让用户先完成一个明确的小闭环。

目标 ​

第一版只服务一个主目标：让用户先做出第一个能演示的 AI 产品原型。

这个原型的最低标准是：

  • 有界面。
  • 能跑起来。
  • 能调用 AI 完成一个核心动作。

目标用户以完全零基础的人为主，同时兼顾会一点编程、但不知道怎么用 AI 工具完成项目的人。页面表达要像课程产品，而不是资料目录；但第一版不能为了产品化而大面积重写正文。

范围 ​

本次只改中文站。

要改：

  • 中文首页。
  • 中文顶部导航显示名。
  • 学习路线页。
  • Stage 1 / 2 / 3 阶段首页。
  • Stage 1 主线章节导语。
  • Stage 2 / 3 模块入口导语。
  • 中文入口页标题和描述。

不改：

  • 其他语言版本。
  • stage-1、stage-2、stage-3 URL 路径。
  • 大量目录结构。
  • 大量课程正文。
  • 附录、RAG、部署、支付、跨平台等深水区内容本身。
  • 进度系统、测试系统、个性化推荐器等复杂交互。

设计原则 ​

第一版采用方案 2：学习路线页强承接，站点结构轻改。

具体含义：

  • 首页负责建立课程承诺，并把用户送到学习路线页。
  • 学习路线页负责讲清楚默认主路径。
  • 顶部导航只做保守轻改，不新增下拉、不重排。
  • 阶段首页和章节导语负责接住用户，不重写正文。

首屏要避免把新手放进太多选择。默认路径应当明确：不知道从哪开始，就从入门路线开始。

课程结构 ​

继续保留三阶段和原 URL 路径，但中文展示名改为：

  • 入门：从想法到第一个 AI 产品原型。
  • 实战：把原型升级成完整全栈作品。
  • 进阶：挑战复杂 AI 应用和工程级工作流。

代码路径继续保留：

  • stage-1
  • stage-2
  • stage-3

这样可以降低链接、SEO、多语言结构和既有页面之间的连锁风险。

首页设计 ​

首页只承担三件事：

  1. 重新定位：Easy-Vibe 是“从零做出 AI 产品原型的中文实战课”。
  2. 主 CTA：继续指向 /zh-cn/stage-1/learning-map/。
  3. 辅助说明：用短文案说明“入门 / 实战 / 进阶”三阶段。

首页不新增复杂组件，不做第二套学习路线，不提前堆 Stage 2/3 细节。

首页首屏应让用户在 10 秒内明白：

  • 这门课先带我做什么。
  • 我现在应该点哪里开始。
  • 后面还有实战和进阶，但不是一开始就必须学。

顶部导航设计 ​

中文顶部导航保持现有结构和链接数量，只改显示名：

  • 首页
  • 入门
  • 实战
  • 进阶
  • 附录知识库
  • Vibe 故事

链接策略：

  • 入门 继续指向 /zh-cn/stage-1/learning-map/。
  • 实战 沿用当前中文配置的默认入口。
  • 进阶 沿用当前中文配置的默认入口。
  • 不新增下拉。
  • 不重排导航。
  • 不改 URL 路径。

“附录知识库”保留“附录”这个旧称，同时补上“知识库”的使用语义，降低新手理解成本，也避免老用户完全找不到原入口。

学习路线页设计 ​

学习路线页是第一版的核心承接页，但首屏必须简化。

首屏只保留：

  • 第一目标：先做出第一个能演示的 AI 产品原型。
  • 一句默认路径说明：不知道从哪开始，就从入门路线开始。
  • 主按钮：开始入门路线。
  • 三阶段一句话：入门、实战、进阶各一句。

首屏不做复杂三选一，不放大段用户分流，不让用户先判断“我是哪类人”。

推荐首屏信息结构：

  1. Easy-Vibe 学习路线
  2. 先做出第一个能演示的 AI 产品原型
  3. 说明最低标准：有界面、能跑起来、能调用 AI 完成一个核心动作。
  4. 主 CTA：开始入门路线。
  5. 三阶段一句话：
    • 入门：从想法到第一个 AI 产品原型。
    • 实战：把原型升级成完整全栈作品。
    • 进阶：挑战复杂 AI 应用和工程级工作流。

首屏之后再展开：

  • 适合人群。
  • 入门主线顺序。
  • 会一点编程的人如何跳读。
  • 什么时候进入实战。
  • 什么时候进入进阶。
  • 附录知识库如何使用。

学习路线页的设计重点是“默认往前走”，而不是“把所有选择一次性摊开”。

阶段首页设计 ​

每个阶段首页都要回答三个问题：

  • 你为什么在这里。
  • 学完这一阶段能交付什么。
  • 下一步去哪。

入门 ​

定位：从想法到第一个 AI 产品原型。

入门阶段要告诉用户：这一阶段不是为了学完所有编程基础，而是为了跑通第一个产品闭环。

学完应交付：

  • 一个能运行的项目。
  • 一个能演示的界面。
  • 一个能调用 AI 的核心功能。

Stage 1 主线章节只补短导语，说明：

  • 这一章解决什么问题。
  • 它在第一个 AI 产品原型里负责哪一步。
  • 学完后得到什么。
  • 下一步去哪。

实战 ​

定位：把原型升级成完整全栈作品。

Stage 2 首页把现有前端、后端、AI 能力和大作业包装成原型升级路径。它要告诉用户：当原型已经能演示，但你想让它更像一个真正产品时，就进入这里。

不重写各章节正文。

学完应补强：

  • 更专业的界面。
  • 数据保存和数据库。
  • 后端接口。
  • 部署上线。
  • 完整项目作业。

进阶 ​

定位：挑战复杂 AI 应用和工程级工作流。

Stage 3 首页把现有 Claude Code 深入、跨平台、AI 进阶等内容包装成进阶能力地图。它要告诉用户：进阶不是一开始就必须学，等你已经做出原型和基础项目后再进入更有效。

不重写各章节正文。

学完应能处理：

  • 更复杂的 AI 应用。
  • 更长周期的开发任务。
  • 多工具、多 Agent 协作。
  • 跨平台和工程化问题。

模块入口和导语 ​

第一版不大面积重写正文，但要补关键导语，避免用户进入章节后再次迷路。

Stage 1 主线章节导语覆盖：

  • 本章在原型路径中的位置。
  • 本章要完成的产出。
  • 常见卡点。
  • 下一章建议。

Stage 2 / 3 模块入口导语覆盖：

  • 这个模块什么时候需要学。
  • 它解决原型升级或进阶工程里的什么问题。
  • 如果当前只想完成第一个原型，是否可以先跳过。

涉及模块：

  • Stage 2：前端开发、后端开发、AI 能力、综合项目。
  • Stage 3：核心技能、跨平台开发、AI 进阶、个人品牌。

架构和数据流 ​

这是 VitePress 文档站的信息架构改造，不引入新运行时系统。

主要变更载体：

  • docs/.vitepress/config.mjs：中文导航显示名、中文路径面包屑/元信息中必要的阶段名。
  • docs/zh-cn/index.md：中文首页文案。
  • docs/zh-cn/stage-1/learning-map/index.md：学习路线页。
  • docs/zh-cn/stage-2/index.md：实战阶段首页。
  • docs/zh-cn/stage-3/index.md：进阶阶段首页。
  • Stage 1 主线章节 index.md：短导语。
  • Stage 2 / 3 模块入口页：短导语。

用户流：

  1. 首页看到课程承诺。
  2. 点击主 CTA 进入学习路线页。
  3. 默认进入入门路线。
  4. 完成入门主线后，再按需要进入实战或进阶。
  5. 遇到概念问题时查附录知识库。

错误和边界处理 ​

不改变 URL，因此旧链接应继续可用。

如果某个页面当前没有独立阶段首页或模块入口页，第一版不新建复杂聚合页，优先利用现有入口页补导语。

如果构建发现中文导航指向不存在页面，优先修正链接到现有稳定入口，不创建空壳页。

如果首页或学习路线页文案与正文旧节奏存在轻微割裂，第一版只修最影响迷路的位置：阶段首页、Stage 1 主线章节开头、Stage 2/3 模块入口。

测试和验证 ​

第一版验证以低风险检查为主：

  • 检查中文顶部导航显示名和链接目标。
  • 检查 /zh-cn/、/zh-cn/stage-1/learning-map/、/zh-cn/stage-2/、/zh-cn/stage-3/ 能打开。
  • 检查 Stage 1 主线章节导语是否存在且没有破坏原正文。
  • 检查 Stage 2 / 3 入口导语是否存在且没有引入死链。
  • 跑一次 VitePress build。

本地环境注意事项：

  • 不假定系统 node、npm、npx 可用。
  • 优先使用仓库已有 node_modules 和 Codex bundled Node。
  • 如果缺少 npm 或构建脚本无法在当前环境运行，需要记录失败原因，并至少完成链接和文件级检查。

验收标准 ​

第一版完成后应满足：

  • 首页 10 秒内能让新用户明白：这门课先带我做第一个 AI 产品原型。
  • 学习路线页首屏不复杂，默认路径明确。
  • 用户能从学习路线页直接进入入门路线。
  • 顶部导航读起来像课程路径：入门、实战、进阶。
  • Stage 1 主线章节能说明本章在原型路径中的作用。
  • Stage 2 / 3 不再只是技术列表，而是说明什么时候需要学。
  • 原 URL 不变。
  • 其他语言版本不受影响。

风险 ​

入口清楚，但正文仍是旧节奏 ​

第一版不重写正文，正文内部可能仍保留资料型风格。

处理方式：先补入口导语，把最容易迷路的位置接上。

学习路线页过度产品化 ​

如果路线页放太多分流、卡片和解释，新手会再次不知道该点哪里。

处理方式：首屏采用最简结构，详细分流放到后文。

展示名和路径名不一致 ​

用户看到“入门 / 实战 / 进阶”，代码路径仍是 stage-1 / stage-2 / stage-3。

处理方式：第一版明确只改展示名，不改路径。后续如需路径迁移，单独设计。

附录知识库定位仍可能偏重 ​

附录内容很多，用户可能误以为需要从头读完。

处理方式：在学习路线页和附录入口明确“遇到问题再查”，不把附录作为主线。

后续实施顺序建议 ​

实施计划阶段可按以下顺序拆解：

  1. 更新中文导航显示名和必要阶段名。
  2. 更新中文首页。
  3. 重写学习路线页首屏和路线说明。
  4. 更新 Stage 2 / 3 阶段首页。
  5. 补 Stage 1 主线章节导语。
  6. 补 Stage 2 / 3 模块入口导语。
  7. 更新中文入口页标题和描述。
  8. 做构建、链接和页面抽查。

第一版成功的标志不是内容更多，而是新手能更快知道下一步。