网页设计资源

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

字体

• Google Fonts
  Free, open-source font library with 1500+ font families.
  访问 →
• Font Squirrel
  Free fonts with commercial-use licenses and a webfont generator.
  访问 →
• Fontshare
  Free, high-quality fonts from the Indian Type Foundry.
  访问 →
• Fontsource
  Self-host open-source fonts via NPM packages.
  访问 →

图标

• Heroicons
  Beautiful hand-crafted SVG icons by the Tailwind CSS team.
  访问 →
• Lucide
  Beautiful & consistent open-source icon set, fork of Feather Icons.
  访问 →
• Phosphor Icons
  Flexible icon family with 6 weights and 1000+ icons.
  访问 →
• Tabler Icons
  5000+ free SVG icons with consistent stroke width.
  访问 →
• Simple Icons
  SVG icons for popular brands and products.
  访问 →

插图

• unDraw
  Open-source illustrations with customizable colors.
  访问 →
• Humaaans
  Mix-and-match illustration library of people.
  访问 →
• Open Peeps
  Hand-drawn illustration library by Pablo Stanley.
  访问 →

颜色

• Coolors
  Fast color scheme generator with export options.
  访问 →
• Color Hunt
  Curated collection of beautiful color palettes.
  访问 →
• Realtime Colors
  Visualize your color palette on a real website layout.
  访问 →
• OKLCH Color Picker
  Modern OKLCH color picker for perceptually uniform colors.
  访问 →

Lottie 动画

• LottieFiles
  The largest library of free Lottie animations and tools.
  访问 →
• IconScout Lottie
  Animated Lottie icons and illustrations.
  访问 →

CSS 工具

• CSS-Tricks
  Articles, tutorials, and reference on CSS and frontend dev.
  访问 →
• Can I Use
  Browser support tables for modern web features.
  访问 →
• Tailwind CSS
  Utility-first CSS framework with design system built in.
  访问 →
• CSS Gradient
  Free CSS gradient generator tool.
  访问 →
• Clippy
  CSS clip-path maker for custom shapes.
  访问 →

无障碍资源

• WebAIM
  Web accessibility resources, training, and evaluation tools.
  访问 →
• The A11Y Project
  Community-driven effort to make digital accessibility easier.
  访问 →
• WCAG 2.1 Guidelines
  Official W3C Web Content Accessibility Guidelines.
  访问 →
• Axe DevTools
  Automated accessibility testing tool.
  访问 →

设计系统

• Design Systems Repo
  Collection of design systems, style guides, and pattern libraries.
  访问 →
• Storybook
  UI development environment for building component libraries.
  访问 →
• Design Tokens Community
  Community and spec for design tokens standardization.
  访问 →

灵感

• Dribbble
  Design community for sharing and discovering creative work.
  访问 →
• Awwwards
  Awards for the best web design and development.
  访问 →
• Mobbin
  Real-world mobile and web design references.
  访问 →
• Godly
  Curated collection of the best web design inspiration.
  访问 →
• SaaS Landing Page
  Collection of the best SaaS landing page designs.
  访问 →

从任何网站提取设计资源

Miro
Miro Chrome 扩展让您从任何网站提取 CSS、颜色、字体、图片、SVG 和 Lottie 动画。
添加到 Chrome