把作品放在更自由的地方，把表達(dá)交還給自己。

引言

作為一名 B 端設(shè)計(jì)師，我一直對(duì)代碼有著天然的好奇和熱愛(ài)。雖然我的開(kāi)發(fā)知識(shí)只停留在基礎(chǔ)層面，但還是覺(jué)著設(shè)計(jì)不該被局限在一張張靜態(tài)的“飛機(jī)稿”里，能把一個(gè)想法或交互親手落地成真實(shí)可用的頁(yè)面，那種成就感是單純做設(shè)計(jì)稿無(wú)法替代的。

我的網(wǎng)站：jiangyu.pro （該環(huán)境為演示分支，內(nèi)容圖片均來(lái)自網(wǎng)絡(luò)）

搭建個(gè)人網(wǎng)站，對(duì)我而言更像是一種練習(xí)：能夠嘗試不同的交互，探索更自由的視覺(jué)呈現(xiàn)，也能用文字記錄設(shè)計(jì)思考。如今借助 AI 的能力，設(shè)計(jì)師完全可以在無(wú)需精通代碼的前提下快速把想法落地。

PS：這篇文章不是教程，算是實(shí)踐經(jīng)驗(yàn)分享，對(duì)于某個(gè)操作的詳細(xì)步驟，我相信你問(wèn)下 AI 或百度會(huì)比我闡述的更清楚。

一、為什么要搭建個(gè)人網(wǎng)站

很多設(shè)計(jì)師在初期都會(huì)問(wèn)一個(gè)問(wèn)題：現(xiàn)在已經(jīng)有那么多作品平臺(tái)了，我還需要自己搭網(wǎng)站嗎？

確實(shí)，像站酷、UI 中國(guó)、Behance 這些平臺(tái)都很成熟，也帶來(lái)了很多曝光機(jī)會(huì)。但問(wèn)題是，它們的展示方式有些統(tǒng)一了——結(jié)構(gòu)定死、節(jié)奏一致，不管你怎么精心排版，別人刷到時(shí)的感受還是“又一個(gè)項(xiàng)目”。

久而久之，人們記住的不是你，而是千篇一律的模板感。

而個(gè)人網(wǎng)站真正的價(jià)值，不是多放幾個(gè)項(xiàng)目，而是你可以自己定義一切：結(jié)構(gòu)、節(jié)奏、語(yǔ)氣，甚至是想說(shuō)什么、不想說(shuō)什么。

更重要的是，它會(huì)成為你表達(dá)風(fēng)格的延伸：你想怎么設(shè)計(jì)、怎么呈現(xiàn)都由自己決定，沒(méi)有模板、沒(méi)有標(biāo)準(zhǔn)，也沒(méi)有“別人都是怎么做的”——你唯一需要對(duì)齊的，就是你自己想怎么來(lái)。

說(shuō)到底，我們做個(gè)人網(wǎng)站，不是為了炫技，也不是為了給別人看一堆“結(jié)果”，而是為了讓你可以用自己的方式講述自己、持續(xù)釋放價(jià)值，更有利于設(shè)計(jì)師長(zhǎng)期打造自己的個(gè)人品牌 / IP。

二、選擇適合自己的建站方式

在真正開(kāi)始做網(wǎng)站之前，我也糾結(jié)了很久：到底要不要學(xué)代碼？要學(xué)多深？是不是有更省事的方式？

查了不少資料，也嘗試了幾個(gè)工具后，其實(shí)路徑無(wú)非三種：零代碼、低代碼、自己開(kāi)發(fā)。

不管你是什么類型的設(shè)計(jì)師，應(yīng)該都能從中找到最適合自己的那條。

一是最省事的：零代碼平臺(tái)

像 Notion + Super、Framer、Vzy 這些工具，拖拖拽拽就能搞定，不用碰一行代碼，頁(yè)面也能看上去還不錯(cuò)，適合完全不想折騰的。

我一開(kāi)始也試過(guò) Notion，整理內(nèi)容確實(shí)方便，但要想做點(diǎn)有趣的交互或者頁(yè)面層級(jí)比較復(fù)雜的結(jié)構(gòu)就做不了了，而且樣式看起來(lái)有點(diǎn)“平臺(tái)模板感”了，對(duì)于有個(gè)性的設(shè)計(jì)師來(lái)說(shuō)，發(fā)揮空間不夠。

