我用 DeepSeek V4 + Claude Code 開發(fā)了個(gè)「提肛助手」，這波給我爽麻了。。。

大家好，我是程序員魚皮。

唉，久坐不動可以說是程序員的通病。像我天天忙的要死，根本沒時(shí)間運(yùn)動，但又不甘心讓身體就這樣退化，怎么辦呢？

于是，我通過詢問 AI，了解到了「提肛運(yùn)動」。通過增強(qiáng)盆底肌肉力量、促進(jìn)局部血液循環(huán)，有效預(yù)防痔瘡、改善大小便失禁，并提升肛門及相關(guān)盆腔器官的健康功能。

關(guān)鍵是這玩意隨時(shí)隨地都能做，太適合我了！

但我自己是個(gè)「運(yùn)動白癡」，所以想到能不能通過 AI 編程，開發(fā)個(gè)「提肛助手」，幫助大家科學(xué)地進(jìn)行盆底肌訓(xùn)練，傻子也能練對。

安排！

下面我將全程用 Claude Code + DeepSeek V4 來開發(fā)一個(gè)完整項(xiàng)目，從安裝配置到開發(fā)測試，手把手帶你走一遍。看完這篇，你能學(xué)會 Claude Code 的保姆級使用方法，感受 DeepSeek V4 的實(shí)際編程能力，還能 get 到不少 AI 編程的實(shí)用技巧。

點(diǎn)個(gè)收藏，咱們開始~

需求分析

這個(gè)項(xiàng)目叫「提肛助手」tgang-helper，核心功能其實(shí)不復(fù)雜。

1）提供科學(xué)的分級訓(xùn)練課程，區(qū)分男女和難度，涵蓋快速收縮、持續(xù)收縮、階梯收縮等多種動作類型。

2）訓(xùn)練過程中要有動畫引導(dǎo)節(jié)奏，包括呼吸圈動畫和人體姿勢示范動畫，讓用戶一看就知道該怎么做。

3）同時(shí)通過瀏覽器語音合成實(shí)時(shí)播報(bào)指令，讓用戶閉著眼睛也能跟練。

4）還有一個(gè)亮點(diǎn)功能，就是支持開啟攝像頭進(jìn)行體位校正。實(shí)時(shí)檢測你的站姿、坐姿是否正確，比如有沒有駝背、聳肩、身體歪斜，當(dāng)檢測到姿勢問題時(shí)，讓 AI 提供個(gè)性化的糾正建議。

5）查看訓(xùn)練打卡日歷和統(tǒng)計(jì)圖表。

方案設(shè)計(jì)

如果你完全沒有任何技術(shù)基礎(chǔ)，可以讓 AI 幫你完成方案設(shè)計(jì)。

但這里為了節(jié)省時(shí)間和 tokens，我直接告訴 AI 怎么做。

雖然要做姿態(tài)檢測功能，但是這個(gè)項(xiàng)目幾乎是 純前端 就能搞定！不需要復(fù)雜的后端。

技術(shù)棧上，我選擇 Next.js + TypeScript，姿態(tài)檢測用 MediaPipe Pose（純前端運(yùn)行），AI 對話通過 Next.js 的 API Route 代理調(diào)用 DeepSeek V4 模型，動畫用 CSS 動畫 + Framer Motion。

為什么不用 Python 后端？

因?yàn)檫@個(gè)項(xiàng)目唯一需要服務(wù)端的地方就是代理一下 AI 接口調(diào)用，使用 Next.js 的 API Route 完全能搞定，沒必要拆成前后端分離，越簡單越好。

環(huán)境準(zhǔn)備 安裝 Claude Code

先簡單介紹一下 Claude Code。它是 Anthropic 推出的 AI 編程工具，直接在終端里運(yùn)行，你跟它聊天描述需求，它就能自主分析項(xiàng)目、寫代碼、跑命令、修 Bug，全程自主執(zhí)行。

