进阶篇 · 实战案例 / MCP / 技巧集 · 鱼老师的 AI 内容站

chapter/16 · 实战篇

实战案例:用 Claude Code 做一个「涂鸦跳跃」小游戏

学完前面的章节,来完整走一遍真实流程:从零开始,让 Claude Code 做出一个手机、电脑浏览器都能玩的小游戏。整个过程不需要你写一行代码。本章末尾嵌入了最终成品,现在就可以试玩。

创建项目文件夹并启动 Claude Code

Terminal

$ mkdir ~/Desktop/doodle-jump
$ cd ~/Desktop/doodle-jump
$ claude

空文件夹不需要 /init,直接开干。

切到计划模式,把需求一次说清楚

按 Shift + Tab 切到计划模式,然后把需求发给它。写需求的诀窍:说清楚"要什么效果",不用管"怎么实现"。下面这段可以直接复制用:

提示词(复制发给 Claude)

帮我做一个叫「涂鸦跳跃」的网页小游戏,做成一个单独的 HTML 文件 doodle.html,要求:
1. 小人不停自动弹跳,落到平台上会再次弹起,踩空掉出屏幕底部就游戏结束
2. 电脑上用左右方向键控制移动,手机上点按屏幕左右半边控制,
   小人从屏幕左边出去会从右边回来
3. 画面跟着小人往上滚动,爬得越高分数越高,顶部显示当前得分和最高分
4. 平台有普通和左右移动两种,偶尔出现弹簧,踩到会弹得特别高
5. 画风可爱,像画在方格纸上的涂鸦
6. 游戏结束显示得分和「再来一局」,点击屏幕重新开始

审查方案,让它动手

计划模式下,Claude 会先回给你一份实现方案(用什么技术、分几步做),不会动文件。你不用看懂技术细节,重点检查它复述的游戏规则对不对。没问题就回复"可以,开始吧",它会自动创建 doodle.html 并写入全部代码。

打开看效果

不用退出 Claude Code,直接跟它说"帮我在浏览器里打开",或者自己新开一个终端标签页执行:

Terminal

$ open ~/Desktop/doodle-jump/doodle.html

迭代打磨:玩一会儿,把不满意的地方直接告诉它

第一版通常不完美,这很正常——迭代才是 AI 编程的日常。用大白话描述你看到的现象即可,比如:

"跳得太快了,整体节奏放慢一点"
"手机上按住屏幕会把网页选中变蓝,帮我修掉"
"平台之间距离有点远,经常够不着,调近一些"
"给小人加个朝移动方向看的眼睛,更可爱一点"

每提一条,Claude 改完你就刷新浏览器看效果,满意为止。

发到手机上玩

用 AirDrop(隔空投送)把 doodle.html 发给自己的 iPhone,或者微信"文件传输助手"发过去,手机上点开、选择用浏览器打开即可。也可以直接发给朋友——单个 HTML 文件,人人都能打开。

这个案例教会你的三件事

① 一次只提一个修改需求,改完确认再提下一个,比一口气提五个更不容易乱。② 描述现象,不要猜原因——说"手机上按住屏幕会变蓝"就够了,不用管是什么 CSS 属性没设。③ 让 AI 自己检查——收尾时说一句"帮我检查一下手机和电脑上还有没有操作问题",经常能揪出你没发现的 bug。

最终成品,直接试玩 👇

电脑:← → 方向键 · 手机:点按画面左右半边 · 教程附带的「涂鸦跳跃.html」就是这个游戏的独立文件,可单独转发

chapter/18 · 进阶篇

MCP 入门:给 AI 插上"外设"

默认状态下,Claude Code / Codex 只能操作你项目文件夹里的东西——像一台没插外设的主机。MCP(Model Context Protocol)就是它的 USB 接口:插上不同的"外设"(MCP 服务器),AI 就多一种本事。

插什么外设,AI 就多什么本事——不插的时候它只认识你的项目文件夹

MCP 能干什么?几个真实例子

插上浏览器 MCP:让 AI 自己打开你做的网页,点一点、看有没有 bug;
插上文档 MCP(如 Context7):AI 写代码时自动查最新版官方文档,不再用过时写法;
插上数据库 MCP:直接问"上周注册用户有多少",它自己去查;
插上飞书/Slack MCP:让它读群消息、发通知。

怎么装?两条命令的事

以免费的文档查询外设 Context7 为例(装它不需要注册任何账号):

Terminal · 给 Claude Code 装

$ claude mcp add context7 -- npx -y @upstash/context7-mcp
# 注意:在终端里执行,不是在 claude 对话里
# 装完进入 claude,输入 /mcp 就能看到它;claude mcp list 可查已装列表

Terminal · 给 Codex 装