Framer 則有點(diǎn)像是 figma，通過(guò)畫(huà)框、制作組件交互來(lái)實(shí)現(xiàn)頁(yè)面的構(gòu)建，并且社區(qū)也有很多模版供參考選擇。

二是稍微進(jìn)階一點(diǎn)的：低代碼或模板方案

這類方案，像 WordPress、Framer、WIX、SvelteKit 等，通常提供一堆現(xiàn)成模板，配置一下就能上線。也可以接后臺(tái)、做博客、切換主題……適合內(nèi)容比較多、功能稍復(fù)雜的項(xiàng)目。

哎，你可能會(huì)發(fā)現(xiàn) Framer 又出現(xiàn)了？沒(méi)錯(cuò)，它不僅是簡(jiǎn)單的拖拽工具，其實(shí)也支持嵌入代碼，自定義組件邏輯，甚至做出一些數(shù)據(jù)聯(lián)動(dòng)的高級(jí)交互。

以上這些工具也并不是“完全免折騰”：要安裝環(huán)境、調(diào)樣式、懂點(diǎn)目錄結(jié)構(gòu)，還經(jīng)常踩些坑，適合有一點(diǎn)技術(shù)基礎(chǔ)或者或愿意花時(shí)間摸索的。

三是真正自由的一條路：自己開(kāi)發(fā)

如果你喜歡代碼，愿意多花一點(diǎn)時(shí)間、想要更自由地控制內(nèi)容和風(fēng)格，那就可以考慮自己動(dòng)手開(kāi)發(fā)。

下面是我研究下來(lái)的一些基礎(chǔ)技術(shù)構(gòu)成，語(yǔ)言我盡量寫(xiě)得白話一點(diǎn)：

Html & CSS：網(wǎng)站的骨架 + 皮膚

這兩門(mén)可以說(shuō)是建站的“基礎(chǔ)中的基礎(chǔ)”了。

HTML 決定頁(yè)面結(jié)構(gòu)（像是你在 Figma 里畫(huà)框），CSS 負(fù)責(zé)樣式（字體、顏色、動(dòng)畫(huà)）。

語(yǔ)法簡(jiǎn)單，很適合設(shè)計(jì)師入門(mén)，尤其對(duì)于 B 端設(shè)計(jì)師，應(yīng)該都有了解的。

Tailwind CSS：為設(shè)計(jì)師量身定制的寫(xiě)法 

相信大家對(duì) token、原子級(jí)樣式都不陌生，而 Tailwind 本質(zhì)上就是一套“寫(xiě) class 控樣式”的開(kāi)發(fā)方式。不像傳統(tǒng) CSS 要反復(fù)寫(xiě)命名、層層嵌套，直接在元素上寫(xiě) class 就能控制樣式，還支持主題切換，組件化開(kāi)發(fā)特別爽。

比如，你要做一個(gè)卡片：

每個(gè)樣式都很語(yǔ)義化，一眼能看出這個(gè)組件的“長(zhǎng)相”：

1. bg-white → 背景白色
2. p-6 → 所有方向內(nèi)間距 24px（Tailwind 的 spacing 單位默認(rèn)是 4 的倍數(shù)）
3. rounded-xl → 大圓角
4. shadow-md → 中等陰影

用了 Tailwind 的人，基本都不愿意再回去寫(xiě)傳統(tǒng) CSS，因?yàn)樗褪翘恕?/p>

前端框架：React / Vue / AngularJS

基本是目前主流的前端框架了，它們幫助你把頁(yè)面變得“像搭積木一樣”，每個(gè)功能或板塊都是獨(dú)立組件，寫(xiě)起來(lái)更清晰，維護(hù)也更輕松。

1. React：生態(tài)成熟、文檔豐富、配套工具最多，社區(qū)支持最好；?
2. Vue：語(yǔ)法更簡(jiǎn)潔，上手快，但在組件生態(tài)、AI 輔助開(kāi)發(fā)上略遜一籌；
3. AngularJS：架構(gòu)完整、企業(yè)級(jí)方案，但學(xué)習(xí)曲線陡峭，適合大型應(yīng)用，在靈活性和現(xiàn)代開(kāi)發(fā)體驗(yàn)上稍顯不足。

Javascript（JS）& TypeScript（TS）

JS 是網(wǎng)頁(yè)上的“行為語(yǔ)言”，主要用來(lái)實(shí)現(xiàn)交互，比如點(diǎn)擊按鈕切換內(nèi)容、彈窗、頁(yè)面滾動(dòng)動(dòng)畫(huà)等；

