大模型焚決2-ClaudeCode能幫我們做什麼，Vibe Coding經驗談

ClaudeCode可以做什麼？

ClaudeCode簡稱CC，很多人可能單純覺得這就是一個寫代碼的工具，但是其實透過現象看本質，CC寫代碼其實就是在操縱你電腦裏面的文件，那麼所有隻要是最終結果落到文件上面的事情，其實都可以用CC來幫你完成（只需要有SKILL或者你自己編寫SKILL，一些流行的工具也會出對應的SKILL或者CLI命令等。

比如飛書CLI，比如Obsidian的SKILL，以及其他的如視頻處理又或者幫你寫Word（甚至是按照你規定的格式幫你寫word），整理Excel，寫PPT，甚至是幫你設計音樂！ 可以說只要你能找到對應的SKILL和CLI或者MCP，你就能夠讓CC幫你處理以前只能自己手動解決的問題。

本期先大概介紹下這些SKILL/CLI/MCP等能做的事情，然後深入介紹下我用CC寫代碼的相關流程和方案，拋磚引玉供大家參考。後續如做設計/寫PPT/處理Excel/生成知識庫等等功能，下一期再介紹。

各類SKILL/CLI/MCP的簡要介紹：

這塊不會特別具體的介紹，因爲如果你感興趣，你可以直接在CC裏面讓它幫你詳細介紹，然後讓它幫你安裝這些SKILL或者MCP或CLI工具等來供你使用。（因爲xhh的排版問題，我就直接截圖代替了）

CC寫代碼的框架和一些思考

我的CC寫代碼流程

1.總體框架：

a.創意和框架

網頁端以及TraeSolo軟件中溝通項目的創意（國內國外的網頁端大模型，開Pro及思考模式，我自己感覺GPT的方案不錯，Gemini的方案會很細緻，Doubao專家模式的方案非常詳盡，DS專業模式開MAX思考的話方案也還可以，GLM的比較簡略但是大方向沒錯），讓它們出項目設計方案（多份，導出成MD文檔）；

b.文檔和規範

CC接入DS-V4-Pro/GLM5.1/Kimi-K2.6讓它來幫我評判上面的這多份MD文檔，看裏面哪個的設計方案更好更符合我原始的需求，然後讓它綜合彙總得到一個特別完善的設計文檔寫入到項目根目錄的Project.md。

然後再讓CC幫你做個競品分析，根據Project.md裏面的設計，調研和分析相關的競品，看競品裏面的功能有哪些，可以怎麼改進本項目的設計，分析出來的你覺得好的功能就讓CC幫你加入到你的Project.md中。

再讓CC根據Project.md設計後續的開發計劃（分成多個開發階段，比如Phase1-5）到Task.md。如果覺得這一步很繁瑣的話，你可以安裝gsd ( get-shit-done這個插件，調用裏面的/gsd-explore /gsd-new-project來設計方案，其實效果也不錯）

然後讓CC根據項目的技術棧（比如用Flutter或者Python或者vue等等）設計對應的編碼規範寫入到coding.md文檔，並讓它生成對應的CLAUDE.md文檔來引用前面的文檔。

c.前端設計

重頭戲來了，你把Project.md這個文檔，用OpenDesign工具，選擇裏面你自己想要的風格，讓它生成對應的前端設計方案供你參考。

選定了對應的前端設計風格以後，將OpenDesign生成的前端頁面（一般在OpenDesign文件夾的.od文件夾，裏面的子目錄是很多字母的那個，點進去的文件一般是html格式的你可以直接用瀏覽器打開）。你就可以將這個文件夾裏面的html文件加css文件等其他文件都複製到你的項目的/docs/前端設計文件夾內）。

比如下面這個就是我讓OpenDesign幫我設計的我的一個項目的前端頁面，我覺得比直接讓CC用ui-ux-pro-max技能設計的前端要好看很多。

d.代碼開發

接下來就每個Phase的開發工作，可以先用BrainStorm這個SKILL來和AI討論怎麼實現，同時告訴它實現前端的時候要參考/docs/前端設計文件夾裏面的設計，確定方案後，讓它再根據確定的思路將方案豐富完善後寫入到docs/plan目錄下，再通過OMC的ultrawork命令，讓AI並行多個Agent幫你進行代碼的開發工作，可以分多批次，每批次並行多個Agent執行。
如果信任AI的選擇的話，可以讓它直接照着Task.md裏面的任務要求分多批次多個Agent進行開發測試。

e.代碼測試

每個Phase開發完成以後，通過Playwright MCP，Lazytesting等MCP，讓CC寫對應的測試方案，用對應的MCP進行前後端E2E的測試。開發和測試完以後，可以用/simplify技能（CC自帶）對代碼進行優化，建議是每次生成了新的一些代碼以後，就用這個技能優化下。（最好的是每個Phase你都這麼做一下，避免代碼成爲屎山代碼）

f.用戶測試及代碼優化

上述測試和修復完成後，你就可以讓CC啓動前後端，自己再去前端頁面/前端APP去點一點，當作它的第一個用戶來體驗下功能是不是都是自己要的了。

g.持續迭代和循環

持續上述的d-f的循環，直到所有功能都是你想要的了，基本上一個中等大小的軟件項目就能開發完了。

2.相關的工具介紹

這裏只會是每個工具的介紹，以及我怎麼用的思路，不會講具體怎麼去安裝。因爲你既然在用CC了，那麼你完全可以和CC說你要裝什麼skill什麼工具，讓CC幫你搞定後續的事情。

a.OMC

全稱Oh-my-claudecode，它是我覺得CC最值得裝的一個agent框架。它裏面有非常多的agent設計和Skill設計。

它的agent包括默認用Opus模型的幹設計規劃和重構（architect/planner/critic/code-reviewer/analyst）；

以及默認用sonnet模型的寫代碼改bug（executor/debugger/verifier/....)；