$ codex mcp add context7 -- npx -y @upstash/context7-mcp
# codex mcp list 查看已装;进入 codex 后输入 /mcp 查看运行状态

装完之后不需要特意"调用"它——直接正常提需求,AI 觉得需要时会自己用。比如装了 Context7 后说"用最新版 Tailwind 写个导航栏,查一下文档确认语法",它就会自动去查。

💡 CC Switch 用户有捷径CC Switch 里有 MCP 面板,可以图形化添加/编辑 MCP,一次配置自动同步给 Claude Code 和 Codex 两边,还能从已装应用一键导入,比敲命令更省心。

新手三条纪律

① 少而精:装 3~6 个就够了。每多插一个外设,AI 每次思考都要多背一份说明书(占上下文),装太多反而变笨变慢。② 只装可信来源的。MCP 服务器有权限替你做事,来路不明的等于把家门钥匙给陌生人——优先选官方或大厂出品、GitHub 上星标多的。③ 用不上就卸。claude mcp remove 名字 / codex mcp remove 名字 随时拆掉。

chapter/19 · 进阶篇

常用技巧集:让 AI 干活又快又准的 10 个习惯

工具会用了之后,效率差距全在"怎么跟 AI 说话、怎么安排活儿"上。这 10 条都是社区反复验证过的实战经验,按使用频率排序。

提需求的技巧

1. 说目标和验收标准,别说实现方法。❌"帮我用 flexbox 加个 div 居中" ✅"标题在手机上显示不居中,帮我修好,各种屏幕都要居中"。你负责"要什么",它负责"怎么做"。

2. 一次一件事。五个需求分五轮提,每轮确认满意再下一轮。一口气全说,它容易顾此失彼,出了问题你也不知道哪步错的。

3. 报错直接原样粘贴。不要自己翻译、总结报错信息,完整复制给它,再补一句"什么操作触发的"。截图也可以——直接把图片拖进对话框,它看得懂。

4. 给例子胜过给形容词。❌"做得好看点" ✅"参考 xxx 网站那种深色极简风"或直接丢一张你喜欢的截图。

管理项目的技巧

5. 把"家规"写进 CLAUDE.md。每次都要重复的要求(比如"注释用中文写""不要动 config 文件夹"),说一句"把这条记到 CLAUDE.md 里",以后每次对话它自动遵守。这是回报率最高的一个动作。

6. 干大活之前先让它"存档"。大改动前说一句"先用 git 提交一次当前状态"。改崩了就说"回到上次提交",一秒复原。不懂 git 也没关系,这两句话就够用。

7. 阶段性收尾时主动 /compact。别等上下文爆满被迫压缩——每完成一个阶段就 /compact,还能指定保留重点:/compact 保留数据库结构和已确认的方案。

省钱省额度的技巧

8. 简单活用便宜模型。改文案、写注释、重命名这类杂活,用 /model 切到轻量模型;难题再换回旗舰。订阅用户额度能多撑一倍不止。

9. 换任务就 /clear。旧任务的上下文对新任务是纯负担:又占额度又干扰判断。历史随时可以用 /resume 找回来,别舍不得清。

压箱底的一条

10. 让 AI 检查 AI。活干完加一句:"换个角度审查一下刚才的修改,列出可能有问题的地方"。相当于免费请了个质检员,经常能揪出真 bug。要求高的话,开个新对话(/clear 后)让"陌生的它"来审查,效果更狠。

💡 背不下来?把这页收藏了,用的时候翻一眼。或者更偷懒:把这 10 条直接发给 Claude Code,说"帮我把适合的规则记到 CLAUDE.md"。

chapter/16 · 实战篇

实战案例:用 Claude Code 做一个「涂鸦跳跃」小游戏

创建项目文件夹并启动 Claude Code

PowerShell

PS> mkdir ~\Desktop\doodle-jump
PS> cd ~\Desktop\doodle-jump
PS> claude

空文件夹不需要 /init,直接开干。

切到计划模式,把需求一次说清楚

按 Shift + Tab 切到计划模式,然后把需求发给它。写需求的诀窍:说清楚"要什么效果",不用管"怎么实现"。下面这段可以直接复制用:

提示词(复制发给 Claude)

帮我做一个叫「涂鸦跳跃」的网页小游戏,做成一个单独的 HTML 文件 doodle.html,要求:
1. 小人不停自动弹跳,落到平台上会再次弹起,踩空掉出屏幕底部就游戏结束
2. 电脑上用左右方向键控制移动,手机上点按屏幕左右半边控制,
   小人从屏幕左边出去会从右边回来
3. 画面跟着小人往上滚动,爬得越高分数越高,顶部显示当前得分和最高分
4. 平台有普通和左右移动两种,偶尔出现弹簧,踩到会弹得特别高
5. 画风可爱,像画在方格纸上的涂鸦
6. 游戏结束显示得分和「再来一局」,点击屏幕重新开始

