大家好，我是程序员鱼皮。
唉，久坐不动可以说是程序员的通病。像我天天忙的要死，根本没时间运动，但又不甘心让身体就这样退化，怎么办呢？
于是，我通过询问 AI，了解到了「提肛运动」。通过增强盆底肌肉力量、促进局部血液循环，有效预防痔疮、改善大小便失禁，并提升肛门及相关盆腔器官的健康功能。
关键是这玩意随时随地都能做，太适合我了！
但我自己是个「运动白痴」，所以想到能不能通过 AI 编程，开发个「提肛助手」，帮助大家科学地进行盆底肌训练，傻子也能练对。
安排！
下面我将全程用 Claude Code + DeepSeek V4 来开发一个完整项目，从安装配置到开发测试，手把手带你走一遍。看完这篇，你能学会 Claude Code 的保姆级使用方法，感受 DeepSeek V4 的实际编程能力，还能 get 到不少 AI 编程的实用技巧。
点个收藏，咱们开始~
需求分析
这个项目叫「提肛助手」tgang-helper，核心功能其实不复杂。
1）提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。
2）训练过程中要有动画引导节奏，包括呼吸圈动画和人体姿势示范动画，让用户一看就知道该怎么做。
3）同时通过浏览器语音合成实时播报指令，让用户闭着眼睛也能跟练。
4）还有一个亮点功能，就是支持开启摄像头进行体位校正。实时检测你的站姿、坐姿是否正确，比如有没有驼背、耸肩、身体歪斜，当检测到姿势问题时，让 AI 提供个性化的纠正建议。
5）查看训练打卡日历和统计图表。
方案设计
如果你完全没有任何技术基础，可以让 AI 帮你完成方案设计。
但这里为了节省时间和 tokens，我直接告诉 AI 怎么做。
虽然要做姿态检测功能，但是这个项目几乎是 纯前端 就能搞定！不需要复杂的后端。
技术栈上，我选择 Next.js + TypeScript，姿态检测用 MediaPipe Pose（纯前端运行），AI 对话通过 Next.js 的 API Route 代理调用 DeepSeek V4 模型，动画用 CSS 动画 + Framer Motion。
为什么不用 Python 后端？
因为这个项目唯一需要服务端的地方就是代理一下 AI 接口调用，使用 Next.js 的 API Route 完全能搞定，没必要拆成前后端分离，越简单越好。
环境准备
安装 Claude Code
先简单介绍一下 Claude Code。它是 Anthropic 推出的 AI 编程工具，直接在终端里运行，你跟它聊天描述需求，它就能自主分析项目、写代码、跑命令、修 Bug，全程自主执行。
除了基础的代码生成，还能使用工具和 Skills 技能包、连接 MCP 外部服务、用 Plugins 插件扩展能力，甚至搞多智能体协作，扩展性很强。
安装 Claude Code 很简单。
首先确保你的电脑有 Node.js 环境和 npm 软件依赖安装工具，没有的话，直接到 Node 官网 下载傻瓜式安装包就好：
无论使用什么操作系统，都可以通过 npm，一行命令来安装 Claude Code：
npm install -g @anthropic-ai/claude-code
安装完成后，输入 claude 命令进入对话界面，首次需要登录才能正常使用：
但估计很多同学没有 Anthropic 的国外订阅账号，所以我们要切换为国产模型。
切换模型
Claude Code 本身是支持切换模型的，你可以通过「修改环境变量」或「编辑配置文件」来对接其他大模型的 API。
一般你使用哪家的大模型 API，直接看对应的官方文档，就能找到接入方法。
比如 DeepSeek 的 API 文档 里就有现成的接入方法：
不过我更推荐用一个开源工具 CC Switch，能够可视化地管理 Claude Code、Codex、Gemini CLI 等 AI 编程工具的配置，一键切换不同的模型供应商。内置了 50 多个供应商预设，不用自己手动改配置文件。
按照官方中文文档，根据操作系统选择对应的安装方式：
Mac 用户可以通过命令行安装：
brew tap farion1231/ccswitch
brew install --cask cc-switch
安装完成后，运行软件进入主界面，添加模型供应商：
选择 DeepSeek：
填写 API Key，需要从 DeepSeek 开放平台 获取。
我这里把主模型设置为 DeepSeek-V4-Pro，相比 DeepSeek-V4-Flash 模型，Agent 能力和复杂推理更强。
然后点右下角保存：
可以在上图中看到 Claude Code 的 JSON 配置文件，其实 CC Switch 就是帮你可视化地修改各 AI 工具的配置文件，省去手动编辑 JSON 的麻烦。
最后，启用 DeepSeek 模型：
然后重新进入 Claude Code，随便输入一句话，AI 能给出回复，说明切换模型成功：
安装扩展
Claude Code 默认就有读写文件、跑终端命令、搜索代码这些基础能力，但要做好一个完整项目，光靠这些还不够。
我们需要下面 3 个扩展：
- Frontend Design：前端美化技能，让生成的页面更有设计感
- Firecrawl：联网搜索和网页抓取，让 AI 能获取最新的技术信息
- Context7：查询最新的技术文档和 API 用法，减少 AI 瞎编的情况
下面来依次安装。
1、安装 Frontend Design
Frontend Design 是 Anthropic 官方的前端美化技能，可以让 AI 生成的页面更有设计感。
在 Claude Code 中，先通过 /plugin 命令添加官方技能市场，相当于装了个技能商店：
/plugin marketplace add anthropics/skills
输入 /plugins，在 Discover 菜单栏中，选中 example-skills 并按回车，安装官方的示例技能合集：
输入 /reload-plugins 重载一下插件：
输入 /skills 查看已安装的技能，可以看到 frontend-design 已经就位了：
之后在对话框中输入 /frontend-design 就能主动触发这个技能，让 AI 美化前端页面。同时还自动装上了 webapp-testing 自动化测试技能，后面也用得上。
2、安装 Firecrawl
Firecrawl 是联网搜索和网页抓取工具，让 AI 开发前先搜索最新技术信息。
安装方式很简单，打开终端，输入一行命令：
npx -y firecrawl-cli@latest init --all --browser
执行后，会自动打开浏览器，要在弹出的页面中点击授权：
安装完成后，会自动注册 12 个 Firecrawl 相关技能：
在 Claude Code 的技能管理中，就能看到新添加的 Firecrawl 相关技能了：
3、安装 Context7
Context7 是一个技术文档查询工具，让 AI 能获取到各种框架和库的最新官方文档，避免用过时的 API 写代码。
先在终端输入一行命令来安装：
npx ctx7@latest setup
它会问是安装 MCP 服务还是 CLI + Skills，这里我选择 CLI + Skills。你会发现，现在越来越多工具已经从 MCP 转向 CLI + Skills 的方式了：
同样在弹出的网页中授权，不用自己获取和输入 API Key，太方便了！
然后选择要给哪个 AI 编程工具安装，我选择为 Claude Code 安装：
安装成功后，可以在技能管理中看到 find-docs 技能：
当然，你也可以选择安装 MCP Server 的方式：
安装后，在 Claude Code 中输入 /mcp 命令，就能看到安装好的 MCP 了，比自己手动配置方便太多了！
至此，环境准备完成！下次开发项目时，就不用再重复准备了~
开发编码
新建一个 tgang-helper 项目文件夹，在终端中用 cd 进入该目录，然后输入 claude 命令打开 Claude Code：
然后输入提示词。这里分享一下我实际用的完整提示词，给大家参考：
## 角色
你是一个前端全栈工程师，擅长 Next.js + TypeScript 开发。
## 任务
开发一个叫 tgang-helper 提肛助手的 Web 应用，帮助用户科学地练习盆底肌训练（提肛 / 凯格尔运动），傻子也能练对。
提供科学的分级训练课程，区分男女和难度，涵盖快速收缩、持续收缩、阶梯收缩等多种动作类型。训练过程中通过动画引导节奏，包括呼吸圈动画（收缩时缩小、放松时扩大）和人体姿势示范动画（用 SVG 或 Lottie 展示每个动作的正确体位和发力部位），让用户一看就知道该怎么做。同时使用浏览器语音合成（Web Speech API）实时播报指令，让用户闭着眼睛也能跟练。
支持开启摄像头进行体位校正，使用 MediaPipe Pose 在浏览器端实时检测用户的站姿 / 坐姿是否正确（如驼背、耸肩、身体歪斜），所有检测纯本地运行，摄像头画面不上传服务器。当检测到持续的姿势问题时，将姿势数据（非图像）发送给 DeepSeek V4 模型，获取个性化的纠正建议并语音播报。
训练记录保存在本地 localStorage，展示打卡日历和简单的统计图表。
## 技术栈
- 框架：Next.js + TypeScript
- 姿态检测：MediaPipe Pose（纯前端）
- AI 对话：通过 Next.js API Route 代理调用 DeepSeek V4 模型（兼容 OpenAI SDK 格式）
- 动画：CSS 动画 + Framer Motion
## 要求
1. 页面美观专业，使用 frontend-design 技能美化页面，配色健康积极
2. 开发前，先通过 Firecrawl 联网搜索 MediaPipe Pose 浏览器端用法，通过 Context7 查询最新技术文档和用法
3. 必须生成完整可运行的代码，每步完成后必须自主测试验证
简单解读一下这段提示词的几个要点：
- 角色定义 放在最前面，让 AI 进入前端全栈工程师的状态
- 任务描述 用自然语言把需求讲清楚
- 技术栈 只列关键选型，让 AI 自己决定实现细节
- 最后两条要求是关键，让 AI 先查文档再写代码，避免瞎编写法；让 AI 开发完后自主测试，减少翻车
给 AI 发送提示词前，我按 Shift + Tab 进入了自动接受编辑模式，AI 创建、修改、删除文件和执行命令都不用我逐一确认了，更省事儿。但是有一定风险，大家按需使用：
把上述提示词发送给 AI，接下来就是漫长的等待了。
AI 开始自主开发，先搜索技术文档，然后规划项目结构，创建文件，写代码。
过程中 AI 可能需要确认工具调用，比如它想通过 Context7 获取最新的 MediaPipe 技术文档，可以选择「Yes, and don't ask again」，以后就不用反复确认了：
过了 20 多分钟，AI 自主完成了开发，还自动运行了项目：
然后 AI 用 webapp-testing 技能，编写了自动化测试脚本，自动打开浏览器测试应用：
经过 31 分钟后，任务终于完成了，比我上次用 GPT-5.5 开发同量级的项目慢了差不多 2 倍。这期间我不仅做了 1 组提肛，还吃了个饭。
从 AI 的总结可以看到，它实现了完整的功能，包括 7 套训练课程、呼吸圈动画、SVG 人体图、语音指导、姿态检测、AI 建议、训练记录和统计图表，一把梭全给整上了。
输入 /context 可以查看当前上下文使用情况，已经用了 9.4 万 tokens，占总容量的 47%：
你可能会好奇，DeepSeek V4 官方说支持 100 万 tokens 上下文，为什么 Claude Code 里显示上限才 200K？
应该是 Claude Code 本身对上下文窗口有限制，跟模型的上限是两回事。所以建议大家定期看看上下文占用情况，占满之后 AI 可能会「断片失忆」开始乱改代码。
测试验证
接下来测试验证。由于项目用到了 DeepSeek V4 的 AI 功能，先让 AI 帮我创建一个环境变量配置文件：
帮我创建 .env.local 文件
AI 很快创建好了，还贴心地检查了 .gitignore，确认 .env 文件不会被提交到 Git：
打开 .env.local 文件，填上从 DeepSeek 开放平台获取的 API Key：
然后在浏览器中打开页面。
你别说，这个风格我挺喜欢的，很简洁清爽，配色也是健康积极的风格。就是那个 Logo 我没太看明白，求大家给我解释一下。。。
我先选男性、入门难度，打开语音指导和摄像头姿态检测。
好家伙，入门课程还不止一种，有「盆底激活」和「日常快速·3 分钟唤醒」两个选项。先从男性入门开始吧：
进入训练界面，有一个火柴人动画引导我的姿势。还有一个呼吸动画，可以让我跟随节奏操作，收紧、放松交替进行：
打开摄像头后，MediaPipe Pose 会实时检测我的姿态，发现问题就把姿势数据发给 DeepSeek 模型。这里有个小技巧，姿态纠正这种简单的建议不需要用 Pro 模型，用 V4-Flash 响应更快、成本更低。
比如它发现我的身体是歪的，就给出了纠正建议，比如「身体歪斜会影响发力，请先摆正骨盆。想象头顶有根线轻轻上提，让脊柱自然直立」，也是让我体验了一把健身房私教。。。
我试着调整了一下姿势，它马上又给了新的反馈，说「试着双脚踩实地面，骨盆摆正。轻轻收紧盆底肌，保持脊柱中立」：
到了持续收缩环节，它又提醒我放松肩膀，说「肩膀放松下沉，想象肩胛骨滑向后腰。轻轻呼气，感受盆底自然上提」。
测试过程中，我又做了几组提肛。这已经不是 Vibe Coding 了，我管这叫 TGang Coding，边提肛边编程，身体工作两不误，岂不美哉？
现在的我，已经可以挑战「男性进阶·力量强化」了，10 分钟 7 组动作。AI 在这个模式下也能准确检测到身体歪斜和重心不稳的问题：
完成训练后，可以在训练记录页面看到打卡热力图和统计数据，坚持就是胜利！
说实话，一段提示词就让 AI 一把梭出了整个项目，核心功能基本可用，DeepSeek V4 的效果还是不错的。
不过实际跑起来还是有一些小 Bug，比如呼吸动画的收紧放松节奏跟实际训练动作对不上，快速收缩模式下动画一直显示「收紧」不切换到「放松」，还有 AI 姿态建议的调用时机没控制好，导致频繁请求。
这些都是在测试过程中逐步发现的。上面演示的效果，其实是我又跟 AI 对话了 10 轮左右、修复了这些问题之后的结果：
这里分享一个我自己的经验。测试的时候，影响核心功能的问题要立刻修复，比如动画节奏不对这种，直接跟 AI 描述现象让它改。
不影响核心功能的问题，比如只是觉得界面某个地方不够好看，建议先记下来，等核心流程跑通之后再集中处理。
另外，过程中一定要随时关注上下文的容量。我修完这几轮 Bug 后，上下文已经涨到了 62%：
上下文一旦快满了，AI 就可能忘记之前改过什么，甚至写出跟之前矛盾的代码。
遇到这种情况，建议先让 AI 把当前项目信息和进度沉淀成文档（比如写进 CLAUDE.md），然后开一个新会话继续开发，既节省 tokens 又不会丢失重要上下文。
我的感受
最后聊聊这次 Claude Code + DeepSeek V4 实战做项目的真实感受。
先说说 DeepSeek V4 的实际表现。一段提示词一把梭出完整项目 + 核心功能可用，仿佛让我感受到了曾经 Opus 带给我的惊喜。
前端虽然没什么特别惊艳的创新，但布局基本正确，配色也不拉胯。不过前面也提到了，在逻辑细节上还是有些不足，需要人工介入几轮才能调好。而且 DeepSeek V4 在代码生成速度上略慢一些，31 分钟才跑完核心功能。
除了效果外，再看看大家关注的 成本。
做完这个项目，到底花了多少钱呢？
先在 Claude Code 中用 /usage 命令看看 tokens 消耗情况：
Claude Code 统计显示，这次开发总花费 18.13 美元，消耗了几十万 tokens。
还可以进入 Stats 趋势分析，看看自己的使用习惯：
什么，这么个项目竟然花了 100 多元？！
Claude Code 自带的费用统计可能不太准确，建议直接到 DeepSeek 开放平台看实际消耗。
我一看，几百次请求，竟然消耗了 2500 多万 tokens！
实际一看，只花了 5.44 元，舒服了~
这么多 tokens 里绝大部分是输入缓存命中的。因为 Claude Code 每次跟模型对话时，会把之前的上下文一起发过去，但如果内容跟上次一样，DeepSeek 会命中缓存，缓存价格只有正常输入的几分之一。
这就是为什么虽然 tokens 用量看起来很吓人，但实际花费很低。
5 块钱开发了一个带 AI 能力的完整项目，我觉得性价比还是挺高的，你觉得呢？
OK 就分享到这里，本文会收录到我免费开源的 《Vibe Coding 零基础入门教程》，上千张图、几十万字，带你从 0 开始快速学会 AI 编程，做出自己的产品、跑通变现全流程，一次拿捏。
我是鱼皮，持续分享 AI 编程干货。觉得有用的话记得点赞收藏和关注，也欢迎在评论区聊聊：你现在最常用哪个 AI 编程工具？觉得 DeepSeek-V4 怎么样？
