在開發(fā)企業(yè)軟件超過10年后，最近我通過一種我稱之為“氛圍編碼”（vibe coding）的 AI 代理方式，完全開發(fā)了我們的 ERP 系統(tǒng)，我學(xué)到了一個(gè)徹底改變我開發(fā)流程的經(jīng)驗(yàn)：

編碼代理不會(huì)在編碼上失敗。是我們?cè)谥笇?dǎo)上失敗了。

開發(fā)者悖論：你能構(gòu)建管理數(shù)百萬交易的復(fù)雜系統(tǒng)，但一個(gè)簡(jiǎn)單的 Nuxt 可組合請(qǐng)求卻可能變成三小時(shí)的調(diào)試噩夢(mèng)。區(qū)別不在于復(fù)雜性，而在于溝通。

這不是理論。有時(shí)我會(huì)聽到開發(fā)者抱怨：“Claude Code 很糟糕，OpenAI 好多了”，“不，Cursor 沒用，完全不理解”，甚至更離譜的“Windsurf 不行，還是用 Codex 吧”——我真心覺得困惑，因?yàn)閱栴}不在工具，而在于我們?nèi)绾翁釂柡吞峁┑纳舷挛摹Ｎ矣浀萌ツ暧?Sonnet 3.5 就取得了驚人的成果。

當(dāng)開發(fā)者從責(zé)怪工具轉(zhuǎn)向改進(jìn)指導(dǎo)技巧時(shí)，一切都會(huì)改變。這些技巧幫助我們將自動(dòng)化模塊的交付速度提升了70%，比傳統(tǒng)開發(fā)快得多。

今天你將學(xué)到什么

在這篇文章中，你將發(fā)現(xiàn)：

• 如何通過分子級(jí)指導(dǎo)技巧將 AI 代理的失敗轉(zhuǎn)化為持續(xù)的成功
• 完整11步方法論，將企業(yè)開發(fā)時(shí)間縮短70%
• 讓 AI 代理在開發(fā)會(huì)話間保持持久記憶的文檔系統(tǒng)
• 使用 Xnapper 等工具進(jìn)行截圖驅(qū)動(dòng)的開發(fā)，以實(shí)現(xiàn)視覺溝通
• “氛圍編碼”工作流：從企業(yè)混亂到結(jié)構(gòu)化的 AI 合作
• 來自多個(gè)市場(chǎng)的企業(yè)開發(fā)真實(shí)案例
• 最大化生產(chǎn)力而不增加復(fù)雜性的 MCP 工具選擇策略
• 讓 AI 代理立即高效的組件命名規(guī)范
• 超過一年企業(yè) AI 輔助開發(fā)的5個(gè)寶貴經(jīng)驗(yàn)教訓(xùn)
• 可立即實(shí)施的現(xiàn)成提示和模板

戰(zhàn)略基礎(chǔ)：分子指令原則

根據(jù)我在企業(yè)軟件的經(jīng)驗(yàn)，AI 編碼代理的最大挑戰(zhàn)不是技術(shù)復(fù)雜性，而是隱形上下文綜合癥。在為跨國(guó)公司構(gòu)建系統(tǒng)后，你會(huì)期望 AI 像你的高級(jí)開發(fā)者一樣理解你的復(fù)雜需求。

殘酷的事實(shí)：AI 代理是出色的執(zhí)行者，但糟糕的解釋者。

我真實(shí)遇到的“蓋房子”問題

幾個(gè)月前，這一天成了我的開發(fā)恐怖故事。

我正深入開發(fā)我們的 ERP 系統(tǒng)，之前幾個(gè)月與 AI 的合作讓我信心滿滿。零售模塊提前完成，我有點(diǎn)得意忘形。我把一份200行的規(guī)格說明扔給 Claude，要求它“構(gòu)建整個(gè)用戶管理系統(tǒng)”。

結(jié)果呢？一場(chǎng)漂亮的災(zāi)難。單獨(dú)看每個(gè)組件都很專業(yè)，但放在一起就像派對(duì)上的陌生人。認(rèn)證流程在邊緣情況下崩潰。數(shù)據(jù)庫查詢完美運(yùn)行——但僅限單個(gè)用戶。

我掉進(jìn)了 AI 指導(dǎo)陷阱：把出色的執(zhí)行者當(dāng)成了讀心者。

那次失敗讓我明白了一個(gè)徹底改變我們開發(fā)流程的根本真理：AI 代理不會(huì)在編碼上失敗。我們?cè)谔峁┓肿蛹?jí)具體性上失敗了。

?? 關(guān)鍵洞察：“AI 擅長(zhǎng)分子級(jí)具體性，而不是抽象概念。藝術(shù)在于將人類愿景分解成原子級(jí)、可執(zhí)行的組件。”

圖片

分子思維革命

把你的項(xiàng)目想象成一個(gè)分子：不要描述整個(gè)結(jié)構(gòu)，而是將其分解成具有特定屬性和關(guān)系的原子組件。

傳統(tǒng)方法（行不通的）：“為我們的跨國(guó) ERP 構(gòu)建用戶管理系統(tǒng)”

分子方法（改變一切的）：

• “創(chuàng)建一個(gè) UserCard 組件，包含頭像（48x48px）、姓名（Inter 字體，16px 粗體）、角色徽章（gray-100 背景）和在線狀態(tài)指示器（綠色圓點(diǎn)，8px）”
• “使用 Radix Switch 構(gòu)建 UserPermissionToggle，顯示當(dāng)前狀態(tài)，支持樂觀更新和錯(cuò)誤回滾”
• “實(shí)現(xiàn)一個(gè) CountryFilter 下拉菜單，帶國(guó)旗圖標(biāo)，使用我們現(xiàn)有的 components/ui/ 中的 Select 組件”

