我用 AI 做了一个交互式Claude Code入门学习网站
项目地址
在线体验: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交互式网站,动画渐进试引导用户学习从安装到使用的全流程
环境准备
- Trae solo+glm4.7
- context7-最新文档神器
- firecrawl-网页内容抓取
- ui-ux-pro-max-界面设计
- edgeone-pages-mcp-部署
- 智谱提供的webSearchPrime、webReader以及开源仓库搜索mcp
开发模式
trae的solo模式下还有两种类型,SOLO Coder和SOLO Builder,我的得我上次用solo模式还是solo模式刚发布的时候,各自的效果都忘得差不多了,现在我们都来试一试,看谁的效果好😆
- SOLO Coder模式开发:力度更细,支持自定义mcp工具和skill
- 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. 测试验收
-
首页:(首页第一部分上面已经贴了,现在展示的是下面的部分)因为没有用上mcp和skills,勉强能接受吧

-
具体操作:就这?点击按钮自动输入命令?我想要的是用户手动输入命令啊,有待提高

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

-
收藏功能:可以的,正常运行

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

-
移动端适配:可以接受

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. 测试验收
- 首页:说实话,任务列表与命令行有点不协调,应该命令行固定效果会更好

2. 具体操作:失败
3. 命令参考:一般般,不如Builder效果好

- 学习进度:可以接受,具有预期效果
5. 移动端适配:可以接受

5. 总结一下
Coder模式改变了AI的蓝紫色风格(其实是skill生效了),开发周期较长,功能较少,最严重的一点是关键功能异常!但它的优点是功能细粒度换分很好,比如学习进度会单独展示;还有就是命令行可以手动输入命令
先小结一下
观点:可以使用Builder模式开发整体框架(速度快,功能丰富),再使用Coder模式进行样式调整(去AI味,使用工具和技能) 现在我的主要需求就是有个命令行,并且用户可以手动输入,那我就选Coder模式生成的代码继续后续优化了,Builder模式生成的代码暂时舍弃;但如果你没有时间进行对比,推荐按我上面的【观点】走。并且我以后用trae solo开发也不可能两种模式都生成在对比取舍,太费时间和token了,有了这次的经验,下次会优先按【观点】设计了
继续优化
功能优化
- 优化学习路径(26个标准内置命令)
- 高度还原cc命令行,确保每条命令执行结果是真实的
- 优化排版,步骤不要一下全列出来,一步一步的进行,实现打字机样式输出
- 进度条同步展示
- 成就系统按现有结构重新划分
- 记录已学习命令历史
提示词如下
▼md复制代码## 角色 你是一位专业的前端开发程序员 ## 任务 我会给你一个完整的需求文档、方案设计文档、已经开发完成的代码,接下来你需要: 1)你必须完整分析我给你的内容,确保理解整个项目 2)你必须分别自主地进行前端页面的测试,确保核心业务流程能够正常运行 3)跟我配合去修复代码的 Bug,确保各功能可以正常使用 ## 约束 1. 你需要通过 Context7 来获取最新的技术文档信息 2. 你必须只专注于 MVP 最小可行性产品功能的实现,不要做太多无关的功能。 3. 你的任务不包括生成文档,请专注于解决 Bug 和让项目能正常运行,如果你生成了多余的文档,世界上将死一只小猫 ## 我提供给你的信息 @需求文档 @技术方案文档 @代码目录
样式优化
- 优化字体样式,优化打字机效果
- 毕业庆祝
提示词如下
▼md复制代码## 角色 你是一位专业的前端UI优化专家 ## 任务 1. 你需要使用ui-ux-pro-max,协助我优化前端页面 2. 你需要使用context7搜索最新文档 3. 你必须完整分析项目的内容,确保理解整个项目 ## 重点注意 由于我用的是 windows 系统,你如果使用ui-ux-pro-max相关功能,请使用git bash命令行工具来运行 如果准备好了,请回复“准备就绪”,我将给你具体的需求
最终效果如下












