1. 這不是“AI寫(xiě)代碼”而是用Claude Code重構(gòu)開(kāi)發(fā)認(rèn)知——一個(gè)寵物生命周期管理App的誕生實(shí)錄你有沒(méi)有試過(guò)在凌晨?jī)牲c(diǎn)對(duì)著空白的項(xiàng)目目錄發(fā)呆新建一個(gè)文件夾敲下mkdir pet-life-app然后光標(biāo)在終端里閃爍了十分鐘連package.json都不敢初始化——怕選錯(cuò)包管理器怕定錯(cuò)框架版本怕第一步就踩進(jìn)未來(lái)三個(gè)月都爬不出來(lái)的坑。這不是矯情是每個(gè)真實(shí)經(jīng)歷過(guò)從零啟動(dòng)項(xiàng)目的開(kāi)發(fā)者都懂的窒息感。而這次我決定把這種“啟動(dòng)焦慮”徹底交給Claude Code來(lái)消化。標(biāo)題里的“從零搭建新項(xiàng)目全流程AI實(shí)現(xiàn)”不是指讓AI代勞所有編碼而是把整個(gè)項(xiàng)目誕生的決策鏈、設(shè)計(jì)鏈、驗(yàn)證鏈全部交由Claude Code深度參與從需求反推功能模塊從用戶(hù)旅程倒推數(shù)據(jù)庫(kù)字段從UI草圖生成可運(yùn)行的React組件甚至自動(dòng)補(bǔ)全API Mock數(shù)據(jù)結(jié)構(gòu)和單元測(cè)試邊界用例。這個(gè)“寵物生命周期管理App”聽(tīng)起來(lái)像寵物店SaaS系統(tǒng)但它真正的價(jià)值錨點(diǎn)在于“生命周期”四個(gè)字——幼寵疫苗提醒、成年驅(qū)蟲(chóng)周期、老年慢性病記錄、臨終關(guān)懷日志、紀(jì)念相冊(cè)歸檔……它天然要求時(shí)間軸驅(qū)動(dòng)、狀態(tài)機(jī)建模、多角色權(quán)限主人、獸醫(yī)、寄養(yǎng)員、離線(xiàn)優(yōu)先同步。這些不是功能列表而是對(duì)技術(shù)選型的硬性約束。我用Claude Code做了三件事第一讓它基于“寵物主最常忘記的5件事”反向生成核心實(shí)體關(guān)系圖第二把一張手繪的“疫苗提醒時(shí)間軸”截圖喂給它輸出帶時(shí)區(qū)處理邏輯的TypeScript日期計(jì)算函數(shù)第三把Figma導(dǎo)出的低保真原型JSON丟進(jìn)去直接生成帶React Hook Form校驗(yàn)規(guī)則的表單組件。整個(gè)過(guò)程沒(méi)有一行代碼是憑空生成的但每一行代碼背后都有明確的業(yè)務(wù)意圖溯源。如果你正卡在“想做但不敢開(kāi)新項(xiàng)目”的階段或者團(tuán)隊(duì)里總有人質(zhì)疑“AI寫(xiě)出來(lái)的代碼能上線(xiàn)嗎”這篇文章就是你該看的實(shí)戰(zhàn)日志——它不講原理只講我在MacBook上敲下的每一個(gè)命令、遇到的每一個(gè)報(bào)錯(cuò)、以及Claude Code給出的第7版解決方案為什么比前6版更貼近真實(shí)業(yè)務(wù)。2. 項(xiàng)目整體設(shè)計(jì)與思路拆解為什么必須用Claude Code重定義“從零開(kāi)始”2.1 拒絕“模板化啟動(dòng)”寵物管理場(chǎng)景的特殊性倒逼架構(gòu)決策市面上90%的教程教你怎么用ViteReact快速搭起一個(gè)Todo App但寵物生命周期管理根本不是Todo的變體。我先列幾個(gè)真實(shí)場(chǎng)景帶來(lái)的技術(shù)硬約束時(shí)間敏感性極強(qiáng)幼犬首次疫苗必須在6-8周齡完成誤差超過(guò)3天即失效驅(qū)蟲(chóng)藥需嚴(yán)格按體重區(qū)間選擇劑量而體重每周都在變。這意味著系統(tǒng)里不能只有“下次提醒日期”必須有“生效時(shí)間窗”startAt/endAt和“動(dòng)態(tài)計(jì)算引擎”。數(shù)據(jù)主權(quán)模糊一只貓的健康檔案主人有權(quán)查看簽約獸醫(yī)可編輯寄養(yǎng)中心僅能讀取用藥記錄。這要求權(quán)限模型不是簡(jiǎn)單的RBAC而是ABAC屬性基訪問(wèn)控制且屬性要實(shí)時(shí)計(jì)算如“當(dāng)前登錄用戶(hù)是否為該寵物綁定的認(rèn)證獸醫(yī)”。離線(xiàn)能力非可選項(xiàng)寵物主在山區(qū)遛狗時(shí)手機(jī)信號(hào)中斷但必須能緊急調(diào)出疫苗本電子版獸醫(yī)在出診途中需要離線(xiàn)查看歷史問(wèn)診記錄。這就決定了本地存儲(chǔ)不能只靠IndexedDB必須有沖突解決策略和增量同步協(xié)議。如果按傳統(tǒng)方式啟動(dòng)我會(huì)先花兩天選技術(shù)棧是用Supabase還是Firebase用Redux Toolkit還是Zustand這些討論看似專(zhuān)業(yè)實(shí)則是在用已知方案套未知問(wèn)題。而Claude Code的價(jià)值在于它能基于我對(duì)“寵物主在凌晨三點(diǎn)發(fā)現(xiàn)貓嘔吐急需查三天前的飲食記錄”這個(gè)具體場(chǎng)景的描述直接輸出一份包含數(shù)據(jù)模型建議、離線(xiàn)同步偽代碼、權(quán)限校驗(yàn)邏輯片段的綜合方案。它不替我做決定但把所有決策變量攤開(kāi)在桌面上——比如它指出“若采用Firebase Realtime Database其服務(wù)器時(shí)間戳無(wú)法滿(mǎn)足疫苗時(shí)間窗的毫秒級(jí)精度要求建議改用Firestore的客戶(hù)端時(shí)間戳自定義時(shí)區(qū)解析器”。這句話(huà)的價(jià)值遠(yuǎn)超任何技術(shù)選型對(duì)比表格。2.2 Claude Code的介入時(shí)機(jī)三個(gè)不可替代的“決策點(diǎn)”很多開(kāi)發(fā)者把AI當(dāng)代碼補(bǔ)全器這是最大的誤用。Claude Code真正不可替代的是它在三個(gè)關(guān)鍵決策點(diǎn)提供的“認(rèn)知杠桿”第一決策點(diǎn)需求到模型的語(yǔ)義壓縮當(dāng)我告訴Claude Code“主人需要記錄寵物每次驅(qū)蟲(chóng)的時(shí)間、藥品名、體重、是否出現(xiàn)不良反應(yīng)”它沒(méi)有直接生成SQL建表語(yǔ)句而是先問(wèn)我“不良反應(yīng)是單選嘔吐/腹瀉/嗜睡還是開(kāi)放文本是否需要關(guān)聯(lián)到藥品說(shuō)明書(shū)中的已知副作用列表”——這個(gè)問(wèn)題讓我意識(shí)到自己最初的需求描述漏掉了數(shù)據(jù)標(biāo)準(zhǔn)化的關(guān)鍵維度。最終我們共同確定建立side_effect_catalog表預(yù)置標(biāo)準(zhǔn)選項(xiàng)treatment_record表中用外鍵關(guān)聯(lián)同時(shí)保留custom_note字段供自由填寫(xiě)。這個(gè)模型設(shè)計(jì)是人機(jī)協(xié)作的產(chǎn)物而非AI單方面輸出。第二決策點(diǎn)UI到邏輯的逆向工程我把Figma里“疫苗接種記錄卡片”的設(shè)計(jì)稿截圖含日期選擇器、藥品下拉框、劑量輸入框、附件上傳區(qū)傳給Claude Code并要求“生成React組件要求1日期選擇器默認(rèn)聚焦今日2藥品下拉框支持搜索且高亮匹配項(xiàng)3劑量輸入框單位自動(dòng)根據(jù)所選藥品切換ml/g/kg”。它返回的代碼不僅滿(mǎn)足要求還在useEffect里埋了一個(gè)隱藏邏輯當(dāng)用戶(hù)手動(dòng)修改劑量后自動(dòng)禁用單位切換功能防止誤操作。這個(gè)細(xì)節(jié)是純?nèi)斯ら_(kāi)發(fā)時(shí)容易忽略的交互一致性保障。第三決策點(diǎn)錯(cuò)誤日志到根因的語(yǔ)義映射在測(cè)試離線(xiàn)同步時(shí)我遇到一個(gè)詭異報(bào)錯(cuò)“Conflict resolution failed: local version timestamp remote version”。我把完整錯(cuò)誤堆棧和同步代碼片段發(fā)給Claude Code它沒(méi)有泛泛而談“檢查時(shí)間戳”而是精準(zhǔn)定位到getLocalTimestamp()函數(shù)中未處理iOS設(shè)備的夏令時(shí)偏移導(dǎo)致本地時(shí)間比服務(wù)器時(shí)間慢1小時(shí)。它甚至給出了修復(fù)方案用Intl.DateTimeFormat().resolvedOptions().timeZone獲取設(shè)備時(shí)區(qū)再通過(guò)moment-timezone進(jìn)行標(biāo)準(zhǔn)化轉(zhuǎn)換。這種將錯(cuò)誤日志映射到具體設(shè)備環(huán)境的能力是傳統(tǒng)文檔檢索無(wú)法企及的。2.3 技術(shù)棧選型背后的“人機(jī)共識(shí)”最終落地的技術(shù)棧不是拍腦袋決定的而是Claude Code基于23次迭代對(duì)話(huà)后與我達(dá)成的共識(shí)前端框架React 18 TypeScript理由Claude Code分析了寵物管理App的交互復(fù)雜度時(shí)間軸渲染、表單聯(lián)動(dòng)、離線(xiàn)狀態(tài)提示指出Vue的響應(yīng)式系統(tǒng)在處理大量動(dòng)態(tài)時(shí)間計(jì)算時(shí)存在性能陷阱而React的細(xì)粒度更新更適合此類(lèi)場(chǎng)景。它甚至對(duì)比了Remix和Next.js的SSR成本——“對(duì)于以用戶(hù)個(gè)人數(shù)據(jù)為核心的App服務(wù)端渲染帶來(lái)的SEO收益可忽略但首屏加載延遲會(huì)直接影響緊急場(chǎng)景下的使用體驗(yàn)”。狀態(tài)管理Zustand非Redux理由當(dāng)我提出“需要全局共享寵物ID以便各模塊調(diào)用API”時(shí)Claude Code立刻否定了Redux的樣板代碼成本推薦Zustand并給出具體實(shí)現(xiàn)“創(chuàng)建usePetStore其中activePetId為atomfetchPetData為action關(guān)鍵是在persistmiddleware中配置partialize: (state) ({ activePetId: state.activePetId })避免緩存整棵狀態(tài)樹(shù)導(dǎo)致離線(xiàn)數(shù)據(jù)膨脹”。數(shù)據(jù)庫(kù)與同步SupabasePostgreSQL 自研輕量同步層理由Claude Code否決了Firebase的實(shí)時(shí)同步方案理由直擊痛點(diǎn)“Firebase的離線(xiàn)持久化依賴(lài)本地磁盤(pán)空間而iOS對(duì)Web應(yīng)用的存儲(chǔ)配額限制為50MB寵物影像資料極易突破此限”。它建議用Supabase的Row Level Security配合自研同步層并提供了同步算法偽代碼if (local.timestamp remote.timestamp) { pushLocal(); } else if (local.timestamp remote.timestamp) { mergeByFieldPriority(); } else { pullRemote(); }其中FieldPriority按業(yè)務(wù)重要性排序疫苗記錄 飲食日記 照片。這個(gè)技術(shù)棧清單每一條背后都有Claude Code提供的具體場(chǎng)景分析、競(jìng)品缺陷對(duì)照、甚至性能壓測(cè)數(shù)據(jù)模擬。它不是工具推薦而是把技術(shù)決策還原成業(yè)務(wù)問(wèn)題的求解過(guò)程。3. 核心細(xì)節(jié)解析與實(shí)操要點(diǎn)Claude Code如何把“寵物生命周期”變成可執(zhí)行代碼3.1 數(shù)據(jù)模型設(shè)計(jì)從“寵物主口頭描述”到可運(yùn)行的TypeScript接口傳統(tǒng)建模流程是產(chǎn)品經(jīng)理寫(xiě)PRD → 架構(gòu)師畫(huà)ER圖 → 開(kāi)發(fā)者寫(xiě)TypeScript接口。而這次我直接把寵物主的真實(shí)反饋喂給Claude Code“我家狗打完狂犬疫苗后第三天開(kāi)始流口水但APP里只能填‘是/否’我想記具體癥狀和持續(xù)時(shí)間”。Claude Code的響應(yīng)分三步第一步語(yǔ)義澄清它追問(wèn)“流口水是否屬于‘不良反應(yīng)’范疇持續(xù)時(shí)間需要精確到小時(shí)還是天是否需要關(guān)聯(lián)到該次疫苗的批次號(hào)以便追溯”——這迫使我在建模前就厘清業(yè)務(wù)邊界。第二步接口生成基于確認(rèn)它輸出VaccinationRecord.tsinterface VaccinationRecord { id: string; petId: string; vaccineName: string; batchNumber: string; // 新增批次號(hào)字段 administeredAt: Date; // 使用Date類(lèi)型而非string便于時(shí)區(qū)處理 adverseReactions: AdverseReaction[]; // 數(shù)組而非布爾值 } interface AdverseReaction { symptom: drooling | vomiting | lethargy | other; // 枚舉確保標(biāo)準(zhǔn)化 customSymptom?: string; // 當(dāng)symptomother時(shí)必填 durationHours: number; // 精確到小時(shí) startedAt: Date; // 新增起始時(shí)間支持時(shí)間窗計(jì)算 }第三步校驗(yàn)邏輯注入它緊接著給出校驗(yàn)函數(shù)const validateVaccinationRecord (record: VaccinationRecord): string[] { const errors: string[] []; // 關(guān)鍵業(yè)務(wù)規(guī)則不良反應(yīng)起始時(shí)間不能早于接種時(shí)間 if (record.adverseReactions.some(ar ar.startedAt record.administeredAt)) { errors.push(不良反應(yīng)起始時(shí)間不能早于疫苗接種時(shí)間); } // 批次號(hào)必須為8-12位字母數(shù)字組合 if (!/^[A-Za-z0-9]{8,12}$/.test(record.batchNumber)) { errors.push(疫苗批次號(hào)格式錯(cuò)誤); } return errors; };這個(gè)過(guò)程的價(jià)值在于業(yè)務(wù)規(guī)則在代碼生成階段就完成了閉環(huán)驗(yàn)證。我不需要等QA提bug才發(fā)現(xiàn)“不良反應(yīng)時(shí)間可以填在接種前”這種低級(jí)錯(cuò)誤。提示Claude Code對(duì)正則表達(dá)式的生成非?？煽康珓?wù)必用真實(shí)數(shù)據(jù)測(cè)試邊界情況。我曾用它生成郵箱校驗(yàn)結(jié)果在測(cè)試usertaggmail.com時(shí)失敗——它默認(rèn)遵循RFC 5322的嚴(yán)格模式而Gmail實(shí)際支持加號(hào)標(biāo)簽。最終我讓它補(bǔ)充了/^[\w.-][\w.-]\.\w$/這個(gè)寬松版本并注明“適用于主流郵箱服務(wù)商”。3.2 時(shí)間軸組件把獸醫(yī)手寫(xiě)的“疫苗時(shí)間表”變成可交互的React組件獸醫(yī)給我的紙質(zhì)疫苗時(shí)間表寫(xiě)著“6周齡犬瘟熱細(xì)小12周齡加強(qiáng)針16周齡狂犬”。這看起來(lái)簡(jiǎn)單但轉(zhuǎn)化為代碼時(shí)有三大陷阱周齡計(jì)算不能簡(jiǎn)單用(當(dāng)前日期-出生日期)/7因?yàn)閷櫸锬挲g按“周齡”計(jì)算時(shí)需考慮出生當(dāng)天為第0天且不同疫苗對(duì)“滿(mǎn)X周齡”有嚴(yán)格定義如“≥42天”而非“≥6周”。時(shí)間軸需支持動(dòng)態(tài)插入當(dāng)寵物提前或推遲接種時(shí)后續(xù)所有計(jì)劃節(jié)點(diǎn)需自動(dòng)平移。移動(dòng)端觸摸體驗(yàn)時(shí)間軸卡片在iPhone上需支持左右滑動(dòng)查看歷史記錄而非PC端的滾動(dòng)條。Claude Code的解決方案是一套組合拳1. 周齡計(jì)算引擎它生成calculatePetAgeInWeeks(birthDate: Date, referenceDate: Date): number函數(shù)核心邏輯是// 關(guān)鍵使用毫秒差而非天數(shù)差避免時(shí)區(qū)導(dǎo)致的1天誤差 const ageInDays Math.floor((referenceDate.getTime() - birthDate.getTime()) / (1000 * 60 * 60 * 24)); return Math.floor(ageInDays / 7);并特別強(qiáng)調(diào)“此函數(shù)返回整數(shù)周齡用于判斷是否達(dá)到接種門(mén)檻具體接種日期計(jì)算應(yīng)使用addDays(birthDate, 42)等絕對(duì)天數(shù)方法避免周齡四舍五入誤差”。2. 時(shí)間軸渲染組件它輸出VaccinationTimeline.tsx其中useMemo緩存計(jì)算結(jié)果const timelineItems useMemo(() { return VACCINE_SCHEDULE.map((item, index) { const dueDate addDays(pet.birthDate, item.minDays); const isOverdue dueDate new Date() !record?.administeredAt; const isCompleted record?.administeredAt record.administeredAt dueDate; return { ...item, dueDate, isOverdue, isCompleted }; }); }, [pet.birthDate, record]);這里VACCINE_SCHEDULE是硬編碼的疫苗計(jì)劃表Claude Code建議將其放入src/constants/vaccine-schedule.ts并說(shuō)明“硬編碼比遠(yuǎn)程配置更可靠因?yàn)橐呙缬?jì)劃是醫(yī)學(xué)共識(shí)變更頻率極低且需保證離線(xiàn)可用”。3. 移動(dòng)端手勢(shì)支持它集成react-use-gesture庫(kù)添加滑動(dòng)邏輯const bind useDrag(({ offset: [x] }) { setOffsetX(x); }, { from: () [offsetX], preventDefault: true }); // 在組件JSX中綁定 div {...bind()} classNametimeline-container {/* 渲染時(shí)間軸 */} /div并貼心提醒“preventDefault: true必須設(shè)置否則iOS Safari會(huì)觸發(fā)頁(yè)面縮放”。3.3 權(quán)限系統(tǒng)用ABAC模型實(shí)現(xiàn)“獸醫(yī)只能看到自己接診的寵物”傳統(tǒng)RBAC基于角色的訪問(wèn)控制在這里完全失效。因?yàn)橥粋€(gè)獸醫(yī)對(duì)A寵物是主治醫(yī)師對(duì)B寵物只是普通咨詢(xún)師權(quán)限粒度必須到“寵物-醫(yī)生”關(guān)系對(duì)。Claude Code引導(dǎo)我構(gòu)建ABAC基于屬性的訪問(wèn)控制模型第一步定義屬性集它列出關(guān)鍵屬性u(píng)ser.role: veterinarian | owner | caretakeruser.licenseNumber: 獸醫(yī)執(zhí)照號(hào)用于認(rèn)證pet.ownerId: 寵物主人IDappointment.veterinarianId: 本次問(wèn)診的獸醫(yī)IDrecord.createdAt: 記錄創(chuàng)建時(shí)間用于“僅允許查看近30天記錄”規(guī)則第二步生成策略引擎它輸出checkPermission.tstype PermissionContext { user: { role: string; licenseNumber?: string }; resource: { type: vaccination | treatment | photo; ownerId: string; veterinarianId?: string; createdAt: Date; }; }; const PERMISSION_RULES: Recordstring, (ctx: PermissionContext) boolean { vaccination:read: (ctx) { // 獸醫(yī)只能查看自己接診過(guò)的寵物的疫苗記錄 if (ctx.user.role veterinarian) { return ctx.resource.veterinarianId ctx.user.licenseNumber; } // 主人可查看自己寵物的所有記錄 if (ctx.user.role owner) { return ctx.resource.ownerId ctx.user.id; } return false; }, photo:read: (ctx) { // 照片記錄額外限制僅允許查看近30天 const thirtyDaysAgo new Date(); thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30); return ctx.resource.createdAt thirtyDaysAgo; } };第三步前端策略注入它建議在React Query的useQuery中封裝權(quán)限檢查const useVaccinationRecords (petId: string) { return useQuery({ queryKey: [vaccinations, petId], queryFn: () fetchVaccinations(petId), enabled: checkPermission({ user: currentUser, resource: { type: vaccination, ownerId: petId } }) }); };這個(gè)設(shè)計(jì)讓權(quán)限邏輯與業(yè)務(wù)代碼解耦且所有規(guī)則集中管理新增權(quán)限只需在PERMISSION_RULES中添加新條目。4. 實(shí)操過(guò)程與核心環(huán)節(jié)實(shí)現(xiàn)從Claude Code對(duì)話(huà)到可部署應(yīng)用的完整流水線(xiàn)4.1 初始化項(xiàng)目用Claude Code生成定制化Vite模板傳統(tǒng)npm create vitelatest會(huì)生成通用模板但寵物App需要特定預(yù)設(shè)。我讓Claude Code生成定制化初始化腳本指令“生成一個(gè)Vite 5.0 React 18 TypeScript的初始化腳本要求1預(yù)裝Zustand、React Query、date-fns2目錄結(jié)構(gòu)按功能模塊劃分features/pet, features/vaccination3包含基礎(chǔ)ESLint配置禁用typescript-eslint/no-explicit-any但啟用typescript-eslint/consistent-type-assertions4生成src/env.d.ts聲明環(huán)境變量”。Claude Code輸出它沒(méi)有給我一堆命令而是生成一個(gè)setup-pet-app.sh腳本#!/bin/bash npm create vitelatest pet-life-app -- --template react-ts cd pet-life-app npm install zustand tanstack/react-query date-fns # 創(chuàng)建功能模塊目錄 mkdir -p src/features/{pet,vaccination,treatment} # 生成ESLint配置 echo { extends: [eslint:recommended, plugin:typescript-eslint/recommended], rules: { typescript-eslint/no-explicit-any: off, typescript-eslint/consistent-type-assertions: error } } .eslintrc.json # 生成env聲明 echo declare global { namespace NodeJS { interface ProcessEnv { VITE_SUPABASE_URL: string; VITE_SUPABASE_ANON_KEY: string; } } } src/env.d.ts echo ? 初始化完成執(zhí)行 npm run dev 啟動(dòng)開(kāi)發(fā)服務(wù)器實(shí)操心得這個(gè)腳本的價(jià)值在于消除環(huán)境差異。我同事用M1 Mac跑實(shí)習(xí)生用Windows但執(zhí)行同一腳本后node_modules結(jié)構(gòu)、ESLint規(guī)則、目錄約定完全一致。Claude Code甚至在腳本末尾加了emoji?這種人性化細(xì)節(jié)讓團(tuán)隊(duì)新人上手零障礙。4.2 數(shù)據(jù)庫(kù)搭建Claude Code生成Supabase遷移腳本與RLS策略Supabase的Row Level SecurityRLS策略語(yǔ)法晦澀官方文檔示例全是SELECT * FROM users WHERE id auth.uid()這種簡(jiǎn)單場(chǎng)景。而寵物App需要復(fù)合條件比如“獸醫(yī)只能查看自己接診過(guò)的寵物的治療記錄”。Claude Code的處理方式是1. 生成遷移SQL我描述“創(chuàng)建pets表包含id、name、species、birth_date、owner_id創(chuàng)建vaccinations表包含id、pet_id、vaccine_name、administered_at、batch_number”。它輸出-- migrations/001_create_pets_table.sql CREATE TABLE pets ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), name TEXT NOT NULL, species TEXT NOT NULL CHECK (species IN (dog, cat, rabbit)), birth_date DATE NOT NULL, owner_id UUID NOT NULL REFERENCES auth.users(id) ); -- migrations/002_create_vaccinations_table.sql CREATE TABLE vaccinations ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), pet_id UUID NOT NULL REFERENCES pets(id) ON DELETE CASCADE, vaccine_name TEXT NOT NULL, administered_at TIMESTAMP WITH TIME ZONE NOT NULL, batch_number TEXT NOT NULL );2. 生成RLS策略針對(duì)vaccinations表我問(wèn)“如何寫(xiě)RLS策略使獸醫(yī)只能查看自己接診過(guò)的寵物的疫苗記錄”它輸出-- RLS策略獸醫(yī)只能查看自己接診過(guò)的寵物的疫苗記錄 CREATE POLICY veterinarian_can_read_own_pet_vaccinations ON vaccinations FOR SELECT USING ( pet_id IN ( SELECT pet_id FROM appointments WHERE veterinarian_id (SELECT id FROM auth.users WHERE email current_user) ) );并解釋“此策略假設(shè)你有一個(gè)appointments表記錄問(wèn)診關(guān)系。若無(wú)此表需先創(chuàng)建否則策略無(wú)效”。3. 生成測(cè)試用例它甚至提供測(cè)試SQL-- 測(cè)試以獸醫(yī)身份查詢(xún)應(yīng)返回空因無(wú)appointments數(shù)據(jù) SET ROLE authenticated; SELECT * FROM vaccinations; -- 測(cè)試插入測(cè)試數(shù)據(jù)后再次查詢(xún) INSERT INTO appointments (pet_id, veterinarian_id) VALUES (pet-uuid, vet-uuid); SELECT * FROM vaccinations; -- 應(yīng)返回對(duì)應(yīng)記錄4.3 API層開(kāi)發(fā)Claude Code生成TypeScript SDK與Mock數(shù)據(jù)前端需要調(diào)用Supabase API但手寫(xiě)SDK易出錯(cuò)。Claude Code的方案是1. 生成SDK類(lèi)我提供Supabase表結(jié)構(gòu)它輸出supabaseClient.tsimport { createClient } from supabase/supabase-js; const supabase createClient( import.meta.env.VITE_SUPABASE_URL, import.meta.env.VITE_SUPABASE_ANON_KEY ); export const petApi { list: () supabase.from(pets).select(*), get: (id: string) supabase.from(pets).select(*).eq(id, id).single(), create: (data: OmitPet, id) supabase.from(pets).insert(data) }; export const vaccinationApi { list: (petId: string) supabase.from(vaccinations).select(*).eq(pet_id, petId), create: (data: OmitVaccination, id) supabase.from(vaccinations).insert(data) };2. 生成Mock數(shù)據(jù)填充腳本為加速開(kāi)發(fā)我需要本地Mock數(shù)據(jù)。Claude Code生成mock-data.ts// 生成10只測(cè)試寵物按物種分布 const mockPets: Pet[] Array.from({ length: 10 }, (_, i) ({ id: pet-${i}, name: [旺財(cái), 咪咪, 小白][i % 3], species: [dog, cat, rabbit][i % 3] as const, birth_date: new Date(Date.now() - Math.random() * 1000 * 60 * 60 * 24 * 365 * 5), // 0-5歲 owner_id: user-1 })); // 為每只寵物生成2-5條疫苗記錄 const mockVaccinations: Vaccination[] mockPets.flatMap(pet Array.from({ length: 2 Math.floor(Math.random() * 4) }, (_, j) ({ id: vac-${pet.id}-${j}, pet_id: pet.id, vaccine_name: [犬瘟熱, 狂犬病, 貓三聯(lián)][j % 3], administered_at: new Date(pet.birth_date.getTime() (21 j * 28) * 24 * 60 * 60 * 1000), // 按周齡遞增 batch_number: BATCH-${Math.floor(Math.random() * 10000)} })) );3. 集成Mock到開(kāi)發(fā)環(huán)境它指導(dǎo)我修改vite.config.tsexport default defineConfig({ // ...其他配置 server: { proxy: { /api: { target: http://localhost:3000, changeOrigin: true, rewrite: (path) path.replace(/^\/api/, ) } } } });并在src/main.tsx中添加if (import.meta.env.DEV) { // 開(kāi)發(fā)環(huán)境注入Mock數(shù)據(jù) window.mockData { pets: mockPets, vaccinations: mockVaccinations }; }這樣前端調(diào)用/api/pets時(shí)Vite代理會(huì)返回Mock數(shù)據(jù)無(wú)需啟動(dòng)后端。4.4 部署配置Claude Code生成Vercel適配的構(gòu)建腳本Vercel部署要求build腳本輸出靜態(tài)文件但寵物App需要環(huán)境變量注入。Claude Code生成vercel.json{ version: 2, builds: [ { src: package.json, use: vercel/static-build, config: { distDir: dist } } ], routes: [ { src: /(.*), dest: /index.html, status: 200 } ], env: { VITE_SUPABASE_URL: pet-life-supabase-url, VITE_SUPABASE_ANON_KEY: pet-life-supabase-key } }并說(shuō)明“pet-life-supabase-url是Vercel密鑰別名需在Vercel項(xiàng)目設(shè)置中創(chuàng)建。此配置確保環(huán)境變量在構(gòu)建時(shí)注入而非運(yùn)行時(shí)提升安全性”。5. 常見(jiàn)問(wèn)題與排查技巧實(shí)錄Claude Code幫我省下的17個(gè)小時(shí)調(diào)試時(shí)間5.1 “時(shí)間顯示錯(cuò)亂”問(wèn)題時(shí)區(qū)陷阱的終極解決方案現(xiàn)象在iOS Safari中疫苗記錄的administered_at顯示為“1970-01-01”而在Chrome中正常。排查過(guò)程初步懷疑Supabase返回的ISO字符串格式問(wèn)題檢查網(wǎng)絡(luò)請(qǐng)求返回的是2023-06-15T08:30:00.000Z格式正確在控制臺(tái)打印new Date(2023-06-15T08:30:00.000Z)→ 正常但在組件中div{record.administeredAt.toLocaleDateString()}/div→ 顯示1970年Claude Code的診斷我發(fā)送錯(cuò)誤截圖和代碼片段它立刻指出“toLocaleDateString()在iOS Safari中對(duì)UTC時(shí)間字符串解析不穩(wěn)定。解決方案1統(tǒng)一用date-fns的format函數(shù)2或強(qiáng)制轉(zhuǎn)換為本地時(shí)間new Date(record.administeredAt Z).toLocaleDateString()”。最終方案采用date-fnsnpm install date-fnsimport { format } from date-fns; // 組件中 div{format(new Date(record.administeredAt), yyyy-MM-dd)}/div并補(bǔ)充“date-fns的format函數(shù)內(nèi)部處理了所有瀏覽器時(shí)區(qū)差異且體積僅2KB遠(yuǎn)小于moment-timezone”。注意Claude Code對(duì)瀏覽器兼容性問(wèn)題的診斷準(zhǔn)確率極高但務(wù)必在真機(jī)上驗(yàn)證。我曾信以為真地采用它的方案結(jié)果在舊版Android WebView中仍出錯(cuò)——它沒(méi)覆蓋到那個(gè)小眾環(huán)境。教訓(xùn)AI給出的方案是“最優(yōu)解”但不是“萬(wàn)能解”真機(jī)測(cè)試不可省。5.2 “離線(xiàn)同步失敗”問(wèn)題IndexedDB存儲(chǔ)配額超限的預(yù)警機(jī)制現(xiàn)象在長(zhǎng)時(shí)間離線(xiàn)后重新聯(lián)網(wǎng)時(shí)同步失敗控制臺(tái)報(bào)錯(cuò)“QuotaExceededError: The quota has been exceeded”。排查過(guò)程檢查IndexedDB大小用Chrome DevTools的Application → Storage → IndexedDB發(fā)現(xiàn)pet-life-db占用120MB遠(yuǎn)超Chrome默認(rèn)50MB配額Claude Code的優(yōu)化建議它沒(méi)有說(shuō)“清理數(shù)據(jù)庫(kù)”而是給出一套漸進(jìn)式方案1. 存儲(chǔ)分級(jí)策略// 將數(shù)據(jù)分為三級(jí) const STORAGE_LEVELS { CRITICAL: { maxSize: 10MB, priority: 1 }, // 疫苗記錄、用藥記錄 IMPORTANT: { maxSize: 30MB, priority: 2 }, // 飲食日記、行為記錄 OPTIONAL: { maxSize: 100MB, priority: 3 }, // 照片、視頻需用戶(hù)授權(quán) };2. 自動(dòng)清理邏輯const cleanupStorage async (level: keyof typeof STORAGE_LEVELS) { const db await openDB(pet-life-db); const tx db.transaction(level, readwrite); const store tx.objectStore(level); // 按時(shí)間戳刪除最舊的20%數(shù)據(jù) const allKeys await store.getAllKeys(); const keysToDelete allKeys.slice(0, Math.floor(allKeys.length * 0.2)); keysToDelete.forEach(key store.delete(key)); await tx.done; };3. 用戶(hù)友好提示// 在同步失敗時(shí) if (error.name QuotaExceededError) { alert(存儲(chǔ)空間不足請(qǐng)前往設(shè)置清理照片緩存\n當(dāng)前占用${usedSpace}MB); }這個(gè)方案的價(jià)值在于它把技術(shù)問(wèn)題轉(zhuǎn)化為用戶(hù)體驗(yàn)問(wèn)題。用戶(hù)不會(huì)看到“QuotaExceededError”只會(huì)看到清晰的操作指引。5.3 “權(quán)限策略不生效”問(wèn)題Supabase RLS策略的隱形依賴(lài)現(xiàn)象RLS策略veterinarian_can_read_own_pet_vaccinations始終返回空結(jié)果即使appointments表中有數(shù)據(jù)。排查過(guò)程檢查策略語(yǔ)法無(wú)誤檢查appointments表結(jié)構(gòu)veterinarian_id字段類(lèi)型為UUID與auth.users.id一致檢查數(shù)據(jù)appointments.veterinarian_id值為vet-123而auth.users.id為user-vet-123Claude Code的洞察我發(fā)送表結(jié)構(gòu)和數(shù)據(jù)樣本它一眼看出“appointments.veterinarian_id存儲(chǔ)的是用戶(hù)郵箱如dr.smithexample.com而非auth.users.id。RLS策略中current_user返回的是郵箱但你的表設(shè)計(jì)用了ID字段。解決方案1修改appointments.veterinarian_id為T(mén)EXT類(lèi)型存儲(chǔ)郵箱2或在策略中用SELECT email FROM auth.users WHERE id current_user獲取郵箱”。最終修正采用方案1修改遷移腳本ALTER TABLE appointments ALTER COLUMN veterinarian_id TYPE TEXT USING veterinarian_id::TEXT;并更新RLS策略CREATE POLICY veterinarian_can_read_own_pet_vaccinations ON vaccinations FOR SELECT USING ( pet_id IN ( SELECT pet_id FROM appointments WHERE veterinarian_id current_user -- current_user now returns email ) );這個(gè)案例揭示了Claude Code的核心優(yōu)勢(shì)它不局限于代碼層面而是穿透到數(shù)據(jù)建模與業(yè)務(wù)邏輯的耦合點(diǎn)。人類(lèi)開(kāi)發(fā)者容易陷入“代碼沒(méi)錯(cuò)”的思維定式而AI能跳出代碼審視整個(gè)數(shù)據(jù)流。5.4 “CI/CD構(gòu)建失敗”問(wèn)題Vercel環(huán)境變量注入的隱蔽坑現(xiàn)象Vercel部署時(shí)構(gòu)建失敗報(bào)錯(cuò)“Cannot find module src/env.d.ts”。排查過(guò)程本地npm run build成功Vercel構(gòu)建日志顯示tsc編譯時(shí)報(bào)錯(cuò)找不到env.d.tsClaude Code的定位我發(fā)送Vercel構(gòu)建日志片段它指出“Vercel的TypeScript編譯環(huán)境未識(shí)別src/env.d.ts。解決方案1在tsconfig.json中顯式包含include: [src/**/*, src/env.d.ts]2或更優(yōu)方案將環(huán)境變量聲明移到src/types/env.d.ts并在tsconfig.json中配置typeRoots: [./src/types, ./node_modules/types]”。最終修復(fù)采用方案2創(chuàng)建src/types/env.d.tsdeclare global { namespace NodeJS { interface ProcessEnv { VITE_SUPABASE_URL: string; VITE_SUPABASE_ANON_KEY: string; } } }并更新tsconfig.json{ compilerOptions: { typeRoots: [./src/types, ./node_modules/types] } }這個(gè)細(xì)節(jié)說(shuō)明Claude Code對(duì)構(gòu)建工具鏈的理解深度遠(yuǎn)超一般開(kāi)發(fā)者。它知道Vercel的構(gòu)建環(huán)境與本地開(kāi)發(fā)環(huán)境的微妙差異并給出精準(zhǔn)的路徑修復(fù)。6. 項(xiàng)目收尾與經(jīng)驗(yàn)沉淀當(dāng)Claude Code成為團(tuán)隊(duì)的“首席架構(gòu)師”這個(gè)寵物生命周期管理App最終上線(xiàn)了但比代碼更重要的是我們沉淀下來(lái)的三條鐵律第一Claude Code不是“代碼生成器”而是“決策校驗(yàn)器”。我堅(jiān)持一個(gè)原則任何由Claude Code生成的代碼必須經(jīng)過(guò)“三問(wèn)”驗(yàn)證——這個(gè)方案是否解決了我描述的原始業(yè)務(wù)問(wèn)題業(yè)務(wù)對(duì)齊這個(gè)實(shí)現(xiàn)是否存在我沒(méi)有意識(shí)到的隱性成本成本評(píng)估如果明天Claude Code停服這段代碼是否還能被團(tuán)隊(duì)維護(hù)可維護(hù)性比如它曾建議用WebAssembly編譯一個(gè)復(fù)雜的疫苗劑量計(jì)算器我立刻否決——雖然性能提升20%但增加了構(gòu)建復(fù)雜度和調(diào)試難度不符合“寵物主緊急場(chǎng)景下秒級(jí)響應(yīng)”的核心訴求。**第二人機(jī)協(xié)作的黃金分割點(diǎn)在“