為什么這對(duì)企業(yè)開發(fā)意義重大：

• AI 清楚知道你想要什么（無需猜測(cè)業(yè)務(wù)需求）
• 結(jié)果立即可用（調(diào)試時(shí)間減少，交付時(shí)間增加）
• 質(zhì)量始終如一（具體需求 = 具體解決方案）
• 文檔自動(dòng)生成（詳細(xì)輸入產(chǎn)生詳細(xì)輸出）
• 團(tuán)隊(duì)速度提升（其他開發(fā)者可遵循相同模式）

這一原則成為我們開發(fā)過程中每次 AI 交互的基礎(chǔ)。每個(gè)請(qǐng)求都在分子級(jí)運(yùn)作，創(chuàng)建精確、相互關(guān)聯(lián)的組件，形成企業(yè)級(jí)解決方案。

根據(jù) GitHub 的《2025年軟件開發(fā)中的 AI 狀態(tài)報(bào)告》，使用結(jié)構(gòu)化提示方法的開發(fā)者比不使用的開發(fā)者生產(chǎn)力高55%。根據(jù)我的經(jīng)驗(yàn)，生產(chǎn)力差距甚至更大——我們看到開發(fā)速度提升了70-80%。

專業(yè) AI 開發(fā)方法論：交付成果的11步系統(tǒng)

通過多年的企業(yè)開發(fā)，我提煉出了一種始終交付生產(chǎn)級(jí)成果的系統(tǒng)化方法。這不是理論——這是通過真實(shí)項(xiàng)目錘煉的實(shí)戰(zhàn)方法。

這些技巧的妙處在于？它們適用于所有 AI 編碼助手。無論你是像我和我的瞌睡尋回犬一樣支持 Claude Code，追隨 Cursor 潮流，還是嘗試 OpenAI 的 Codex，這些原則都能完美適用。每個(gè)代理都有其特點(diǎn)——Claude Code 喜歡詳細(xì)上下文，Cursor 擅長(zhǎng)代碼庫理解，Codex 擅長(zhǎng)純邏輯思考——但它們都對(duì)相同的基礎(chǔ)方法有出色響應(yīng)。

專業(yè)提示：代理本身不重要，重要的是你的指導(dǎo)質(zhì)量。我見過開發(fā)者責(zé)怪工具，而真正的問題是他們?cè)谄诖孥E而不是分子。

1. 首先創(chuàng)建 PRD：你的 AI 藍(lán)圖（改變一切的基礎(chǔ)）

新項(xiàng)目的殘酷真相：沒有 PRD 就開始，就像給 GPS 輸入“某個(gè)好地方”作為目的地。你會(huì)迷路、沮喪，然后責(zé)怪導(dǎo)航系統(tǒng)。

我的個(gè)人 PRD 工作流（經(jīng)過無數(shù)項(xiàng)目?jī)?yōu)化）：

• 打開啟用了網(wǎng)絡(luò)搜索的 Claude Desktop
• 研究階段：“分析 [項(xiàng)目類型] 的當(dāng)前市場(chǎng)趨勢(shì)，確定關(guān)鍵功能，建議2025年的技術(shù)架構(gòu)選項(xiàng)”
• 讓 Claude 研究并呈現(xiàn)選項(xiàng)（這里是魔法發(fā)生的地方——AI 研究全面且無偏見）
• 通過對(duì)話完善愿景，直到清晰明確
• 生成 PRD：“為此項(xiàng)目創(chuàng)建詳細(xì)的產(chǎn)品需求文檔”
• 保存為項(xiàng)目文件夾中的 markdown 文件：/docs/PRD.md
• 導(dǎo)入 Obsidian 以便鏈接和未來參考
• 添加到 CLAUDE.md：引用 /docs/PRD.md 作為所有項(xiàng)目上下文

為什么這個(gè)工作流改變 AI 開發(fā)：

• AI 代理立即了解你的項(xiàng)目上下文
• 無需反復(fù)解釋相同的需求
• 每次編碼會(huì)話都以完美上下文開始
• 你的未來自己（和團(tuán)隊(duì)成員）會(huì)感謝你

有效的 PRD 模板：

# 項(xiàng)目名稱 - 產(chǎn)品需求文檔
生成日期：[日期] | 更新日期：[日期]

## 愿景聲明
[一句清晰的話：我們?cè)诮ㄊ裁矗瑸槭裁矗縘
## 業(yè)務(wù)背景
- 目標(biāo)用戶及其痛點(diǎn)
- 市場(chǎng)機(jī)會(huì)和約束
- 成功指標(biāo)和時(shí)間線
## 技術(shù)架構(gòu)
- 推薦技術(shù)棧（AI 建議的選項(xiàng)）
- 數(shù)據(jù)庫模式要求
- 所需第三方集成
- 性能和安全要求
## 功能分解（原子級(jí)）
### 核心功能
- [功能1]：分解為具體組件
- [功能2]：附帶明確驗(yàn)收標(biāo)準(zhǔn)
- [功能3]：包括邊緣情況和錯(cuò)誤狀態(tài)
### 可選功能
- [未來增強(qiáng)功能及優(yōu)先級(jí)]
## 開發(fā)階段
- 第一階段：MVP 組件
- 第二階段：增強(qiáng)功能
- 第三階段：高級(jí)功能
## 待解決的問題
- [需研究或利益相關(guān)者輸入的決策]

真實(shí)案例：在構(gòu)建我們最新的零售模塊之前，我花了20分鐘在 Claude Desktop 研究歐洲電商法規(guī)、技術(shù)架構(gòu)選項(xiàng)和競(jìng)爭(zhēng)功能。生成的 PRD 節(jié)省了開發(fā)中數(shù)周的反復(fù)溝通。