TS 是 JS 的“加強(qiáng)版”，可以讓代碼更規(guī)范、安全，適合做大型項(xiàng)目。

在今天，其實(shí)我建議大家是選自由開(kāi)發(fā)的路，因?yàn)槲覀兺耆梢越柚?AI 來(lái)快速推進(jìn)，不需要管各種框架、語(yǔ)言多么的復(fù)雜，請(qǐng)無(wú)腦選最成熟的！

“干中學(xué)”—— 雖然我們可以一點(diǎn)不懂代碼都完全拋給 AI ，但還是建議稍微了解一點(diǎn)前端的底層知識(shí)，例如 HTML 和 CSS…… 不然很難在搭建過(guò)程得到成長(zhǎng)。

三、AI 建站靠不靠譜

先說(shuō)結(jié)論：靠譜，甚至可以說(shuō)，是完全顛覆式的體驗(yàn)。

我們總覺(jué)得做網(wǎng)站寫(xiě)代碼太燒腦，要么拖拽工具又限制多，更別提那些“改個(gè)小地方要改三十處”的煩人細(xì)節(jié)。但現(xiàn)在，AI 工具已經(jīng)從“輔助”變成了“主力”，不僅能聽(tīng)懂你說(shuō)什么，還能真的幫你搭出一個(gè)上線可用的網(wǎng)站。

過(guò)去幾個(gè)月我試了非常多工具，有的功能炫酷但難落地，有的看似智能但用起來(lái)依舊繁瑣。最后我篩選出以下 8 個(gè)，都是我認(rèn)為對(duì)設(shè)計(jì)師來(lái)說(shuō)真正值得一試的 AI 建站利器

1. Framer AI

網(wǎng)址：https://www.framer.com/features/ai/

Framer AI 是一個(gè)主打“所見(jiàn)即所得”的網(wǎng)頁(yè)生成工具。只需輸入一句話，它就能生成風(fēng)格現(xiàn)代、動(dòng)畫(huà)流暢的完整網(wǎng)站，適合作品集、展示頁(yè)等場(chǎng)景。生成后你還能在線拖拽編輯，零代碼也能做出專業(yè)效果，特別適合注重視覺(jué)體驗(yàn)的設(shè)計(jì)師或創(chuàng)作者。

2. Durable

網(wǎng)址：https://durable.co/

Durable 是一個(gè)“開(kāi)口即上線”的網(wǎng)站生成工具，幾乎不需要操作流程。你只需輸入行業(yè)或業(yè)務(wù)類型，它就能自動(dòng)生成包含主頁(yè)、服務(wù)頁(yè)、表單等內(nèi)容的完整網(wǎng)站，適合小型商家或自由職業(yè)者快速上線使用。無(wú)需設(shè)計(jì)、無(wú)需寫(xiě)代碼，上手極快。

3. Wegic AI

網(wǎng)址：https://wegic.ai/zh-cn

Wegic 用自然語(yǔ)言幫你搭網(wǎng)頁(yè)，說(shuō)一句話，它就能畫(huà)出頁(yè)面結(jié)構(gòu)并自動(dòng)生成前端代碼。相比傳統(tǒng)開(kāi)發(fā)，它更像是幫你“半自動(dòng)寫(xiě)網(wǎng)頁(yè)”的工具，適合希望了解代碼結(jié)構(gòu)、又不想從零寫(xiě)起的用戶。輕量好用，也適合快速做展示頁(yè)或 Demo。

4.  Uizard

網(wǎng)址：https://uizard.io/

Uizard 更偏向原型設(shè)計(jì)和界面搭建，支持拖拽和 AI 生成頁(yè)面結(jié)構(gòu)，也能把手繪稿變成界面草圖。適合項(xiàng)目早期做思路演示，幫助你快速構(gòu)建網(wǎng)站雛形，雖然不是最終上線用的網(wǎng)站工具，但對(duì)產(chǎn)品設(shè)計(jì)或網(wǎng)頁(yè)結(jié)構(gòu)規(guī)劃非常有幫助。

5. MakeLanding

網(wǎng)址：https://makelanding.ai/

專注做“營(yíng)銷型登陸頁(yè)”，尤其適合產(chǎn)品介紹、活動(dòng)宣傳等場(chǎng)景。你只要輸入產(chǎn)品描述，它就能自動(dòng)生成一頁(yè)結(jié)構(gòu)合理、文案清晰的宣傳頁(yè)，包含賣點(diǎn)介紹、用戶評(píng)價(jià)、FAQ 等模塊。頁(yè)面干凈利落，生成速度快。

