項目分享 | 我的設計需求開發的作品盤點
整理版優先睇
設計師Rico親手開發7個個人項目，用開發解決設計需求，展示跨界實踐路線
呢篇文章係網頁設計師Rico嘅階段性總結，佢分享咗自己因應個人設計需求而開發嘅7個非商業項目。Rico本身係設計師，但一直對開發有興趣，佢認為行業趨勢由嚴格分工走向協同融合，與其等人提供工具，不如自己解決問題。文章嘅整體結論係：設計師絕對可以透過開發嚟提升工作效率同創造力，而且呢啲項目都係開源或者免費，好值得參考。
Rico嘅項目涵蓋咗資源整合、工具製作、開源模板等，每個都針對具體嘅設計痛點。例如GradientsHub係一站式漸變工具站，InspoWeb係網頁靈感收藏庫，UIUXDECK係設計資源導航，Ricoui係個人博客模板，Todo List係極簡待辦工具，3D情人節圖標係開源資源，OG靈感圖庫係社交分享圖靈感站。佢強調呢啲項目都係從自身出發，純粹為咗滿足自己嘅工作流程同審美。
最後，Rico透露自己正探索更完整同有難度嘅項目，並會繼續內容創作。呢篇文章唔單止係項目展示，更加係設計師跨界實踐嘅具體示範，為其他想學開發嘅設計師提供咗好多實用嘅參考方向。
- 設計師可以透過開發解決個人工作流程痛點，例如Rico因為揾唔到極簡待辦工具就自己寫咗一個。
- 佢嘅項目大多圍繞「設計資源整合」同「工具自動化」，例如GradientsHub提供一站式漸變方案。
- 與其依賴現有服務，不如根據自己習慣自建，例如Todo List主打無廣告、離線可用。
- 開源分享可以獲得社羣反饋同交到朋友，Rico嘅InspoWeb同Ricoui博客都吸引咗唔少人關注。
- 學習開發可以揀對設計師較友好嘅技術棧（如Astro.js、Vue），並注重視覺同用戶體驗。
GradientsHub
一站式漸變設計工具站，包含原創漸變背景、AI生成圖片、CSS文字漸變、多色漸變器、梯度色卡等工具與教學。
InspoWeb
網頁靈感收藏庫，手動收錄超過200個創意網頁，支援分類、標籤同截圖。
UIUXDECK
UI/UX設計資源導航，整合界面靈感、設計規範、實用工具、組件庫同開發工具。
Ricoui個人博客模板
開源Astro.js博客模板，支援作品展示、博客、暗黑模式、RSS、SEO等，內置圖片壓縮，已獲198個Star。
設計師跨界開發：從需求出發嘅個人項目
Rico係一位網頁設計師，佢一直認為職業選擇因人而異，有人鍾意深耕設計純粹性，有人就鍾意跨界探索可能性。佢自己就屬於後者，喺設計之外仲自學開發，親手製作咗一系列滿足自己需求嘅工具同網站。
呢篇文章就係佢嘅階段性總結，盤點咗7個非商業個人項目，展示設計思維同開發能力嘅結合。
佢強調每個項目都係為咗解決實際問題，例如揾唔到合心水嘅工具就自己寫，或者將收藏嘅靈感整理成網站分享出去。
GradientsHub：一站式漸變解決方案
GradientsHub係Rico長期維護嘅項目，目標係打造圍繞漸變設計嘅一站式工具站。內容包括原創漸變背景、AI生成圖片，同埋文字漸變、背景漸變、梯度色卡等生成工具，仲有教學內容。
佢希望呢個網站可以為設計師同開發者提供協助，解決漸變設計中可能會遇到嘅問題。
- 原創漸變背景可以免費下載使用
- CSS文字漸變生成器、多色漸變器、梯度色卡生成器
- 仲有其他漸變工具、資源同文章可以探索
呢個項目體現咗資源整合嘅思維：將多個工具集合一處，提升效率。
靈感庫同資源站：解決收藏同導航需求
InspoWeb係Rico嘅網頁靈感解決方案，目前已手動收錄超過200個創意網頁。佢用Mkdirs模板建立網站，解決咗設備同地點嘅收藏同步問題，仲方便分類整理。
向外分享後意外獲得正面反饋，令佢交到更多朋友。
UIUXDECK就係滿足UI/UX設計需求嘅導航網站，整合咗界面靈感、設計規範、實用工具同組件庫，甚至包含開發同市場工具。
Rico強調內容由佢親自審核收錄，保證實用性同即時性。
個人博客同實用小工具：開源分享嘅價值
Ricoui係Rico嘅個人博客，採用Figma + Blender設計，用對設計師友好嘅Astro.js開發。功能包括作品篩選、博客、暗黑模式、RSS、SEO等，仲內置圖片壓縮功能。
呢個模板已經開源到GitHub，Star數即將突破200。
另一個受歡迎嘅項目係網頁版Todo List，用Vue開發，因為Rico當時揾唔到符合自己需求嘅「無廣告極簡待辦工具」，就索性自己整。
優勢係可直接下載後本地離線使用，缺點係唔支援跨設備同步。
- 1 Ricoui博客：開源模板適合設計師二次開發，但無可視化後台，對無代碼基礎用戶唔夠友善。
- 2 Todo List：極簡乾淨、即開即用，適合追求基本功能嘅用家。
3D圖標同OG靈感庫：創意延伸
Rico仲製作咗一套開源嘅情人節3D圖標，喺Figma社區可以揾到高清圖片版本，同時配套咗一個著陸頁，提供Blender源文件下載。
呢個項目包含兩套顏色嘅Blender源文件、Figma社區文件同PNG高清圖。
最近佢又開發咗OG靈感圖庫Rico OG，呢個係一個專注收集社交分享圖嘅靈感網站，耗時唔夠一週。功能包括收藏、色彩模式切換、分類篩選、暗黑模式、多語言等。
Rico計劃未來加入搜索功能、OG驗證同OG編輯器。
總結：設計師開發嘅路徑同啟發
Rico嘅項目展示咗設計師可以點樣透過開發解決工作流程痛點，每一個都係從自身需求出發。佢強調目前正探索更完整同有難度嘅項目，並繼續進行內容創作，主要方向係設計類文章同AI Coding經驗總結。
如果想交流開發經驗，Rico歡迎大家同佢做朋友。
呢篇文章係一篇好扎實嘅實踐分享，對於想跨界嘅設計師嚟講，係一份值得參考嘅路線圖。
我係Rico，之前喺多個平台上發過關於設計師學習前端之類嘅文章，但係好多人其實有啲唔係好理解或者有疑惑，甚至有人覺得係故意製造焦慮。
但我始終覺得，職業選擇本身就應該因人而異，有人專注於設計嘅純粹性，有人鍾意跨界探索可能性，冇絕對嘅對錯。而家嘅行業趨勢，的確係由「嚴格分工」走向「協同融合」，設計嘅邊界變得更加靈活同多元化。
作為設計師入面比較小眾嘅「跨界探索者」，探索開發都有一段時間，啱啱好做個階段性總結，同大家分享同盤點一下我自己開發過嘅一啲非商業、非合作嘅個人項目，可以當參考。呢啲項目基本上係圍繞住自己平時嘅設計需求同想法去做，有啲涉及商業或者合作類型嘅就唔展示喇。
1. GradientsHub
Gradientshub 係一個長期項目，目前不定期更新。目標係打造一個圍繞漸變設計嘅一站式工具網站，目前內容包括原創漸變背景、AI 生成圖片，以及文字漸變、背景漸變、梯度色卡等生成工具集合同教學內容，形成完整嘅漸變解決方案。希望呢個網站可以幫到設計師同開發者，解決漸變設計上可能會遇到嘅問題。
我製作嘅原創漸變背景可以免費下載使用
漸變生成工具 - CSS 文字漸變生成器
漸變生成工具 - CSS 多色漸變器
漸變生成工具 - 梯度色卡生成
除咗上面展示嘅，仲有其他漸變工具、資源同文章可以去探索嚇。純粹係真誠之作~
2. 網頁靈感 InspoWeb
InspoWeb 係我嘅網頁靈感解決方案，目前已經手動收錄超過 200 個創意網頁。作為網頁設計師，我平時嘅習慣係收藏優秀網頁設計案例同視覺，都試過唔少方法，最終我用 Mkdirs 模板創建咗呢個網站，將我日常嘅收藏需求轉化為網站收錄，解決咗唔同裝置同地點嘅收藏同步問題，亦方便我專心分類整理。意外嘅係，向外分享仲帶嚟好多正面反饋，令我識到更多朋友。
如果你靈感枯竭，不妨嚟呢度睇下我嘅收藏。
收錄時，我會標註分類、標籤同界面截圖，方便查看。
3. 設計資源 UIUXDECK
UIUXDECK 係滿足我 UI/UX 設計需求嘅一個導航網站。我跟據自己嘅設計需求同理念整合咗界面靈感、設計規範、實用工具同組件庫，甚至仲有開發同市場嘅一啲工具，希望可以幫手提升設計專業性同效率。
無論你係設計新手定係資深從業者，我覺得呢度嘅內容可以為你嘅工作帶嚟一啲啟發同方便。而且內容由我自己逐一審核收錄，保證咗實用性同及時性，同樣係用 mkdirs。
4. 設計師博客 Ricoui
開源 Github Star⭐ 198 ：public-portfolio-site
設計師嘅個人網站/博客都係必不可少嘅項目，呢個網站用咗我鍾意嘅技術棧同設計風格，設計上用 Figma + Blender，開發框架揀咗對設計師比較友好嘅 Astro.js。網站模板已經開源到 Github，Star 數就快突破 200 喇。
功能包括：首頁作品篩選展示、項目展示及內頁、博客同文章頁、個人頁面、暗黑模式、RSS、SEO 優化等，支援 markdown，亦適合二次開發，內置咗圖片壓縮功能。
缺點係冇可視化後台，需要透過部署、手動改文件同內容集合更新，對冇程式碼基礎嘅用戶唔夠友好。
5. 網頁版 Todo List
開源 Github StarStar⭐ 222**：GitHub - uiineed-todo-list
呢個係一個即開即用嘅網頁版 TodoList，用 Vue 開發，簡單易用，可以下載學習或者自訂開發。目前呢個簡單嘅單頁應用反而最受歡迎。由於出發點係當初因為揾唔到符合自己需求嘅「無廣告極簡待辦工具」，於是索性自己開發，所以對佢嘅要求就係基本、乾淨簡潔、即開即用、極簡嘅視覺。
優勢係可以直接下載後本地離線使用；缺點係唔支援跨裝置同瀏覽器自動同步數據。
6. 3D 情人節圖標同着陸頁
Figma 社區：free-3d-icons-valentines-day
Github ：GitHub - free-3d-valentines-assets
呢套係開源嘅情人節圖標，高清圖片版本喺 Figma 社區可以揾到，我仲配套做咗一個着陸頁，可以喺着陸頁上下載 Blender嘅源文件。
✨ 兩套顏色嘅 Blender 源文件 ✨ Figma 社區文件 ✨ PNG 高清圖 3000x3000
7. OG 靈感圖庫 - Rico OG
呢個係最近寫文寫到攰，一時興起開發嘅網站，用咗唔夠一個星期。佢係一個專注收集 OG（Open Graph）社交分享圖嘅靈感網站。一星期時間我整咗個 Beta 版本，一半時間用喺視覺規範、基礎功能搭建同技術棧選型上。
功能上支援收藏、色彩模式切換同分類篩選，仲包括詳情頁展示、推薦等；網站亦配備咗暗黑模式、多語言切換同站點提交功能。由於開發時間短，目前規模唔大。
後續考慮繼續擴展嘅功能包括搜索功能、OG驗證、擴展更多類型嘅靈感庫、OG編輯器等。
最後
分享暫時到呢度，上面係我一部分個人項目，基本上係圍繞自己嘅設計想法同需求打造。當然目前我已經進入下一階段嘅設計同開發過程，正探索更完整同更有難度嘅項目，期待之後更出色更有趣嘅作品同項目啦。
再次自我介紹一下，我係Rico，一名網頁設計師，亦係因為興趣踏上開發之路嘅學習者。我目前除咗繼續喺設計同開發中探索，仲進行緊內容創作，主要方向係設計類文章同 AI Coding 經驗總結。
如果對我整嘅呢啲小項目有興趣，或者想探討下開發經驗，歡迎一齊交流，交個朋友！
我是Rico，之前在多個平台上發過關於設計師學習前端等文章，但是不少人其實有些不太理解或者說疑惑，或者有故意製造焦慮的嫌疑。
但我始終覺得，職業選擇本就該因人而異，有人深耕設計純粹性，有人喜歡跨界探索可能性，沒有絕對的對錯。而當下的行業趨勢，也確實在從 “嚴格分工” 走向 “協同融合”，設計的邊界正在變得更靈活、更多元。
作為設計師裏偏小眾的 “跨界探索者”，探索開發到現在也不短時間了，剛好做個階段性的總結，分享和盤點一下我自己開發過的一些非商業、非合作的個人項目，可以作為參考，這些基本是圍繞着自己平時的設計需求以及想法去做的，一些涉及到商業類型、合作類的就不做展示了。
1. GradientsHub
Gradientshub 是一個長期的項目，目前不定期更新。目標是打造一個圍繞着漸變設計的一站工具站，目前內容包括原創漸變背景、AI 生成圖片，以及文字漸變、背景漸變、梯度色卡等生成工具集合與教學內容，形成完整的漸變解決方案。希望這個網站能為設計師和開發者提供協助，解決漸變設計中可能會遇到的問題。
我製作的原創漸變背景可以免費下載使用
漸變生成工具 - CSS 文字漸變生成器
漸變生成工具 - CSS 多色漸變器
漸變生成工具 - 梯度色卡生成
除了上面展示的，還有其他的漸變工具、資源和文章可以去探索一下。 純屬真誠之作~
2. 網頁靈感 InspoWeb
InspoWeb 是我的網頁靈感解決方案，目前已手動收錄超過 200 個創意網頁。作為網頁設計師，我日常的習慣收藏優秀網頁設計案例和視覺，也嘗試過不少方案，最終我使用 Mkdirs 模板創建了這個網站，把我日常的收藏需求轉化為網站收錄，解決了設備和地點的收藏同步問題，也方便我專心分類整理，更意外的是，向外分享還帶來了許多正面反饋，讓我交到了更多朋友。
如果你靈感枯竭，不妨來這裏逛逛我的收藏。
收錄時，我會標註分類、標籤及界面截圖，方便查看。
3. 設計資源 UIUXDECK
UIUXDECK 是滿足我 UI/UX 設計需求的一個導航網站。我按照自己的設計需求和理念整合了界面靈感、設計規範、實用工具和組件庫，甚至是開發和市場的一些工具，希望能夠幫助提升設計專業性和效率。
不管你是設計新手還是資深從業者，我認為這裏的內容能為你的工作帶來一些啓發和便利。而且內容由我自己一一審核收錄，保證了實用性和時效性，同樣使用了 mkdirs。
4. 設計師博客 Ricoui
開源 Github Star⭐ 198 ：public-portfolio-site
設計師的個人網站/博客也是必不可少的項目，這個網站採用了我偏愛的技術棧和設計風格，設計上使用 Figma + Blender，開發框架選了對設計師更友好的 Astro.js。網站模板已開源到 Github，Star 數即將突破 200 啦。
功能包括：首頁作品篩選展示、項目展示及內頁、博客及文章頁、個人頁面、暗黑模式、RSS、SEO 優化等，支持 markdown，也適合二次開發，內置了圖片壓縮功能。
缺點是沒有可視化後台，需通過部署、手動更改文件及內容集合更新，對無代碼基礎的用戶不夠友好。
5. 網頁版 Todo List
開源 Github StarStar⭐ 222**：GitHub - uiineed-todo-list
這是一個即開即用的網頁版 TodoList，使用 Vue 開發，簡單易用，可以下載學習或者自定義開發。目前這個簡單的單頁應用反而最受歡迎。由於出發點是 當初因為沒找到符合自己需求的 “無廣告極簡待辦工具”，就索性自己開發，所以對它的要求就是基礎、乾淨簡潔、即開即用、極簡的視覺。
優勢是可直接下載後本地離線使用；缺點是不支持跨設備和瀏覽器自動同步數據。
6. 3D 情人節圖標和着陸頁
Figma 社區：free-3d-icons-valentines-day
Github ：GitHub - free-3d-valentines-assets
這是一套開源的情人節的圖標，高清圖片版本在 Figma 社區可以找到，我還配套做了一個着陸頁，可以在着陸頁上下載 Blender的源文件。
✨ 兩套顏色的 Blender 源文件 ✨ Figma 社區文件 ✨ PNG 高清圖 3000x3000
7. OG 靈感圖庫 - Rico OG
這是最近寫文寫累了，一時興起開發的網站，耗時不到一週。它是一個專注於收集 OG（Open Graph）社交分享圖的靈感網站。一週時間我搭建了一個 Beta 版本，一半時間花在視覺規範、基礎功能搭建及技術棧選型上。
功能上支持收藏、色彩模式切換和分類篩選，還包括詳情頁展示、推薦等；網站也配備了暗黑模式、多語言切換和站點提交功能。由於開發時間短，目前體量不大。
後續考慮繼續擴展的功能包括搜索功能、OG驗證、擴展更多類型的靈感庫、OG編輯器等。
最後
分享暫一段落，上面的是我的一部分個人項目，基本是圍繞我自身的設計想法和需求打造的。當然目前我也進入了下一階段的設計和開發過程中，正探索更完整和更有難度的項目，期待今後更棒更有趣的作品和項目吧。
再次自我介紹一下，我是Rico, 一名網頁設計師，也是因興趣踏上開發之路的學習者。我目前除了繼續在設計和開發中探索，也在進行着內容創作，主要方向是設計類文章和 AI Coding 經驗總結。
如果對我做的這些小項目感興趣的話，或者想探討一下開發經驗，歡迎一塊兒交流，交個朋友！