如何在任何 AI 代理中使用：

• Claude Code：在每次對(duì)話中引用 PRD 文件
• Cursor：將 PRD 路徑添加到工作區(qū)以增強(qiáng)上下文感知
• Codex：在提示中包含 PRD 部分以保持邏輯一致

?? 專業(yè)提示：“PRD 不是官僚作風(fēng)——它是你 AI 代理的長(zhǎng)期記憶和項(xiàng)目的北極星。五分鐘的計(jì)劃能避免五小時(shí)的困惑編碼會(huì)話。”

專業(yè)提示：PRD 編寫會(huì)話是進(jìn)入正確思維狀態(tài)的完美方式。你不只是在編碼——你在為你和 AI 代理的未來對(duì)話設(shè)計(jì)架構(gòu)。

2. 掌握原子組件思維（不求奇跡的藝術(shù)）

企業(yè)現(xiàn)實(shí)：你不能通過要求復(fù)雜的東西來構(gòu)建復(fù)雜系統(tǒng)。這是大多數(shù)開發(fā)者的誤區(qū)，也是 AI 代理默默流淚的地方。

每次都會(huì)失敗的奇跡請(qǐng)求：“構(gòu)建一個(gè)帶有分析、通知、用戶管理和實(shí)時(shí)更新的用戶儀表板，還要看起來現(xiàn)代。”

你的 AI 代理聽到的是：“請(qǐng)讀我的心，猜測(cè)我的設(shè)計(jì)偏好，假設(shè)我的數(shù)據(jù)結(jié)構(gòu)，并且不知怎的知道我希望一切如何協(xié)同工作。”這就像讓某人做你最喜歡的菜，卻不告訴他們你喜歡吃什么。

真正有效的原子方法：

創(chuàng)建一個(gè)單一的 UserCard 組件：

• 顯示用戶頭像（48x48px，圓形，帶加載骨架）
• 顯示姓名（Inter 字體，16px font-semibold，text-gray-900）
• 包含角色徽章（text-xs，px-2 py-1，bg-blue-100，text-blue-800）
• 包含在線狀態(tài)指示器（8px 圓點(diǎn)，在線為 green-500，離線為 gray-300）
• 使用 TypeScript 提供適當(dāng)?shù)慕涌诙x

如何委托給你的 AI 代理：

• Claude Code：“幫我將這個(gè)功能分解成原子組件。列出每個(gè)組件及其具體屬性。”
• Cursor：“分析這個(gè)功能需求，建議最小的可構(gòu)建單元。”
• Codex：“分解：[功能描述] → 帶清晰接口的原子組件。”

真實(shí)案例：在構(gòu)建我們的庫存系統(tǒng)時(shí)，我沒有從“構(gòu)建一個(gè)庫存儀表板”開始（已經(jīng)吃過這個(gè)虧了）。我從一個(gè)單一的 ProductRow 組件開始。然后是 ProductTable。然后是 InventoryDashboard。每次對(duì)話只花了2-3分鐘，就生成了立即可用的專業(yè)組件。

生產(chǎn)力突破：這種方法幫助我們?cè)趦商於皇莾芍軆?nèi)交付了整個(gè)產(chǎn)品目錄界面——處理多語言的數(shù)千個(gè) SKU。

請(qǐng)你的代理幫助分解：“我要構(gòu)建 [復(fù)雜功能]。幫我識(shí)別原子組件及其關(guān)系。”每個(gè) AI 代理都擅長(zhǎng)這種分析性分解。

?? 關(guān)鍵洞察：“復(fù)雜系統(tǒng)從簡(jiǎn)單組件中浮現(xiàn)，永遠(yuǎn)不是從復(fù)雜指令中。掌握分解的藝術(shù)，就掌握了 AI 開發(fā)。”

3. 上下文架構(gòu)：文件引用系統(tǒng)（教 AI 你的代碼庫語言）

企業(yè)真相：AI 代理對(duì)語法有攝影般記憶，但對(duì)你的項(xiàng)目上下文完全失憶。

這就像雇用了一位精通所有編程語言的優(yōu)秀開發(fā)者，但他從未見過你的代碼庫。你不會(huì)只說“讓它與我們的風(fēng)格一致”——你會(huì)給他們看例子。

懶惰開發(fā)者方法（我也有罪）：“創(chuàng)建一個(gè)與我們?cè)O(shè)計(jì)系統(tǒng)匹配的按鈕組件。”

你的 AI 代理在想：“哪個(gè)設(shè)計(jì)系統(tǒng)？什么顏色？什么尺寸？什么懸停狀態(tài)？我該瞎猜嗎？”

真正有效的上下文驅(qū)動(dòng)方法：

參考 components/ui/Button.vue 和 stores/auth.js，創(chuàng)建一個(gè) LogoutButton 組件：

• 使用與 Button.vue 相同的樣式模式（尺寸變體、配色方案）
• 遵循 types/auth.ts 中既定的 TypeScript 接口
• 調(diào)用 auth 存儲(chǔ)中的 logout 方法，帶適當(dāng)?shù)腻e(cuò)誤處理
• 使用我們的 LoadingSpinner 組件顯示加載狀態(tài)
• 包含符合 WCAG 2.1 的 ARIA 標(biāo)簽以確保可訪問性
• 處理邊緣情況：注銷期間的網(wǎng)絡(luò)失敗

如何讓 AI 代理分析你的上下文：

• Claude Code：“分析這3個(gè)文件 [文件路徑]，為我的新組件建議一致的模式。”
• Cursor：“審查我現(xiàn)有的 auth 組件，生成類似的注銷流程。”
• Codex：“研究 [具體文件]，在新代碼中保持相同的架構(gòu)模式。”

