一個(gè)Mastodon網(wǎng)頁(yè)客戶端從零到可用，需要多久？開(kāi)發(fā)者@fh332393900的答案快得驚人——而且大部分代碼是和AI結(jié)對(duì)寫(xiě)出來(lái)的。這不是簡(jiǎn)單的CRUD頁(yè)面，而是包含富文本編輯器、聯(lián)邦搜索、多語(yǔ)言UI的完整產(chǎn)品。更關(guān)鍵的是，他摸索出了一套讓AI真正處理復(fù)雜工程問(wèn)題的提示模式。

項(xiàng)目已開(kāi)源，預(yù)覽版跑在Vercel上。核心技術(shù)棧是React，AI主力用的是GPT-5.2-Codex。但比工具選擇更值得看的，是怎么用提示把AI從"代碼生成器"變成"架構(gòu)協(xié)作者"。

富文本編輯器：最復(fù)雜的UI表面

Mastodon的編輯器必須同時(shí)滿足兩件事：用戶體驗(yàn)要像原生應(yīng)用，輸出格式必須兼容后端——@user、#tag、:emoji: 這些標(biāo)記不能亂。AI在這里的價(jià)值不是一次性生成完美代碼，而是幫開(kāi)發(fā)者在重構(gòu)時(shí)守住行為邊界。

一個(gè)典型提示："替換編輯器實(shí)現(xiàn)，但保留mention/hashtag/emoji的輸出格式。"結(jié)果：AI匹配了現(xiàn)有的序列化規(guī)則，后端兼容性沒(méi)被破壞。另一個(gè)針對(duì)交互細(xì)節(jié)的提示："添加工具欄，包含代碼塊、粗體、斜體三個(gè)按鈕，每個(gè)按鈕根據(jù)光標(biāo)位置高亮。"AI輸出了一套一致的UI狀態(tài)模型，通過(guò)editor.isActive(...)完成狀態(tài)綁定。

性能問(wèn)題同樣用提示拆解。"解釋輸入延遲的原因，然后提出改動(dòng)最小的修復(fù)方案。"AI的響應(yīng)聚焦在渲染優(yōu)先級(jí)上，沒(méi)有盲目重寫(xiě)組件——這是區(qū)分"有效AI編程"和"AI瞎寫(xiě)"的關(guān)鍵分水嶺。

React Query：異步數(shù)據(jù)流的腳手架

搜索、時(shí)間線、發(fā)現(xiàn)頁(yè)，這些功能背后是復(fù)雜的異步狀態(tài)管理。AI在這里的優(yōu)勢(shì)是快速生成hooks和query keys，且命名規(guī)范保持一致。開(kāi)發(fā)者不需要從零設(shè)計(jì)緩存策略的數(shù)據(jù)結(jié)構(gòu)，可以把精力放在業(yè)務(wù)邏輯上。

項(xiàng)目里AI的真正價(jià)值點(diǎn)被總結(jié)為三類(lèi)：結(jié)構(gòu)化重構(gòu)、復(fù)雜交互邏輯、架構(gòu)變更時(shí)維持行為一致性。這三項(xiàng)的共同點(diǎn)是——它們都是具體的工程問(wèn)題，而非"幫我寫(xiě)個(gè)登錄頁(yè)面"式的模糊需求。

提示模式：從生成代碼到解決問(wèn)題

這個(gè)案例揭示了一個(gè)反直覺(jué)的事實(shí)：AI編程的效率不取決于模型多強(qiáng)，取決于你問(wèn)得多具體。模糊的指令得到模糊的代碼，精確的工程問(wèn)題得到可維護(hù)的解決方案。當(dāng)AI被當(dāng)作"結(jié)對(duì)程序員"而非"代碼自動(dòng)補(bǔ)全"時(shí)，它才能處理真正有價(jià)值的開(kāi)發(fā)工作。

聯(lián)邦搜索、emoji處理、代碼塊渲染、多語(yǔ)言切換——這些功能在一個(gè)Mastodon客戶端里全部跑通。開(kāi)發(fā)者留下的GitHub倉(cāng)庫(kù)和在線預(yù)覽，成了驗(yàn)證這套方法論的最佳證據(jù)。