# 网页设计资源

为设计师和开发者精选的最佳免费资源合集。字体、图标、颜色、动画、CSS 工具等。

## 字体
- **Google Fonts**  
  Free, open-source font library with 1500+ font families.  
  [访问 →](https://fonts.google.com/)
- **Font Squirrel**  
  Free fonts with commercial-use licenses and a webfont generator.  
  [访问 →](https://www.fontsquirrel.com/)
- **Fontshare**  
  Free, high-quality fonts from the Indian Type Foundry.  
  [访问 →](https://www.fontshare.com/)
- **Fontsource**  
  Self-host open-source fonts via NPM packages.  
  [访问 →](https://fontsource.org/)

## 图标
- **Heroicons**  
  Beautiful hand-crafted SVG icons by the Tailwind CSS team.  
  [访问 →](https://heroicons.com/)
- **Lucide**  
  Beautiful & consistent open-source icon set, fork of Feather Icons.  
  [访问 →](https://lucide.dev/)
- **Phosphor Icons**  
  Flexible icon family with 6 weights and 1000+ icons.  
  [访问 →](https://phosphoricons.com/)
- **Tabler Icons**  
  5000+ free SVG icons with consistent stroke width.  
  [访问 →](https://tabler.io/icons)
- **Simple Icons**  
  SVG icons for popular brands and products.  
  [访问 →](https://simpleicons.org/)

## 插图
- **unDraw**  
  Open-source illustrations with customizable colors.  
  [访问 →](https://undraw.co/)
- **Humaaans**  
  Mix-and-match illustration library of people.  
  [访问 →](https://www.humaaans.com/)
- **Open Peeps**  
  Hand-drawn illustration library by Pablo Stanley.  
  [访问 →](https://www.openpeeps.com/)

## 颜色
- **Coolors**  
  Fast color scheme generator with export options.  
  [访问 →](https://coolors.co/)
- **Color Hunt**  
  Curated collection of beautiful color palettes.  
  [访问 →](https://colorhunt.co/)
- **Realtime Colors**  
  Visualize your color palette on a real website layout.  
  [访问 →](https://www.realtimecolors.com/)
- **OKLCH Color Picker**  
  Modern OKLCH color picker for perceptually uniform colors.  
  [访问 →](https://oklch.com/)

## Lottie 动画
- **LottieFiles**  
  The largest library of free Lottie animations and tools.  
  [访问 →](https://lottiefiles.com/)
- **IconScout Lottie**  
  Animated Lottie icons and illustrations.  
  [访问 →](https://iconscout.com/lottie-animations)

## CSS 工具
- **CSS-Tricks**  
  Articles, tutorials, and reference on CSS and frontend dev.  
  [访问 →](https://css-tricks.com/)
- **Can I Use**  
  Browser support tables for modern web features.  
  [访问 →](https://caniuse.com/)
- **Tailwind CSS**  
  Utility-first CSS framework with design system built in.  
  [访问 →](https://tailwindcss.com/)
- **CSS Gradient**  
  Free CSS gradient generator tool.  
  [访问 →](https://cssgradient.io/)
- **Clippy**  
  CSS clip-path maker for custom shapes.  
  [访问 →](https://bennettfeely.com/clippy/)

## 无障碍资源
- **WebAIM**  
  Web accessibility resources, training, and evaluation tools.  
  [访问 →](https://webaim.org/)
- **The A11Y Project**  
  Community-driven effort to make digital accessibility easier.  
  [访问 →](https://www.a11yproject.com/)
- **WCAG 2.1 Guidelines**  
  Official W3C Web Content Accessibility Guidelines.  
  [访问 →](https://www.w3.org/TR/WCAG21/)
- **Axe DevTools**  
  Automated accessibility testing tool.  
  [访问 →](https://www.deque.com/axe/)

## 设计系统
- **Design Systems Repo**  
  Collection of design systems, style guides, and pattern libraries.  
  [访问 →](https://designsystemsrepo.com/)
- **Storybook**  
  UI development environment for building component libraries.  
  [访问 →](https://storybook.js.org/)
- **Design Tokens Community**  
  Community and spec for design tokens standardization.  
  [访问 →](https://www.designtokens.org/)

## 灵感
- **Dribbble**  
  Design community for sharing and discovering creative work.  
  [访问 →](https://dribbble.com/)
- **Awwwards**  
  Awards for the best web design and development.  
  [访问 →](https://www.awwwards.com/)
- **Mobbin**  
  Real-world mobile and web design references.  
  [访问 →](https://mobbin.com/)
- **Godly**  
  Curated collection of the best web design inspiration.  
  [访问 →](https://godly.website/)
- **SaaS Landing Page**  
  Collection of the best SaaS landing page designs.  
  [访问 →](https://saaslandingpage.com/)

## 从任何网站提取设计资源

**Miro**  
Miro Chrome 扩展让您从任何网站提取 CSS、颜色、字体、图片、SVG 和 Lottie 动画。  
[添加到 Chrome](https://chromewebstore.google.com/detail/miromiro/kpmkikjpclolhodgckeogmiiaehpfjhl)