突破時(shí)刻：去年夏天，我們團(tuán)隊(duì)需要一個(gè)自定義認(rèn)證流程。我沒有從頭描述需求，而是引用了我們現(xiàn)有的實(shí)現(xiàn)。Claude Code 立即理解并完美適配了模式——包括我們花了數(shù)月優(yōu)化的錯(cuò)誤處理。

可衡量成果：這種上下文驅(qū)動(dòng)方法將我的調(diào)試時(shí)間減少了80%，消除了過去困擾我們代碼庫的“組件不匹配”問題。

每次請(qǐng)求以“參考 components…”開始，已成為我高效 AI 會(huì)話的信號(hào)。這相當(dāng)于編碼中的“基于我們之前的對(duì)話…”

?? 專業(yè)提示：“在 AI 開發(fā)中，上下文為王。始終引用現(xiàn)有文件，讓 AI 代理匹配你的編碼風(fēng)格、命名規(guī)范和架構(gòu)模式。你的代碼庫成為它們的老師。”

4. 自文檔化組件命名的藝術(shù)（因?yàn)槲磥淼哪阋矔?huì)失憶）

企業(yè)真相：組件名稱是你對(duì)抗代碼庫混亂的第一道防線。

AI 代理是字面意義的生物。當(dāng) Claude Code 看到 UserProfileEditModal 時(shí)，它立即明白這是一個(gè)用于編輯用戶資料的模態(tài)框，而不是查看。當(dāng) Cursor 遇到 InvoiceGenerationWizardMultiCountry 時(shí)，它知道我們?cè)谔幚韽?fù)雜的國(guó)際發(fā)票邏輯，而不是簡(jiǎn)單的表單。

但人類開發(fā)者呢？我們給東西命名為 Modal、UserThing、Helper 和 Manager，然后納悶為什么代碼庫像個(gè)懸疑小說。

行不通的（讓 AI 代理淚流滿面）：

• “創(chuàng)建一個(gè)用于用戶東西的模態(tài)框”
• “構(gòu)建一個(gè)儀表板組件”
• “做一個(gè)數(shù)據(jù)東西的輔助工具”

真正提升生產(chǎn)力的：

• “創(chuàng)建一個(gè) UserProfileEditModal 組件，帶保存和取消按鈕、表單驗(yàn)證和加載狀態(tài)”
• “構(gòu)建一個(gè) RetailInventoryDashboardResponsive 組件，適用于經(jīng)理的平板電腦”
• “創(chuàng)建一個(gè) EuropeanVatCalculationHelper 用于多國(guó)稅收邏輯”

我們 ERP 中的真實(shí)命名規(guī)范：

• InvoiceGenerationWizardMultiCountry（處理各國(guó) VAT 差異——名稱說明一切）
• ClientContactSelectorWithTimezone（考慮歐洲營(yíng)業(yè)時(shí)間——無需猜測(cè)）
• OrderStatusBadgeLocalized（以本地語言顯示狀態(tài)——一目了然）
• RetailInventoryDashboardResponsive（適用于經(jīng)理平板和員工手機(jī)——上下文清晰）

如何讓 AI 幫助命名：

• Claude Code：“為 [功能] 建議描述性組件名稱。名稱中包含主要用途和關(guān)鍵功能。”
• Cursor：“分析這個(gè)組件的功能，建議一個(gè)自文檔化名稱。”
• Codex：“生成立即傳達(dá)用途和范圍的組件名稱。”

六個(gè)月測(cè)試：當(dāng)我回到我們的代碼庫時(shí)，即使在其他項(xiàng)目工作后，我也能輕松導(dǎo)航整個(gè)系統(tǒng)，不需要回憶任何東西的功能。名稱本身就講了故事。即使是初級(jí)開發(fā)者也能立即明白 ClientContactSelectorWithTimezone 的作用。

AI 代理專業(yè)提示：描述性名稱創(chuàng)造正反饋循環(huán)。更好的名稱帶來更好的組件建議，帶來更好的架構(gòu)討論，最終帶來更好的代碼。

?? 關(guān)鍵洞察：“自文檔化代碼始于自文檔化名稱。當(dāng)你的組件名稱講故事時(shí)，你的 AI 代理成為更好的故事講述者。”

5. AI 記憶擴(kuò)展系統(tǒng)（因?yàn)槭洸皇枪δ埽?/span>

殘酷現(xiàn)實(shí)：AI 代理對(duì)語法有完美記憶，但如果它們的數(shù)字生命依賴于記住你的項(xiàng)目，它們完全做不到。

這就像和一個(gè)才華橫溢的開發(fā)者合作，他在每次對(duì)話后完全失憶。“我們的認(rèn)證策略是什么來著？”“昨天我們構(gòu)建了哪些組件？”“我們?yōu)槭裁催x擇這種方法？”

我驗(yàn)證過的文檔架構(gòu)（從多次健忘的 AI 會(huì)話中學(xué)習(xí)）：

/docs/
├── COMPONENTS.md          # 組件目錄，包含使用示例
├── MILESTONES.md         # 開發(fā)歷史和經(jīng)驗(yàn)教訓(xùn)
├── ARCHITECTURE.md       # 一切如何連接及原因
├── DECISIONS.md          # 技術(shù)選擇及其理由
├── PATTERNS.md           # 可重用代碼模式和規(guī)范
└── TROUBLESHOOTING.md    # 常見問題及解決方案

如何讓 AI 代理幫助維護(hù)文檔：

