设计资源与工具
设计灵感
- Dribbble - 设计师作品展示平台，提供最新UI/UX设计趋势
- CSS灵感 - CSS设计创意参考，展示各种CSS特效实现
- Awwwards - 精选网页设计案例，展示获奖网站设计
- Behance - Adobe旗下创意作品平台，包含多领域设计案例
- Pinterest - 视觉发现平台，提供丰富的设计灵感板块
- Muzli - 设计灵感搜索引擎，聚合多个设计资源
CSS学习资源
- web.dev Learn CSS - Google官方CSS教程，系统全面
- Plain Vanilla Web - 回归基础的CSS实践
- CSS-Tricks - CSS技巧和教程网站，提供丰富的实例
- MDN CSS参考 - 权威的CSS文档和教程
- CSS Grid Garden - 学习CSS Grid的互动游戏
- Flexbox Froggy - 学习CSS Flexbox的互动游戏
配色工具
- Coolors - 快速生成配色方案，支持锁定颜色和微调
- Adobe Color - Adobe官方配色工具，支持多种配色规则
- ColorHunt - 精选配色方案，按热度和主题分类
- Colormind - 基于深度学习的配色生成器
- Huemint - AI驱动的配色工具，可根据设计需求生成配色
- Material Design Color Tool - 谷歌Material Design配色工具
UI组件库
- Ant Design - 企业级React UI库，提供丰富的组件和设计规范
- Chakra UI - 模块化可访问组件库，支持主题定制
- Material-UI - 基于Material Design的React组件库
- Element UI - 基于Vue的桌面端组件库
- Shadcn UI - 可复用的UI组件集合，基于Radix UI和Tailwind CSS
- Arco Design - 字节跳动出品的企业级设计系统
图标库
- Boxicons - 高质量SVG图标库，提供3k+免费图标
- The Noun Project - 世界最大最全面的免费图标和照片集合
- Iconmonstr - 4784+免费图标，316个集合
- Glyphicons - 精确制作的单色图标，强调简洁性和易识别性
- Phosphor Icons - 灵活的图标集，支持多种风格变体
- Feather Icons - 简约风格的开源图标集
- Heroicons - Tailwind CSS团队设计的SVG图标集
CSS框架
- Tailwind CSS - 实用优先的CSS框架，提供原子化类名
- Bulma - 基于Flexbox的现代CSS框架，无JavaScript依赖
- Bootstrap - 最流行的CSS框架，提供完整的组件集
- Foundation - 响应式前端框架，适合企业级应用
- Windi CSS - Tailwind CSS的替代品，提供更快的按需编译
- UnoCSS - 即时原子CSS引擎，高度可定制
字体资源
- Google Fonts - 免费开源字体库，支持多语言
- Adobe Fonts - Adobe提供的高质量字体服务
- Font Squirrel - 免费商用字体资源
- Fontjoy - AI辅助字体搭配工具
- Typewolf - 字体趋势和灵感网站
设计系统
- Material Design - 谷歌的设计语言和规范
- Apple Human Interface Guidelines - 苹果设计指南
- Fluent Design System - 微软的设计系统
- Atlassian Design System - Atlassian的设计系统和组件库
- Primer Design System - GitHub的设计系统
设计原则与最佳实践
核心设计原则
一致性原则
保持设计元素、交互方式和视觉语言的一致性，降低用户学习成本。
实践要点：
- 在整个产品中使用一致的颜色系统和排版规则
- 保持交互模式的一致性（如按钮行为、表单验证方式）
- 建立设计规范文档，确保团队遵循统一标准