6. Dora AI

網(wǎng)址：https://www.dora.run/ai

Dora 主打視覺(jué)和交互體驗(yàn)，能生成包含 3D 動(dòng)效、滾動(dòng)特效的網(wǎng)頁(yè)，頁(yè)面效果炫酷、富有動(dòng)感。它更適合有視覺(jué)設(shè)計(jì)需求的用戶，如果你希望網(wǎng)頁(yè)不僅實(shí)用還“出圈”，可以嘗試。但相對(duì)也比其他工具復(fù)雜，適合愿意深挖細(xì)節(jié)的創(chuàng)作者。

7. GitHub Copilot

網(wǎng)址：https://github.com/features/copilot

Copilot 是一位 AI 編程搭檔，能根據(jù)你寫(xiě)的注釋、關(guān)鍵詞，自動(dòng)補(bǔ)全 HTML、CSS、JS 等代碼。對(duì)學(xué)代碼的小白非常友好，不會(huì)寫(xiě)也能學(xué)著做，能快速搭建頁(yè)面、理解結(jié)構(gòu)。適合正在學(xué)習(xí)網(wǎng)頁(yè)開(kāi)發(fā)、希望提升寫(xiě)代碼效率的技術(shù)初學(xué)者（學(xué)生黨有福利?。?/p>

8. ChatGPT

網(wǎng)址：https://chatgpt.com/

很多人覺(jué)得 ChatGPT 就是個(gè)“能對(duì)話的搜索引擎”，其實(shí)它已經(jīng)遠(yuǎn)不止于此。ChatGPT 在 24 年就開(kāi)放了應(yīng)用聯(lián)動(dòng)，可以配合 VS Code 在項(xiàng)目中查找文件、編輯代碼。

主要它不是只給你一段孤立的代碼，而是能根據(jù)你的需求*一步步幫你拆解任務(wù)，解釋概念，按流程幫你構(gòu)建整個(gè)網(wǎng)站——從選框架、搭建項(xiàng)目，到寫(xiě)組件、調(diào)樣式，再到處理交互、補(bǔ)全文案。

對(duì)于零基礎(chǔ)設(shè)計(jì)師，它是從 0 到 1 的陪伴式助手；對(duì)有經(jīng)驗(yàn)的人，它是提速寫(xiě)代碼、少走彎路的效率利器。

四、搭網(wǎng)站前，你需要準(zhǔn)備這些

1. 明確目標(biāo)：你的網(wǎng)站要做什么？

別一上來(lái)就想著視覺(jué)、結(jié)構(gòu)和動(dòng)效，先問(wèn)自己一個(gè)問(wèn)題：

我希望網(wǎng)站幫我完成什么？

是找工作，還是輸出內(nèi)容？是打造個(gè)人 IP，還是只是想試試寫(xiě)代碼的感覺(jué)？不同的目標(biāo)，決定了你后續(xù)做頁(yè)面規(guī)劃、內(nèi)容組織、甚至部署方式的選擇。

幾個(gè)常見(jiàn)的目標(biāo)：

1. 找工作 / 求職用：突出代表項(xiàng)目和個(gè)人能力，信息清晰；
2. 建立個(gè)人品牌：注重風(fēng)格調(diào)性和內(nèi)容的持續(xù)性表達(dá)；
3. 記錄思考 / 輸出內(nèi)容：需要有博客功能和良好的閱讀體驗(yàn)；
4. 承接項(xiàng)目 / 商業(yè)用途：強(qiáng)調(diào)轉(zhuǎn)化效率、聯(lián)系方式和案例展示；

目標(biāo)不需要太大，但要真實(shí)——你做這個(gè)網(wǎng)站，是想讓誰(shuí)看到？想傳達(dá)什么印象？先想清楚這一點(diǎn)，后面的選擇才會(huì)更輕松。

2. 頁(yè)面結(jié)構(gòu)：先規(guī)劃，不要一上來(lái)就寫(xiě)代碼

雖然個(gè)站不用像產(chǎn)品項(xiàng)目那樣搞 PRD，但也建議提前大致想好頁(yè)面結(jié)構(gòu)。推薦一套適用于大多數(shù)設(shè)計(jì)師網(wǎng)站的基礎(chǔ)頁(yè)面組合：