• Claude Code：“審查這次對(duì)話，更新我們的 COMPONENTS.md，記錄我們構(gòu)建的內(nèi)容。”
• Cursor：“為這些新組件生成文檔，遵循我們既定的格式。”
• Codex：“分析這段代碼，建議對(duì)我們的 PATTERNS.md 文件的補(bǔ)充。”

團(tuán)隊(duì)擴(kuò)展的真實(shí)案例：

# DECISIONS.md - ERP v2.1

## 認(rèn)證架構(gòu)（2025年11月）
**決定**：使用 Supabase Auth 的 JWT 令牌  
**理由**：符合 GDPR，多國(guó)會(huì)話管理  
**經(jīng)驗(yàn)教訓(xùn)**：8小時(shí)零售班次的刷新令牌輪換至關(guān)重要  
**下一位開發(fā)者**：任何與認(rèn)證相關(guān)的組件都參考此文檔  
**AI 代理提示**：在建議認(rèn)證更改前，始終詢問會(huì)話管理

生產(chǎn)力倍增器：當(dāng)我在開發(fā)新功能前將這些文檔分享給任何 AI 代理時(shí)，就像有一個(gè)擁有完美記憶的高級(jí)開發(fā)者加入了對(duì)話。

真實(shí)影響：新團(tuán)隊(duì)成員在2天而不是2周內(nèi)變得高效，因?yàn)?AI 代理可以參考我們完整的決策歷史。一致性令人印象深刻。

AI 代理喜歡更新文檔。告訴它們：“將這個(gè)決定添加到 DECISIONS.md”或“用這個(gè)解決方案更新 TROUBLESHOOTING.md”。

?? 專業(yè)提示：“AI 代理在會(huì)話間沒有記憶。你的文檔系統(tǒng)成為它們的持久知識(shí)庫——也是你團(tuán)隊(duì)的機(jī)構(gòu)記憶。文檔比向才華橫溢的失憶者反復(fù)解釋要便宜。”

6. 智能 MCP 使用，拒絕工具過載

Model Context Protocol (MCP) 工具很強(qiáng)大，但我學(xué)會(huì)了選擇性地使用。我的開發(fā)必備 MCP 工具包：

• Supabase MCP：直接數(shù)據(jù)庫交互
• File System MCP：項(xiàng)目導(dǎo)航和文件管理
• Git MCP：版本控制集成
• Context 7
• API Testing MCP：端點(diǎn)驗(yàn)證

我避免安裝所有可用的 MCP 工具。五個(gè)精心選擇的工具勝過50個(gè)零散的工具。

7. 從 Lovable 到本地的流程（僅限編碼初學(xué)者）

完全坦白：我不再使用 Lovable、Replit 或 v0。但如果你是編碼新手，想到終端或 IDE 就嚇得冒冷汗，這些工具可以是你的訓(xùn)練輪。

初學(xué)者友好方法：

1）從基于瀏覽器的工具開始（如果 IDE 嚇到你）：

• Lovable/v0：AI 驅(qū)動(dòng)的 UI 構(gòu)建
• Replit：在瀏覽器中編碼
• Bolt.new：即時(shí)開發(fā)

2）不可妥協(xié)的規(guī)則：立即下載你的代碼

• 永遠(yuǎn)不要長(zhǎng)期依賴這些系統(tǒng)
• 將所有內(nèi)容導(dǎo)出到本地機(jī)器
• 擁有你的代碼，不要租用

3）升級(jí)到本地開發(fā)：

• Cursor：AI 驅(qū)動(dòng)的本地 IDE
• Claude Code：帶文件的 AI 助手
• Cline：基于終端的 AI 編碼
• Codex：OpenAI 的編碼助手
• Trae：另一個(gè)芯片工具

為什么這重要：基于云的編碼平臺(tái)很方便但很危險(xiǎn)。如果它們改變定價(jià)怎么辦？如果它們宕機(jī)怎么辦？如果它們關(guān)閉怎么辦？你的代碼需要住在你珍貴的電腦上，而不是別人的云端。

我的建議：僅用瀏覽器工具克服最初的恐懼，然后盡快將一切轉(zhuǎn)移到本地。目標(biāo)是獨(dú)立，而不是依賴。

如何讓 AI 幫助本地開發(fā)：

• Claude Code：“幫我用適當(dāng)?shù)奈募A結(jié)構(gòu)在本地設(shè)置這個(gè)項(xiàng)目。”
• Cursor：“將這段基于瀏覽器的代碼轉(zhuǎn)換為本地開發(fā)環(huán)境。”
• Cline：“指導(dǎo)我為這個(gè)項(xiàng)目設(shè)置版本控制。”

?? 專業(yè)提示：“瀏覽器編碼工具就像訓(xùn)練輪——對(duì)學(xué)習(xí)平衡很有用，但你不想一輩子都帶著它們騎行。真正的力量來自你的代碼住在你的機(jī)器上。”

8. UI 庫一致性策略

我做的最好決定之一是盡早標(biāo)準(zhǔn)化 UI 庫。對(duì)于我們的項(xiàng)目，我使用：

• ShadCn：無樣式、可訪問組件
• Radix UI：無樣式、可訪問組件
• Tailwind CSS：實(shí)用優(yōu)先的樣式
• Headless UI：Vue 專用組件
• Vue Use：組合工具
• Intent Ui
• Naive UI

每次 AI 代理對(duì)話都以“使用 Radix UI 組件和 Tailwind 類，遵循我們既定的設(shè)計(jì)系統(tǒng)”開始。

這種一致性意味著我可以將任何組件交給任何開發(fā)者（或 AI 代理），都能得到可預(yù)測(cè)的結(jié)果。

