把Claude Code工作流程做成可交互動畫，5分鐘即可掌握Claude Code工作原理！

這是Cloud Code 當你輸入一行提示詞之後呢 它開始調用AI進行編程 而此時左側的面板 實時的呈現出它與AI交互的全部過程 你可以在這裏清楚的看到完整的系統提示詞 用戶提示詞 工具列表 AI的響應等等內容 那這個呢 就是我用Cloud Code 首出的一個Cloud Code模擬器 大家好 我是軒源 相信大家看過不少講解Cloud Code 這類編程類AI智能體工作原理的視頻 但很多時候啊 你會發現看了雲裏霧裏 好像懂了又好像沒完全懂 還有的時候啊 看視頻的時候覺得看懂了 但轉頭可能就忘了 不知道你們是不是這樣 我是經常有這種感覺的 所以爲了解決這個問題呢 趁着前幾天Cloud Code被迫開源了 我讓Cloud Code去分析自己的源碼 把它與AI交互的過程給梳理了出來 做了這樣一個模擬器 這個模擬器通過一個具體的案例 把Cloud Code的核心工作流程 做成了可交互的動畫演示 你點一點鼠標 就能看懂它到底是如何工作 來實現AI編程的 這樣當你忘記的時候啊 隨時打開一看就一目瞭然 效率賊高 左邊是一個實時更新的交互實序面板 標註了AI大模型 Cloud Code 以及它內部工具三者之間的消息流轉 右邊則是一個高度還原的 Cloud Code的終端界面 整個操作也非常簡單 一路點擊下一步就可以了 每點擊一步呢 右邊的終端則前進一步 左側的實序圖 同步展示當前步驟所產生的通信內容 點擊實序圖中的每一個通信消息塊 可以查看這個請求或者響應的完整內容 比如上面Cloud Code 發送給大模型的一次完整的接程請求 實際上的這個接程非常龐大 全部展開的話會把人搞暈 所以這裏呢 我默認對部分之段進行了一個摺疊 讓大家可以一下看到它整體的結構 先有一個全局的概念 然後對關鍵之段添加了備註信息 比如每段系統提示詞的作用 每個工具在哪裏 這樣當你想查看哪個塊 就直接展開對應的接程結構 非常的方便 比如這是核心的系統提示詞的部分 在這裏你就可以看到 完整的Cloud Code的系統提示詞了 還有所有工具的描述和使用方式 都在這裏可以清楚的看到 通過這些信息 我們也可以學習到 Cloud Code寫提示詞的技巧 這對於我們自己設計智能體和工具的時候 也是非常好的學習教材 在消息接程結構的下方 還有一個板塊 對這個消息裏面的一些關鍵內容 有詳細的講解 幫助我們更好的理解這個消息的內容 通過這個模擬器 可以直接清晰的看到完整的交互過程 包括工具的調用過程 歷史消息如何傳遞 這裏要是都學不會 那我只能說 我還要繼續努力迭代 這個工具我本身也是使用Cloud Code來開發 我讓他深入分析Cloud Code的源碼 然後開發這樣一個工具 啪一下很快 Cloud Code很快就搞好了 我激動的正要發佈上線 突然意識到一個問題 Cloud Code真正工作的時候 它是不是按照模擬的這套流程在進行呢 AI該不會坑我給我瞎編吧 這發出去要是被發現了 那臉可就丟大了 所以爲了進一步覈實 我選擇了抓包分析 把它發給大模型的內容 記錄下來與AI分析的流程進行對比 看看AI分析的模擬流程 和實際的是不是一樣的 哎 你們猜怎麼着 Cloud Code還真他媽的給我挖坑了 看得我冷汗直冒 Cloud Code完整的工具列表 是有50多個工具 但並不是所有的工具一股腦全部發給AI 它是有選擇性的 實際工作的時候 只會發送其中的一部分 AI分析的模擬流程裏面 它是把所有的工具都給我發出去了 而且接Anthropic自己的模型 和第三方模型 它發送的工具列表還不一樣 還有提示詞的部分 AI分析得出的 和實際發送的也存在一些差異 所以咱們在用AI提升效率的同時 還是不能全信它 否則一不小心就可能被它帶溝裏去了 在我繼續多輪引導之後 在原碼分析和抓包驗證雙重的加持之下 終於搞出了現在的這一個版本 前幾天Cloud Code的原碼泄露之後 我第一時間在我的網站上 增加了一套Cloud Code的原碼學習教程 目前已經累計有超過1萬人觀看過了 現在我也做了這樣一個學習模擬器的工具 那學習起來就更加方便了 可能有人會好奇 我爲什麼要做這些事情 AI編程時代我還需要學習原碼幹什麼 我是這樣覺得的 我們學習Cloud Code的原碼 並非去像研究八股文一樣 去探求它使用了什麼高級語法特性 而是學習它的架構設計 它的提示詞工程 還有它的Harness工程設計 而Cloud Code這個目前我認爲 地球上做的最成熟最優秀的Agent的產品 無疑是最值得深入和學習的對象 你把Cloud Code吃透了 那做Agent的開發還不是手拿把掐 因爲這樣的原因 所以我選擇做這樣一套免費的教程和工具 幫助更多人去深入學習Cloud Code的工作原理 這個模擬器的地址我放在視頻下方了 感興趣的朋友可以來玩玩哦 在模擬器的下方 我也把所有的Tools工具 以及Cloud Code的所有的命令 都完整的羅列了出來 便於大家在學習過程中隨時查閱 最後要說一下 這個模擬器目前只是演示了一個簡單的例子 包括兩輪工具調用 四輪對話 對於理解基礎的工作流程是足夠的 但是目前也缺少像是繪畫壓縮 Agent Plan模式等這些過程的模擬 我是想着先做出一個版本來看看效果 如果大家覺得這種方式學起來效果還不錯的話 我後面再考慮逐步迭代 把這個模擬器做得更加完善 另外網站裏面還有一套AI編程的學習教程 把新手自學Web Coding的這些知識 做成了一個個的小卡片 通過交互式引導的方式來學習 就好像有人帶着你學一樣 每個關卡里面有知識概念的講解 還有帶有動態交互效果的圖形化的講解 還有隨堂小測驗題目檢查學習的效果 習慣傳統圖文教程的同學 也可以直接切換到圖文模式 通過看文章的方式來進行學習 所有這些東西都是免費訪問的 歡迎大家來玩 也歡迎大家把我的這個網站加個書籤保存 後面會陸續增加AI方面的內容 歡迎大家隨時來逛逛 好了 今天的分享就是這些 如果覺得還不錯的話 求個點贊和轉發 我是軒源 我們下期再見