1. Home：首頁(yè)，介紹你是誰(shuí) + 精選項(xiàng)目預(yù)覽；
2. About：自我介紹 + 簡(jiǎn)歷鏈接 / 聯(lián)系方式；
3. Work / Projects：項(xiàng)目頁(yè)，可單獨(dú)介紹每個(gè)作品；
4. Blog（可選）：輸出設(shè)計(jì)思考、開(kāi)發(fā)日記等；
5. Contact（可選）：放郵箱、社媒鏈接、表單等聯(lián)系信息。

頁(yè)面越少，越容易落地。你也完全可以只從一個(gè) About 頁(yè)開(kāi)始，后面慢慢補(bǔ)上其他內(nèi)容。

當(dāng)然作為設(shè)計(jì)師，如何從原型到視覺(jué)稿這里就不再贅述了

3. 準(zhǔn)備開(kāi)發(fā)工具：輕便、好上手就夠了

你不需要搭建什么復(fù)雜環(huán)境，用一些基礎(chǔ)工具就足夠應(yīng)對(duì)建站需求了。

代碼編輯器：VS Code

插件推薦：Tailwind CSS IntelliSense、Prettier、ESLint、GitLens、Copilot（AI 自動(dòng)補(bǔ)全）…

AI 輔助工具：ChatGPT

可以作為開(kāi)發(fā)對(duì)話助手，負(fù)責(zé)頁(yè)面生成、結(jié)構(gòu)拆解、動(dòng)效調(diào)試；后面章節(jié)會(huì)細(xì)講使用技巧。

代碼托管：GitHub

將項(xiàng)目托管上去，就能配合部署平臺(tái)自動(dòng)完成構(gòu)建上線，代碼更新也會(huì)實(shí)時(shí)同步。更重要的是，哪怕你不熟 Git 指令，也可以搭配讓 ChatGPT 幫你寫(xiě)出從提交到上線的完整流程和腳本。

如果你已經(jīng)有一些個(gè)人標(biāo)識(shí)（比如 logo、色彩方案、字體喜好等），也可以順手整理一下，這些會(huì)在后期樣式構(gòu)建中派上用場(chǎng)。

五、設(shè)計(jì)師如何與 AI 合作建站

到這一步，我們就真正進(jìn)入“動(dòng)手做”的環(huán)節(jié)了。

其實(shí)這部分最重要的不是你能寫(xiě)出多少代碼，而是你知道怎么表達(dá)你的想法。我們會(huì)分兩步來(lái)講：

1. 初始化環(huán)境：項(xiàng)目先搭起來(lái)

說(shuō)實(shí)話，像什么 Vite、React、Tailwind 的安裝和配置，我一開(kāi)始也搞不清楚。但現(xiàn)在這些事根本不用你親手查、硬著頭皮配。

你只需要問(wèn)一句：

“我想建一個(gè)用 React + Tailwind 的網(wǎng)站，用 Vite 初始化項(xiàng)目，請(qǐng)幫我寫(xiě)出完整的初始化步驟?！?/p>

ChatGPT 就會(huì)一步步告訴你怎么做，包括：

1. 下載什么工具（比如 Node.js）
2. 怎么新建項(xiàng)目
3. 安裝哪些依賴
4. 哪些文件要改動(dòng)
5. 最后怎么啟動(dòng)項(xiàng)目跑起來(lái)

你照著它說(shuō)的復(fù)制粘貼就行，幾分鐘就能跑起來(lái)一個(gè)空白頁(yè)面，后續(xù)所有開(kāi)發(fā)都從這里開(kāi)始。

這個(gè)過(guò)程最重要的一點(diǎn)是：你不用搞懂每一行代碼在干嘛，但要知道你在做什么。

比如你要的是“React + Tailwind”，那就直接告訴它；你要加上 TypeScript、加路由，也可以提前說(shuō)，它就會(huì)自動(dòng)幫你安排好所有配置。

2. 你說(shuō)需求，AI 寫(xiě)代碼

環(huán)境搭好之后，接下來(lái)就是寫(xiě)頁(yè)面了。但“寫(xiě)代碼”這事，你真不用自己去寫(xiě)。

我建站過(guò)程中最有感的一點(diǎn)就是：你只要說(shuō)清楚你想要什么，ChatGPT 就能幫你搭出來(lái)。

比如我一開(kāi)始就直接跟它說(shuō)：

