設計個人網站？看看這份實操指南（設計篇）
整理版優先睇
設計個人網站唔係淨係講代碼，視覺風格先係決定性因素——Rico分享由Figma到開源模板嘅完整設計流程
呢篇文章係由設計師Rico寫嘅，佢發現市面上教人整個人網站嘅內容，大多集中喺域名、伺服器、代碼呢啲技術位，反而好少人講設計應該點樣做。為咗填補呢個空隙，佢自己用業餘時間由頭到尾設計咗套中英文雙版本嘅個人網站模板，仲開源咗出嚟。文章就係以呢個模板做案例，詳細講解設計階段嘅思路同實作方法。
Rico強調，對設計師嚟講，個人網站就係自己嘅作品，視覺風格直接影響訪客嘅第一印象，遠比功能清單重要。佢提出「視覺優先」嘅理念：先決定視覺風格（例如復古、3D、手繪），再圍繞風格規劃內容框架。佢自己揀咗極簡+復古風格，用Bento網格整合元素，再配合Matter.js物理動效增加互動趣味。佢嘅設計文件同素材庫都公開咗喺Figma Community，方便其他人直接參考或修改。
文章結論係：出色嘅設計師個人網站，關鍵唔係用咩先進技術，而係能否真實傳遞到設計者嘅態度同價值觀。成個流程包括確立視覺風格、快速做低像真度原型、定義顏色同字體、組件化設計等步驟，仲推薦咗多個配色工具同中文字體平台。呢篇係系列第一部份（設計篇），之後會陸續有開發、部署同擴展篇。
- 設計師個人網站應該「視覺優先」：先決定風格（復古、3D、手繪等），再規劃內容框架，唔好跟傳統企業網站嘅規範。
- 用Bento網格整合復古元素（如打字機、遊戲卡帶），配合物理動效（Matter.js）增加互動趣味，令網站有記憶點。
- 顏色規範可以用 shadcnstudio 等工具生成 Tailwind 配置；英文字體用 Google Fonts，中文字體推薦文風字體、有字庫或 Noto Sans SC。
- 喺Figma做組件化設計，利用變體對應 React Props、自動佈局對應 Flexbox，可以打通設計到開發嘅鏈路。
- 開源咗中英文模板同Figma文件，直接複製修改配色（用Variables to CSS插件）就可快速自訂主題。
中文版模板預覽
ricoui-portfolio.pages.dev
英文版模板預覽
portfolio.ricoui.com
Figma 設計文件
figma.com/community/file/1570102065468722827
開源倉庫（英文版）
github.com/ricocc/ricoui-portfolio
點解設計師需要個人網站？
Rico指出，雖然小紅書、站酷、Dribbble呢啲平台都可以發作品，但始終受平台規則限制，內容唔完全屬於自己。個人網站就可以完全掌控內容，唔單止展示結果，仲可以講過程、思考同行交流。
對設計師而言，網站本身就係作品，視覺風格直接定義咗個人標籤
- 平台規則會變，完全掌控嘅內容永遠屬於自己
- 作品集只展示結果，個人網站可以講過程、思考同行交流
- 簡歷係靜態嘅，網站可以實時更新技術棧同動態
佢仲話，自己好鍾意喺互聯網上搭建一個完全屬於自己嘅漫想世界，呢個先係推動佢整網站嘅真正動力。
設計思路：視覺優先，風格即定位
Rico嘅設計理念係「視覺優先」，佢認為設計師嘅個人網站應該先定風格，再規劃內容框架，而唔係傳統企業網站嗰種先原型後設計嘅流程。
視覺風格直接決定網站嘅內容框架同用戶感知
佢列舉咗兩個例子：Sara Youssry 用手繪房間場景傳達温度，每個物件都對應網站功能；alex./chen 就用 3D 場景展現技術感。風格即定位，唔同風格會帶嚟完全唔同嘅視覺體驗。
至於 Rico 自己嘅模板，佢考慮到要易理解、通用性高，方便其他人複用，所以揀咗極簡+復古風格，再配合交互動效突出設計感，同埋盡量保持組件化。
設計過程：快速試錯，善用素材同 AI
Rico 話佢個人唔花太多時間做原型，只係畫咗三個主要頁面嘅低像真度結構圖，然後就開始直接設計。佢認為個人項目唔使糾結流程規範，方便自己記憶就得。
先畫簡單灰圖確定結構，再邊開發邊補細節，咁可以快速試錯
復古風格方面，佢聯想到打字機、老電視、遊戲機等物件，最後決定用 Bento 網格將唔同元素整齊收納，避免畫面雜亂。每個盒子再加唔同嘅交互動效凸顯設計感。
右側技術棧用咗 Matter.js 物理碰撞模擬效果，增加互動趣味
佢特別提到「Faves」模塊，用遊戲卡帶嚟展示佢目前體驗嘅 AI 產品，仲將收集嘅卡帶 PNG 放咗喺素材庫。佢鼓勵讀者都可以喺網站入面埋啲個人彩蛋，令訪客感受到設計心思。
善用 AI：將素材圖上傳做風格參考，生成相同風格嘅元素
顏色規範同字體技巧
Rico 嘅配色方案嚟自「極簡+復古+動效」方向，再加佢鍾意嘅復古未來風。佢推薦咗幾個配色工具：shadcnstudio 可以可視化調整色板並直接導出 Tailwind 配置；gradientshub 輸入基礎色生成整套調色板；kigen.design 支持導出 CSS 變量；arco.design 有色彩理論指導；uicolors.app 可以實時預覽顏色喺按鈕、卡片上嘅效果。
字體方面，佢習慣雙字體搭配：標題用復古襯線字 Instrument Serif，正文用 Inter，確保閲讀流暢。英文字體直接從 Google Fonts 選就得，中文字體就比較頭痛，因為體積大、加載慢。佢推薦文風字體（windfonts.com）、有字庫（webfont.com）同 Google Fonts 嘅 Noto Sans SC。
如果擔心字體庫冇對應字符，可以將文字轉做 SVG 插入網頁，避開缺字問題
組件化設計同開發準備
喺 Figma 設計文件中，Rico 將主要模塊都做咗組件化設計，顏色變量處理好之後，可以用「Variables to CSS」插件一鍵導出 CSS 變量到代碼，即使唔識代碼，只要複製貼上就可以完成配色替換。
Figma 嘅變體 = React Props，自動佈局 = Flexbox/Grid，組件實例 = 組件複用
佢認為熟練 Figma 嘅組件化設計，可以自然理解現代前端框架嘅心智模型。設計師學 Vibe Coding 都有優勢，因為 AI 擅長處理結構化、邏輯清晰嘅輸入。
- 1 學習將複雜 UI 拆解為可管理、可複用嘅細塊（原子設計原則），係寫清晰模塊化代碼嘅基礎
- 2 用「實例」「屬性」「狀態」呢啲詞彙同開發人員或 AI 溝通，確保雙方對組件結構同行為有共同理解
最後，佢總結設計篇嘅重點：確立「視覺優先」理念、揀好風格、規劃佈局、定義顏色字體、善用工具、組件化準備。設計圖只係開始，下一篇會講點樣自定義模板同開發實現。
前言
大家好呀，我係 Rico，喺之前嘅文章入面，我大概講咗關於個人網站同埋建站嘅思路，仲推薦咗一啲我覺得好正嘅網站模板。
但係作為實踐派，我發現之前嘅內容冇咗由設計到上線嘅完整閉環。
搜索「如何搭建個人網站」，結果多數係域名購買、服務器配置、代碼教學，一係就係建站平台嘅廣告，或者推薦啲過時嘅模板，好少人講設計應該點樣做。
英文版網站預覽
所以，最近我利用業餘時間完整設計同開發咗一套個人網站模板（中英文雙版本），行咗一次流程，將之前嘅想法落地成可重用嘅開源方案，咁跟住盡善盡美嘅原則，就以呢個網站做案例，傾下由設計到開發，同埋部署上線嘅成個流程。
點解設計師需要個人網站？
喺小紅書、站酷、Dribbble 等地方發作品唔夠咩？
夠，但係唔完整亦都唔夠自由。
- •平台規則會變，完全由自己掌控嘅內容永遠屬於自己
- •作品集只係展示結果，個人網站可以講過程、思考同交流
- •簡歷係靜態嘅，網站可以實時更新你嘅技術棧同動態
對設計師嚟講，網站本身就係作品，視覺風格直接定義咗我嘅個人標籤，更重要嘅係，我鍾意喺互聯網上搭建一個完全屬於自己嘅漫想世界。
中文版本
開源個人網站模板
- •✨ 中文版：ricoui-portfolio.pages.dev
- •🎉 英文版: portfolio.ricoui.com
- •🎨 Figma 文件：figma.com/community/file/1570102065468722827
- •⬇️ 開源倉庫：github.com/ricocc/ricoui-portfolio
- •⬇️ 中文版：github.com/ricocc/ricoui-portfolio-zh
技術棧：Figma + Astro + Tailwind CSS
呢個系列《個人網站全流程指南》目前初步定咗分做 4 篇，設計篇、開發篇、部署篇同擴展篇。後之後睇返實際嘅問題反饋再補充一啲需要嘅內容知識點。
呢篇文章就集中講設計維度。
設計思路
個人網站係個人品牌化嘅聲明，佢融合咗作品集、博客、個人簡介、社交等功能，適合想塑造明確個人品牌定位嘅從業者。佢嘅核心係塑造立體、有特色嘅個人品牌形象，並提供一個互聯網窗口，視覺上同傳統企業網站好唔同，冇咁多規範同約束，可以話係完全自由。
尤其係對於設計師羣體嚟講，並唔缺乏獨特嘅創意同天馬行空嘅設計想法，所以唔使拘泥傳統嘅網站設計結構，包括呢篇文章嘅設計思路，只係個人喜好，僅供參考。
關於 rico-portfolio 嘅頁面設計，非常簡單，我大致跟從咗以下嘅設計：
首頁（Home）
├─ 作品展示（Works / Projects）
│ └─ 詳細頁（Detail）
├─ 文章寫作（Writing / Blog）
│ └─ 文章頁（post）
├─ 關於我（About）
└─ 簡歷（Resume）
呢個結構係我自己對於個人網站嘅結構規劃，再根據設計想法同功能上嘅偏好，做一啲設計上嘅加減法。攝影師可能需要 Gallery，開發者可能需要 GitHub 統計等，可以睇下圖：
由左到右分別係：rico-portfolio， tigranz.com，gauthammukesh.com，hyning.com
呢幾個網站喺設計風格同側重表現嘅重點都有差異，但係設計邏輯都仲喺上面嘅框架描述入面，只係根據側重展示嘅方向，去做設計表現上嘅調整。
點樣進行設計？
我喺網上搜索「如何設計個人網站」，不出意料都係點樣開發同上線，直接跳過咗如何設計呢個階段，好似設計係每個人都默認識得嘅能力？ 今次嘅網站設計我用咗 Figma，而且將設計文件開源咗去社區，所以你可以直接一鍵複製到個人空間，一邊對照參考，一邊睇文章，文件地址如下：
✨ Figma文件：figma.com/community/file/1570102065468722827
1. 視覺風格同理念
一般嘅網站設計流程係先確定原型，然後再根據原型嚟做設計。但係設計師嘅個人網站，內容呈現嘅方式更加自由，視覺會優先於功能同內容框架。
對設計師嚟講，視覺表達係核心優勢，視覺風格同視覺理念對於最終呈現嘅作品形態至關重要，唔同嘅視覺風格（模擬真實、插畫手繪、賽博朋克、3D 沉浸式等），直接決定咗網站嘅內容框架同用戶感知。
sarayoussry.com
以 Sara Youssry 嘅個人網站為例，佢用繪畫嘅風格畫咗一個房間，再結合物品寓意同生動嘅交互將網站嘅信息關聯起來。窗外嘅場景與時間同季節景色真實對照，畫架（繪畫作品）、報紙（文章）、枱面嘅紙稿（項目）、相框（關於）、老式電話（聯繫），牆上嘅掛框（簡歷同證書）。視覺與功能完全融合。
a-chen.webflow.io
alex./chen 嘅個人網站就用咗 3D 結合嘅方式嚟做設計呈現，咁所有嘅視覺同內容安排都會圍繞主視覺嚟排佈。
所以個人網站嘅視覺呈現方式可以係不拘一格嘅。設計師嘅個人網站本身就係作品，訪客第一眼睇到嘅係視覺風格，而唔係功能列表。就好似 Sara Youssry 用手繪房間場景傳達設計嘅温度，alex./chen 用 3D 場景展現技術感，視覺即信息，風格即定位。唔同嘅設計理念同風格技法，直接決定咗網站最終嘅效果，視覺風格要服務於你嘅個人標籤。
而 rico-portfolio 嘅設計目標包含咗幾重考量：
第一係作為新手指南嘅開源模板，希望保持易理解同通用性，並且預留二次開發嘅空間，方便喺原主題上進行調整同增加 CMS。
第二係避免過於個性化設計，越獨特嘅設計，太有個人風格，不利於其他人複用。
所以，我希望係簡單嘅設計結構，但係又有視覺上嘅亮點。最終視覺風格上，我決定用極簡風格加復古設計，另外增加交互動效嚟凸顯設計感，仲最大程度保持組件化。
2. 設計過程
我個人唔需要花太多時間去做原型。雖然每個人都嘅設計流程唔同，但係對於個人項目，唔使糾結流程規範，方便自己記住就得，下面係我從歷史記錄揾返出嚟嘅最初原型，只係畫咗三個主要嘅頁面結構。
為咗展示排好版面，實際上係非常混雜嘅設計畫板。
然後開始動手設計，實際設計時唔使糾結完整原型，我通常先畫簡單灰圖確定結構，再邊開發邊補細節，咁樣可以快速試錯，有啲效果喺代碼中實現更簡單。
我嘅復古風格設計思路：復古設計？ 我會聯想到復古嘅物件，打字機、老電視、遊戲機……點樣將呢啲設備同設計嘅元素結合埋一齊呢？我第一時間嘅想法係用 Bento 嘅風格，將唔同嘅元素用規整嘅網格收納起嚟，避免畫面太過雜亂，分散注意力，再為每個盒仔添加唔同嘅交互動效，凸顯設計感。
最終嘅設計，會更加動態一啲：
右邊係表達我當下嘅技術棧，我用咗 Matter.js 嘅經典物理碰撞模擬效果，增加交互嘅趣味。
呢度用嘅絕大部分元素都喺 Figma 社區嘅素材庫入面，用好短時間。如果你覺得素材風格好啱，但係又缺你需要嘅元素點算？
善用 AI，將素材圖上傳 AI 作為風格參考，然後添加提示詞，生成相同風格嘅素材。
特別想傾下 Faves 模塊，復古令我不由得諗起童年嘅遊戲時光，最後喺復古遊戲機相關嘅元素中揀咗遊戲卡帶，承載嘅元素係我目前正在體驗嘅 AI 產品（探索 AI 嘅過程真係有種闖關遊戲嘅快樂），我將收集嘅卡帶 PNG 圖片都放咗去素材庫入面，你可以揀自己鍾意嘅卡帶樣式，承載自己鍾意嘅內容。
所以對於個人網站，完全可以結合自己嘅喜好，放上自己鍾意嘅元素，埋一啲個人彩蛋，令訪客感受到你嘅設計心思，咁樣先有趣。
3. 顏色規範同字體嘅技巧
顏色 Color
明確「極簡+復古+動效」嘅風格，加上最近迷上覆古未來風，所以配色方案順理成章定咗落嚟：
但如果你唔知點樣快啲定義顏色嘅話，推薦我常用嘅方法：
使用配色生成工具
- •shadcnstudio.com/theme-generator（可視化調整，直接生成 Tailwind 配置）
- •gradientshub.com/tools/color-palette-css（輸入基礎色，生成整套調色板）
- •kigen.design/color（支持導出 CSS 變量，方便組件化）
- •arco.design/palette（色彩理論指導）
- •uicolors.app/generate/（實時預覽顏色喺按鈕、卡片上嘅效果）
例如 shadcnstudio 開源嘅配色方案生成器，可以好直觀同方便咁配置配色方案同導出。
我自己開發嘅色卡生成工具，可以輸入顏色生成配色方案，或者用其他顏色工具。
利用配色方案生成平台，可以好直觀、便捷咁揀自己鍾意嘅配色方案，而且我技術棧用咗 Tailwind，呢個代表你可以喺配色平台中直接生成一套新嘅 Tailwind 配色，輸出做代碼直接取代我嘅配色，快速修改主題配色。
字體選擇
字體選擇，我習慣雙字體搭配，標題用復古質感嘅襯線字體 Instrument Serif，正文就保持閲讀流暢性，用咗最熱門嘅 Inter。
但呢個唔係隨便揀嘅，英文字體建議直接從 Google Fonts 中選擇，然後直接將連結貼到主題代碼度就得，字體平台已經幫你優化咗字體加載速度。
而中文字體嘅加載其實係一個小難題。中文字體因為象形文字嘅獨特性，加載慢而且容易出現字符缺失，體積非常之大，所以能夠選擇嘅範圍好細。我推薦可以從以下幾個平台揾中文字體，並取代到主題樣式入面：
- •文風字體（windfonts.com）（提供輕量中文字體，支持按需加載）
- •有字庫（webfont.com）（商業字體授權清晰，適合需要合規使用嘅場景）
- •Google Fonts （優先揀 Noto Sans SC，體積細、兼容性強）
中文嘅網站版本，我對中文字體同閲讀體驗都做咗一啲優化，相比英文，會少咗少少趣味性。
如果你擔心字體庫冇對應字符嘅話，咁不如優先揀最通用嘅字體，或者將文字轉換成 SVG 插入網頁，避開字體庫揾唔到對應文字嘅問題。
4. 組件化同自定義
喺 Figma 設計文件入面，我將主要嘅模塊都做咗組件化設計，尤其係顏色做咗變量處理，可以方便喺設計稿中修改，然後透過 'Variables to CSS' 插件（喺 Figma 社區搜索即可安裝），一鍵導出 CSS 變量到主題代碼入面。就算你唔識代碼，只需要複製貼上就可以完成配色取代。自定義嘅具體實操，我會放喺開發篇去講過程。
順便講下，Figma 一直以嚟都喺靠近同模擬真實嘅開發狀態，從而打通設計到開發嘅鏈路。事實上，Figma 嘅佈局約束同變體邏輯同現代前端框架（例如 React、Vue）嘅實現方式高度對應，當你熟練 Figma 嘅組件實例、變體、屬性、嵌套同自動佈局時，你自然就會學識喺開發中組件化設計嘅心智模型。
舉個例子：
- •Figma 嘅「變體」（Variant）= React 嘅 Props
- •Figma 嘅「自動佈局」（Auto Layout）= Flexbox/Grid
- •Figma 嘅「組件實例」（Instance）= 組件複用
另外不妨從以下兩個方向去深入學習：
- •學識點樣將複雜 UI 拆解成可管理、可複用嘅細塊（原子設計原則），呢個係寫清晰、模塊化代碼嘅基礎。
- •可以使用「實例」（Instance）、「屬性」（Prop）、「狀態」（Variant/State）呢啲詞彙同開發人員或 AI 溝通，確保雙方對組件嘅結構同行為有共同理解。
AI（尤其係大型語言模型）喺處理結構化、邏輯清晰嘅輸入時表現最好。Figma 嘅訓練可以令我哋知道點樣系統性地描述一個組件，以及更複雜嘅需求。設計師對 Vibe Coding 嘅學習都有優勢。
最後
到呢度，我哋大致梳理咗喺設計過程入面嘅一啲要點，確立咗「視覺優先」嘅設計理念，揀咗復古極簡嘅風格表達，規劃咗 Bento 嘅佈局，定義咗顏色同字體，提供咗一啲輔助工具，仲為開發做好咗準備。一個出色嘅設計師個人網站唔在於技術有幾先進，而在於佢能否真實傳達你嘅設計態度同價值觀。
但係，設計圖終究只係靜態嘅圖片。喺下一篇 《個人網站全流程指南（開發篇）》 入面，會傾下點樣自定義修改現有模板嘅主題，同開發實現。
前言
大家好呀，我是 Rico，在之前的文章裏，我大概講了關於個人網站和建站的想法思路，以及推薦了一些我認為非常棒的網站模板。
但作為實踐派，我發現之前的內容缺少從設計到上線的完整閉環。
搜索'如何搭建個人網站'，結果大多是域名購買、服務器配置、代碼教程，要不就是建站平台的廣告，或者給你推薦一些陳舊的模板，很少有人講設計該怎麼做。
英文版網站預覽
因此，最近我利用業餘時間完整設計與開發了一套個人網站模板（中英文雙版本），走了一遍流程，將之前的想法落地為可複用的開源方案，那麼遵循盡善盡美的原則，就以這個網站為案例，聊聊從設計到開發、以及部署上線的全流程。
為什麼設計師需要個人網站？
在小紅書、站酷、Dribbble 等上發作品不夠嗎？
夠，但不完整也不夠自由。
- •平台規則會變，完全掌控的內容永遠屬於自己
- •作品集只展示結果，個人網站可以講過程、思考和交流
- •簡歷是靜態的，網站可以實時更新你的技術棧和動態
對設計師而言，網站本身就是作品，視覺風格直接定義了我的個人標籤，更重要的是，我喜歡在互聯網上搭建一個完全屬於自己的漫想世界。
中文版本
開源個人網站模板
- •✨ 中文版：ricoui-portfolio.pages.dev
- •🎉 英文版: portfolio.ricoui.com
- •🎨 Figma 文件：figma.com/community/file/1570102065468722827
- •⬇️ 開源倉庫：github.com/ricocc/ricoui-portfolio
- •⬇️ 中文版：github.com/ricocc/ricoui-portfolio-zh
技術棧：Figma + Astro + Tailwind CSS
這個系列《個人網站全流程指南》目前初定是分為 4 篇，設計篇、開發篇、部署篇和擴展篇。後續看實際的問題反饋再補充一些需要的內容知識點。
本篇文章則聚焦設計維度。
設計思路
個人網站是個人品牌化的聲明，它融合了作品集、博客、個人簡介、社交等功能，適合傾向於想塑造明確個人品牌定位的從業者。它的核心是塑造立體的、有特色的個人品牌形象並提供一個互聯網窗口，在視覺上不同於傳統的企業網站有太多的規範和約束，可以說是完全自由的。
尤其對於設計師羣體來說，並不缺乏獨特的創意和天馬行空的設計想法，所以不必拘泥傳統的網站設計結構，包括本篇文章的設計思路，只是個人的喜好，供以參考。
關於 rico-portfolio 的頁面設計，非常簡單，我基本遵循了以下的設計：
首頁（Home）
├─ 作品展示（Works / Projects）
│ └─ 詳細頁（Detail）
├─ 文章寫作（Writing / Blog）
│ └─ 文章頁（post）
├─ 關於我（About）
└─ 簡歷（Resume）
這個結構是我自己對於個人網站的結構規劃，在根據設計想法和功能上的偏好，做一些設計上的加減法。攝影師可能需要 Gallery，開發者可能需要 GitHub 統計等，可以看下圖：
從左到右分別是：rico-portfolio， tigranz.com，gauthammukesh.com，hyning.com
這幾個網站在設計風格上和側重表現的重點都有差異，但是設計邏輯也還在上面的框架描述中，只是根據側重展示的方向，去進行設計表現上的調整。
如何進行設計？
我在網上去搜索“如何設計個人網站”，不出意料的都是如何去開發和上線，直接跳過了如何設計這個階段，好像設計是每個人都默認會的能力？ 這次的網站設計我使用了 Figma，並且把設計文件開源到了社區，所以你可以直接一鍵複製到個人空間，一邊對照參考，一邊看文章，文件地址如下：
✨ Figma文件：figma.com/community/file/1570102065468722827
1. 視覺風格和理念
一般的網站設計流程是先確定原型，然後再根據原型來做設計。但是設計師的個人網站，內容呈現的方式更加自由，視覺會優先於功能和內容框架。
對設計師而言，視覺表達是核心優勢，視覺風格和視覺理念對於最終呈現的作品形態至關重要，不同的視覺風格（模擬真實、插畫手繪、賽博朋克、3D 沉浸式等），直接決定了網站的內容框架和用戶感知。
sarayoussry.com
以 Sara Youssry 的個人網站為例，她用繪畫的風格繪製了一個房間，再結合物品寓意和生動的交互把網站的信息關聯起來。窗外的場景與時間和季節景色真實對照，畫架（繪畫作品）、報紙（文章）、桌面的紙稿（項目）、相框（關於）、老式電話（聯繫），牆上的掛框（簡歷和證書）。視覺與功能完全融合。
a-chen.webflow.io
alex./chen 的個人網站則使用了 3D 結合的方式來做設計呈現，那麼所有的視覺和內容安排都會圍繞主視覺來做排布。
因此個人網站的視覺呈現方式可以是不拘一格的。設計師的個人網站本身就是作品，訪客第一眼看到的是視覺風格，而非功能列表。就像 Sara Youssry 用手繪房間場景傳達設計的温度，alex./chen 用 3D 場景展現技術感，視覺即信息，風格即定位。不同的設計理念和風格技法，直接決定了網站最終的效果，視覺風格要服務於你的個人標籤。
而 rico-portfolio 的設計目標包含幾重考量：
一是作為新手指南的開源模板，希望保持易理解和通用性，並且預留二次開發的餘地，方便在原主題上進行調整和增加 CMS。
二是避免過於個性化設計，越獨特的設計，太具個人風格，不利於他人複用。
因此，我希望是簡單的設計結構，但又有視覺上的亮點。最終視覺風格上，我敲定為極簡風格+復古設計，另外增加交互動效凸顯設計感，並且最大程度的保持組件化。
2. 設計過程
我個人是不需要花費太多時間去做原型。儘管每個人的設計流程不同，但是對於個人項目，不必糾結流程規範，方便自己記憶就行，下面是我從歷史記錄裏面翻出來的最初原型，只畫了三個主要的頁面結構。
為了展示排好版面了，實際上是非常混雜的設計畫板。
然後開始動手設計，實際設計時不用糾結完整原型，我通常先畫簡單灰圖確定結構，再邊開發邊補細節，這樣能快速試錯，有些效果在代碼中實現更簡單。
我的復古風格設計思路：復古設計？ 我會聯想到復古的物件，打字機、老電視、遊戲機…如何把這些設備和設計的元素結合起來呢？我第一時間的想法是利用 Bento 的風格，把不同的元素用規整的網格收納起來，避免畫面過於雜亂，分散注意力，再為每個盒子添加不同的交互動效，凸顯設計感。
最終的設計，會更加動態一些：
右側是表達我當前的技術棧，我用了 Matter.js 的經典物理碰撞模擬效果，增加交互的趣味。
這裏使用的絕大部分元素都在 Figma 社區的素材庫中，耗時很短。如果你覺得素材風格很喜歡，但是又缺乏你需要的元素怎麼辦？
善用 AI，把素材圖傳上 AI 作為風格參考，然後添加提示詞，生成相同風格的素材。
特別想聊聊 Faves 模塊，復古讓我不由得聯想到童年的遊戲時光，最終在復古遊戲機相關的元素中選擇了遊戲卡帶，承載的元素則是我目前在體驗的 AI 產品（探索 AI 的過程真的有種闖關遊戲的快樂），我把收集的卡帶 PNG 圖片也放到了素材庫中，你可以選擇自己喜歡的卡帶樣式，承載自己喜歡的內容。
所以對於個人網站，完全可以結合自己的喜好，放上自己喜歡的元素，埋一些個人彩蛋，讓訪客感受到你的設計心思，這才有趣。
3. 顏色規範和字體的技巧
顏色 Color
明確”極簡+復古+動效“的風格，加上最近迷上覆古未來風，因此配色方案順其自然定下來了：
但如果你不知道怎麼快速定義顏色的話，推薦我常用的方法：
使用配色生成工具
- •shadcnstudio.com/theme-generator（可視化調整，直接生成 Tailwind 配置）Tailwind 配置）
- •gradientshub.com/tools/color-palette-css（輸入基礎色，生成整套調色板）
- •kigen.design/color（支持導出 CSS 變量，方便組件化）
- •arco.design/palette（色彩理論指導）
- •uicolors.app/generate/（實時預覽顏色在按鈕、卡片上的效果）
比如 shadcnstudio 開源的配色方案生成器，可以非常直觀和便利的配置配色方案和導出。
我自己開發的色卡生成工具，可以輸入顏色生成配色方案，或者使用其他顏色工具。
利用配色方案生成平台，可以很直觀、便捷的選擇自己喜歡的配色方案，並且我技術棧使用了 Tailwind，這代表着你可以在配色平台中直接生成一套新的Tailwind配色，輸出為代碼直接替換掉我的配色，快速修改主題配色。
字體選擇
字體選擇，我習慣雙字體搭配，標題使用復古質感的襯線字體 Instrument Serif，正文則保持閲讀流暢性，用了最熱門的 Inter。
但這並不是隨意選擇的，英文字體建議直接從 Google Fonts 中進行選擇，然後直接把連結粘貼到主題代碼中即可，字體平台已經幫你優化了字體加載速度。
而中文字體的加載其實是一個小難題。中文字體由於象形文字的獨特性，加載慢且易出現字符缺失，體積非常的大，因此能夠選擇的範圍非常小。我推薦可以從下列的幾個平台尋找中文字體，並且替換到主題樣式中：
- •文風字體（windfonts.com）（提供輕量中文字體，支持按需加載）
- •有字庫（webfont.com）（商業字體授權清晰，適合需合規使用的場景）
- •Google Fonts （優先選 Noto Sans SC，體積小、兼容性強）
中文的網站版本，我對中文字體和閲讀體驗都做了一些優化，相比於英文，會少一點點趣味性。
如果你擔心字體庫沒有對應字符的話，那麼要不優先選擇最通用的字體，不然把文字轉換為 SVG 插入網頁，避開字體庫中找不到對應文字的問題。
4. 組件化和自定義
在 Figma 設計文件中，我把主要的模塊都做了組件化設計，尤其是顏色做了變量處理，可以方便在設計稿中進行修改，然後通過 'Variables to CSS' 插件（Figma 社區搜索即可安裝），一鍵導出 CSS 變量到主題代碼中。即使你不懂代碼，只需複製粘貼即可完成配色替換。自定義的具體實操，我放到了開發篇中去講解過程。
順便聊聊，Figma 一直以來都在靠近和模擬真實的開發狀態，從而打通設計到開發的鏈路。事實上，Figma 的佈局約束和變體邏輯與現代前端框架（如 React、Vue）的實現方式高度對應，當你熟悉 Figma 的組件實例、變體、屬性、嵌套和自動佈局時，你自然而然地就學會了在開發中組件化設計的心智模型。
舉個例子：
- •Figma 的"變體"（Variant）= React 的 Props
- •Figma 的"自動佈局"（Auto Layout）= Flexbox/Grid
- •Figma 的"組件實例"（Instance）= 組件複用
另外不妨從下面兩個方向去深入學習一下：
- •學會如何將複雜 UI 拆解為可管理、可複用的小塊（原子設計原則），這是編寫清晰、模塊化代碼的基礎。
- •可以使用“實例”（Instance）、“屬性”（Prop）、“狀態”（Variant/State）這些詞彙與開發人員或 AI 交流，確保雙方對組件的結構和行為有共同的理解。
AI（尤其是大型語言模型）在處理結構化、邏輯清晰的輸入時表現最佳。Figma 的訓練可以讓我們知道如何系統性地描述一個組件，以及更復雜的需求。設計師對於 Vibe Coding 的學習也是有優勢的。
最後
至此，我們大致梳理了在設計過程中的一些要點，確立了'視覺優先'的設計理念，選擇了復古極簡的風格表達，規劃了 Bento 的佈局，定義了顏色與字體，提供了一些輔助工具，並且為開發做好了準備。一個出色的設計師個人網站不在於技術多麼前沿，而在於它能否真實傳遞你的設計態度與價值觀。
但是，設計圖終究只是靜態的圖片。在下一篇 《個人網站全流程指南（開發篇）》 中，聊聊如何自定義修改現有模板的主題，和開發實現。