最近“Vibe Coding”這個詞頻繁出現在各大技術社區。簡單來說它不是一種新語言也不是某個框架而是一種新的寫代碼方式用自然語言描述你想要的“感覺”讓 AI 完成代碼的生成、修改和排錯你只需要像導演一樣把控方向。個人網站恰好是 Vibe Coding 最合適的練手場景規模小、表達自由、沒有復雜的業務邏輯、隨時可以推翻重來。本文會從 Vibe Coding 的概念講起帶你把“設計感”翻譯成 AI 能理解的提示詞完整走一遍從零生成個人主頁到部署上線的流程最后附上常見問題的排查思路和工程建議。你不需要精通前端只要會用基礎的文件操作、能看懂 HTML/CSS 的大致結構就能跟著做出來。如果你想做一個有設計感、能部署上線、還能持續迭代的個人網站這篇文章應該能幫到你。1. Vibe Coding 到底是什么1.1 從“逐行敲代碼”到“描述意圖”Vibe Coding 這個說法在 2025 年前后開始流行核心含義是開發者不再逐行編寫代碼而是用自然語言向 AI 描述功能需求和視覺風格由 AI 生成初始代碼開發者再通過一輪輪“對話”調整細節。你可以把它理解成“面向 AI 的編程方式”。傳統開發流程是想明白需求。拆解功能模塊。逐行實現。調試排錯。而 Vibe Coding 的流程變成了用一句話或一段文字描述你想要的效果。檢查 AI 生成的結果。指出不滿意的地方繼續描述。重復直到符合預期。這種模式特別適合界面類項目。因為網頁的“設計感”很難用精確的技術指標描述但很容易用語言表達比如“暖白色背景”“卡片圓角大一點”“標題用襯線字體”“間距再松一些”。AI 能理解這些描述并直接改代碼。1.2 為什么個人網站是 Vibe Coding 的最佳場景個人網站有幾個特點讓它非常適合 Vibe Coding。第一技術棧簡單。個人主頁通常只需要 HTML、CSS、少量 JavaScript沒有復雜的后端邏輯和數據庫設計。AI 生成這種代碼的準確率很高。第二視覺權重高。個人網站的核心是“表達”設計感、排版、配色、動效都比業務系統重要。而這些恰好是可以用語言描述的部分。第三迭代成本低。今天的個人網站明天可能完全改版與其手動維護一套復雜工程不如讓 AI 快速生成新版本你負責審閱和微調。第四部署免費。靜態網頁可以托管在 Vercel 等平臺有免費額度配合自定義域名就能得到一個正式的個人網站。1.3 哪些場景不適合 Vibe Coding客觀地說Vibe Coding 不是萬能的。涉及強業務邏輯、權限控制、復雜狀態管理、支付流程、數據一致性要求的系統仍然需要嚴謹的人工設計。AI 生成代碼的“感覺”很好但在邊界條件、異常處理、安全校驗上可能考慮不周。另外如果你完全不懂編程只靠 AI 生成的代碼一旦出現部署報錯或樣式錯亂排查會很困難。所以本文建議的姿勢是Vibe Coding 負責“生成”你負責“理解”和“把關”而不是把 AI 當成魔法盒子。2. 環境準備工具箱與項目規劃2.1 本地開發環境做個人網站不需要重型環境。你只需要一個現代瀏覽器推薦 Chrome 或 Edge用于本地預覽和調試。一個代碼編輯器推薦 VS Code免費且插件豐富。Git用于版本管理和后續部署到遠程倉庫。如果你不確定本機是否安裝了 Git命令行執行git --version如果提示找不到命令需要先安裝 Git。安裝完成后順手配置一下基本信息git config --global user.name your-name git config --global user.email your-emailexample.com版本需要根據你的系統實際情況調整這里重點是先把基礎工具準備好。2.2 AI 輔助工具選型Vibe Coding 的“生產力”主要來自 AI 工具。目前常見的選型有幾類。第一類是 IDE 內置 AI 編程助手比如 Cursor、GitHub Copilot、Windsurf 等。它們能直接在編輯器里和你對話修改文件、生成代碼、解釋報錯適合本地開發。第二類是網頁版 AI 對話工具比如 ChatGPT、Claude 等。你可以讓它生成完整代碼再復制到本地文件中。這種方式門檻低但文件較多時來回復制比較麻煩。第三類是 Vercel 推出的 v0 這類 AI 生成界面工具。它可以用自然語言生成 React / Tailwind 風格的組件和頁面生成后可以直接在 Vercel 上部署。具體功能以官網說明為準適合想快速做出原型、又愿意接觸 React 生態的讀者。本文的實戰部分以“網頁版 AI 本地文件 Vercel 部署”為主線因為這條路最通用也最容易理解每一步在做什么。2.3 部署平臺與域名部署個人網站推薦 Vercel。原因有三對靜態網站和前端項目支持友好免費額度足夠個人使用。支持 GitHub 倉庫自動導入推送代碼后自動構建部署。提供免費的.vercel.app二級域名也可以綁定自己的域名。如果你希望以后也維護一個博客考慮 SEO 和自定義域名可以再買一個域名國內服務商或海外服務商都可以根據預算和備案需求決定。本文不展開域名備案細節只演示 Vercel 免費部署流程。2.4 項目目錄規劃在開始之前先規劃一個最簡單的項目結構。個人主頁建議分為這幾個層次my-personal-site/ ├── index.html # 頁面主入口 ├── style.css # 全局樣式與設計變量 ├── script.js # 交互腳本 ├── assets/ │ ├── images/ # 本地圖片資源 │ └── fonts/ # 如需本地字體 └── .gitignore # 忽略不需要提交的文件不要一上來就用重型框架。Vibe Coding 的第一步是先跑通再考慮優化。純 HTML/CSS/JS 足夠支撐一個設計感不錯的個人主頁。3. 設計感的內功先“Vibe”再“Coding”很多人拿到 AI 工具后第一句提示詞是“幫我做個個人網站”。結果生成的頁面千篇一律灰白卡片、居中文字、藍色按鈕像同一個模板刻出來的。問題出在你沒有先把“設計感”講清楚。Vibe Coding 的關鍵不是“讓 AI 生成”而是“你會不會描述”。這一節我們先把視覺規劃做在前面。3.1 先定設計關鍵詞在寫提示詞之前先想清楚你的網站氣質。設計關鍵詞可以從這些維度出發維度例子整體風格極簡、復古、未來感、手寫感、雜志排版、新擬態配色情緒暖白、低飽和、黑白高對比、大地色、莫蘭迪字體氣質襯線、無襯線、等寬、細體、粗黑空間感受寬松、緊湊、多留白、密集信息交互方式懸浮動效、滾動漸入、平滑錨點、無動畫舉個例子如果你想要一個“安靜、有文化感、像設計師個人簡介”的主頁可以這樣描述極簡主義接近雜志排版。底色是暖白接近米色。標題用襯線字體正文用干凈的無襯線字體。大量留白卡片圓角不要太大。只有一個強調色用在小標題和鏈接上。這些描述 AI 能理解因為它背后對應的是具體的 CSS 屬性底色是 background-color襯線字體是 font-family: Georgia/宋體留白是 padding 和 margin強調色是全局唯一的 accent color。3.2 頁面結構拆解個人網站的內容差別很大但結構上有幾個常見模塊頂部導航欄Logo、菜單鏈接、移動端折疊按鈕。Hero 區一句話介紹自己通常占據首屏很大面積。關于區個人簡介、技能或經歷。項目展示區卡片網格展示代表性項目。博客/文章列表如果你有寫博客的習慣。聯系區/頁腳郵箱、社交鏈接、版權聲明。你要在 Vibe Coding 之前確定一個原則一次對話只專注一個頁面的一個模塊。不要讓 AI“一口氣生成整個網站”那樣很難控制質量。正確的做法是先生成整體骨架再逐塊雕刻細節。3.3 把設計想法翻譯成提示詞把上面的思考寫成一個結構化的提示詞。我的習慣是使用“角色 任務 約束條件 輸出要求”四段式。你是一名資深前端開發。請用 HTML CSS 原生 JavaScript 生成一個 個人主頁的首屏Hero 區。 設計風格 - 極簡主義暖白底色 #FAF9F7正文深灰 #333333 - 標題用 Georgia 襯線字體正文用系統無襯線字體 - 強調色用陶土色 #C4553F只用于鏈接和小標簽 - 頁面居中最大寬度 1080px左右留白 內容要求 - 左上角是名字右上角是三個導航鏈接關于、項目、博客 - Hero 區左側是自我介紹右側是一個抽象幾何圖形 - 底部有一個向下的滾動提示 技術約束 - 響應式布局移動端導航折疊為漢堡菜單 - 不要引入任何外部 UI 框架 - 輸出完整 index.html 和 style.css 請先輸出實現方案再輸出代碼。這段提示詞里包含了設計關鍵詞、布局要求、技術約束AI 生成的結果會比“幫我做個網站”靠譜得多。4. 完整實戰從零 Vibe 一個個人主頁這一節我們完整走一遍實戰流程。為了便于演示我會給出示例提示詞和對應的核心代碼思路。實際使用時你可以把內容替換成自己的姓名、項目和博客信息。4.1 第一輪生成頁面骨架先把整站的 HTML 骨架生成出來。提示詞可以這樣寫請生成一個個人主頁的完整 HTML 骨架包含 頂部固定導航、Hero 區、精選項目區、博客列表區、聯系頁腳。 每個區塊用清晰的 class 命名不需要填充真實內容 用占位文字即可。樣式先寫在 style.css 中不要內聯。AI 生成的骨架思路類似下面這樣。這是核心片段需要放入index.html!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title個人主頁/title link relstylesheet hrefstyle.css / /head body header classnav div classnav__logoYour Name/div nav classnav__links a href#about關于/a a href#projects項目/a a href#blog博客/a /nav /header main section classhero h1你好我是你的名字/h1 p classhero__subtitle前端工程師 / 獨立開發者 / 記錄與創造者/p a classhero__button href#projects查看項目/a /section section idabout classsection h2關于我/h2 p這里寫一段簡短的自我介紹描述你的工作方向和個人興趣。/p /section section idprojects classsection h2精選項目/h2 div classprojects__grid article classcard h3項目名稱/h3 p一句話說明項目解決的問題。/p a href#查看詳情/a /article /div /section section idblog classsection h2最新文章/h2 ul classblog__list lia href#文章標題示例/aspan2025-01-01/span/li /ul /section /main footer classfooter p? 2025 你的名字/p a hrefmailto:youexample.comyouexample.com/a /footer script srcscript.js/script /body /html拿到骨架后先別急著讓它補樣式。你要在瀏覽器里打開看一眼結構是否完整區塊順序是否合理。確認骨架沒問題再進入下一輪。4.2 第二輪補充設計系統“設計感”的底層是一套一致的設計系統。所謂設計系統就是顏色、字體、間距、圓角、陰影這些視覺元素保持統一規則。在 CSS 中可以用自定義屬性實現。/* 文件路徑style.css */ :root { --bg: #faf9f7; --text: #333333; --text-light: #777777; --accent: #c4553f; --card-bg: #ffffff; --radius: 12px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.06); --max-width: 1080px; --space: 24px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif; line-height: 1.75; } h1, h2, h3 { font-family: Georgia, Times New Roman, serif; font-weight: normal; line-height: 1.3; } .nav { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 16px var(--space); background: rgba(250, 249, 247, 0.9); backdrop-filter: blur(8px); } .nav__links a { color: var(--text); text-decoration: none; margin-left: 24px; } .nav__links a:hover { color: var(--accent); } .hero { max-width: var(--max-width); margin: 80px auto; padding: 0 var(--space); } .hero h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 16px; } .hero__subtitle { color: var(--text-light); font-size: 18px; } .hero__button { display: inline-block; margin-top: 32px; padding: 12px 24px; background: var(--accent); color: #fff; text-decoration: none; border-radius: var(--radius); } .section { max-width: var(--max-width); margin: 80px auto; padding: 0 var(--space); } .projects__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; } .card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); }這些 CSS 變量定義了一次后面所有區塊的間距、圓角、顏色都引用同一批變量。整體看起來就會“設計感”統一不會東一塊西一塊。你可以把這段代碼作為“設計基線”給 AI 看要求它后續生成的新模塊都使用這些變量。4.3 第三輪交互與響應式優化骨架和樣式到位后最后處理交互和移動端適配。最常見的是移動端導航折疊。這里用一個很簡潔的 JavaScript 實現// 文件路徑script.js const toggle document.querySelector(.nav__toggle); const links document.querySelector(.nav__links); toggle.addEventListener(click, () { links.classList.toggle(nav__links--open); });對應的移動端 CSS 邏輯.nav__toggle { display: none; border: none; background: none; font-size: 24px; cursor: pointer; } media (max-width: 640px) { .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); padding: 16px var(--space); flex-direction: column; } .nav__links--open { display: flex; } .nav__toggle { display: block; } .hero { margin: 48px auto; } .section { margin: 48px auto; } }如果你的風格描述里不需要動畫那就不要硬加。很多個人網站敗在“過度動效”上。Vibe Coding 也一樣你要明確告訴 AI 哪些交互需要哪些不要。4.4 部署到 Vercel本地頁面完成后接下來把網站部署上線。第一步是初始化 Git 并推送到遠程倉庫。git init git add . git commit -m feat: init personal website git branch -M main git remote add origin https://github.com/your-name/your-repo.git git push -u origin main第二步登錄 Vercel 官網用 GitHub 賬號授權登錄然后點擊“Add New Project”導入剛才的倉庫。Vercel 會自動識別為靜態項目不需要額外配置構建命令和輸出目錄。如果你的項目里沒有package.jsonVercel 會按靜態網站處理直接部署index.html。如果你希望更明確也可以加一個vercel.json{ framework: null, buildCommand: , outputDirectory: . }部署完成后Vercel 會分配一個https://your-project.vercel.app的地址。打開這個地址你的個人網站就已經上線了。4.5 驗證與走查上線后不要急著到處分享先在瀏覽器里做一輪走查。我建議按這個清單逐項檢查首屏內容是否完整標題和副標題是否正確。導航鏈接能否跳到對應區塊。移動端打開漢堡菜單是否正常展開收起。項目卡片懸停效果是否符合預期。頁面在 Chrome、Safari 下顯示是否一致。文字有沒有溢出或重疊。圖片是否正常加載有沒有引用失效路徑。如果發現問題直接把問題描述給 AI比如“移動端導航菜單展開后背景不透明閱讀體驗差請改成占據整個視口高度的半透明面板”然后讓它修改。5. 常見問題與排查思路Vibe Coding 生成個人網站的常見問題我整理成了下面這張表遇到報錯或樣式異常時可以對照排查。問題現象常見原因解決思路頁面在手機上錯位缺少 viewport 元信息或響應式布局不完整確認meta nameviewport存在檢查 media query部署后字體風格不一致引用了本機沒有的字體改用系統字體棧或用 Google Fonts 等 CDN 字體部署后圖片失效使用了本地絕對路徑用相對路徑assets/images/xx.png或圖床/CDNAI 生成的幾塊區域風格不統一提示詞缺少設計變量約束要求 AI 統一使用:root中的設計變量部署失敗倉庫結構或構建命令配置錯誤檢查 Vercel 的 Framework Preset靜態站不需要 build導航錨點跳轉被導航欄遮擋sticky 導航欄蓋住了標題給區塊加scroll-margin-top頁面加載慢圖片過大壓縮圖片合理使用 WebP 格式這里單獨展開“AI 生成的幾塊區域風格不統一”這個問題。很多人的做法是每輪對話讓 AI 生成一個區塊結果五個區塊像五個人寫的。解決辦法是在每輪提示詞里都附上你的設計基線也就是:root變量、字體規則、間距規則。AI 有上下文限制但你可以把關鍵約束重復強調或者在項目根目錄放一個DESIGN_CONSTRAINTS.md描述設計規范讓 AI 每次先讀這個文檔再動手。這是 Vibe Coding 項目里比較實用的做法。另外補充一個如果你使用 Vercel 導入倉庫后遇到構建失敗優先看 Vercel 構建日志里的具體報錯信息而不是猜。多數情況下是項目里多了個意外的package.json或配置項刪除或修正即可。6. 最佳實踐與工程建議6.1 提示詞迭代方法Vibe Coding 的質量很大程度上取決于提示詞的迭代方式。我總結了幾個有效的方法。第一先結構后風格。第一輪只生成頁面結構和內容框架不要同時糾結字體和配色。結構確認后再引導視覺細節。第二具體到屬性級別。與其說“變得高級一點”不如說“把卡片圓角從 12px 改成 4px陰影調淡去掉邊框”。AI 對屬性級別的描述反饋更穩定。第三一次只改一個維度。每輪對話聚焦一個點比如這輪只調間距下輪只調配色。混在一起容易出現“修好一個地方破壞另一個地方”的情況。第四保留歷史版本。每次修改前先把當前版本存一份或使用 Git 提交。這樣 AI 改壞了可以快速回退不用從零再來。6.2 代碼質量與版本管理Vibe Coding 不意味著放棄代碼質量。個人網站雖然小但依然建議做到幾點每個文件職責單一HTML 管結構、CSS 管樣式、JS 管交互。類名語義化推薦 BEM 風格比如card__title、nav__links--open。所有階段性穩定版本都執行git commit提交信息寫清楚改動內容。不把本機無關文件提交進倉庫.gitignore至少包含.env、node_modules等。如果你后續引入構建工具或框架比如 Astro、Next.js也建議保留這一套工程習慣。個人網站再小也值得用工程化的方式管理。6.3 性能與 SEO設計感之外訪問體驗直接決定訪客去留。個人網站的性能優化從這三件事開始。第一壓縮圖片。個人網站最容易拖慢加載速度的就是原圖直出。建議把圖片壓到 200KB 以內使用 WebP 或 AVIF 格式。第二控制外部依賴。用系統字體棧能省掉字體下載避免引入不必用的 UI 框架。每多一個外部依賴就多一分加載成本。第三做好基礎 SEO。title要清晰meta namedescription要寫一句有信息量的話h1只保留一個。文章如果有獨立頁面再加og:title等社交分享標簽。這些 AI 都能幫你生成但需要你主動提出要求。6.4 安全與隱私個人網站暴露在公網需要注意最小權限和隱私邊界。不要在網頁源碼里寫郵箱以外的敏感信息如密碼、密鑰、身份證號、真實住址等。不提交任何.env文件環境變量應在 Vercel 的項目配置里設置。如果網站有表單或留言功能考慮后端接口的權限控制與輸入校驗避免信息泄露和垃圾提交。定期檢查 Vercel 項目的訪問日志和依賴更新做到可審計、可回滾。Vibe Coding 生成代碼時如果你計劃使用某個后端服務或第三方 API要讓 AI 注意不要把密鑰硬編碼在頁面代碼中。密鑰一旦進了前端代碼就相當于公開了。7. 總結與下一步學習路線7.1 本文核心要點回顧一下這篇文章主要做了四件事。第一解釋了 Vibe Coding 的本質用自然語言描述意圖讓 AI 生成和修改代碼開發者負責把控方向和質量。第二強調了“設計感”來自提示詞而不是 AI 的魔法。通過設計關鍵詞、頁面結構拆解、設計變量約束才能讓生成結果有統一氣質。第三完整走了一遍實戰流程從骨架生成、設計系統補充、交互優化到 Git 推送和 Vercel 部署上線。第四給出了常見問題排查表和工程建議覆蓋提示詞迭代、代碼質量、性能 SEO、安全隱私幾個維度。7.2 下一步可以繼續深入的方向如果你的個人主頁已經上線下一步可以從這幾個方向繼續推進學習 Tailwind CSSv0 這類 AI 界面工具生成的組件大多基于 Tailwind了解它能讓后續 AI 協作更順暢。嘗試 Astro 或 Next.js把靜態主頁升級成支持 Markdown 博客的完整站點。深入響應式設計把不同設備的顯示細節打磨到位。研究 Web 性能指標比如 LCP、CLS用具體數據指導優化。Vibe Coding 不是讓你放棄編程而是把編程的重心從“打代碼”轉移到“表達與把關”。當你發現一個念頭能用幾句話變成一個有設計感的網頁時這種創造新東西的樂趣值得你親自試一試。建議現在就打開編輯器從一句“我想要一個暖白底色、襯線標題、陶土色強調的個人主頁”開始。