“我想做一個(gè) About 頁(yè)面，上面放頭像、名字和一句自我介紹，居中排版，用 Tailwind?！?/p>

ChatGPT 就直接寫(xiě)了一個(gè)完整的組件，結(jié)構(gòu)、樣式、注釋全都有，甚至還貼心告訴我“這個(gè)地方你可以自己換成你的頭像和文字”。

我又補(bǔ)了一句：

“再寫(xiě)一個(gè) ProjectCard 組件，title / description / image 做輸入，樣式整潔有層次。”

它首先會(huì)基于你的想法梳理邊界及步驟，如果有多個(gè)方案的選擇，也會(huì)詢問(wèn)你的意向，直到最后穩(wěn)健的代碼，并且 ChatGPT 自有的代碼塊，能夠直接替換代碼，省的你去翻找。

你只需要不斷明確你的想法，它就會(huì)不停幫你推進(jìn)開(kāi)發(fā)。

那我到底該怎么和 AI 配合？

這其實(shí)是個(gè)“提問(wèn)技巧”問(wèn)題：

1. 描述結(jié)構(gòu)：「我要三欄布局，右邊放一個(gè)按鈕」
2. 描述交互：「這個(gè)按鈕 hover 的時(shí)候放大一點(diǎn)，有個(gè)過(guò)渡動(dòng)效」
3. 描述場(chǎng)景：「我想做個(gè)作品展示頁(yè)，像 Behance 那樣排布」

你說(shuō)得越清楚，AI 回答得越準(zhǔn)確。哪怕你表達(dá)模糊，它也會(huì)嘗試?yán)斫饽愕囊馑迹⑻峁┓桨缸屇氵x。

而且，如果它第一次沒(méi)給到你想要的效果，你還可以接著追問(wèn)：

“加點(diǎn)陰影試試？” “圖片能不能變成圓角的？” “我想讓間距更寬一點(diǎn)?！?/p>

它不會(huì)不耐煩，更不會(huì)拒絕你，改到你滿意為止。

還是補(bǔ)充一句，如果你選擇了 VS Code 編輯器，記得裝上 Copilot 插件。它不是那種對(duì)話形式，而是實(shí)時(shí)幫你“猜”你要寫(xiě)什么，而且比 ChatGPT 還安靜不打擾。有時(shí)候你只打了一個(gè) div，它已經(jīng)猜你要放頭像、名字和一句話了……

3. 善用第三方組件庫(kù)

做網(wǎng)站做到一半，你可能會(huì)有這種感覺(jué)：

? 功能是跑起來(lái)了，但好像哪里還差點(diǎn)意思； ? 想加點(diǎn)動(dòng)效，描述了半天，AI 做出來(lái)卻完全不對(duì)味。

這時(shí)候，推薦你去逛一逛那些第三方組件 / 動(dòng)效資源庫(kù)。它們不是傳統(tǒng)那種堆滿按鈕、表單的企業(yè)級(jí) UI 組件，而是更適合個(gè)人網(wǎng)站的一點(diǎn)小炫技。比如

這幾個(gè)庫(kù)的共同點(diǎn)是：好看、好用、上手快。你一打開(kāi)就能看到實(shí)際效果動(dòng)起來(lái)，喜歡哪個(gè)直接復(fù)制，完全不需要翻文檔硬讀。實(shí)在不會(huì) copy？直接丟給 ChatGPT，讓它教你怎么嵌進(jìn)項(xiàng)目。

重要的是，它們能給你提供一種“交互語(yǔ)感”：像按鈕吸附、滾動(dòng)視差、磁力 hover、粒子背景這些看起來(lái)有點(diǎn)小炫技的效果，背后其實(shí)都不復(fù)雜，但實(shí)現(xiàn)起來(lái)非常抓眼球。你不一定照搬原樣，但可以從這些動(dòng)效節(jié)奏和結(jié)構(gòu)組合中找到靈感，甚至讓 AI 幫你衍生出自己的風(fēng)格。

這其實(shí)也呼應(yīng)了前面提到的那句話：“無(wú)腦選最好的”。因?yàn)槌墒斓目蚣埽恢皇枪δ苋?、文檔全，還意味著有人已經(jīng)幫你把各種漂亮的組件和細(xì)節(jié)做出來(lái)了，你完全可以站在這些“現(xiàn)成靈感”的肩膀上。

4. 可能會(huì)遇到的一些問(wèn)題