?? 關(guān)鍵概念：在構(gòu)建前標(biāo)準(zhǔn)化你的 UI 庫棧。訓(xùn)練 AI 代理遵循一致模式比事后重構(gòu)不一致代碼要容易。

使用此方法確保所有生成組件遵循相同的設(shè)計(jì)語言。

9. 帶注釋的截圖驅(qū)動(dòng)開發(fā)

這項(xiàng)技術(shù)徹底改變了我向 AI 代理傳達(dá)視覺需求的方式。我使用 Xnapper（或類似工具）創(chuàng)建帶注釋的截圖，精確顯示我想要的內(nèi)容。

我的注釋流程：

• 截取現(xiàn)有 UI、原型或表結(jié)構(gòu)（當(dāng)我在 Supabase 上工作時(shí)）的截圖
• 添加箭頭指向特定元素
• 包含所需更改的文字描述
• 附上給 Claude Code 的具體指令

在我們的儀表板重新設(shè)計(jì)中，我注釋了一張截圖，顯示“將這個(gè)圖表移到這里，將這個(gè)按鈕顏色改為綠色，這里添加加載狀態(tài)”。AI 代理立即理解并完美實(shí)現(xiàn)。

10. 訓(xùn)練你的 AI 代理：它們從你的反饋中學(xué)習(xí)

改變游戲規(guī)則：AI 代理不是靜態(tài)工具——它們是可學(xué)習(xí)的伙伴，通過你的指導(dǎo)不斷改進(jìn)。

大多數(shù)開發(fā)者將 AI 代理視為固定軟件，但我發(fā)現(xiàn)：當(dāng)你提供針對(duì)性反饋時(shí)，它們會(huì)根據(jù)你的具體需求進(jìn)化。

Cursor 最近推出了 Cursor Agents，進(jìn)一步深化了這一概念，我一直在嘗試為特定任務(wù)訓(xùn)練不同代理。但我發(fā)現(xiàn)特別棒的是 Claude Code 的子代理——你可以通過 CLI 接口直接創(chuàng)建它們，提供了驚人的靈活性。

我的工作流真實(shí)案例：我有一個(gè)代理總是生成 Tailwind 類，而不是我偏好的內(nèi)聯(lián) CSS，盡管我喜歡內(nèi)聯(lián)工具以快速開發(fā)。第三次糾正后，我說：“@agent，請(qǐng)指示此代理始終使用內(nèi)聯(lián) Tailwind 工具，而不是創(chuàng)建自定義 CSS 類。這是這個(gè)項(xiàng)目的持久偏好。”從那以后，它始終生成內(nèi)聯(lián)樣式。

另一個(gè)實(shí)際案例：當(dāng)一個(gè)代理生成過于復(fù)雜的組件結(jié)構(gòu)時(shí)，我訓(xùn)練它：“@agent，更新你的指令，創(chuàng)建最大100行的原子組件，遵循 components/ui/ 中的現(xiàn)有模式。”效果立竿見影且持久。

Claude Code 子代理方法的妙處在于直接 CLI 控制——你可以在不離開終端工作流的情況下，為代碼庫的不同部分生成專門的代理并即時(shí)配置。

AI 代理在對(duì)話中記住你的反饋，但在會(huì)話間會(huì)忘記。記錄你成功的指令模式并重復(fù)使用。

?? 關(guān)鍵洞察：“AI 代理是可定制的伙伴，不是固定工具。你在訓(xùn)練它們上的努力會(huì)在每次未來交互中帶來回報(bào)。你的指令成為它們的個(gè)性。”

11. 使用 /clear 并重新開始（一致性能的秘密）

最被低估的生產(chǎn)力技巧：當(dāng)任務(wù)完成時(shí)，沒有什么比開始新對(duì)話更有效。

經(jīng)過幾個(gè)月的 AI 輔助開發(fā)，我發(fā)現(xiàn)對(duì)話長(zhǎng)度直接影響 AI 性能。聊天越長(zhǎng)，上下文越混亂，響應(yīng)越慢，結(jié)果越可能不一致。

我艱難學(xué)到的規(guī)則：虔誠(chéng)地使用 /clear 或開始新聊天。

何時(shí)清除對(duì)話：

• 完成一個(gè)功能后：不要將舊上下文拖入新工作
• 切換項(xiàng)目區(qū)域時(shí)：從前端到后端？新聊天。
• 性能下降時(shí)：如果響應(yīng)變慢或奇怪，是時(shí)候刷新了
• 重大調(diào)試會(huì)話后：長(zhǎng)時(shí)間的故障排除對(duì)話會(huì)產(chǎn)生噪音

工具特定方法：

• Claude Code：可用時(shí)使用 /clear 命令，或開始新對(duì)話
• Cursor：為復(fù)雜任務(wù)關(guān)閉并重新打開聊天面板
• Codex：為每個(gè)主要功能開始新會(huì)話
• 長(zhǎng)任務(wù)：如果你的工具支持，使用 /compact 壓縮上下文

真實(shí)案例：我在調(diào)試一個(gè)復(fù)雜的 Supabase 集成，涉及200多條消息。最終解決后，我沒有繼續(xù)下一個(gè)功能，而是使用了 /clear，并以“我有一個(gè)正常工作的 Supabase 認(rèn)證系統(tǒng)。現(xiàn)在我需要構(gòu)建一個(gè)用戶儀表板組件”開始新對(duì)話。響應(yīng)速度和質(zhì)量的差異天壤之別。

為什么這有效：

• 更干凈的上下文：沒有無關(guān)的對(duì)話歷史
• 更快響應(yīng)：處理更少上下文意味著 AI 思考更快
• 更好專注：AI 代理在專注、具體的上下文中表現(xiàn)更好
• 減少混亂：消除之前討論中的矛盾信息

