我用 DeepSeek V4 + Claude Code 開發了個「提肛助手」，這波給我爽麻了。。。
整理版優先睇
程序員魚皮用Claude Code + DeepSeek V4 開發提肛助手，AI編程實戰流程成本大公開
呢篇文章係由程序員魚皮分享，佢因為長期久坐想改善身體，於是決定用AI編程開發一個「提肛助手」Web應用，幫助用戶科學進行盆底肌訓練。佢用Claude Code做開發工具，搭配DeepSeek V4模型做AI對話，全程純前端實現，包括動畫引導、語音播報、姿態檢測等功能。整體結論係DeepSeek V4能力唔錯，一段提示詞就搞掂完整項目，核心功能基本可用，但邏輯細節需要人工調整；成本極低，實際只花咗5.44元人民幣，性價比好高。
作者首先分析需求，決定用Next.js + TypeScript + MediaPipe Pose + Framer Motion，然後詳細介紹點樣安裝Claude Code、切換模型（用CC Switch）、安裝擴展（Frontend Design、Firecrawl、Context7）。之後提供完整提示詞，讓AI自主開發約31分鐘，生成咗7套訓練課程、動畫、語音、姿態檢測等功能。測試時發現呼吸動畫節奏錯、頻繁請求等問題，經10輪對話修復。最後統計成本，Claude Code顯示18美元，實際DeepSeek平台只扣5.44元，因為輸入緩存命中。
文章仲分享咗實用技巧：測試先修核心Bug、關註上下文容量、必要時沉澱文檔開新會話。作者提倡TGang Coding，邊提肛邊編程，身體工作兩不誤。
- DeepSeek V4 用一段提示詞生成完整提肛助手項目，核心功能可用，但細節需人工修復。
- Claude Code + CC Switch 可切換國產模型，成本極低，實際消耗5.44元。
- 項目純前端實現，用MediaPipe Pose做本地姿態檢測，畫面不上傳服務器。
- 開發流程：先搜文檔再寫代碼、自動測試、優先修核心問題、控制上下文容量。
- 提示詞要包含角色定義、任務描述、技術棧和「先查文檔後寫代碼」等關鍵要求。
tgang-helper 開發提示詞模板
包含角色、任務、技術棧、要求等完整提示詞，可直接用於Claude Code生成類似項目。
Vibe Coding 零基礎入門教程
魚皮免費開源的AI編程教程，包含本項目完整流程。
點解要整提肛助手？
作者魚皮係程序員，長期久坐，想透過提肛運動改善身體。佢覺得自己係「運動白痴」，所以決定用AI編程開發一個Web應用，幫人科學進行盆底肌訓練。
佢用Claude Code做主開發工具，搭配DeepSeek V4模型，全程展示由安裝到測試嘅完整流程。
方案設計同環境準備
項目幾乎純前端搞掂，技術棧係Next.js + TypeScript、MediaPipe Pose做姿態檢測、Framer Motion做動畫、DeepSeek V4經API Route代理。
- 1 npm install -g @anthropic-ai/claude-code 安裝Claude Code。
- 2 用CC Switch添加DeepSeek供應商，填入API Key，主模型選DeepSeek-V4-Pro。
- 3 /plugin marketplace add anthropics/skills 安裝技能市場，再裝frontend-design等技能。
- 4 npx -y firecrawl-cli@latest init --all --browser 安裝Firecrawl。
- 5 npx ctx7@latest setup 安裝Context7，選擇CLI + Skills方式。
開發實戰：一鍵生成完整項目
新建項目文件夾，用cd進入後輸入claude打開對話。作者分享咗完整提示詞：先定義角色，再用自然語言描述任務，最後要求先查文檔再寫代碼同自主測試。
## 角色
你是一個前端全棧工程師，擅長 Next.js + TypeScript 開發。
## 任務
開發一個叫 tgang-helper 提肛助手的 Web 應用...
## 技術棧
- 框架：Next.js + TypeScript
- 姿態檢測：MediaPipe Pose
- AI 對話：通過 Next.js API Route 代理調用 DeepSeek V4
- 動畫：CSS 動畫 + Framer Motion
## 要求
1. 頁面美觀專業，使用 frontend-design 技能美化
2. 開發前先通過 Firecrawl 聯網搜索，通過 Context7 查文檔
3. 必須生成完整可運行代碼，每步後自主測試驗證發送提示詞後，AI用咗31分鐘自主完成開發，生成咗7套訓練課程、呼吸圈動畫、SVG人體圖、語音指導、姿態檢測、AI建議、訓練記錄同統計圖表。作者仲話呢段時間做咗1組提肛同食咗餐飯。
上下文佔用47%時就要留意，快滿時建議沉澱文檔開新會話
測試驗證同修復Bug
AI自動用webapp-testing技能編寫測試腳本，打開瀏覽器測試應用。作者實際使用發現幾個問題：呼吸動畫節奏錯、快速收縮模式動畫一直顯示「收緊」唔切換、AI建議調用頻繁。
佢經過約10輪對話修復咗呢啲問題。作者建議：測試時先集中修核心功能Bug，界面美觀可以等核心流程跑通後再處理；同時要時刻關註上下文容量，快滿時將項目信息沉澱到CLAUDE.md，開新會話繼續。
真實感受同實用貼士
DeepSeek V4一段提示詞搞掂項目，核心功能可用，但邏輯細節需要人工介入。生成速度略慢（31分鐘），但對比上次用GPT-5.5開發同量級項目慢咗差唔多2倍。
- 先修核心Bug（如動畫節奏），界面美化後期集中處理。
- 經常檢查上下文容量，快滿時用CLAUDE.md沉澱進度開新會話。
- 用CC Switch管理模型配置，唔使自己改JSON。
- 姿態糾正呢啲簡單建議用DeepSeek V4-Flash更快更平。
- 邊提肛邊編程，TGang Coding，身體工作兩不誤。
作者最後推介佢免費開源嘅《Vibe Coding 零基礎入門教程》，收錄咗本文完整流程。
大家好，我是程序員魚皮。
唉，久坐不動可以說是程序員的通病。像我天天忙的要死，根本沒時間運動，但又不甘心讓身體就這樣退化，怎麼辦呢？
於是，我通過詢問 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 個擴展：
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 編程，做出自己的產品、跑通變現全流程，一次拿捏。
開源指路：https://github.com/liyupi/ai-guide
我是魚皮，持續分享 AI 編程乾貨。覺得有用的話記得點贊收藏和關注，也歡迎在評論區聊聊：你現在最常用哪個 AI 編程工具？覺得 DeepSeek-V4 怎麼樣？
往期推薦