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