除了基礎(chǔ)的代碼生成，還能使用工具和 Skills 技能包、連接 MCP 外部服務(wù)、用 Plugins 插件擴(kuò)展能力，甚至搞多智能體協(xié)作，擴(kuò)展性很強(qiáng)。

安裝 Claude Code 很簡單。

首先確保你的電腦有 Node.js 環(huán)境和 npm 軟件依賴安裝工具，沒有的話，直接到 Node 官網(wǎng) 下載傻瓜式安裝包就好：

無論使用什么操作系統(tǒng)，都可以通過 npm，一行命令來安裝 Claude Code：

npm install -g @anthropic-ai/claude-code

安裝完成后，輸入 claude 命令進(jìn)入對話界面，首次需要登錄才能正常使用：

但估計(jì)很多同學(xué)沒有 Anthropic 的國外訂閱賬號，所以我們要切換為國產(chǎn)模型。

切換模型

Claude Code 本身是支持切換模型的，你可以通過「修改環(huán)境變量」或「編輯配置文件」來對接其他大模型的 API。

一般你使用哪家的大模型 API，直接看對應(yīng)的官方文檔，就能找到接入方法。

比如 DeepSeek 的 API 文檔 里就有現(xiàn)成的接入方法：

不過我更推薦用一個(gè)開源工具 CC Switch，能夠可視化地管理 Claude Code、Codex、Gemini CLI 等 AI 編程工具的配置，一鍵切換不同的模型供應(yīng)商。內(nèi)置了 50 多個(gè)供應(yīng)商預(yù)設(shè)，不用自己手動改配置文件。

開源指路：https://github.com/farion1231/cc-switch

按照官方中文文檔，根據(jù)操作系統(tǒng)選擇對應(yīng)的安裝方式：

Mac 用戶可以通過命令行安裝：

brew tap farion1231/ccswitch
brew install --cask cc-switch

安裝完成后，運(yùn)行軟件進(jìn)入主界面，添加模型供應(yīng)商：

選擇 DeepSeek：

填寫 API Key，需要從 DeepSeek 開放平臺 獲取。

我這里把主模型設(shè)置為 DeepSeek-V4-Pro，相比 DeepSeek-V4-Flash 模型，Agent 能力和復(fù)雜推理更強(qiáng)。

然后點(diǎn)右下角保存：

可以在上圖中看到 Claude Code 的 JSON 配置文件，其實(shí) CC Switch 就是幫你可視化地修改各 AI 工具的配置文件，省去手動編輯 JSON 的麻煩。

最后，啟用 DeepSeek 模型：

然后重新進(jìn)入 Claude Code，隨便輸入一句話，AI 能給出回復(fù)，說明切換模型成功：

安裝擴(kuò)展

Claude Code 默認(rèn)就有讀寫文件、跑終端命令、搜索代碼這些基礎(chǔ)能力，但要做好一個(gè)完整項(xiàng)目，光靠這些還不夠。

我們需要下面 3 個(gè)擴(kuò)展：

1. Frontend Design：前端美化技能，讓生成的頁面更有設(shè)計(jì)感

2. Firecrawl：聯(lián)網(wǎng)搜索和網(wǎng)頁抓取，讓 AI 能獲取最新的技術(shù)信息

3. Context7：查詢最新的技術(shù)文檔和 API 用法，減少 AI 瞎編的情況

下面來依次安裝。

1、安裝 Frontend Design

Frontend Design 是 Anthropic 官方的前端美化技能，可以讓 AI 生成的頁面更有設(shè)計(jì)感。

在 Claude Code 中，先通過 /plugin 命令添加官方技能市場，相當(dāng)于裝了個(gè)技能商店：

/plugin marketplace add anthropics/skills

輸入 /plugins，在 Discover 菜單欄中，選中 example-skills 并按回車，安裝官方的示例技能合集：

輸入 /reload-plugins 重載一下插件：