心理益處：重新開始也能重置你自己的心理狀態(tài)。你以更清晰的思維和更好結(jié)構(gòu)的請(qǐng)求迎接新任務(wù)。

?? 專業(yè)提示：“將每次 AI 對(duì)話視為一個(gè)專注的工作會(huì)話。會(huì)話結(jié)束時(shí)，清空畫布。你的未來自己會(huì)感謝你干凈、快速的交互。”

我的個(gè)人選擇

我主要使用 Claude Code，因?yàn)槲蚁矚g直接與 Opus 和 Sonnet 模型合作。鉤子、終端命令和子代理系統(tǒng)感覺非常成熟和深思熟慮。我也欣賞能直接與開發(fā) LLM 的公司合作，而不是通過中間層。

不過，我對(duì) OpenAI 的 Codex CLI 很感興趣——我認(rèn)為它有最有前景的未來軌跡。

Cursor 設(shè)計(jì)精美，團(tuán)隊(duì)工作出色，但它在底層模型上增加了額外的層和成本。雖然我現(xiàn)在更喜歡直接與 Anthropic 合作，但我擔(dān)心他們的成本結(jié)構(gòu)和未來可能的漲價(jià)。OpenAI 的 Codex 方法感覺長(zhǎng)期更可持續(xù)。

但就目前而言？Claude Code 仍是我的日常主力。模型質(zhì)量、開發(fā)體驗(yàn)和前沿 AI 研究的直接訪問相結(jié)合，難以超越。

現(xiàn)實(shí)世界的成果：企業(yè)開發(fā)成功

讓我分享使用這些技術(shù)構(gòu)建我們 ERP 的具體成果：

• 開發(fā)速度：傳統(tǒng)上每個(gè)模塊需要3個(gè)月，現(xiàn)在只需3-4周
• 代碼質(zhì)量：初始發(fā)布比手動(dòng)編碼功能減少90%的錯(cuò)誤
• 團(tuán)隊(duì)入職：新開發(fā)者在幾天而不是幾周內(nèi)變得高效
• 維護(hù)：AI 生成的組件因遵循一致模式而更容易修改

我們的零售自動(dòng)化模塊，處理8個(gè)歐洲國(guó)家的運(yùn)營(yíng)，比我們之前的傳統(tǒng)開發(fā)方法快了70%。AI 代理處理重復(fù)的組件創(chuàng)建，而我專注于業(yè)務(wù)邏輯和用戶體驗(yàn)。

你在項(xiàng)目中體驗(yàn)過類似的生產(chǎn)力提升嗎？在評(píng)論中告訴我。

讓一切生效的思維轉(zhuǎn)變

最大的變化不是技術(shù)上的——是心理上的。我不再將 AI 代理視為工具，而是將其視為需要清晰指導(dǎo)的、技能極高的初級(jí)開發(fā)者。

當(dāng)我與 Claude Code “氛圍編碼”時(shí)，我想象自己在與某人結(jié)對(duì)編程，這個(gè)人：

• 對(duì)語法有完美記憶，但對(duì)我們的項(xiàng)目毫無上下文
• 可以實(shí)現(xiàn)任何東西，但需要精確的規(guī)格
• 工作極快，但需要清晰的溝通
• 從不疲倦，但會(huì)被模糊的指令搞糊涂

這種思維轉(zhuǎn)變改變了我的開發(fā)流程。我不再因 AI 代理無法讀心而沮喪，而是變得更擅長(zhǎng)明確表達(dá)我想要的。

?? 關(guān)鍵概念：將 AI 編碼代理視為才華橫溢但無上下文的結(jié)對(duì)編程伙伴。你的工作是為他們提供所需的上下文和清晰度。

使用這種思維轉(zhuǎn)變來改善你的所有 AI 代理交互。

隱藏的生產(chǎn)力倍增器

除了核心方法論，我發(fā)現(xiàn)了幾個(gè)顯著放大結(jié)果的“倍增器”技術(shù)：

錯(cuò)誤驅(qū)動(dòng)學(xué)習(xí)當(dāng) Claude Code 產(chǎn)生意外結(jié)果時(shí)，我不只是修復(fù)它——我會(huì)分析指令為什么失敗，并優(yōu)化我的提示技術(shù)。每一次失敗都讓我的下一次指令更好。

組件版本控制我要求 AI 代理創(chuàng)建組件的多個(gè)版本（簡(jiǎn)單、高級(jí)、企業(yè)級(jí)），然后選擇最好的。這項(xiàng)技術(shù)幫助我發(fā)現(xiàn)了用戶界面的最佳復(fù)雜性水平。

跨平臺(tái)一致性在為多設(shè)備構(gòu)建時(shí)，我同時(shí)提供移動(dòng)端和桌面端截圖。AI 代理在能看到兩種目標(biāo)布局時(shí)，擅長(zhǎng)創(chuàng)建響應(yīng)式設(shè)計(jì)。

業(yè)務(wù)邏輯分離我學(xué)會(huì)了在指令中將業(yè)務(wù)邏輯與 UI 組件分離。這使組件更可重用，AI 代理也更容易理解。

超過一年企業(yè) AI 開發(fā)的5個(gè)寶貴經(jīng)驗(yàn)教訓(xùn)

這些不是理論見解——它們是通過真實(shí)企業(yè)開發(fā)學(xué)到的昂貴教訓(xùn)。每個(gè)教訓(xùn)都讓我付出了時(shí)間、挫折或兩者兼有。

1. 動(dòng)態(tài)文檔勝過完美計(jì)劃

午夜啟示：某晚凌晨2:30。

