项目地址

在线体验：https://cc.wanyj.cn GitHub：https://github.com/userwanyong/claude-code-interactive-tutorial

背景

随着AI时代的到来，各种编程工具爆火，比如cursor、trae、kiro、claude code、open code、gemini cli等等，但最有象征性的应该是claude code，但这又有一个问题，claude code是命令行工具，对于刚入门又想直接写学习前沿技术的小伙伴有点困难，而市面上包括claude code官方在内，只提供了使用文档，对新手来说很不友好，因此我开发了一个claude code交互式网站，动画渐进试引导用户学习从安装到使用的全流程

环境准备

1. Trae solo+glm4.7
2. context7-最新文档神器
3. firecrawl-网页内容抓取
4. ui-ux-pro-max-界面设计
5. edgeone-pages-mcp-部署
6. 智谱提供的webSearchPrime、webReader以及开源仓库搜索mcp

开发模式

trae的solo模式下还有两种类型，SOLO Coder和SOLO Builder，我的得我上次用solo模式还是solo模式刚发布的时候，各自的效果都忘得差不多了，现在我们都来试一试，看谁的效果好😆

1. SOLO Coder模式开发：力度更细，支持自定义mcp工具和skill
2. SOLO Builder模式开发：内置功能带你跑全流程

SOLO Builder是从零到一编写产品需求文档、方案设计文档，然后进行实现，部署上线流程，但我为什么还要选SOLO Coder做对比呢？因为SOLO Builder可控力度太粗，基本就是按照程序预制的思路走，也不能使用自己添加mcp工具；相比之下，SOLO Coder拥有更细的控制力度，可以让你精准的把控软件开发过程中的各个流程，最重要的是他可以使用mcp工具

模式一：SOLO Builder（初版）

啊这时候有人就问了，你为什么不先写SOLO Coder！因为SOLO Builder自己跑，人工干预次数少嘛，他先完成的😊

1. 首先是提示词

▼
md
复制代码
我想做一个claude code命令行快速入门的网站，包括但不限于怎么安装、输入特定命令达到特定的效果的展示等，此网站无需介入真正的llm大模型，只需要模拟claude code的输入输出即可，帮助用户可视化、步骤性的快速入门claude code的命令行命令

## 任务
现在我需要开发一个完整的项目，请你先通过【全网联网搜索】帮我进行需求调研，看看需求是否合理、市面上有没有类似的开源项目或产品，并且通过跟我交互式问答来一步一步确认和完善需求。

## 约束
1. 你要尽可能详细、全方位地进行调研，至少搜索 10 个文档
2. 你必须只专注于 MVP 最小可行性产品功能的实现，不要做太多无关的功能。

##我提供给你的资料
1. https://code.claude.com/docs/zh-CN/overview
2. 使用 context7 搜索最新文档

2. 确认需求

接着他让我们确认一下它不确定的问题，哎这时候不得不说，我脑子里又回忆起yupi当时的场景来了，自己确认需求，感觉一模一样，身临其境

▼
md
复制代码
## 💡 需求确认问题
为了确保我们构建的 MVP 符合你的期望,我需要确认以下几个关键问题:

### Q1: 目标用户群体
这个网站主要是面向哪些用户?

- A. 完全的终端新手,不熟悉命令行
- B. 有一定编程基础,但不熟悉 Claude Code
- C. 经验丰富的开发者,想快速了解 Claude Code
- D. 其他(请说明)
### Q2: 核心功能范围
MVP 应该包含哪些最核心的功能?(请按优先级排序)

- 安装教程展示
- 基础命令演示(如 /help , /clear 等)
- 代码编辑交互演示
- Git 操作演示
- MCP 配置演示
- 项目分析演示
- 其他(请说明)
### Q3: 交互方式
你希望用户如何与网站交互?

- A. 线性教程模式(一步步引导)
- B. 自由探索模式(可以随意尝试各种命令)
- C. 混合模式(有推荐路径但也可以自由探索)
### Q4: 内容深度
每个命令演示的深度如何?

- A. 简单展示输入输出即可
- B. 展示输入输出 + 解释说明
- C. 展示输入输出 + 解释 + 实际场景应用
### Q5: 技术栈偏好
你希望使用什么技术栈?

- A. React + TypeScript (推荐)
- B. Vue + TypeScript
- C. 其他(请说明)
### Q6: 特色功能
除了基础的命令演示,你希望网站有什么特色?

- A. 命令速查表/cheatsheet
- B. 常见问题解答
- C. 学习进度追踪
- D. 命令收藏功能
- E. 其他(请说明)

3. 创建prd和pad文档

我们把表单填好后发给他，他就自动生成prd（产品需求文档）和pad（技术架构文档）了，真的很省心

当然，这一步也要人工审核的，不出意外的情况下还是要删除关系不大的部分，保证MVP

4. 代码开发

然后小手一动，点击确认，我就去写这篇文章了，剩下的交给AI 最后，这期间遇到一个问题，它没有解决直接给我说开发完成了，找不到模块“./pages/HomePage”或其相应的类型声明。ts(2307)我手动发送给它他才修复正常，然后初版就开发完成了（注意这个任务完成的那个时间是完成时间，不是开发时间哦，具体开发了多长时间它也没写，我也忘了，不过我记得很快就开发完成了😅）