輸入 /skills 查看已安裝的技能，可以看到 frontend-design 已經(jīng)就位了：

之后在對話框中輸入 /frontend-design 就能主動觸發(fā)這個(gè)技能，讓 AI 美化前端頁面。同時(shí)還自動裝上了 webapp-testing 自動化測試技能，后面也用得上。

2、安裝 Firecrawl

Firecrawl 是聯(lián)網(wǎng)搜索和網(wǎng)頁抓取工具，讓 AI 開發(fā)前先搜索最新技術(shù)信息。

安裝方式很簡單，打開終端，輸入一行命令：

npx -y firecrawl-cli@latest init --all --browser

執(zhí)行后，會自動打開瀏覽器，要在彈出的頁面中點(diǎn)擊授權(quán)：

安裝完成后，會自動注冊 12 個(gè) Firecrawl 相關(guān)技能：

在 Claude Code 的技能管理中，就能看到新添加的 Firecrawl 相關(guān)技能了：

3、安裝 Context7

Context7 是一個(gè)技術(shù)文檔查詢工具，讓 AI 能獲取到各種框架和庫的最新官方文檔，避免用過時(shí)的 API 寫代碼。

先在終端輸入一行命令來安裝：

npx ctx7@latest setup

它會問是安裝 MCP 服務(wù)還是 CLI + Skills，這里我選擇 CLI + Skills。你會發(fā)現(xiàn)，現(xiàn)在越來越多工具已經(jīng)從 MCP 轉(zhuǎn)向 CLI + Skills 的方式了：

同樣在彈出的網(wǎng)頁中授權(quán)，不用自己獲取和輸入 API Key，太方便了！

然后選擇要給哪個(gè) AI 編程工具安裝，我選擇為 Claude Code 安裝：

安裝成功后，可以在技能管理中看到 find-docs 技能：

當(dāng)然，你也可以選擇安裝 MCP Server 的方式：

安裝后，在 Claude Code 中輸入 /mcp 命令，就能看到安裝好的 MCP 了，比自己手動配置方便太多了！

至此，環(huán)境準(zhǔn)備完成！下次開發(fā)項(xiàng)目時(shí)，就不用再重復(fù)準(zhǔn)備了~

開發(fā)編碼

新建一個(gè) tgang-helper 項(xiàng)目文件夾，在終端中用 cd 進(jìn)入該目錄，然后輸入 claude 命令打開 Claude Code：

然后輸入提示詞。這里分享一下我實(shí)際用的完整提示詞，給大家參考：

## 角色

 你是一個(gè)前端全棧工程師，擅長 Next.js + TypeScript 開發(fā)。

 ## 任務(wù)

 開發(fā)一個(gè)叫 tgang-helper 提肛助手的 Web 應(yīng)用，幫助用戶科學(xué)地練習(xí)盆底肌訓(xùn)練（提肛 / 凱格爾運(yùn)動），傻子也能練對。

 提供科學(xué)的分級訓(xùn)練課程，區(qū)分男女和難度，涵蓋快速收縮、持續(xù)收縮、階梯收縮等多種動作類型。訓(xùn)練過程中通過動畫引導(dǎo)節(jié)奏，包括呼吸圈動畫（收縮時(shí)縮小、放松時(shí)擴(kuò)大）和人體姿勢示范動畫（用 SVG 或 Lottie 展示每個(gè)動作的正確體位和發(fā)力部位），讓用戶一看就知道該怎么做。同時(shí)使用瀏覽器語音合成（Web Speech API）實(shí)時(shí)播報(bào)指令，讓用戶閉著眼睛也能跟練。

 支持開啟攝像頭進(jìn)行體位校正，使用 MediaPipe Pose 在瀏覽器端實(shí)時(shí)檢測用戶的站姿 / 坐姿是否正確（如駝背、聳肩、身體歪斜），所有檢測純本地運(yùn)行，攝像頭畫面不上傳服務(wù)器。當(dāng)檢測到持續(xù)的姿勢問題時(shí)，將姿勢數(shù)據(jù)（非圖像）發(fā)送給 DeepSeek V4 模型，獲取個(gè)性化的糾正建議并語音播報(bào)。

 訓(xùn)練記錄保存在本地 localStorage，展示打卡日歷和簡單的統(tǒng)計(jì)圖表。

 ## 技術(shù)棧

 - 框架：Next.js + TypeScript