我一直試圖維護(hù)完美的架構(gòu)文檔，花數(shù)小時(shí)創(chuàng)建一旦發(fā)生變化就過時(shí)的全面規(guī)格說明。我的咖啡涼了，文檔過時(shí)了，Claude Code 不斷讓我澄清幾周前做的決定。

然后我頓悟：我一直在做文檔，而我應(yīng)該做的是知識(shí)管理。

我不再試圖提前完美記錄一切，而是開始創(chuàng)建與代碼庫一起進(jìn)化的動(dòng)態(tài)文檔。AI 代理可以為文檔做貢獻(xiàn)，文檔可以指導(dǎo) AI 代理。

?? 關(guān)鍵洞察：“最好的文檔與你的代碼一起成長(zhǎng)，而不是領(lǐng)先于它。當(dāng)你的工具與你一起思考，知識(shí)成為創(chuàng)造的副產(chǎn)品。”

2. AI 代理放大你的架構(gòu)，無論好壞

痛苦的真相：AI 代理不會(huì)修復(fù)糟糕的架構(gòu)決策——它們以驚人的速度放大這些決策。

如果你的組件結(jié)構(gòu)混亂，AI 會(huì)創(chuàng)建更多混亂的組件。如果你的命名規(guī)范不清晰，AI 會(huì)延續(xù)這種混亂。如果你的數(shù)據(jù)流復(fù)雜，AI 會(huì)構(gòu)建更多復(fù)雜的連接。

突破：首先專注于打好基礎(chǔ)。一個(gè)架構(gòu)良好的組件會(huì)成為 AI 生成的數(shù)十個(gè)組件的模板。

3. 截圖驅(qū)動(dòng)的開發(fā)改變一切

創(chuàng)意突破：10多年來，我一直在視覺溝通上掙扎。我能設(shè)計(jì)復(fù)雜的企

業(yè)系統(tǒng)，但無法清楚傳達(dá)我想要的界面外觀。

使用 Xnapper 等工具的截圖驅(qū)動(dòng)開發(fā)將這一弱點(diǎn)變成了優(yōu)勢(shì)。現(xiàn)在我收集視覺靈感，注釋我想要的內(nèi)容，讓 AI 代理將愿景轉(zhuǎn)化為代碼。

系統(tǒng)化方法：

• 從 Mobbin.com、Dribbble 或現(xiàn)有成功應(yīng)用中收集靈感
• 創(chuàng)建帶注釋的截圖，精確顯示你想要的內(nèi)容
• 上傳到 Claude Code，附帶具體實(shí)現(xiàn)指令
• 根據(jù)結(jié)果迭代，構(gòu)建視覺詞匯

4. 版本控制是你的 AI 安全網(wǎng)

幾個(gè)月前：一天刻在我個(gè)人開發(fā)者歷史中。

我正與 Claude Code 進(jìn)行一場(chǎng)氛圍編碼會(huì)話，為我們的分析儀表板構(gòu)建復(fù)雜的數(shù)據(jù)可視化。一切進(jìn)展順利——組件創(chuàng)建、集成到位、魔法發(fā)生。

然后 Claude Code 建議對(duì)整個(gè)組件架構(gòu)進(jìn)行“快速重構(gòu)”。我沒多想就同意了。30分鐘后，我意識(shí)到我們完全破壞了認(rèn)證集成，而且我沒有退路。

我沒有提交。沒有面包屑。沒有安全網(wǎng)。

現(xiàn)在我的工作流極其簡(jiǎn)單：

• 功能正常？立即提交。
• Claude Code 建議更改？先提交，再實(shí)驗(yàn)。
• 會(huì)話結(jié)束？用描述性消息提交。

5. 企業(yè)上下文必須明確

在8個(gè)歐洲國(guó)家工作讓我明白，上下文不是可選的——它本身就是架構(gòu)。每個(gè)時(shí)區(qū)差異、每個(gè) GDPR 要求、每個(gè)文化細(xì)微差別都需要在你的 AI 指令中明確。

不好：“創(chuàng)建一個(gè)聯(lián)系表單”好：“創(chuàng)建一個(gè)符合 GDPR 的聯(lián)系表單，帶歐洲市場(chǎng)的數(shù)據(jù)處理同意”

AI 代理可以處理復(fù)雜性，但前提是你明確了需求。

反思問題

?? 你目前對(duì) AI 編碼代理的最大挫折是什么？

?? 你如何將分子指令原則應(yīng)用到當(dāng)前項(xiàng)目？

?? 什么樣的文檔系統(tǒng)能為你的 AI 代理提供所需上下文？

?? 這10個(gè)步驟中哪一個(gè)會(huì)對(duì)你的開發(fā)工作流產(chǎn)生最大影響？

你的下一步

準(zhǔn)備好改變你的 AI 開發(fā)工作流了嗎？這是你的行動(dòng)計(jì)劃：

• 從原子思維開始：選擇一個(gè)復(fù)雜功能，分解成分子組件
• 創(chuàng)建你的文檔系統(tǒng)：設(shè)置 COMPONENTS.md、DECISIONS.md 和 PATTERNS.md 文件
• 練習(xí)上下文驅(qū)動(dòng)的提示：始終在 AI 請(qǐng)求中引用現(xiàn)有文件
• 實(shí)施截圖驅(qū)動(dòng)的開發(fā)：為你的下一個(gè) UI 組件使用視覺參考
• 建立你的提交紀(jì)律：版本控制成為你的信心基礎(chǔ)
• 選擇你的 AI 代理?xiàng)＃焊鶕?jù)需要實(shí)驗(yàn) Claude Code、Cursor 或 Cline

最重要的一步：不要等待完美的方法論。今天從一個(gè)技術(shù)開始，逐步構(gòu)建。