我是Rico，之前在多个平台上发过关于设计师学习前端等文章，但是不少人其实有些不太理解或者说疑惑，或者有故意制造焦虑的嫌疑。但我始终觉得，职业选择本就该因人而异，有人深耕设计纯粹性，有人喜欢跨界探索可能性，没有绝对的对错。而当下的行业趋势，也确实在从 “严格分工” 走向 “协同融合”，设计的边界正在变得更灵活、更多元。
作为设计师里偏小众的 “跨界探索者”，探索开发到现在也不短时间了，刚好做个阶段性的总结，分享和盘点一下我自己开发过的一些非商业、非合作的个人项目，可以作为参考，这些基本是围绕着自己平时的设计需求以及想法去做的，一些涉及到商业类型、合作类的就不做展示了。
这是最近写文写累了，一时兴起开发的网站，耗时不到一周。它是一个专注于收集 OG（Open Graph）社交分享图的灵感网站。一周时间我搭建了一个 Beta 版本，一半时间花在视觉规范、基础功能搭建及技术栈选型上。
功能上支持收藏、色彩模式切换和分类筛选，还包括详情页展示、推荐等；网站也配备了暗黑模式、多语言切换和站点提交功能。由于开发时间短，目前体量不大。
后续考虑继续扩展的功能包括搜索功能、OG验证、扩展更多类型的灵感库、OG编辑器等。
技术栈参考——设计：Figma，开发：Astro.js, Gsap, Tally, Node.js
思路：数据使用 Node.js 脚本加上 FIrecrawl API 进行批量化处理。
Play Video Play replay 10 seconds forward 10 seconds Non-Fullscreen
Gradientshub 是一个长期的项目，目前不定期更新。目标是打造一个围绕着渐变设计的一站工具站，目前内容包括原创渐变背景、AI 生成图片，以及文字渐变、背景渐变、梯度色卡等生成工具集合与教学内容，形成完整的渐变解决方案。希望这个网站能为设计师和开发者提供协助，解决渐变设计中可能会遇到的问题。
设计: Figma, PS, Illustrator, MidJourney
开发：Astro.js, React, Gsap, Cloudflare
除了上面展示的，还有其他的渐变工具、资源和文章可以去探索一下。 纯属真诚之作~
Inspoweb.com 是我的网页灵感解决方案，目前已手动收录超过 200 个创意网页。作为网页设计师，我日常的习惯收藏优秀网页设计案例和视觉，也尝试过不少方案，最终我使用 Mkdirs 模板开发了这个网站，把我日常的收藏需求转化为网站收录，解决了设备和地点的收藏同步问题，也方便我专心分类整理，更意外的是，向外分享还带来了许多正面反馈，让我交到了更多朋友。
技术栈参考：Next.js，React, Sanity CMS，shadcn/ui, Tailwind CSS
UIUXDECK 是满足我 UI/UX 设计需求而开发的站点。我按照自己的设计需求和理念整合了界面灵感、设计规范、实用工具和组件库，甚至是开发和市场的一些工具，希望能够帮助提升设计专业性和效率。
技术栈参考：Next.js，React, Sanity CMS，shadcn/ui, Tailwind CSS
设计师的个人网站/博客也是必不可少的项目，这个网站采用了我偏爱的技术栈和设计风格，设计上使用 Figma + Blender，开发框架选了对设计师更友好的 Astro.js。网站模板已开源到 Github，Star 数即将突破 200 啦。
功能包括：首页作品筛选展示、项目展示及内页、博客及文章页、个人页面、暗黑模式、RSS、SEO 优化等，支持 markdown，也适合二次开发，内置了图片压缩功能。
缺点是没有可视化后台，需通过部署、手动更改文件及内容集合更新，对无代码基础的用户不够友好。
这是一个即开即用的网页版 TodoList，使用 Vue 开发，简单易用，可以下载学习或者自定义开发。目前这个简单的单页应用反而最受欢迎。由于出发点是 当初因为没找到符合自己需求的 “无广告极简待办工具”，就索性自己开发，所以对它的要求就是基础、干净简洁、即开即用、极简的视觉。
技术栈参考: 设计: Figma；开发：Vue.js
GitHub: uiineed-todo-list Star⭐ 200+
这是一套开源的情人节的图标，高清图片版本在 Figma 社区可以找到，我还配套做了一个着陆页，可以在着陆页上下载 Blender的源文件。
技术栈参考——设计: Figma，Blender； 开发：Html+CSS+JS，Matter.js
Figma 社区：free-3d-icons-valentines-day
GitHub: free-3d-valentines-assets
我挑选展示的这些案例，类型和难度各不相同：有复杂全面的渐变站，有偏应用型的 TodoList，有依托模板二次开发的导航站，也有为开源服务的单页页面。他们用途不同，开发难度也不一样，但最终出发点和目标都是为我解决设计工作中的某一项具体需求，替代了我原本不满意或者过于复杂的工作流。甚至替代了原本需要付费使用的应用。
那么回到出发点，设计探索开发能做什么？我觉得它是一个万能插件，无论在工作流程上还是个人需求，当你觉得需要一些解决方案的时候，编程的知识可以为你提供另一个角度，尤其在 AI Coding 的时代，我们并不需要从头到尾的去学习完整的编程原理、语法或者计算机基础等等，只要先理解开发的思维逻辑和基础工具，再借助 AI 让项目跑起来，后续的突破便指日可待。
本质上，开发和平面、3D、剪辑一样，只是一项技能。根据具体需求，需要什么就学什么、用什么，并没有太多神秘感。
对于 AI Coding，设计师也有优势所在，视觉和审美的领先就不用说了，我们来提两个设计师习以为常的能力：
产品思维和组件化思想
。
产品思维
AI Coding（或 Vibe Coding）让使用者更接近产品经理的角色。启动一个项目前，我们需要先和 AI 讨论产品定位、制定完整的架构，让 AI 输出一套详尽的产品文档，再基于文档编程。对于 AI Coding 而言，清晰详细的产品文档能让效率翻倍，而产品思维本就是设计师能力图谱的重要一环，二者结合，能形成相辅相成的效果。
组件化思想
组件化和Token对于设计师来说，也是工作中的老朋友了。而对于开发来说，则可以简单概括为“万物皆组件”。 前端的核心思想之一就是组件化，无论是 React、Vue、Angular 等框架，还是原生开发，都强调将页面拆分为独立、可复用的组件（如头部组件、列表项组件、弹窗组件等）。所有复杂项目都能拆分成一个个模块组件，每个组件负责特定功能，这不仅降低了开发难度，还能在出错时精准定位问题。 从组件入手逐步完成完整项目，是很高效的路径。值得一提的是，组件化思维并非每个开发者都具备，它其实是一项重要能力，而设计师早已在日常工作中熟悉了这种逻辑。
原本以为上一篇《前端自学建议》已经讲得足够清楚，但仍有不少设计师朋友提出疑问，不知道从何入手，不知道要去做些什么，于是有了这篇补充。从案例到观点的补充说明，这两篇内容应该能解答大部分问题了。
如果你不知道该从何进入开发的世界，不妨参考我上面的案例：从自己的日常需求切入，找到一个具体问题，尝试用编程思维寻找解决方案，兴趣是最好的开始。当第一个最小可行化的项目成功跑起来，后面就自然而然的进入加速期了。
目前我已进入下一阶段的设计与开发，正在探索更完整、更有难度的项目，期待未来能产出更棒、更有趣的作品。
如果对我做的这些小项目感兴趣的话，或者想探讨一下开发经验，欢迎一块儿交流，交个朋友！