- 姿態(tài)檢測：MediaPipe Pose（純前端）
- AI 對話：通過 Next.js API Route 代理調(diào)用 DeepSeek V4 模型（兼容 OpenAI SDK 格式）
- 動畫：CSS 動畫 + Framer Motion

 ## 要求

 1. 頁面美觀專業(yè)，使用 frontend-design 技能美化頁面，配色健康積極
2. 開發(fā)前，先通過 Firecrawl 聯(lián)網(wǎng)搜索 MediaPipe Pose 瀏覽器端用法，通過 Context7 查詢最新技術(shù)文檔和用法
3. 必須生成完整可運(yùn)行的代碼，每步完成后必須自主測試驗(yàn)證

簡單解讀一下這段提示詞的幾個(gè)要點(diǎn)：

• 角色定義 放在最前面，讓 AI 進(jìn)入前端全棧工程師的狀態(tài)

• 任務(wù)描述 用自然語言把需求講清楚

• 技術(shù)棧 只列關(guān)鍵選型，讓 AI 自己決定實(shí)現(xiàn)細(xì)節(jié)

• 最后兩條要求是關(guān)鍵，讓 AI 先查文檔再寫代碼，避免瞎編寫法；讓 AI 開發(fā)完后自主測試，減少翻車

給 AI 發(fā)送提示詞前，我按 Shift + Tab 進(jìn)入了自動接受編輯模式，AI 創(chuàng)建、修改、刪除文件和執(zhí)行命令都不用我逐一確認(rèn)了，更省事兒。但是有一定風(fēng)險(xiǎn)，大家按需使用：

把上述提示詞發(fā)送給 AI，接下來就是漫長的等待了。

AI 開始自主開發(fā)，先搜索技術(shù)文檔，然后規(guī)劃項(xiàng)目結(jié)構(gòu)，創(chuàng)建文件，寫代碼。

過程中 AI 可能需要確認(rèn)工具調(diào)用，比如它想通過 Context7 獲取最新的 MediaPipe 技術(shù)文檔，可以選擇「Yes, and don't ask again」，以后就不用反復(fù)確認(rèn)了：

過了 20 多分鐘，AI 自主完成了開發(fā)，還自動運(yùn)行了項(xiàng)目：

然后 AI 用 webapp-testing 技能，編寫了自動化測試腳本，自動打開瀏覽器測試應(yīng)用：

經(jīng)過 31 分鐘后，任務(wù)終于完成了，比我上次用 GPT-5.5 開發(fā)同量級的項(xiàng)目慢了差不多 2 倍。這期間我不僅做了 1 組提肛，還吃了個(gè)飯。

從 AI 的總結(jié)可以看到，它實(shí)現(xiàn)了完整的功能，包括 7 套訓(xùn)練課程、呼吸圈動畫、SVG 人體圖、語音指導(dǎo)、姿態(tài)檢測、AI 建議、訓(xùn)練記錄和統(tǒng)計(jì)圖表，一把梭全給整上了。

輸入 /context 可以查看當(dāng)前上下文使用情況，已經(jīng)用了 9.4 萬 tokens，占總?cè)萘康?47%：

你可能會好奇，DeepSeek V4 官方說支持 100 萬 tokens 上下文，為什么 Claude Code 里顯示上限才 200K？

應(yīng)該是 Claude Code 本身對上下文窗口有限制，跟模型的上限是兩回事。所以建議大家定期看看上下文占用情況，占滿之后 AI 可能會「斷片失憶」開始亂改代碼。

