设计资源与工具
这页适合作为“设计与前端视觉工作流的资源导航”。重点不是把工具全收藏一遍，而是按任务选择：你现在是要找配色、找组件、找灵感、找素材，还是直接做原型。
先按任务选
- 要快速做出一套顺眼配色：先看
Realtime Colors、Coolors、Happy Hues - 要找现成组件和设计系统：优先
Radix、shadcn、Nuxt UI - 要找灵感和参考案例：优先
Mobbin、Godly、Awwwards - 要找免版权素材：优先
Unsplash、Pexels、unDraw - 要做协作原型或线框图：优先
Figma、Penpot、Excalidraw
先明确任务，再选工具，效率会高很多。
配色
| 工具 | 说明 |
|---|---|
| Realtime Colors | 实时预览网站配色 |
| Coolors | 配色方案生成器 |
| Happy Hues | 配色灵感与预览 |
| ColorHunt | 配色方案集合 |
| Radix Colors | 无障碍配色系统 |
| Open Color | 开源配色方案 |
CSS 变量配色
:root {
--primary: oklch(65% 0.15 250);
--primary-light: oklch(80% 0.1 250);
--primary-dark: oklch(45% 0.15 250);
}UI 组件库
Vue
| 库 | 说明 |
|---|---|
| Radix Vue | 无样式，无障碍 |
| Shadcn Vue | 可复制的组件 |
| Nuxt UI | Nuxt 官方 UI |
| PrimeVue | 功能丰富 |
| Element Plus | 企业级 |
React
设计灵感
| 网站 | 说明 |
|---|---|
| Dribbble | 设计作品展示 |
| Mobbin | 移动端 UI 参考 |
| Godly | 优秀网站集合 |
| Awwwards | 获奖网站 |
| Dark Mode Design | 暗色模式参考 |
免费素材
图片
背景与纹理
| 工具 | 说明 |
|---|---|
| SVG Backgrounds | SVG 背景生成 |
| Haikei | SVG 形状生成 |
| Pattern Monster | 图案生成器 |
| Mesh Gradient | 网格渐变生成 |
原型与设计工具
| 工具 | 说明 |
|---|---|
| Figma | 协作设计工具 |
| Penpot | 开源设计工具 |
| Excalidraw | 手绘风格白板 |
| tldraw | 在线白板 |
CSS 工具
| 工具 | 说明 |
|---|---|
| CSS Grid Generator | Grid 布局生成 |
| Flexbox Froggy | Flexbox 学习游戏 |
| Animista | CSS 动画生成 |
| Neumorphism | 新拟态生成器 |
| Glassmorphism | 毛玻璃生成 |
推荐使用顺序
如果你是在做一个新的页面或产品，比较顺的流程通常是：
- 先找参考和信息架构方向
- 再确定配色和视觉基调
- 选择合适的组件体系
- 最后再补插画、背景、动效和细节质感
不要一开始就先堆炫酷效果。大多数页面质量问题，更多来自层级、留白、对比度和一致性，而不是“没加毛玻璃”。
常见问题
收藏很多，真正落地很少
建议给资源分成几类：
- 常用主力工具
- 备用参考网站
- 偶尔启发型资源
不然收藏夹会越来越长，但实际工作时还是找不到最顺手的那几个。
参考过多，成品反而不统一
灵感网站适合看方向，不适合把多个风格直接拼起来。一个页面最好尽量保持：
- 统一色彩语言
- 统一圆角、阴影、边框逻辑
- 统一组件交互节奏
素材虽免费，但使用边界不清楚
即使是免费素材，也要看清：
- 是否允许商用
- 是否要求署名
- 是否允许再分发
延伸阅读
参考链接
- Figma Community — 免费模板
- Design Systems — 设计系统集合
- Checklist Design — UI 设计检查清单