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

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

于是，我通過詢問 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 多個供應商預設，不用自己手動改配置文件。

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

按照官方中文文檔，根據操作系統選擇對應的安裝方式：

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 個擴展：

1. Frontend Design：前端美化技能，讓生成的頁面更有設計感

2. Firecrawl：聯網搜索和網頁抓取，讓 AI 能獲取最新的技術信息

3. 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 就分享到這里，本文會收錄到我免費開源的 ，上千張圖、幾十萬字，帶你從 0 開始快速學會 AI 編程，做出自己的產品、跑通變現全流程，一次拿捏。

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

我是魚皮，持續分享 AI 編程干貨。覺得有用的話記得點贊收藏和關注，也歡迎在評論區聊聊：你現在最常用哪個 AI 編程工具？覺得 DeepSeek-V4 怎么樣？