5. 测试验收

1. 首页：（首页第一部分上面已经贴了，现在展示的是下面的部分）因为没有用上mcp和skills，勉强能接受吧

2. 具体操作：就这？点击按钮自动输入命令？我想要的是用户手动输入命令啊，有待提高

3. 速查表：怎么一共才支持8个命令？！！应该是没有使用context7的缘故吧，等等 不对啊，我已经把claude code的文档给它了呀，有待提高

4. 收藏功能：可以的，正常运行

5. 学习进度：哎呀，怎么点它一点效果都没有，怎么也得弹出个弹窗或者小红花之类的吧，起码进度显示是正常的，可以接受

6. 移动端适配：可以接受

6.总结一下

这时候有人说，等等！你先别总结，为什么不顺便点击部署按钮让我们体验下呢，，，嗯…… 对于这个问题哈，因为我Vercel死活登不上，需要啥手机号校验，如果有这种情况并且解决的小伙伴告诉我一下哈，教教我😭 总的来说，因为Builder模式不能用mcp，也不能用skill，导致最终生成的效果还是AI最喜欢的紫色风格，这一点很难受，希望官方能早日支持这个模式可以使用自己配置的mcp和skill吧；对于速度和返工次数而言，这个模式还是棒的 如何更完美呢？可以先用Builder模式生成整体架构，再使用Coder模式进行mcp和skill微调

模式二：SOLO Coder（初版）

这个模式我们就遵循AI传统的开发流程了

1. 需求分析

▼
md
复制代码
## 角色
你是一位 AI 编程 + 产品调研专家。

## 任务
现在我需要开发一个完整的项目，请你先通过【全网联网搜索】帮我进行需求调研，看看需求是否合理、市面上有没有类似的开源项目或产品，并且通过跟我交互式问答来一步一步确认和完善需求，在你完全理解了需求之后，生成一个标准的《需求规格文档》。

## 约束
1. 你要尽可能详细、全方位地进行调研，至少搜索 10 个文档
2. 你必须只专注于 MVP 最小可行性产品功能的实现，不要做太多无关的功能。

## 我提供给你的信息
1. https://code.claude.com/docs/zh-CN/overview

### 背景
随着claude code的爆火，市面上大多都是文档形式的教程，对新手很不友好，我想做一个可视化交互的网站，引导用户学习完claude code操作的全流程

### 具体需求
我想做一个claude code命令行快速入门的网站，包括但不限于怎么安装、输入特定命令达到特定的效果的展示等，此网站无需介入真正的llm大模型，只需要模拟claude code的输入输出即可，帮助用户可视化、步骤性的快速入门claude code的命令行命令

同样给我提了个需求确认

▼
md
复制代码
## 🎯 需求确认与完善
现在我想通过几个问题来更好地理解您的需求，这将帮助我完善需求规格文档：

问题 1：目标用户

- 您的目标用户主要是哪些人群？（例如：完全不懂命令行的新手、有一定编程经验的开发者、DevOps 工程师等）
问题 2：学习内容范围

- 您希望涵盖 Claude Code 的哪些核心功能？（例如：基础安装配置、基本对话交互、常用命令、文件操作、代码生成等）
问题 3：交互方式

- 您希望用户如何与模拟器交互？（例如：在虚拟终端中输入命令、预设命令点击、分步引导等）
问题 4：学习进度追踪

- 是否需要学习进度追踪功能？（例如：学习路径可视化、完成度统计、成就系统等）
问题 5：部署方式

- 您计划如何部署这个网站？（例如：静态网站托管、需要后端支持等）

最终不出意外，生成的需求文档把技术实现也放进去了，手动删除！

2. 方案设计

▼
md
复制代码
## 角色
你是一位专业的程序员架构师，擅长根据需求文档实现技术方案。

## 任务
我会给你一个完整的需求文档，你需要仔细完整分析需求，并且通过【从全网联网搜索信息】来确保你的技术实现方案是可行的，你需要通过 Context7 来获取最新的技术文档信息
如果你有不确认的信息，先不要完整生成文档，而是先通过交互式问答找我进行人工确认。
在你给出初版方案后，需要找我进行人工确认，最终帮我输出完整的《技术实现方案文档》

## 约束
1. 你要尽可能详细、全方位地进行网络搜索，确保获取到了最新的技术文档和实现方案（2025~2026年）
2. 你必须只专注于 MVP 最小可行性产品功能的实现，不要做太多无关的功能。
3. 你的任务不包括编写代码，只专注于方案的设计和文档编写

## 我提供给你的信息
@需求文档

一样的逻辑，手动确认

▼
md
复制代码
## 需要确认的问题
在编写完整的技术实现方案文档之前，我需要向您确认以下几个问题：

### 1. 前端框架选择
问题：您更倾向于使用React还是Vue 3？

我的建议：React（生态更成熟、组件化适合模块化教学）
备选：Vue 3（学习曲线较平缓、模板语法更直观）

