神器/灵感/资源包全都有！7个设计师开发的免费在线工具合集

我是 Rico，之前在多个平台上发过关于设计师学习前端等文章，但是不少人其实有些不太理解或者说疑惑，觉得有故意制造焦虑的嫌疑。但我始终觉得，职业选择本就该因人而异，有人深耕设计纯粹性，有人喜欢跨界探索可能性，没有绝对的对错。而当下的行业趋势，也确实在从 “严格分工” 走向 “协同融合”，设计的边界正在变得更灵活、更多元。

往期文章：

作为设计师里偏小众的 “跨界探索者”，探索开发到现在也不短时间了，刚好做个阶段性的总结，分享和盘点一下我自己开发过的一些非商业、非合作的个人项目，可以作为参考，这些基本是围绕着自己平时的设计需求以及想法去做的，一些涉及到商业类型、合作类的就不做展示了。

一、OG 灵感图库 - Rico OG

OG 网站：og.ricoui.com

这是最近写文写累了，一时兴起开发的网站，耗时不到一周。它是一个专注于收集 OG（Open Graph）社交分享图的灵感网站。一周时间我搭建了一个 Beta 版本，一半时间花在视觉规范、基础功能搭建及技术栈选型上。

功能上支持收藏、色彩模式切换和分类筛选，还包括详情页展示、推荐等；网站也配备了暗黑模式、多语言切换和站点提交功能。由于开发时间短，目前体量不大。

后续考虑继续扩展的功能包括搜索功能、OG 验证、扩展更多类型的灵感库、OG 编辑器等。

二、GradientsHub

一站式渐变解决方案：gradientshub.com

Gradientshub 是一个长期的项目，目前不定期更新。目标是打造一个围绕着渐变设计的一站工具站，目前内容包括原创渐变背景、AI 生成图片，以及文字渐变、背景渐变、梯度色卡等生成工具集合与教学内容，形成完整的渐变解决方案。希望这个网站能为设计师和开发者提供协助，解决渐变设计中可能会遇到的问题。

我制作的原创渐变背景可以免费下载使用

渐变生成工具 - CSS 文字渐变生成器

渐变生成工具 - CSS 多色渐变器

渐变生成工具 - 梯度色卡生成

除了上面展示的，还有其他的渐变工具、资源和文章可以去探索一下。 纯属真诚之作~

三、网页灵感 InspoWeb

网站: inspoweb.com

Inspoweb.com 是我的网页灵感解决方案，目前已手动收录超过 200 个创意网页。作为网页设计师，我日常的习惯收藏优秀网页设计案例和视觉，也尝试过不少方案，最终我使用 Mkdirs 模板创建了这个网站，把我日常的收藏需求转化为网站收录，解决了设备和地点的收藏同步问题，也方便我专心分类整理，更意外的是，向外分享还带来了许多正面反馈，让我交到了更多朋友。

如果你灵感枯竭，不妨来这里逛逛我的收藏。

收录时，我打上了分类和标签，以及对应的界面截图，方便查看。

四、设计资源 UIUXDECK

网站：uiuxdeck.com

UIUXDECK 是满足我 UI/UX 设计需求的一个导航网站。我按照自己的设计需求和理念整合了界面灵感、设计规范、实用工具和组件库，甚至是开发和市场的一些工具，希望能够帮助提升设计专业性和效率。

不管你是设计新手还是资深从业者，我认为这里的内容能为你的工作带来一些启发和便利。而且内容由我自己一一审核收录，保证了实用性和时效性，同样使用了 mkdirs。

五、设计师博客 Ricoui

网站地址：ricoui.com

开源地址 Star⭐ 198 ： https://github.com/ricocc/public-portfolio-site

设计师的个人网站/博客也是必不可少的项目，这个网站采用了我偏爱的技术栈和设计风格，设计上使用 Figma + Blender，开发框架选了对设计师更友好的 Astro.js。网站模板已开源到 Github，Star 数即将突破 200 啦。

功能包括：首页作品筛选展示、项目展示及内页、博客及文章页、个人页面、暗黑模式、RSS、SEO 优化等，支持 markdown，也适合二次开发，内置了图片压缩功能。

缺点是没有可视化后台，需通过部署、手动更改文件及内容集合更新，对无代码基础的用户不够友好。

六、网页版 Todo List

开源项目 Star⭐ 222：GitHub - uiineed-todo-list

网站地址: https://todo.uiineed.com/

这是一个即开即用的网页版 TodoList，使用 Vue 开发，简单易用，可以下载学习或者自定义开发。目前这个简单的单页应用反而最受欢迎。由于出发点是 当初因为没找到符合自己需求的 “无广告极简待办工具”，就索性自己开发，所以对它的要求就是基础、干净简洁、即开即用、极简的视觉。

优势是可直接下载后本地离线使用；缺点是不支持跨设备和浏览器自动同步数据。

七、3D 情人节图标和着陆页

Figma 地址： https://www.figma.com/community/file/1363451172790940214

着陆页：valentine.uiuxdeck.com

着陆页开源地址：GitHub - free-3d-valentines-assets

这是一套开源的情人节的图标，高清图片版本在 Figma 社区可以找到，我还配套做了一个着陆页，可以在着陆页上下载 Blender 的源文件。

1. 两套颜色的 Blender 源文件
2. Figma 社区文件
3. PNG 高清图 3000x3000

最后

分享暂一段落，上面的是我的一部分个人项目，基本是围绕我自身的设计想法和需求打造的。当然目前我也进入了下一阶段的设计和开发过程中，正探索更完整和更有难度的项目，期待今后更棒更有趣的作品和项目吧。

再次自我介绍一下，我是 Rico, 一名网页设计师，也是因兴趣踏上开发之路的学习者。我目前除了继续在设计和开发中探索，也在进行着内容创作，主要方向是设计类文章和 AI Coding 经验总结。

如果对我做的这些小项目感兴趣的话，或者想探讨一下开发经验，欢迎一块儿交流，交个朋友！

关注我的微信公众号，我在这里专注文字创作