上海
大家好，我是程序員魚皮。
唉，久坐不動可以說是程序員的通病。像我天天忙的要死，根本沒時間運動，但又不甘心讓身體就這樣退化，怎么辦呢？
于是，我通過詢問 AI，了解到了「提肛運動」。通過增強盆底肌肉力量、促進局部血液循環(huán)，有效預(yù)防痔瘡、改善大小便失禁，并提升肛門及相關(guān)盆腔器官的健康功能。
關(guān)鍵是這玩意隨時隨地都能做，太適合我了！
但我自己是個「運動白癡」，所以想到能不能通過 AI 編程，開發(fā)個「提肛助手」，幫助大家科學(xué)地進行盆底肌訓(xùn)練，傻子也能練對。
安排！
下面我將全程用 Claude Code + DeepSeek V4 來開發(fā)一個完整項目，從安裝配置到開發(fā)測試，手把手帶你走一遍?？赐赀@篇，你能學(xué)會 Claude Code 的保姆級使用方法，感受 DeepSeek V4 的實際編程能力，還能 get 到不少 AI 編程的實用技巧。
點個收藏，咱們開始~
需求分析
這個項目叫「提肛助手」tgang-helper，核心功能其實不復(fù)雜。
1）提供科學(xué)的分級訓(xùn)練課程，區(qū)分男女和難度，涵蓋快速收縮、持續(xù)收縮、階梯收縮等多種動作類型。
2）訓(xùn)練過程中要有動畫引導(dǎo)節(jié)奏，包括呼吸圈動畫和人體姿勢示范動畫，讓用戶一看就知道該怎么做。
3）同時通過瀏覽器語音合成實時播報指令，讓用戶閉著眼睛也能跟練。
4）還有一個亮點功能，就是支持開啟攝像頭進行體位校正。實時檢測你的站姿、坐姿是否正確，比如有沒有駝背、聳肩、身體歪斜，當檢測到姿勢問題時，讓 AI 提供個性化的糾正建議。
5）查看訓(xùn)練打卡日歷和統(tǒng)計圖表。
方案設(shè)計
如果你完全沒有任何技術(shù)基礎(chǔ)，可以讓 AI 幫你完成方案設(shè)計。
但這里為了節(jié)省時間和 tokens，我直接告訴 AI 怎么做。
雖然要做姿態(tài)檢測功能，但是這個項目幾乎是 純前端 就能搞定！不需要復(fù)雜的后端。
技術(shù)棧上，我選擇 Next.js + TypeScript，姿態(tài)檢測用 MediaPipe Pose（純前端運行），AI 對話通過 Next.js 的 API Route 代理調(diào)用 DeepSeek V4 模型，動畫用 CSS 動畫 + Framer Motion。
為什么不用 Python 后端？
因為這個項目唯一需要服務(wù)端的地方就是代理一下 AI 接口調(diào)用，使用 Next.js 的 API Route 完全能搞定，沒必要拆成前后端分離，越簡單越好。
環(huán)境準備 安裝 Claude Code
先簡單介紹一下 Claude Code。它是 Anthropic 推出的 AI 編程工具，直接在終端里運行，你跟它聊天描述需求，它就能自主分析項目、寫代碼、跑命令、修 Bug，全程自主執(zhí)行。
除了基礎(chǔ)的代碼生成，還能使用工具和 Skills 技能包、連接 MCP 外部服務(wù)、用 Plugins 插件擴展能力，甚至搞多智能體協(xié)作，擴展性很強。
安裝 Claude Code 很簡單。
首先確保你的電腦有 Node.js 環(huán)境和 npm 軟件依賴安裝工具，沒有的話，直接到 Node 官網(wǎng) 下載傻瓜式安裝包就好：
無論使用什么操作系統(tǒng)，都可以通過 npm，一行命令來安裝 Claude Code：
npm install -g @anthropic-ai/claude-code
安裝完成后，輸入 claude 命令進入對話界面，首次需要登錄才能正常使用：
但估計很多同學(xué)沒有 Anthropic 的國外訂閱賬號，所以我們要切換為國產(chǎn)模型。
切換模型
Claude Code 本身是支持切換模型的，你可以通過「修改環(huán)境變量」或「編輯配置文件」來對接其他大模型的 API。
一般你使用哪家的大模型 API，直接看對應(yīng)的官方文檔，就能找到接入方法。
比如 DeepSeek 的 API 文檔 里就有現(xiàn)成的接入方法：
不過我更推薦用一個開源工具 CC Switch，能夠可視化地管理 Claude Code、Codex、Gemini CLI 等 AI 編程工具的配置，一鍵切換不同的模型供應(yīng)商。內(nèi)置了 50 多個供應(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īng)商：
選擇 DeepSeek：
填寫 API Key，需要從 DeepSeek 開放平臺 獲取。
我這里把主模型設(shè)置為 DeepSeek-V4-Pro，相比 DeepSeek-V4-Flash 模型，Agent 能力和復(fù)雜推理更強。
然后點右下角保存：
可以在上圖中看到 Claude Code 的 JSON 配置文件，其實 CC Switch 就是幫你可視化地修改各 AI 工具的配置文件，省去手動編輯 JSON 的麻煩。
最后，啟用 DeepSeek 模型：
然后重新進入 Claude Code，隨便輸入一句話，AI 能給出回復(fù)，說明切換模型成功：
安裝擴展
Claude Code 默認就有讀寫文件、跑終端命令、搜索代碼這些基礎(chǔ)能力，但要做好一個完整項目，光靠這些還不夠。
我們需要下面 3 個擴展：
Frontend Design：前端美化技能，讓生成的頁面更有設(shè)計感
Firecrawl：聯(lián)網(wǎng)搜索和網(wǎng)頁抓取，讓 AI 能獲取最新的技術(shù)信息
Context7：查詢最新的技術(shù)文檔和 API 用法，減少 AI 瞎編的情況
下面來依次安裝。
1、安裝 Frontend Design
Frontend Design 是 Anthropic 官方的前端美化技能，可以讓 AI 生成的頁面更有設(shè)計感。
在 Claude Code 中，先通過 /plugin 命令添加官方技能市場，相當于裝了個技能商店：
/plugin marketplace add anthropics/skills
輸入 /plugins，在 Discover 菜單欄中，選中 example-skills 并按回車，安裝官方的示例技能合集：
輸入 /reload-plugins 重載一下插件：
輸入 /skills 查看已安裝的技能，可以看到 frontend-design 已經(jīng)就位了：
之后在對話框中輸入 /frontend-design 就能主動觸發(fā)這個技能，讓 AI 美化前端頁面。同時還自動裝上了 webapp-testing 自動化測試技能，后面也用得上。
2、安裝 Firecrawl
Firecrawl 是聯(lián)網(wǎng)搜索和網(wǎng)頁抓取工具，讓 AI 開發(fā)前先搜索最新技術(shù)信息。
安裝方式很簡單，打開終端，輸入一行命令：
npx -y firecrawl-cli@latest init --all --browser
執(zhí)行后，會自動打開瀏覽器，要在彈出的頁面中點擊授權(quán)：
安裝完成后，會自動注冊 12 個 Firecrawl 相關(guān)技能：
在 Claude Code 的技能管理中，就能看到新添加的 Firecrawl 相關(guān)技能了：
3、安裝 Context7
Context7 是一個技術(shù)文檔查詢工具，讓 AI 能獲取到各種框架和庫的最新官方文檔，避免用過時的 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，太方便了！
然后選擇要給哪個 AI 編程工具安裝，我選擇為 Claude Code 安裝：
安裝成功后，可以在技能管理中看到 find-docs 技能：
當然，你也可以選擇安裝 MCP Server 的方式：
安裝后，在 Claude Code 中輸入 /mcp 命令，就能看到安裝好的 MCP 了，比自己手動配置方便太多了！
至此，環(huán)境準備完成！下次開發(fā)項目時，就不用再重復(fù)準備了~
開發(fā)編碼
新建一個 tgang-helper 項目文件夾，在終端中用 cd 進入該目錄，然后輸入 claude 命令打開 Claude Code：
然后輸入提示詞。這里分享一下我實際用的完整提示詞，給大家參考：
## 角色
你是一個前端全棧工程師，擅長 Next.js + TypeScript 開發(fā)。
## 任務(wù)
開發(fā)一個叫 tgang-helper 提肛助手的 Web 應(yīng)用，幫助用戶科學(xué)地練習(xí)盆底肌訓(xùn)練（提肛 / 凱格爾運動），傻子也能練對。
提供科學(xué)的分級訓(xùn)練課程，區(qū)分男女和難度，涵蓋快速收縮、持續(xù)收縮、階梯收縮等多種動作類型。訓(xùn)練過程中通過動畫引導(dǎo)節(jié)奏，包括呼吸圈動畫（收縮時縮小、放松時擴大）和人體姿勢示范動畫（用 SVG 或 Lottie 展示每個動作的正確體位和發(fā)力部位），讓用戶一看就知道該怎么做。同時使用瀏覽器語音合成（Web Speech API）實時播報指令，讓用戶閉著眼睛也能跟練。
支持開啟攝像頭進行體位校正，使用 MediaPipe Pose 在瀏覽器端實時檢測用戶的站姿 / 坐姿是否正確（如駝背、聳肩、身體歪斜），所有檢測純本地運行，攝像頭畫面不上傳服務(wù)器。當檢測到持續(xù)的姿勢問題時，將姿勢數(shù)據(jù)（非圖像）發(fā)送給 DeepSeek V4 模型，獲取個性化的糾正建議并語音播報。
訓(xùn)練記錄保存在本地 localStorage，展示打卡日歷和簡單的統(tǒng)計圖表。
## 技術(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. 必須生成完整可運行的代碼，每步完成后必須自主測試驗證
簡單解讀一下這段提示詞的幾個要點：
角色定義 放在最前面，讓 AI 進入前端全棧工程師的狀態(tài)
任務(wù)描述 用自然語言把需求講清楚
技術(shù)棧 只列關(guān)鍵選型，讓 AI 自己決定實現(xiàn)細節(jié)
最后兩條要求是關(guān)鍵，讓 AI 先查文檔再寫代碼，避免瞎編寫法；讓 AI 開發(fā)完后自主測試，減少翻車
給 AI 發(fā)送提示詞前，我按 Shift + Tab 進入了自動接受編輯模式，AI 創(chuàng)建、修改、刪除文件和執(zhí)行命令都不用我逐一確認了，更省事兒。但是有一定風(fēng)險，大家按需使用：
把上述提示詞發(fā)送給 AI，接下來就是漫長的等待了。
AI 開始自主開發(fā)，先搜索技術(shù)文檔，然后規(guī)劃項目結(jié)構(gòu)，創(chuàng)建文件，寫代碼。
過程中 AI 可能需要確認工具調(diào)用，比如它想通過 Context7 獲取最新的 MediaPipe 技術(shù)文檔，可以選擇「Yes, and don't ask again」，以后就不用反復(fù)確認了：
過了 20 多分鐘，AI 自主完成了開發(fā)，還自動運行了項目：
然后 AI 用 webapp-testing 技能，編寫了自動化測試腳本，自動打開瀏覽器測試應(yīng)用：
經(jīng)過 31 分鐘后，任務(wù)終于完成了，比我上次用 GPT-5.5 開發(fā)同量級的項目慢了差不多 2 倍。這期間我不僅做了 1 組提肛，還吃了個飯。
從 AI 的總結(jié)可以看到，它實現(xiàn)了完整的功能，包括 7 套訓(xùn)練課程、呼吸圈動畫、SVG 人體圖、語音指導(dǎo)、姿態(tài)檢測、AI 建議、訓(xùn)練記錄和統(tǒng)計圖表，一把梭全給整上了。
輸入 /context 可以查看當前上下文使用情況，已經(jīng)用了 9.4 萬 tokens，占總?cè)萘康?47%：
你可能會好奇，DeepSeek V4 官方說支持 100 萬 tokens 上下文，為什么 Claude Code 里顯示上限才 200K？
應(yīng)該是 Claude Code 本身對上下文窗口有限制，跟模型的上限是兩回事。所以建議大家定期看看上下文占用情況，占滿之后 AI 可能會「斷片失憶」開始亂改代碼。
測試驗證
接下來測試驗證。由于項目用到了 DeepSeek V4 的 AI 功能，先讓 AI 幫我創(chuàng)建一個環(huán)境變量配置文件：
幫我創(chuàng)建 .env.local 文件
AI 很快創(chuàng)建好了，還貼心地檢查了 .gitignore，確認 .env 文件不會被提交到 Git：
打開 .env.local 文件，填上從 DeepSeek 開放平臺獲取的 API Key：
然后在瀏覽器中打開頁面。
你別說，這個風(fēng)格我挺喜歡的，很簡潔清爽，配色也是健康積極的風(fēng)格。就是那個 Logo 我沒太看明白，求大家給我解釋一下。。。
我先選男性、入門難度，打開語音指導(dǎo)和攝像頭姿態(tài)檢測。
好家伙，入門課程還不止一種，有「盆底激活」和「日常快速·3 分鐘喚醒」兩個選項。先從男性入門開始吧：
進入訓(xùn)練界面，有一個火柴人動畫引導(dǎo)我的姿勢。還有一個呼吸動畫，可以讓我跟隨節(jié)奏操作，收緊、放松交替進行：
打開攝像頭后，MediaPipe Pose 會實時檢測我的姿態(tài)，發(fā)現(xiàn)問題就把姿勢數(shù)據(jù)發(fā)給 DeepSeek 模型。這里有個小技巧，姿態(tài)糾正這種簡單的建議不需要用 Pro 模型，用 V4-Flash 響應(yīng)更快、成本更低。
比如它發(fā)現(xiàn)我的身體是歪的，就給出了糾正建議，比如「身體歪斜會影響發(fā)力，請先擺正骨盆。想象頭頂有根線輕輕上提，讓脊柱自然直立」，也是讓我體驗了一把健身房私教。。。
我試著調(diào)整了一下姿勢，它馬上又給了新的反饋，說「試著雙腳踩實地面，骨盆擺正。輕輕收緊盆底肌，保持脊柱中立」：
到了持續(xù)收縮環(huán)節(jié)，它又提醒我放松肩膀，說「肩膀放松下沉，想象肩胛骨滑向后腰。輕輕呼氣，感受盆底自然上提」。
測試過程中，我又做了幾組提肛。這已經(jīng)不是 Vibe Coding 了，我管這叫 TGang Coding，邊提肛邊編程，身體工作兩不誤，豈不美哉？
現(xiàn)在的我，已經(jīng)可以挑戰(zhàn)「男性進階·力量強化」了，10 分鐘 7 組動作。
AI 在這個模式下也能準確檢測到身體歪斜和重心不穩(wěn)的問題：
完成訓(xùn)練后，可以在訓(xùn)練記錄頁面看到打卡熱力圖和統(tǒng)計數(shù)據(jù)，堅持就是勝利！
說實話，一段提示詞就讓 AI 一把梭出了整個項目，核心功能基本可用，DeepSeek V4 的效果還是不錯的。
不過實際跑起來還是有一些小 Bug，比如呼吸動畫的收緊放松節(jié)奏跟實際訓(xùn)練動作對不上，快速收縮模式下動畫一直顯示「收緊」不切換到「放松」，還有 AI 姿態(tài)建議的調(diào)用時機沒控制好，導(dǎo)致頻繁請求。
這些都是在測試過程中逐步發(fā)現(xiàn)的。上面演示的效果，其實是我又跟 AI 對話了 10 輪左右、修復(fù)了這些問題之后的結(jié)果：
這里分享一個我自己的經(jīng)驗。測試的時候，影響核心功能的問題要立刻修復(fù)，比如動畫節(jié)奏不對這種，直接跟 AI 描述現(xiàn)象讓它改。
不影響核心功能的問題，比如只是覺得界面某個地方不夠好看，建議先記下來，等核心流程跑通之后再集中處理。
另外，過程中一定要隨時關(guān)注上下文的容量。我修完這幾輪 Bug 后，上下文已經(jīng)漲到了 62%：
上下文一旦快滿了，AI 就可能忘記之前改過什么，甚至寫出跟之前矛盾的代碼。
遇到這種情況，建議先讓 AI 把當前項目信息和進度沉淀成文檔（比如寫進 CLAUDE.md），然后開一個新會話繼續(xù)開發(fā)，既節(jié)省 tokens 又不會丟失重要上下文。
我的感受
最后聊聊這次 Claude Code + DeepSeek V4 實戰(zhàn)做項目的真實感受。
先說說 DeepSeek V4 的實際表現(xiàn)。一段提示詞一把梭出完整項目 + 核心功能可用，仿佛讓我感受到了曾經(jīng) Opus 帶給我的驚喜。
前端雖然沒什么特別驚艷的創(chuàng)新，但布局基本正確，配色也不拉胯。不過前面也提到了，在邏輯細節(jié)上還是有些不足，需要人工介入幾輪才能調(diào)好。而且 DeepSeek V4 在代碼生成速度上略慢一些，31 分鐘才跑完核心功能。
除了效果外，再看看大家關(guān)注的 成本。
做完這個項目，到底花了多少錢呢？
先在 Claude Code 中用 /usage 命令看看 tokens 消耗情況：
Claude Code 統(tǒng)計顯示，這次開發(fā)總花費 18.13 美元，消耗了幾十萬 tokens。
還可以進入 Stats 趨勢分析，看看自己的使用習(xí)慣：
什么，這么個項目竟然花了 100 多元？！
Claude Code 自帶的費用統(tǒng)計可能不太準確，建議直接到 DeepSeek 開放平臺看實際消耗。
我一看，幾百次請求，竟然消耗了 2500 多萬 tokens！
實際一看，只花了 5.44 元，舒服了~
這么多 tokens 里絕大部分是輸入緩存命中的。因為 Claude Code 每次跟模型對話時，會把之前的上下文一起發(fā)過去，但如果內(nèi)容跟上次一樣，DeepSeek 會命中緩存，緩存價格只有正常輸入的幾分之一。
這就是為什么雖然 tokens 用量看起來很嚇人，但實際花費很低。
5 塊錢開發(fā)了一個帶 AI 能力的完整項目，我覺得性價比還是挺高的，你覺得呢？
OK 就分享到這里，本文會收錄到我免費開源的 ，上千張圖、幾十萬字，帶你從 0 開始快速學(xué)會 AI 編程，做出自己的產(chǎn)品、跑通變現(xiàn)全流程，一次拿捏。
開源指路：https://github.com/liyupi/ai-guide
我是魚皮，持續(xù)分享 AI 編程干貨。覺得有用的話記得點贊收藏和關(guān)注，也歡迎在評論區(qū)聊聊：你現(xiàn)在最常用哪個 AI 編程工具？覺得 DeepSeek-V4 怎么樣？
特別聲明：以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布，本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