### 2. 状态管理方案
问题：是否需要引入状态管理库（如Redux/Zustand）？

我的建议：不引入，使用React Context API或纯Hooks即可满足MVP需求
备选：Zustand（轻量级状态管理）

### 3. 部署方案
问题：您计划如何部署这个网站？
选项：
- 静态托管（Vercel/Netlify/GitHub Pages）- 推荐
- 自建服务器
- 其他方式
### 4. 多语言支持
问题：是否需要支持多语言（如中英文切换）？

我的建议：MVP阶段只支持中文，后续再扩展

### 5. 移动端支持
问题：是否需要支持移动端？

需求文档中提到"桌面端优先，平板端适配"，但移动端未明确说明
我的建议：MVP阶段重点优化桌面端体验

### 6. 数据持久化策略
问题：除了localStorage，是否需要考虑其他数据同步方案？

我的建议：MVP阶段仅使用localStorage，后续可考虑云端同步

最终生成方案设计文档，整体还可以

3. 前端开发

▼
md
复制代码
## 角色
你是一位专业的前端开发程序员

## 任务
我会给你一个完整的需求文档和方案设计文档，你需要仔细完整阅读这些文档。
1）帮我完整开发出可运行的前端页面，不要生成预料之外的功能
2）需要《快速启动说明文档》，帮助我能够顺利运行项目

## 约束
1. 你需要通过 Context7 来获取最新的技术文档信息（尤其是前端开发框架）
2. 你必须只专注于 MVP 最小可行性产品功能的实现，不要做太多无关的功能。
3. 你的任务不包括编写后端代码，你必须只专注于前端开发，不要生成我要求之外的文档，以快速能够运行项目为主

## 界面要求
必须使用 ui ux pro max 插件提供的脚本来生成美观的前端 UI 样式，禁止采用蓝紫渐变色，而是采用中国红。你在运行任何 python 脚本时，即使遇到了任何的脚本运行报错，也必须利用这个插件来约束美化前端页面，禁止直接不用插件生成前端代码。

## 我提供给你的信息
@需求文档
@技术方案文档

## 重点注意
由于我用的是 windows 系统，你要注意使用的命令行，必须使用 git bash 命令行工具来运行。

这个开发就老久了，差不多是Builder模式的四五倍时间吧

最终生成效果如下

4. 测试验收

1. 首页：说实话，任务列表与命令行有点不协调，应该命令行固定效果会更好

2. 具体操作：失败

3. 命令参考：一般般，不如Builder效果好

4. 学习进度：可以接受，具有预期效果

5. 移动端适配：可以接受

5. 总结一下

Coder模式改变了AI的蓝紫色风格（其实是skill生效了），开发周期较长，功能较少，最严重的一点是关键功能异常！但它的优点是功能细粒度换分很好，比如学习进度会单独展示；还有就是命令行可以手动输入命令

先小结一下

观点：可以使用Builder模式开发整体框架（速度快，功能丰富），再使用Coder模式进行样式调整（去AI味，使用工具和技能） 现在我的主要需求就是有个命令行，并且用户可以手动输入，那我就选Coder模式生成的代码继续后续优化了，Builder模式生成的代码暂时舍弃；但如果你没有时间进行对比，推荐按我上面的【观点】走。并且我以后用trae solo开发也不可能两种模式都生成在对比取舍，太费时间和token了，有了这次的经验，下次会优先按【观点】设计了

继续优化

功能优化

1. 优化学习路径（26个标准内置命令）
2. 高度还原cc命令行，确保每条命令执行结果是真实的
3. 优化排版，步骤不要一下全列出来，一步一步的进行，实现打字机样式输出
4. 进度条同步展示
5. 成就系统按现有结构重新划分
6. 记录已学习命令历史

提示词如下

▼
md
复制代码
## 角色
你是一位专业的前端开发程序员

## 任务
我会给你一个完整的需求文档、方案设计文档、已经开发完成的代码，接下来你需要：
1）你必须完整分析我给你的内容，确保理解整个项目
2）你必须分别自主地进行前端页面的测试，确保核心业务流程能够正常运行
3）跟我配合去修复代码的 Bug，确保各功能可以正常使用

## 约束
1. 你需要通过 Context7 来获取最新的技术文档信息
2. 你必须只专注于 MVP 最小可行性产品功能的实现，不要做太多无关的功能。
3. 你的任务不包括生成文档，请专注于解决 Bug 和让项目能正常运行，如果你生成了多余的文档，世界上将死一只小猫

## 我提供给你的信息

@需求文档
@技术方案文档
@代码目录

样式优化

1. 优化字体样式，优化打字机效果
2. 毕业庆祝

提示词如下

▼
md
复制代码
## 角色
你是一位专业的前端UI优化专家

## 任务
1. 你需要使用ui-ux-pro-max，协助我优化前端页面
2. 你需要使用context7搜索最新文档
3. 你必须完整分析项目的内容，确保理解整个项目

## 重点注意
由于我用的是 windows 系统，你如果使用ui-ux-pro-max相关功能，请使用git bash命令行工具来运行

如果准备好了，请回复“准备就绪”，我将给你具体的需求

最终效果如下