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