企业官网建设流程全解析

免费AI课程架构揭秘：course-structure.json 单一数据源设计全解析

【免费下载链接】free-ai-coursesInteractive course teaching Product Managers how to use Claude Code effectively项目地址: https://gitcode.com/GitHub_Trending/cl/free-ai-courses

Free AI Courses是一个交互式开源课程项目，教你（产品经理等非开发者）如何高效使用 Claude Code。它最精巧的工程设计在于：整个课程体系由一个 JSON 文件驱动——course-structure.json 作为"单一数据源"（Single Source of Truth），同时控制课程顺序、slash 命令路由、网站导航和"下一课"跳转，改一处即可全局生效。本文带你完整解析这套课程架构设计。

什么是"单一数据源"？为什么要这样设计 🎯

想象你要维护一个 20+ 节课的课程，每节课涉及：教学脚本、启动命令、官网导航、上下课跳转。如果这些信息散落在各处，新增一节课时可能要同时改十几个文件，而且极易漏改。

Free AI Courses 的解法：把所有课程元信息集中到一个配置文件里。项目根目录的 CLAUDE.md 明确写道：

This course uses a config-driven architecture—— 课程结构、slash 命令路由、网站导航、脚本跳转，全部由course-structure.json控制。

这套"中心配置 → 多消费方"的辐射式架构，正是整个课程系统的骨架。

拆解 course-structure.json：三大字段看懂课程地图 🗺️

打开 course-materials/course-structure.json，顶层只有 3 个字段，非常干净：

每个level（层级）包含id、name、description和一个modules数组。每个module（模块）定义了 7 个字段：

4 个 Level 的内容版图：

• Level 1 · Foundation（7 课）：Claude Code 核心机制，从 1.1 欢迎 到 1.7 导航技巧
• Level 2 · PM Workflows（3 课）：真实 PM 任务——写 PRD、分析数据、产品战略
• Level 3 · Nano Banana（7 课）：用 Gemini 3 Pro 做 AI 图像生成的分步教程
• Level 4 · Vibe Coding（5 课）：从零搭建并部署一个真实 Web 应用

注意 Level 3 采用3.1.1、3.2.1这种三级编号，说明配置天然支持层级嵌套的章节划分，而前两级课程只用X.Y编号——同一个 schema 灵活适配不同颗粒度。

配置如何工作：三大消费方各自只读 10 行代码 ⚙️

配置的价值在于"消费方"。这个项目有 3 类消费者，每一个都是薄薄的一层。

1. 网站导航：构建时自动生成

以 website/pages/fundamentals/_meta.ts 为例，核心逻辑只有 4 行：

import courseStructure from '../../../course-materials/course-structure.json' const level1 = courseStructure.levels.find(l => l.id === "1")! level1.modules.forEach(module => { meta[module.slug] = `${module.id}: ${module.title}` })

即：导入 JSON → 按 level id 取模块 → 用 slug 做页面 key、id: title做导航文案。Level 2、Level 3 的导航文件 advanced/_meta.ts 和 nano-banana/_meta.ts 是同样的模式。网站导航页（如fundamentals/下的 7 个 mdx 页面）与配置完全同步，无需手写目录。

2. Slash 命令：23 个命令文件内容完全相同

course-materials/.claude/commands/ 目录下有start-1-1.md到start-4-5.md共 23 个命令文件。以 start-1-2.md 为例，内容只有三步：

1. 读取自己 id 对应的教学脚本（lesson-modules/1-fundamentals/1.2-visualizing-files/CLAUDE.md）
2. 读取 .claude/SCRIPT_INSTRUCTIONS.md 教学规则
3. 按脚本要求执行教学（"Say"逐字念、"Check"处停等、"Action"照做）

命令自己解析文件名（start-1-2→ 模块1.2），再查course-structure.json找到path。这就是为什么所有命令文件内容一样——智能全部在配置里，命令只是路由入口。

3. 教学脚本：动态计算"下一课"

每个模块的CLAUDE.md教学脚本在结尾会反向读取配置，动态判断下一个模块是什么，然后告诉学生正确的 slash 命令。这意味着脚本里没有任何硬编码的"下一课是 XX"——即使你在中间插入新课，脚本也会自动给出正确的下一站。

实战：新增 / 重排课程模块只需改一个文件 ✍️

这是单一数据源设计最爽的环节。官方文档 CLAUDE.md 给出的完整流程：

1. 编辑 course-structure.json——添加或移动 module 定义
2. 新建模块文件夹和教学脚本文件（如新增课程才需要）
3. 完成！其余全部自动级联更新

一个精妙细节：逻辑 ID 与物理路径解耦。比如想在 1.3 和 1.4 之间插入新模块，旧的1.4-agents文件夹可以保持原名不改——配置负责把逻辑编号（1.5）映射到物理路径（1.4-agents），文件夹名只是历史痕迹。

相比传统做法，这套设计不需要：

• ❌ 重命名任何文件夹
• ❌ 逐个修改 slash 命令文件
• ❌ 编辑现有教学脚本
• ❌ 手工维护网站_meta.ts导航

设计总结：这套架构好在哪 💡

对于想给自己的课程/文档站做工程化设计的人来说，这个模式非常值得借鉴：把"会变的东西"（课程增删、排序、时长）全部收进一份声明式配置，让代码只负责消费它——这正是 config-driven 架构的核心思想。

想动手研究的话，建议从 course-structure.json 读起，再对照 CLAUDE.md 的 "Course Architecture" 章节，你会发现整个课程的运转逻辑一目了然。🚀

【免费下载链接】free-ai-coursesInteractive course teaching Product Managers how to use Claude Code effectively项目地址: https://gitcode.com/GitHub_Trending/cl/free-ai-courses