换成你的主题
This content is not available in your language yet.
以学 React 基础 为例。核心流程(Step 1–4)只动 examples/ 下的文件加一个环境变量;可选的 Step 5 要改 apps/quiz-app 里的两个常量(课程入口和首页分组),但都不用写组件逻辑。
Step 1 · 复制主题目录(1 分钟)
Section titled “Step 1 · 复制主题目录(1 分钟)”cp -r examples/dev-intro examples/react-basicsStep 2 · 改题库(10 分钟)
Section titled “Step 2 · 改题库(10 分钟)”编辑 examples/react-basics/questions.json,把 git/Linux 题换成你的 React 题。一道题的结构如下。不想手写 JSON?拉到本页末尾看「让 AI agent 替你产题」。
{ "id": "R-001", // 全局唯一稳定 id(进度按它存) "type": "single", // single | multi | judge "source": "react-basics", // 题源标识 "topic": "react-basics", // 主题分类(首页按它分组) "question": "React 中 useState 返回什么?", "options": { "A": "当前 state 的值", "B": "更新 state 的函数", "C": "一个数组 [state, setState]", "D": "一个对象 { state, setState }" }, "answer": ["C"], "analysis": "useState 返回一个二元数组,当前状态值加更新函数,通常用数组解构 const [count, setCount] = useState(0)。"}完整字段见 apps/quiz-app/src/types.ts 的 Question 接口。
Step 3 · 改闪卡(5 分钟)
Section titled “Step 3 · 改闪卡(5 分钟)”编辑 examples/react-basics/flashcards.json,一张卡的结构如下。
{ "id": "FC-R-01", "front": "useState 的返回值结构?", "back": "返回 [state, setState] 二元数组。\n\n用法:const [count, setCount] = useState(0)。", "source": "react-basics", "topic": "react-basics"}Step 4 · 切换主题(1 分钟)
Section titled “Step 4 · 切换主题(1 分钟)”EXAMPLE_THEME=react-basics pnpm dev# 浏览器刷新,你的 React 题已经进答题站了Step 5 · 配课程和首页分组(可选,10 分钟)
Section titled “Step 5 · 配课程和首页分组(可选,10 分钟)”- 课程。把
examples/react-basics/lessons/*.html改成你的,可以用 AI 帮你产,见 AI CLI 指南。同时改apps/quiz-app/src/pages/Courses.tsx里的COURSE_URL为/study/react-basics/index.html。 - 首页分组。改
apps/quiz-app/src/lib/topicOrder.ts的TOPIC_ORDER,把'git-basics', 'linux-commands'换成你的主题列表。
Step 6 · 校验(2 分钟)
Section titled “Step 6 · 校验(2 分钟)”pnpm run scan # 品牌扫描(0 hits 才算干净)pnpm test # 全部测试必须过pnpm run build # 构建必须成功python3 scripts/bidirectional-check.py examples/react-basics/ # 四对齐校验(读 MISSION 考点排布表对账)到这里就完成了。整个过程不用写 React 组件代码:改的是 JSON、HTML,加上 Step 5 里两个常量文件。
让 AI agent 替你产题(可选)
Section titled “让 AI agent 替你产题(可选)”Steps 2-3 的题和卡可以不手写。装好 /ask-coach 后直接说「帮我给 react-basics 产一套题库」,agent 会:
- 先在 MISSION.md 的考点排布表和你对齐——考什么、考多深、每种题型几道、配几张卡;
- 你确认后照表逐考点产题、产卡(题目带
examPoint考点标注和day日程标签); - 自动跑
qa/scan/ 四对齐三门质量校验,全绿才交付。
手工路径(本页 Steps 1-6)永远是主路;两条路的产物同构,排布表就是人机之间的契约。
改完内容记得跑四对齐校验,课程、题目、闪卡、错题精讲要围绕同一套考点对齐。