雖然 ChatGPT 已經(jīng)幫了大忙，但說(shuō)實(shí)話，第一次自己建站，多少還是會(huì)遇到點(diǎn)小麻煩。

1. 樣式寫(xiě)上了但沒(méi)生效，不知道哪兒出了問(wèn)題；
2. 有時(shí)結(jié)構(gòu)亂了，看不懂它怎么組織的
3. 你講了一堆需求，AI 卻完全跑偏方向……

這些情況很常見(jiàn)，別急也別氣餒。我當(dāng)初也經(jīng)常卡住，后來(lái)總結(jié)出兩個(gè)比較重要的“心法”：

① 別想著一口氣做完所有頁(yè)面

很多人一開(kāi)始就想把首頁(yè)、About、項(xiàng)目集、Blog 全都寫(xiě)好，結(jié)果頁(yè)面一個(gè)沒(méi)跑起來(lái)就已經(jīng)快放棄了。其實(shí)最好的方式，是只做一個(gè)頁(yè)面，先跑通再說(shuō)。

比如先搞一個(gè)簡(jiǎn)單的介紹頁(yè)，頭像 + 一句話介紹 + 聯(lián)系方式。這個(gè)頁(yè)面能順利跑起來(lái)，你會(huì)對(duì)流程有信心，后面復(fù)制粘貼慢慢擴(kuò)展就容易多了。

做網(wǎng)站跟做設(shè)計(jì)是一樣的，一上來(lái)就想“做完整套視覺(jué)系統(tǒng)”，多半是拖延和內(nèi)耗的開(kāi)始。

② 不要指望 AI 全都懂你

ChatGPT 再?gòu)?qiáng)，也不是你肚子里的蟲(chóng)，它需要你像寫(xiě)需求文檔一樣一步步拆解思路。你說(shuō)“做得炫酷一點(diǎn)”，它可能完全不知道你在想啥。

但如果你換種方式說(shuō)：

“我希望這個(gè)按鈕 hover 的時(shí)候能放大一點(diǎn)，有個(gè)緩動(dòng)動(dòng)畫(huà)”“圖片上加一層透明遮罩，文字能浮出來(lái)”

這樣它就能聽(tīng)懂、照做，還能給你多個(gè)變體讓你挑，所以你需要做的，其實(shí)就是把設(shè)計(jì)師的視覺(jué)語(yǔ)言，轉(zhuǎn)換成結(jié)構(gòu)描述 + 行為描述。

其實(shí)網(wǎng)站搭建過(guò)程中的不斷學(xué)習(xí)，在后期有很多小的問(wèn)題你完全可以自己解決掉。

這個(gè)過(guò)程，不光讓網(wǎng)站做得出來(lái)，也讓你對(duì)“設(shè)計(jì)落地”這件事，多了一點(diǎn)掌控感。

六、上線部署

網(wǎng)站在本地構(gòu)建完了只剩最后一步：把它發(fā)布到網(wǎng)上，讓別人也能看到、點(diǎn)開(kāi)、轉(zhuǎn)發(fā)

1. 用什么平臺(tái)上線？

在上線之前，我們得先搞清楚一件事：寫(xiě)好的代碼到底要放在哪里？

可能你會(huì)想，直接綁域名不就完了？但其實(shí)域名就像是一張地址卡，它只是告訴別人“你的網(wǎng)站在哪里”，真正的網(wǎng)站內(nèi)容（你的代碼）得有個(gè)實(shí)際存放的地方。

建議最大 ** 交友平臺(tái) GitHub，你可以把它當(dāng)作一個(gè)“代碼網(wǎng)盤(pán)”——代碼傳上去，版本管理、自動(dòng)更新都很方便，而且還能配合部署平臺(tái)一鍵上線。

對(duì)于部署平臺(tái)我試過(guò) GitHub Pages、Vercel、自購(gòu)服務(wù)器這些方案，最后還是推薦 騰訊云 EdgeOne，理由很簡(jiǎn)單：

1. 不用配置腳本、不用管構(gòu)建流程，代碼更新至倉(cāng)庫(kù)就會(huì)觸發(fā)構(gòu)建；
2. 自動(dòng)識(shí)別項(xiàng)目框架（React、Vite、Next 等）；
3. 支持一鍵證書(shū)、自定義域名綁定；

更重要的是，它是免費(fèi)的，而且即使你沒(méi)備案，國(guó)內(nèi)訪問(wèn)速度也很快——親測(cè)效果比大部分海外平臺(tái)都穩(wěn)。