默認用Haiku模型的文件探索和寫文件（explore/writer等）。

除了它會默認用模型來運行這些agent以外，你也可以指定它讓它全部用sonnet或者全部用haiku 等等，也都是可以的。【記不住的話就簡單對應，opus-最難的任務用它，sonnet-寫代碼用它，haiku-輕活髒活用它】

你不用去管寫代碼的任何事情，直接/ultrawork + 自己的需求就可以了。 比如”/ultrawork 我要根據project.md和task.md，完成phase1的開發和測試工作“。 基本上就可以放手了，頂多再回答幾個AI不確定的問題就能一路繼續下去了。

當然，你也可以選擇其他適合你的開發任務的模式。

b.ECC

全稱everything-claudecode。ECC裏面也有非常多的agent和技能以及hooks。

如果要ECC和OMC配合的話，就不要將ECC當作插件安裝，可以考慮只複製ECC的rules和skills（也不要全部複製，你可以和CC說你的主要技術棧是什麼，然後讓CC幫你複製ECC裏面的rules/skills/hooks等），以及部分hooks。這樣既保留了ECC的精髓，也不影響OMC對agent的調度。

c.gsd

全稱get-shit-down-cc。從這個名字就能看出來這玩意很geek，裏面內置了非常多的功能，覆蓋軟件開發的方方面面。

我是自己的軟件開發的流程都快固化完了才發現這個插件。體驗下來的話，會覺得gsd裏面過於繁瑣了，有時候對同一個設計會思考地太過於全面而複雜。所以我只會在一些設計階段用gsd，其他階段我還是傾向於用OMC一路繼續開發下去。

d.OpenDesign

參考Claude Design的開源工具。具體頁面長下面這樣：

左側是它的對話框，你可以上傳文件和導入ClaudeDesign的設計等等，右邊是它產出的設計文件和預覽。我當前的這個頁面就是讓它設計了一臺web端和app端的頁面原型設計，還是能很好地還原我選擇的模板以及選擇的風格的，個人對它的設計非常滿意。在進行前端相關的開發之前，我會讓它先幫我設計下，然後開發前端的時候直接參考。

安裝的話它有對應的github頁面，按照頁面教程安裝和執行就好了，非常簡單。只要你裝了CC，你再裝個OpenDesign，那麼你的前端頁面的設計就不用再求人了。

e.其他

大家用CC的時候，如果覺得某些過程自己做的比較好，或者以後要複用，那就可以在完成了這個步驟後，和CC說讓它總結上面的流程，生成對應的SKILL，這樣就能積累自己的SKILL了。

SKILL除了它的SKILL.md文檔以外，它還可以有對應的python等程序文件，方便CC調用來執行一些需要重複進行的操作。

大家可以自己去網上多搜索有用的skill，加入到claudecode中，將它們真正地用起來。

CC並不是插件越多agent越多越好，選擇自己覺得順手的，能夠將自己的想法實現，那就是最棒的。

上面這些工具也是簡單介紹了下，因爲這些工具只有你真正開始使用了（幸運地是，你只需要開始用，你就能體會到這些工具/技能/插件的強大之處），你纔會去探索它內裏的其他功能，讓它們更加契合你的Vibe Coding工作流。

其他的如speckit等也是不錯的工具，

以上是本期的內容。喜歡我分享的內容的朋友，不妨點贊和關注，下一期介紹claudeCode的更多用法，以及交流更多關於Vibe Coding的心得體會。