源碼+設計文件開源了！我的個人網站（設計篇）
整理版優先睇
設計師Rico開源個人網站模板，基於Figma+Astro+Tailwind，強調組件化設計與所見即所得開發體驗
呢篇文章係由設計師Rico寫嘅，佢之前出過一篇關於設計師個人網站選擇嘅指南，今次就親自實踐，用兩週業餘時間設計開發咗一套開源個人網站模板。佢想透過呢個實戰項目，分享由設計到開發嘅完整流程，尤其係點樣用Figma做組件化設計，再透過Astro框架快速落地。
Rico嘅整體結論係：對於設計師或者想整個人網站嘅新手，呢套技術棧（Figma + Astro + Tailwind）好易上手，可以做到所見即所得。佢嘅模板支援暗色/亮色模式、精緻動畫、博客系統、SEO優化同完全響應式，而且開源咗源碼同Figma文件，方便大家直接使用或自訂主題顏色。
呢篇文章主要聚焦設計維度，下一篇會講部署同AI輔助。Rico強調製作個人網站唔單止係展示作品，更加係一個記錄自己審美同思想變化嘅過程，充滿樂趣。佢目前先上線英文版，後續會推出中文本地化版本。
- Rico開源咗一套個人網站模板，技術棧係Figma + Astro + Tailwind，設計同開發都採用組件化架構。
- 工作流程係：Figma設計組件 → 導出CSS變量 → 複製到theme.css → 喺.astro文件按結構堆組件，實現所見即所得。
- 相比其他模板，呢套特別為設計師優化，顏色用CSS自定義屬性，容易自訂主題；仲支援暗色/亮色模式、AOS動畫等現代化功能。
- 啟發：製作個人網站嘅過程本身就係樂趣，可以記錄自己嘅審美同思想變化，唔單止係向外展示作品。
- 可行動點：可以直接用開源嘅代碼同Figma文件，或者等後續中文版推出；如果想自己整，可以參考佢嘅工作流同技術棧選擇。
網站預覽
Rico個人網站模板線上預覽
開源倉庫
GitHub倉庫，包含完整源碼
Figma文件
Figma社區文件，包含組件化設計稿
實戰起動：由諗法到落地
Rico之前寫過一篇關於設計師個人網站選擇嘅指南，但佢覺得淨係推介模板唔夠完整，所以用咗兩週業餘時間親手設計開發咗一套模板，將之前嘅想法實踐出嚟。佢主要係為咗設計師同對個人網站有興趣嘅朋友而整，呢篇文章會集中講設計維度，下一篇先講部署同AI輔助上線。
模板特性同技術選擇
呢套模板基於Astro框架，搭配Tailwind CSS，設計主題係復古藍色，支援暗色/亮色模式切換。佢嘅特性包括：
- 🚀 最新版Astro，快速輕量嘅靜態站點生成器
- 🎨 現代化設計，復古藍色主題，支援暗色/亮色模式
- 🔩 組件化設計，方便自訂調整
- 🎭 精緻動畫，使用AOS同自定義動畫效果
- 📝 博客系統，支援MD同MDX格式
- 🎯 作品展示，可選圖片或視頻，有詳細頁
- 🔍 SEO優化，內置SEO同社交媒體標籤
- ⚡ 性能優化，圖片優化、代碼分割、懶加載
Rico選擇Astro係因為佢容易維護同易上手，唔捆綁任何UI框架，可以純粹用HTML + Tailwind，亦可以嵌入React/Vue組件。對於設計師嚟講，佢喺代碼入面用CSS自定義屬性（CSS Variables），修改色值就能全局切換主題色，同設計稿保持一致。
設計工作流：從Figma到代碼
Rico嘅工作流程好適合設計師：先用Figma設計組件，然後導出CSS變量，複製到theme.css，最後喺.astro文件按結構堆組件。成個過程只需要關注視覺呈現，做到所見即所得。佢特別提到，Figma設計文件入面嘅顏色變量可以直接對應到代碼，修改設計稿之後導出樣式代碼就好方便。
目前模板已經上線咗英文版本，Rico之後會針對中文語境做本地化優化，推出獨立中文版。
製作個人網站嘅意義
除咗展示作品同強化個人品牌，Rico認為製作個人網站嘅過程本身充滿樂趣。喺設計同寫代碼嘅過程中，可以運用自己擅長嘅技術，將喜歡嘅風格同即時靈感融入，仲可以從設計細節記錄當時嘅審美、思想同對設計嘅看法。呢啲動態變化嘅記錄好有價值。
佢建議有興趣嘅朋友可以關注佢嘅微信公眾號，有更詳細嘅內容更新。下一篇佢會講網站結構同入門部署，仲會探討點樣藉助AI Coding產品快速上線個人站點。
大家好呀，我係 Rico，喺之前一期文章入面，我大概講咗關於個人網站同埋建站嘅想法思路，同埋推薦咗一啲我覺得好正嘅網站模板。。
但係作為一個實踐派，總覺得之前嘅內容唔夠完整，少咗啲實操經驗。所以最近兩星期，我用業餘時間完整咁設計同開發咗一套個人網站模板，將之前嘅想法落地同實踐一次，喺設計同功能上，我跟住之前文章講到嘅思路，做咗一啲細節設計，主要都係面向設計師，或者對個人網站有興趣嘅朋友。
呢篇文章聚焦設計維度，下一篇會側重上線教程，講嚇網站結構，同埋入門部署知識，並探討點樣藉助 AI 快速上線個人站點。如果你有推薦嘅 AI Coding 產品，都可以推薦一下。
網站預覽
Ricoui Portfolio
開源個人網站模板
🎉 網站預覽：portfolio.ricoui.com
⬇️ 開源倉庫：https://github.com/ricocc/ricoui-portfolio
✨ Figma 文件：figma.com/community/file/1570102065468722827
開發週期：兩個禮拜
技術棧：Figma + Astro + Tailwind CSS
我總結咗一下主要嘅一啲特性
✨ 特性
- •🚀 最新版嘅Astro - 快速、輕量級嘅靜態站點生成器
- •🎨 現代化設計 - 復古藍色主題，支援暗色/亮色模式切換
- •🔩 組件化設計 - 成熟嘅組件化設計，方便自定義調整
- •🎭 精緻動畫 - 使用 AOS 同自定義動畫效果
- •📝 博客系統 - 支援 MD 同 MDX 格式嘅博客文章
- •🎯 作品展示 - 作品展示，可選圖片/影片，同埋詳細頁
- •🔍 SEO 優化 - 內置 SEO 同社交媒體標籤
- •⚡ 性能優化 - 圖片優化、代碼分割、懶載入
- •📱 完全響應式 - 適配各種設備尺寸
目前優先上線咗國際化版本，後續會針對中文語境做本地化優化，推出獨立中文版。
自定義設計主題
喺 Figma 設計文件入面，我將主要嘅模塊都做咗組件化設計，尤其係顏色做咗變量處理，可以方便喺設計稿度進行修改，然後導出樣式代碼，方便調整樣式風格。
設計界面預覽
點解選擇 Astro
喺技術棧選擇時，優先考慮容易維護同易上手，所以選擇咗 Astro。
Astro 唔捆綁任何 UI 框架，可以純粹用 HTML + Tailwind，都可以嵌入 React/Vue 組件。對於習慣 Figma Variables 嘅設計師，我直接喺代碼度定義咗 CSS 自定義屬性（CSS Variables）styles/global.css 裏面嘅色值，修改就可以全局切換主題色，同設計稿保持完全一致。
工作流方面，Figma 設計組件 → 導出 CSS 變量 → 複製到 theme.css → 喺 .astro 文件入面按結構堆組件。成個過程，只關注視覺呈現。呢種所見即所得嘅開發體驗，對設計師同新手都係十分友好嘅。
最後
點解要製作個人網站？除咗方便作品展示同強化個人品牌，喺設計同寫代碼嘅過程中，去運用自己擅長或探索嘅技術、將喜歡嘅風格同即時靈感融入其中，並且從設計細節中去記錄當時嘅審美、思想、設計嘅看法等一切嘅動態變化。呢個過程本身就充滿樂趣。
目前按照個人嘅開發習慣，先上線咗英文版本，後續會針對中文語境做本地化優化，再做一個中文版本，方便使用。
大家好呀，我是 Rico，在前面一期文章裏，我大概講了關於個人網站和建站的想法思路，以及推薦了一些我認為非常棒的網站模板。
但是作為一個實踐派，總覺得之前的內容不夠完整，少了些實操經驗。所以最近兩週，我利用業餘時間完整的設計與開發了一套個人網站模板，把之前的想法落地為和實踐一遍，在設計和功能上，我按照之前文章上聊到的思路，做了一些細節設計，主要還是面對設計師、或者對個站有興趣的朋友們。
這篇文章聚焦設計維度，下一篇會側重上線教程，講講網站結構、以及入門部署知識，並探討如何藉助 AI 快速上線個人站點。如果你有推薦的 AI Coding 產品，也可以推薦一下。
網站預覽
Ricoui Portfolio
開源個人網站模板
🎉 網站預覽：portfolio.ricoui.com
⬇️ 開源倉庫：https://github.com/ricocc/ricoui-portfolio
✨ Figma 文件：figma.com/community/file/1570102065468722827
開發週期：兩週
技術棧：Figma + Astro + Tailwind CSS
我總結了一下主要的一些特性
✨ 特性
- •🚀 最新版的Astro - 快速、輕量級的靜態站點生成器
- •🎨 現代化設計 - 復古藍色主題，支持暗色/亮色模式切換
- •🔩 組件化設計 - 成熟的組件化設計，方面自定義調整
- •🎭 精緻動畫 - 使用 AOS 和自定義動畫效果
- •📝 博客系統 - 支持 MD 和 MDX 格式的博客文章
- •🎯 作品展示 - 作品展示，可選圖片/視頻，以及詳細頁
- •🔍 SEO 優化 - 內置 SEO 和社交媒體標籤
- •⚡ 性能優化 - 圖片優化、代碼分割、懶加載
- •📱 完全響應式 - 適配各種設備尺寸
目前優先上線了國際化版本，後續會針對中文語境做本地化優化，推出獨立中文版。
自定義設計主題
在 Figma 設計文件中，我把主要的模塊都做了組件化設計，尤其是顏色做了變量處理，可以方便在設計稿中進行修改，然後導出樣式代碼，方便調整樣式風格。
設計界面預覽
為什麼選擇 Astro
在技術棧選擇時，優先容易維護和易上手, 所以選擇了 Astro。
Astro 不捆綁任何 UI 框架，可以純粹用 HTML + Tailwind，也可以嵌入 React/Vue 組件。對於習慣 Figma Variables 的設計師，我直接在代碼裏定義了 CSS 自定義屬性（CSS Variables）styles/global.css 裏的色值，修改就能全局切換主題色，與設計稿保持完全一致。
工作流上面，Figma 設計組件 → 導出 CSS 變量 → 複製到 theme.css → 在 .astro 文件裏按結構堆組件。整個過程，只關注視覺呈現。這種所見即所得的開發體驗，對設計師和新手還是十分友好的。。
最後
為什麼要製作個人網站？除了方便作品展示和強化個人品牌，在設計與寫代碼的過程中，去運用自己擅長或探索的技術、將喜歡的風格和即時靈感融入其中，並且從設計細節中去記錄當時的審美、思想、設計的看法等一切的動態變化。 這個過程本身就充滿樂趣。
目前按照個人的開發習慣，先上線了英文版本，後續會針對中文語境做本地化優化，再做一箇中文版本，方便使用。