2. 圖片太多怎么辦？

設(shè)計(jì)師的網(wǎng)站通常圖片比較多，像作品圖、動(dòng)效展示圖、大圖滾動(dòng)頁(yè)，很容易就幾百 MB 起步。

而由于我們大多將網(wǎng)站部署在 GitHub 這類海外平臺(tái)，國(guó)內(nèi)訪問(wèn)會(huì)比較慢，甚至圖片直接加載失敗，體驗(yàn)大打折扣。因此，建議上線前做好這三件事：

① 圖片壓縮

推薦使用 tinypng.com，把圖片上傳后它會(huì)自動(dòng)壓縮體積，視覺(jué)上幾乎無(wú)差，但文件大小能砍掉一半多，非常適合作品圖、Banner、動(dòng)效幀圖等內(nèi)容做預(yù)處理。

② 格式轉(zhuǎn)化

如果你網(wǎng)站中還在大量使用 JPG、PNG 格式，還是建議轉(zhuǎn)成 WebP。它在視覺(jué)質(zhì)量差異不大的前提下，文件體積更小、加載更快，很適合網(wǎng)頁(yè)訪問(wèn)。

常用工具有：Squoosh：可在線壓縮并轉(zhuǎn)換成 WebP，支持畫(huà)質(zhì)控制；

注意：目前 Safari（尤其是低版本）對(duì) WebP 的支持有限，如果考慮全面兼容性，也可以采用源圖 + WebP 的方式按需加載。

③ 外鏈圖床

不建議把所有圖片都直接打包進(jìn)項(xiàng)目中，更推薦上傳到圖床，再用鏈接引用的方式加載，這樣網(wǎng)頁(yè)會(huì)更輕盈，訪問(wèn)更快。

3. 要不要買一個(gè)域名

首先，不買也沒(méi)關(guān)系，EdgeOne 會(huì)默認(rèn)給你一個(gè) .edgeone.app 結(jié)尾的子域名，不會(huì)影響使用。

但如果你比較介意，或是打算長(zhǎng)期經(jīng)營(yíng)這個(gè)網(wǎng)站，比如放簡(jiǎn)歷、做內(nèi)容輸出，那還是建議買個(gè)好記的獨(dú)立域名，比如 yourname.design、yourname.com 之類，看起來(lái)會(huì)更專業(yè)。

域名在哪里買？推薦這幾個(gè)平臺(tái)：

① 騰訊云 / 阿里云國(guó)內(nèi)大廠平臺(tái)，中文界面友好，適合首次買域名的新手。尤其如果你本來(lái)就打算用 EdgeOne 或 COS，直接在騰訊云買域名可以省一些折騰。

② Namecheap 國(guó)外平臺(tái)，價(jià)格透明、界面簡(jiǎn)潔，管理也很方便。英文界面，但比較適合做國(guó)際向品牌或英文域名。

③ GoDaddy 全球老牌域名商，域名種類全、經(jīng)常有促銷，支持中文搜索，適合想找冷門(mén)后綴或國(guó)際向用戶使用。

4. 上線前的快速檢查清單

先別急著發(fā)朋友圈，來(lái)個(gè)“最后大掃除”：

這些東西看著不起眼，但也會(huì)會(huì)影響別人對(duì)你網(wǎng)站的第一印象。

最后的最后

網(wǎng)站上線那一刻，并不是終點(diǎn)，而是一個(gè)新的開(kāi)始，它其實(shí)可以慢慢變成你個(gè)人品牌的養(yǎng)成地。比如：

這些小動(dòng)作不難做，但會(huì)慢慢積累出你自己的風(fēng)格和內(nèi)容資產(chǎn)。

把網(wǎng)站從“腦子里的一個(gè)想法”變成“線上可訪問(wèn)的成品”，這整個(gè)過(guò)程本身就是一次很棒的練習(xí)。它不只是一個(gè)網(wǎng)頁(yè)，更是你用行動(dòng)在說(shuō)的一句話：“我有點(diǎn)想法，想讓你看到?！?/p>

愿你的網(wǎng)站不是為“做完”而做，而是為你自己存在——你想說(shuō)什么，想怎么說(shuō)，想給誰(shuí)看，全都由你決定。

這才是最酷的部分。

編者注：如果給自己建個(gè)網(wǎng)站，你想展示什么內(nèi)容？歡迎評(píng)論區(qū)交流。

作者：姜宇De宇