很多人第一次接觸 Vibe Coding 時想象出來的畫面是這樣的打開一個對話框把想法打進去幾秒鐘后一個網(wǎng)站就自動出現(xiàn)了。但真正動手做過的人很快會遇到兩種反饋。一種是被 AI 生成頁面的速度驚艷到另一種則是在部署、樣式適配、代碼維護階段被各種意外問題勸退。于是“Vibe Coding 只能做玩具”“AI 寫的代碼沒法上線”這類評價成了技術(shù)社區(qū)里最常見的觀感。我的判斷不太一樣。Vibe Coding 的工程價值不在于“讓 AI 替代你寫代碼”而在于它把“想法到可見原型”的成本壓到了極低。真正拉開開發(fā)者之間差距的是你會不會把一個模糊的“我想要個有趣的個人網(wǎng)站”翻譯成 AI 可以逐條執(zhí)行的任務清單以及你在 AI 生成的代碼上有沒有做工程化的驗證、審查和回滾。這篇文章里我用一個具體到可以落地的“有趣個人網(wǎng)站”作為完整案例記錄從工具選型、需求拆解、提示詞編寫、代碼生成、本地驗證到最后部署上線的全過程。讀完你得到的不是一句“AI 真厲害”的空泛感慨而是一套你可以直接復用到個人網(wǎng)站、內(nèi)部工具和小型項目里的 Vibe Coding 工作流。1. Vibe Coding 到底改變了什么先說一個背景。Vibe Coding 這個詞在近一年的技術(shù)社區(qū)里出現(xiàn)頻率越來越高圍繞它的搜索熱詞也從一個純概念逐漸變成“vibe coding guide”“vercel ai vibe coding platform怎么使用”“鴻蒙vibe coding”這類非常具體的使用問題。這說明它已經(jīng)不是少數(shù)人嘗鮮的玩法而是開始進入真實開發(fā)流程的工具形態(tài)。Vibe Coding 的核心定義并不復雜通過自然語言描述你的意圖和約束由 AI 完成代碼生成、依賴說明、問題修復甚至結(jié)構(gòu)調(diào)整開發(fā)者更多時間花在“描述需求—運行驗證—反饋修復”的循環(huán)里。它是 AI 輔助編程從“補全一行”向“完成一個功能”演進的產(chǎn)物。如果把傳統(tǒng)編程和 Vibe Coding 放在一起對比差異會非常明顯維度傳統(tǒng)編程Vibe Coding技術(shù)選型人工查文檔、比較方案AI 根據(jù)場景推薦并生成配置需求表達需求文檔、接口定義、任務拆分自然語言描述與約束寫代碼逐行手寫AI 生成初稿人工審查修改調(diào)試方式日志、斷點、閱讀調(diào)用鏈把報錯信息交給 AI 分析維護成本代碼可讀性由人保證必須依賴代碼審查與測試兜底最大風險人力成本高開發(fā)周期長AI 可能生成“看似合理但邏輯錯誤”的代碼從這個對比里能得出一個關鍵判斷Vibe Coding 真正降低的是“從想法到原型”的轉(zhuǎn)化成本但它沒有消除“驗證和維護”的成本。恰恰相反因為 AI 生成代碼的速度快驗證和維護的壓力會集中到開發(fā)者身上。所以 Vibe Coding 適合什么場景不適合什么場景值得攤開說。適合的場景包括個人網(wǎng)站、內(nèi)容頁面、內(nèi)部工具、UI 原型、中小型應用的第一版實現(xiàn)。這些場景對“快速看到結(jié)果”的訴求遠大于對“復雜業(yè)務規(guī)則”的訴求。不太適合的場景則包括銀行級事務系統(tǒng)、權(quán)限模型復雜的后臺、需要極致性能的底層模塊以及所有“出一次錯就要付很大代價”的核心鏈路。當然如果代碼審查嚴格、測試覆蓋到位團隊也可以在更復雜的項目里用好它但那已經(jīng)是另一種玩法了。2. 為什么“有趣個人網(wǎng)站”是最好的入門項目第一次接觸 Vibe Coding 的開發(fā)者最容易犯的錯誤是選了一個超出能力范圍的項目比如一上來就做“帶用戶體系的電商后臺”。需求太復雜AI 生成的代碼會出現(xiàn)大量隱藏問題結(jié)果就是反復修 bug最后得出“Vibe Coding 不行”的結(jié)論。個人網(wǎng)站是相反的例子。它規(guī)模小、邊界清晰、可迭代而且發(fā)布鏈路簡單。即使某個功能實現(xiàn)得不夠好也不會造成嚴重損失。更重要的是個人網(wǎng)站天然允許“有趣”這個目標存在你可以把個人網(wǎng)站做成一個帶粒子動態(tài)背景的展示頁也可以放進打字機文字、鼠標跟隨、暗色模式切換等小交互。這些功能單獨拎出來都不難但組合在一起足以體現(xiàn) Vibe Coding 在“快速實現(xiàn)視覺與交互創(chuàng)意”上的優(yōu)勢?！坝腥ぁ边@個詞在需求層面其實很模糊。如果你直接跟 AI 說“做一個有趣的個人網(wǎng)站”它大概率會給你一個通用模板。所以在進入提示詞環(huán)節(jié)之前需要先把“有趣”拆成具體的技術(shù)點。一個個人網(wǎng)站通常可以從這些維度定義“有趣”視覺層粒子背景、漸變光暈、毛玻璃卡片、動態(tài)網(wǎng)格。文字層打字機效果、滾動漸入、關鍵詞高亮。交互層鼠標跟隨、卡片翻轉(zhuǎn)、點擊漣漪、滾動進度條。內(nèi)容層用個人經(jīng)歷、作品集、簽名文案制造記憶點。我個人更推薦從“打字機效果 粒子背景 項目卡片 社交入口”這組組合起步。它不會讓技術(shù)棧變得復雜但視覺效果已經(jīng)能超出靜態(tài)頁面的平均水平。等到這一版跑通再迭代加入新的交互點你會更能理解 Vibe Coding 的節(jié)奏。3. 工具選型與環(huán)境準備在做任何代碼生成之前先把工具鏈準備好。Vibe Coding 的工具選擇不是“哪個最強就選哪個”而是“哪個能匹配你現(xiàn)有的工作流”。目前常見的選擇有 AI 編輯器、AI 編程助手、終端型 AI Agent 以及平臺提供的 AI 能力。3.1 AI 編碼工具的基本分類編輯器集成類以 Cursor 為代表。它把 AI 對話、代碼補全、文件編輯集成進編輯器適合大多數(shù) Web 項目對新手最友好。IDE 插件類例如 GitHub Copilot。適合你已經(jīng)在使用 VS Code、JetBrains 等編輯器不想更換工具鏈的情況。終端 Agent 類通過命令行和 AI 對話AI 直接操作文件、運行命令、讀取報錯。適合習慣終端操作、希望 AI 參與更多工程環(huán)節(jié)的開發(fā)者。平臺內(nèi)置 AI 類例如把項目部署到 Vercel 后可以在平臺上使用 AI 增強的預覽、日志分析和前端能力。很多人搜索“vercel ai vibe coding platform怎么使用”本質(zhì)上就是希望把 Vibe Coding 的流程延伸到部署和托管環(huán)節(jié)。我的建議是不要同時嘗試太多工具。先固定一個 AI 編碼入口把“寫代碼—運行—反饋—修改”的循環(huán)跑順再考慮是否需要引入平臺側(cè)的 AI 能力。工具之間確實存在能力差異但在個人網(wǎng)站這個量級的項目上差異遠沒有工作流本身的影響大。3.2 本地環(huán)境清單個人網(wǎng)站項目對本地環(huán)境要求很低一般只需要以下內(nèi)容Node.js建議安裝當前 LTS 版本具體版本以官方下載頁為準。如果選擇純 HTML/CSS/JS 方式不裝 Node.js 也可以但如果之后想用構(gòu)建工具或本地開發(fā)服務器Node.js 是必要的。Git用于版本管理和回滾。編輯器推薦 VS Code 或 Cursor配合 AI 插件使用。部署賬號一個 GitHub 賬號用于存放代碼一個 Vercel 賬號用于部署。瀏覽器開發(fā)者工具驗證頁面效果和控制臺報錯。不需要在開始之前就把所有工具配置到完全理想的狀態(tài)。Vibe Coding 的一個特點就是快速迭代環(huán)境能支撐第一步“在本地打開頁面”就夠了。3.3 項目目錄怎么定建議在提示詞里就讓 AI 先定義一個清晰的項目結(jié)構(gòu)。一個純靜態(tài)個人網(wǎng)站可以長這樣vibe-portfolio/ ├── index.html ├── styles.css └── main.js如果選 Vite 這類工具則可以是vibe-portfolio/ ├── index.html ├── package.json ├── src/ │ ├── main.js │ └── style.css └── public/定義目錄結(jié)構(gòu)的一個重要原因是AI 生成代碼時如果知道自己該把哪段代碼放進哪個文件輸出質(zhì)量的穩(wěn)定性會高很多。這也是 Vibe Coding 中“需求拆解”的一部分。4. 把“有趣”翻譯成工程需求很多 Vibe Coding 翻車不是 AI 能力不夠而是提問的人自己沒想清楚。AI 可以生成代碼但它不會替你做出產(chǎn)品決策。一個模糊的問題必然得到一個模糊的答案。所以Vibe Coding 的成敗至少有八成發(fā)生在寫提示詞之前的需求拆解階段。4.1 需求拆解四步法第一步確定頁面區(qū)塊。個人網(wǎng)站至少需要頭部介紹、技能或標簽、項目作品、聯(lián)系方式這幾個區(qū)塊。第二步確定交互點。決定哪些元素是“動的”哪些是“靜的”。比如打字機效果只作用于標題粒子動畫固定在背景層不要讓所有元素同時動起來否則頁面會顯得亂。第三步確定技術(shù)邊界。明確告訴 AI這是一個純前端項目還是需要后端是否需要引入框架是否需要依賴安裝。技術(shù)邊界不清楚AI 可能自動引入一個你并不熟悉的依賴給后續(xù)維護埋下隱患。第四步確定驗收標準。例如頁面能在本地打開標題文字有打字機循環(huán)效果背景粒子動畫不遮擋內(nèi)容在移動端視口下不出現(xiàn)橫向滾動條。4.2 寫一份 AI 可執(zhí)行的需求備忘單把以上分析寫進一個 markdown 文件例如requirements.md然后讓 AI 閱讀后再開始實現(xiàn)。這樣做的價值在于聊天窗口里的上下文是臨時性的而文件是持久化的AI 每次生成代碼時都能回到同一份需求文檔避免“越改越偏”。# 個人網(wǎng)站需求備忘單 ## 目標 一個有趣、輕量的個人主頁展示個人介紹、技能標簽和項目入口。 ## 技術(shù)約束 - 純 HTML/CSS/JS不引入前端框架。 - 不需要后端服務。 - 需要有打字機循環(huán)效果和粒子背景動畫。 ## 頁面區(qū)塊 1. 頂部 Hero 區(qū)域昵稱、打字機標題、一句話簡介。 2. 標簽區(qū)域技能關鍵詞使用毛玻璃卡片。 3. 項目區(qū)域至少展示 2 個項目入口。 4. 頁腳社交鏈接與聯(lián)系方式。 ## 驗收標準 - 本地打開 index.html 可正常展示。 - 打字機效果循環(huán)播放光標閃爍。 - 粒子背景不遮擋文字內(nèi)容。 - 移動端無橫向滾動。4.3 一個實用的初始化提示詞寫好需求備忘單之后可以用下面這段提示詞來啟動 AI你是一名資深前端工程師。請基于 requirements.md 中的需求幫我實現(xiàn)一個個人主頁。 要求 1. 先讀取 requirements.md確認需求后再開始寫代碼。 2. 使用純 HTML/CSS/JS不安裝額外依賴。 3. 文件結(jié)構(gòu)index.html、styles.css、main.js。 4. 代碼要加必要注釋樣式使用 CSS 自定義變量管理主色調(diào)。 5. 完成后給出本地運行方式。注意到?jīng)]有這段提示詞沒有讓 AI“即興發(fā)揮”而是明確了“先讀需求文檔”“技術(shù)邊界”“文件結(jié)構(gòu)”“注釋規(guī)范”“運行方式”五個約束。這就是 Vibe Coding 和單純的“讓 AI 寫一段代碼”的區(qū)別前者像一個協(xié)作流程后者像一次性的問答。5. 完整代碼實現(xiàn)從提示詞到可運行頁面接下來是全文的核心部分。我會以一個典型 AI 編輯器的交互方式為例逐步展示從提示詞到代碼落地的過程。下面的代碼是經(jīng)過簡化和整理的最終版本你可以直接復制運行。5.1 生成 HTML 骨架第一步讓 AI 根據(jù)需求文檔生成index.html。預期得到類似下面的結(jié)構(gòu)!-- 文件路徑index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title阿瀾 | 個人主頁/title meta namedescription content一名熱愛 Vibe Coding 與前端設計的開發(fā)者 / link relstylesheet hrefstyles.css / /head body canvas idparticle-canvas aria-hiddentrue/canvas main classhero p classhello你好我是/p h1 span idtypewriter/spanspan classcursor|/span /h1 p classdesc一個用自然語言驅(qū)動 AI 寫代碼的實踐者/p div classtags aria-label技能標簽 spanVibe Coding/span span前端開發(fā)/span spanAI 工具鏈/span /div a classbtn hrefhttps://github.com/sample relnoopener noreferrer 查看 GitHub /a /main section classprojects h2最近在做的事/h2 div classcard h3Vibe Portfolio/h3 p用自然語言迭代個人主頁的完整實踐。/p /div div classcard h3AI 小工具/h3 p把重復的文案處理任務交給 AI 自動完成。/p /div /section footer p? 2025 · Built with Vibe Coding/p /footer script srcmain.js/script /body /html這份 HTML 有幾個關鍵點canvas放在 body 最前面作為背景層main和section層級清晰語義化標簽方便后續(xù)做 SEO 和讀屏優(yōu)化。對于個人網(wǎng)站來說title和meta description建議在一開始就寫好避免部署后還要返工。5.2 生成打字機效果與粒子背景有了 HTML 骨架后下一步是讓 AI 實現(xiàn)兩個核心交互打字機效果和粒子動畫。這兩塊是讓頁面“看起來有趣”的關鍵。main.js可以這樣實現(xiàn)// 文件路徑main.js const phrases [ 阿瀾, 一個 Vibe Coder, 喜歡把想法變成原型, 也喜歡把原型變得更好用 ]; const typewriterEl document.getElementById(typewriter); let phraseIndex 0; let charIndex 0; let isDeleting false; const typeSpeed 80; const deleteSpeed 40; const holdTime 1200; function typeEffect() { const current phrases[phraseIndex]; if (isDeleting) { charIndex--; } else { charIndex; } typewriterEl.textContent current.slice(0, charIndex); let delay isDeleting ? deleteSpeed : typeSpeed; if (!isDeleting charIndex current.length) { delay holdTime; isDeleting true; } else if (isDeleting charIndex 0) { isDeleting false; phraseIndex (phraseIndex 1) % phrases.length; delay 400; } setTimeout(typeEffect, delay); } // 粒子背景 const canvas document.getElementById(particle-canvas); const ctx canvas.getContext(2d); let particles []; function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; } function createParticles(count 60) { particles []; for (let i 0; i count; i) { particles.push({ x: Math.random() * canvas.width, y: Math.random() * canvas.height, vx: (Math.random() - 0.5) * 0.4, vy: (Math.random() - 0.5) * 0.4, radius: Math.random() * 2 1, color: rgba(96, 165, 250, ${Math.random() * 0.6 0.2}) }); } } function drawParticles() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p) { p.x p.vx; p.y p.vy; if (p.x 0) p.x canvas.width; if (p.x canvas.width) p.x 0; if (p.y 0) p.y canvas.height; if (p.y canvas.height) p.y 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2); ctx.fillStyle p.color; ctx.fill(); }); requestAnimationFrame(drawParticles); } window.addEventListener(resize, resizeCanvas); resizeCanvas(); createParticles(); drawParticles(); typeEffect();這段代碼里打字機效果的核心是用setTimeout控制進度通過isDeleting在“輸入”和“刪除”之間切換。粒子動畫則使用requestAnimationFrame每幀清空畫布并重新繪制粒子位置。這種實現(xiàn)方式對個人網(wǎng)站來說已經(jīng)足夠流暢而且不依賴任何外部庫也不需要網(wǎng)絡請求。配套的styles.css核心部分如下/* 文件路徑styles.css */ :root { --primary-color: #6366f1; --text-color: #1e293b; --bg-light: rgba(255, 255, 255, 0.7); --radius: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text-color); background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: 100vh; } #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .hero { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 40px 20px; } .hello { font-size: 18px; color: #64748b; } h1 { font-size: clamp(36px, 6vw, 72px); margin: 12px 0; } .cursor { color: var(--primary-color); animation: blink 0.8s step-end infinite; } keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .tags { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 24px 0; } .tags span { background: var(--bg-light); backdrop-filter: blur(8px); padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); } .btn { display: inline-block; padding: 12px 28px; border-radius: var(--radius); background: var(--primary-color); color: #fff; text-decoration: none; transition: transform 0.2s ease; } .btn:hover { transform: translateY(-2px); } .projects { max-width: 720px; margin: 0 auto; padding: 32px 20px; } .card { background: var(--bg-light); backdrop-filter: blur(8px); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; } media (max-width: 640px) { .hero { min-height: 50vh; } .tags { gap: 8px; } }這里使用了 CSS 自定義變量管理主題色用clamp()讓標題字號隨視口變化用backdrop-filter做出毛玻璃效果。整體樣式并不復雜但視覺效果和默認 HTML 頁面已經(jīng)有明顯差異。5.3 部署到 Vercel 的配置個人網(wǎng)站的部署有很多種方案Vercel 是最省心的一種。GitHub 倉庫推上去之后Vercel 可以自動識別靜態(tài)項目并完成部署。為了讓部署更可靠可以添加一個vercel.json配置文件{ cleanUrls: true, trailingSlash: false, headers: [ { source: /assets/(.*), headers: [ { key: Cache-Control, value: public, max-age31536000, immutable } ] } ] }cleanUrls讓訪問example.com/about而不是example.com/about.htmltrailingSlash去掉路徑末尾的斜杠靜態(tài)資源緩存策略則能加快圖片和腳本的加載速度。對個人網(wǎng)站來說這個配置足夠日常使用。部署命令也很直接。在本地項目目錄里安裝并執(zhí)行npx vercel首次運行會提示登錄 Vercel 賬號然后依次選擇項目目錄、確認構(gòu)建配置。預覽環(huán)境生成后如果要發(fā)布到生產(chǎn)環(huán)境再執(zhí)行npx vercel --prod如果不想用命令行也可以在 Vercel 控制臺導入 GitHub 倉庫框架預設選擇 Other構(gòu)建命令留空輸出目錄留空。這個操作路徑在不同版本的控制臺里菜單名稱會有差異但核心邏輯不變Vercel 識別靜態(tài)文件然后托管上線。6. 運行結(jié)果與效果驗證代碼寫完之后需要驗證的不只是“頁面能打開”還包括“需求里的每一項都實現(xiàn)了”。純靜態(tài)個人網(wǎng)站可以用最簡單的本地服務器。在項目目錄執(zhí)行python3 -m http.server 8000然后瀏覽器訪問http://localhost:8000。如果你的電腦只裝了 Node.js也可以用npx serve .默認端口通常也是 3000 或 5000以命令行輸出為準。打開頁面后按下面這個清單逐項驗證頁面是否能正常加載沒有明顯的樣式丟失。打字機效果是否循環(huán)播放光標是否閃爍。粒子背景是否顯示在文字下方而不是遮擋文字。瀏覽器開發(fā)者工具的控制臺是否有紅色報錯。縮小窗口到手機尺寸頁面是否出現(xiàn)橫向滾動條。項目卡片是否正常展示鏈接是否可以點擊。如果其中任何一項失敗第一件事不是重新生成代碼而是打開控制臺看報錯信息。Vibe Coding 的一個核心習慣是把報錯信息原樣復制給 AI讓它先解釋問題再給出修復方案。很多人遇到問題后直接重寫反而會在循環(huán)里浪費時間。7. 常見問題與排查思路Vibe Coding 看起來是“對話生成代碼”真正落地時還是會遇到工程問題。以下是我認為個人網(wǎng)站場景里最高頻的一批問題和排查思路問題現(xiàn)象可能原因排查方式解決方案啟動項目時報 node 版本錯誤本地 Node.js 版本與依賴要求不匹配查看報錯信息中的版本要求運行node -v對比安裝匹配的 Node.js LTS 版本或使用 nvm 切換頁面白屏控制臺提示 JS 語法錯誤AI 生成的代碼包含殘缺邏輯或模型輸出被截斷打開控制臺定位到具體文件和行號將報錯粘貼給 AI要求修復并解釋原因部署后找不到樣式文件靜態(tài)資源路徑使用了絕對路徑部署目錄和本地不同在瀏覽器 Network 面板查看 404 請求檢查link和script的路徑優(yōu)先使用相對路徑打字機效果只執(zhí)行一次循環(huán)邏輯缺少 index 回繞閱讀 JS 中phraseIndex的變化讓 AI 補充 phraseIndex 重置邏輯粒子動畫性能差粒子數(shù)量過多或每幀重復創(chuàng)建對象打開 Performance 面板觀察幀率減少粒子數(shù)量或限制部分粒子的復雜度AI 改動一個新需求后舊功能失效沒有版本控制改進無法回退檢查 Git 狀態(tài)和最近一次提交每次改動前提交一個版本必要時回滾頁面在手機端布局混亂沒有響應式樣式或視口 meta 缺失開發(fā)者工具切換到設備模擬模式檢查viewportmeta 和media規(guī)則在 Vercel 上部署后環(huán)境變量泄漏在代碼里寫死了密鑰或 token檢查 GitHub 倉庫和部署日志立即吊銷密鑰改用平臺環(huán)境變量并清理 Git 歷史這里特別想強調(diào)版本控制的重要性。Vibe Coding 很容易讓你進入一種“不斷讓 AI 改代碼”的狀態(tài)但如果改到第 5 輪發(fā)現(xiàn)思路錯了卻無法回到第 2 輪的狀態(tài)會很痛苦。所以每次讓 AI 完成一個可運行的功能后就應該立刻提交一次 Git。這是個人項目里成本最低的保險。8. Vibe Coding 的最佳實踐與工程建議個人網(wǎng)站只是入口如果你想真正把 Vibe Coding 用到更多項目里下面這些工程建議會比較有用。8.1 需求文檔優(yōu)先于聊天記錄聊天窗口的上下文有長度限制而且很脆弱。換一個會話、換一個文件AI 可能就忘記了之前的約定。把需求、驗收標準、技術(shù)約束都寫進項目里的requirements.md讓 AI 每次改動前先讀一遍這是提升長期項目穩(wěn)定性的關鍵做法。8.2 讓 AI 生成測試而不是只生成功能對于個人網(wǎng)站可以請 AI 補充一些基礎的 DOM 測試或端到端檢查。對于更復雜的項目則可以要求 AI“先設計測試用例再實現(xiàn)功能”。這個過程會逼著 AI 把模糊需求具體化也有助于你在代碼運行之前思考清楚邊界條件。8.3 代碼審查不能省AI 生成的代碼不一定錯但它往往“看起來太合理了”以至于人和人之間會放松警惕。特別是權(quán)限、支付、數(shù)據(jù)刪除、敏感信息處理這些環(huán)節(jié)AI 生成的代碼絕對不能直接上生產(chǎn)環(huán)境。必須做代碼審查必須在小范圍測試環(huán)境驗證必須準備好回滾方案。8.4 安全邊界要人工把關個人網(wǎng)站雖然規(guī)模小但安全問題同樣存在。不要在代碼里寫死任何 API Key、密碼或 token如果用到第三方服務優(yōu)先通過部署平臺的環(huán)境變量注入表單和用戶輸入需要做服務端驗證不能只靠前端校驗不要在頁面上收集不必要的個人信息。Git 倉庫也要定期檢查確保沒有把.env這類敏感文件提交進去。一旦泄露正確做法是立即吊銷相關密鑰而不是只刪掉倉庫里的文件。8.5 保持小步快跑的節(jié)奏Vibe Coding 的優(yōu)勢在于速度但速度也會放大混亂。建議每個功能點單獨一次迭代每次只加一個交互或一個區(qū)塊。修改后立即本地驗證和提交再發(fā)起下一次改動。這個節(jié)奏看似保守反而是長期保持項目可維護性的方法。9. Vibe Coding 的邊界與下一步從個人網(wǎng)站出發(fā)Vibe Coding 的應用面其實在快速擴展。社區(qū)里已經(jīng)可以看到“鴻蒙vibe coding”這樣的搜索和實踐說明從 Web 到鴻蒙生態(tài)從靜態(tài)頁面到跨端應用開發(fā)者都在嘗試用自然語言驅(qū)動 AI 完成更多開發(fā)任務。Vercel 這類平臺也在把 AI 能力嵌入部署和托管流程這些信號都指向同一個方向AI 編程正在從“輔助寫代碼”演進為“參與完整開發(fā)鏈路”。但邊界依然存在。業(yè)務越復雜、約束越多、出錯代價越高AI 的自主空間就應該越小。Vibe Coding 并不會讓編程基礎失去價值它只是把編程能力的釋放點從“手寫每一行”轉(zhuǎn)移到“定義問題、審查方案、驗證結(jié)果”。你可以把它當成一個執(zhí)行力超強但需要盯緊方向的結(jié)對同事速度你負責不了但方向、驗收和責任必須由你來扛。如果只選擇一個可執(zhí)行起點我建議你下次打開 AI 編程工具時先不要讓它寫代碼而是讓它幫你把想法拆成需求清單。確認清單無誤后再讓它從第一項開始實現(xiàn)。你會發(fā)現(xiàn)同樣的工具Vibe Coding 的體驗會完全不同。