測試驗(yàn)證

接下來測試驗(yàn)證。由于項(xiàng)目用到了 DeepSeek V4 的 AI 功能，先讓 AI 幫我創(chuàng)建一個(gè)環(huán)境變量配置文件：

幫我創(chuàng)建 .env.local 文件

AI 很快創(chuàng)建好了，還貼心地檢查了 .gitignore，確認(rèn) .env 文件不會被提交到 Git：

打開 .env.local 文件，填上從 DeepSeek 開放平臺獲取的 API Key：

然后在瀏覽器中打開頁面。

你別說，這個(gè)風(fēng)格我挺喜歡的，很簡潔清爽，配色也是健康積極的風(fēng)格。就是那個(gè) Logo 我沒太看明白，求大家給我解釋一下。。。

我先選男性、入門難度，打開語音指導(dǎo)和攝像頭姿態(tài)檢測。

好家伙，入門課程還不止一種，有「盆底激活」和「日常快速·3 分鐘喚醒」兩個(gè)選項(xiàng)。先從男性入門開始吧：

進(jìn)入訓(xùn)練界面，有一個(gè)火柴人動畫引導(dǎo)我的姿勢。還有一個(gè)呼吸動畫，可以讓我跟隨節(jié)奏操作，收緊、放松交替進(jìn)行：

打開攝像頭后，MediaPipe Pose 會實(shí)時(shí)檢測我的姿態(tài)，發(fā)現(xiàn)問題就把姿勢數(shù)據(jù)發(fā)給 DeepSeek 模型。這里有個(gè)小技巧，姿態(tài)糾正這種簡單的建議不需要用 Pro 模型，用 V4-Flash 響應(yīng)更快、成本更低。

比如它發(fā)現(xiàn)我的身體是歪的，就給出了糾正建議，比如「身體歪斜會影響發(fā)力，請先擺正骨盆。想象頭頂有根線輕輕上提，讓脊柱自然直立」，也是讓我體驗(yàn)了一把健身房私教。。。

我試著調(diào)整了一下姿勢，它馬上又給了新的反饋，說「試著雙腳踩實(shí)地面，骨盆擺正。輕輕收緊盆底肌，保持脊柱中立」：

到了持續(xù)收縮環(huán)節(jié)，它又提醒我放松肩膀，說「肩膀放松下沉，想象肩胛骨滑向后腰。輕輕呼氣，感受盆底自然上提」。

測試過程中，我又做了幾組提肛。這已經(jīng)不是 Vibe Coding 了，我管這叫 TGang Coding，邊提肛邊編程，身體工作兩不誤，豈不美哉？

現(xiàn)在的我，已經(jīng)可以挑戰(zhàn)「男性進(jìn)階·力量強(qiáng)化」了，10 分鐘 7 組動作。

AI 在這個(gè)模式下也能準(zhǔn)確檢測到身體歪斜和重心不穩(wěn)的問題：

完成訓(xùn)練后，可以在訓(xùn)練記錄頁面看到打卡熱力圖和統(tǒng)計(jì)數(shù)據(jù)，堅(jiān)持就是勝利！

說實(shí)話，一段提示詞就讓 AI 一把梭出了整個(gè)項(xiàng)目，核心功能基本可用，DeepSeek V4 的效果還是不錯(cuò)的。

不過實(shí)際跑起來還是有一些小 Bug，比如呼吸動畫的收緊放松節(jié)奏跟實(shí)際訓(xùn)練動作對不上，快速收縮模式下動畫一直顯示「收緊」不切換到「放松」，還有 AI 姿態(tài)建議的調(diào)用時(shí)機(jī)沒控制好，導(dǎo)致頻繁請求。

這些都是在測試過程中逐步發(fā)現(xiàn)的。上面演示的效果，其實(shí)是我又跟 AI 對話了 10 輪左右、修復(fù)了這些問題之后的結(jié)果：