审查方案,让它动手

打开看效果

不用退出 Claude Code,直接跟它说"帮我在浏览器里打开",或者自己新开一个 PowerShell 窗口执行:

PowerShell

PS> start ~\Desktop\doodle-jump\doodle.html

迭代打磨:玩一会儿,把不满意的地方直接告诉它

第一版通常不完美,这很正常——迭代才是 AI 编程的日常。用大白话描述你看到的现象即可,比如:

"跳得太快了,整体节奏放慢一点"
"手机上按住屏幕会把网页选中变蓝,帮我修掉"
"平台之间距离有点远,经常够不着,调近一些"
"给小人加个朝移动方向看的眼睛,更可爱一点"

每提一条,Claude 改完你就刷新浏览器看效果,满意为止。

发到手机上玩

用微信"文件传输助手"或 QQ 把 doodle.html 发到手机,点开、选择用浏览器打开即可。也可以直接发给朋友——单个 HTML 文件,人人都能打开。

这个案例教会你的三件事

最终成品,直接试玩 👇

电脑:← → 方向键 · 手机:点按画面左右半边 · 教程附带的「涂鸦跳跃.html」就是这个游戏的独立文件,可单独转发

chapter/18 · 进阶篇

MCP 入门:给 AI 插上"外设"

插什么外设,AI 就多什么本事——不插的时候它只认识你的项目文件夹

MCP 能干什么?几个真实例子

插上浏览器 MCP:让 AI 自己打开你做的网页,点一点、看有没有 bug;
插上文档 MCP(如 Context7):AI 写代码时自动查最新版官方文档,不再用过时写法;
插上数据库 MCP:直接问"上周注册用户有多少",它自己去查;
插上飞书/Slack MCP:让它读群消息、发通知。

怎么装?两条命令的事

以免费的文档查询外设 Context7 为例(装它不需要注册任何账号):

PowerShell · 给 Claude Code 装

PS> claude mcp add context7 -- cmd /c npx -y @upstash/context7-mcp
# 注意:在 PowerShell 里执行,不是在 claude 对话里
# Windows 特有:npx 类服务器前面必须加 cmd /c,不加会报"连接关闭"错误
# 装完进入 claude,输入 /mcp 就能看到它;claude mcp list 可查已装列表

PowerShell · 给 Codex 装

PS> codex mcp add context7 -- npx -y @upstash/context7-mcp
# codex mcp list 查看已装;进入 codex 后输入 /mcp 查看运行状态

💡 CC Switch 用户有捷径CC Switch 里有 MCP 面板,可以图形化添加/编辑 MCP,一次配置自动同步给 Claude Code 和 Codex 两边,还能从已装应用一键导入,不用操心 cmd /c 这种细节,比敲命令更省心。

新手三条纪律

chapter/19 · 进阶篇

常用技巧集:让 AI 干活又快又准的 10 个习惯

工具会用了之后,效率差距全在"怎么跟 AI 说话、怎么安排活儿"上。这 10 条都是社区反复验证过的实战经验,按使用频率排序。

提需求的技巧

2. 一次一件事。五个需求分五轮提,每轮确认满意再下一轮。一口气全说,它容易顾此失彼,出了问题你也不知道哪步错的。

3. 报错直接原样粘贴。不要自己翻译、总结报错信息,完整复制给它,再补一句"什么操作触发的"。截图也可以——直接把图片拖进对话框,它看得懂。

4. 给例子胜过给形容词。❌"做得好看点" ✅"参考 xxx 网站那种深色极简风"或直接丢一张你喜欢的截图。

管理项目的技巧

6. 干大活之前先让它"存档"。大改动前说一句"先用 git 提交一次当前状态"。改崩了就说"回到上次提交",一秒复原。不懂 git 也没关系,这两句话就够用(第 1 章装的 Git for Windows 在这里派上用场)。

7. 阶段性收尾时主动 /compact。别等上下文爆满被迫压缩——每完成一个阶段就 /compact,还能指定保留重点:/compact 保留数据库结构和已确认的方案。

省钱省额度的技巧

8. 简单活用便宜模型。改文案、写注释、重命名这类杂活,用 /model 切到轻量模型;难题再换回旗舰。订阅用户额度能多撑一倍不止。

9. 换任务就 /clear。旧任务的上下文对新任务是纯负担:又占额度又干扰判断。历史随时可以用 /resume 找回来,别舍不得清。

压箱底的一条

💡 背不下来?把这页收藏了,用的时候翻一眼。或者更偷懒:把这 10 条直接发给 Claude Code,说"帮我把适合的规则记到 CLAUDE.md"。