這里分享一個(gè)我自己的經(jīng)驗(yàn)。測試的時(shí)候，影響核心功能的問題要立刻修復(fù)，比如動畫節(jié)奏不對這種，直接跟 AI 描述現(xiàn)象讓它改。

不影響核心功能的問題，比如只是覺得界面某個(gè)地方不夠好看，建議先記下來，等核心流程跑通之后再集中處理。

另外，過程中一定要隨時(shí)關(guān)注上下文的容量。我修完這幾輪 Bug 后，上下文已經(jīng)漲到了 62%：

上下文一旦快滿了，AI 就可能忘記之前改過什么，甚至寫出跟之前矛盾的代碼。

遇到這種情況，建議先讓 AI 把當(dāng)前項(xiàng)目信息和進(jìn)度沉淀成文檔（比如寫進(jìn) CLAUDE.md），然后開一個(gè)新會話繼續(xù)開發(fā)，既節(jié)省 tokens 又不會丟失重要上下文。

我的感受

最后聊聊這次 Claude Code + DeepSeek V4 實(shí)戰(zhàn)做項(xiàng)目的真實(shí)感受。

先說說 DeepSeek V4 的實(shí)際表現(xiàn)。一段提示詞一把梭出完整項(xiàng)目 + 核心功能可用，仿佛讓我感受到了曾經(jīng) Opus 帶給我的驚喜。

前端雖然沒什么特別驚艷的創(chuàng)新，但布局基本正確，配色也不拉胯。不過前面也提到了，在邏輯細(xì)節(jié)上還是有些不足，需要人工介入幾輪才能調(diào)好。而且 DeepSeek V4 在代碼生成速度上略慢一些，31 分鐘才跑完核心功能。

除了效果外，再看看大家關(guān)注的 成本。

做完這個(gè)項(xiàng)目，到底花了多少錢呢？

先在 Claude Code 中用 /usage 命令看看 tokens 消耗情況：

Claude Code 統(tǒng)計(jì)顯示，這次開發(fā)總花費(fèi) 18.13 美元，消耗了幾十萬 tokens。

還可以進(jìn)入 Stats 趨勢分析，看看自己的使用習(xí)慣：

什么，這么個(gè)項(xiàng)目竟然花了 100 多元？！

Claude Code 自帶的費(fèi)用統(tǒng)計(jì)可能不太準(zhǔn)確，建議直接到 DeepSeek 開放平臺看實(shí)際消耗。

我一看，幾百次請求，竟然消耗了 2500 多萬 tokens！

實(shí)際一看，只花了 5.44 元，舒服了~

這么多 tokens 里絕大部分是輸入緩存命中的。因?yàn)?Claude Code 每次跟模型對話時(shí)，會把之前的上下文一起發(fā)過去，但如果內(nèi)容跟上次一樣，DeepSeek 會命中緩存，緩存價(jià)格只有正常輸入的幾分之一。

這就是為什么雖然 tokens 用量看起來很嚇人，但實(shí)際花費(fèi)很低。

5 塊錢開發(fā)了一個(gè)帶 AI 能力的完整項(xiàng)目，我覺得性價(jià)比還是挺高的，你覺得呢？

OK 就分享到這里，本文會收錄到我免費(fèi)開源的 ，上千張圖、幾十萬字，帶你從 0 開始快速學(xué)會 AI 編程，做出自己的產(chǎn)品、跑通變現(xiàn)全流程，一次拿捏。

開源指路：https://github.com/liyupi/ai-guide

我是魚皮，持續(xù)分享 AI 編程干貨。覺得有用的話記得點(diǎn)贊收藏和關(guān)注，也歡迎在評論區(qū)聊聊：你現(xiàn)在最常用哪個(gè) AI 編程工具？覺得 DeepSeek-V4 怎么樣？