精选的设计、Html、CSS等UI资源列表
目录
- UI 图形
- 字体
- 颜色
- 图标
- 徽标
- 网站图标
- 图标字体
- 素材照片
- 素材视频
- 素材音乐和音效
- 矢量图和剪贴画
- 产品和图片模型
- HTML 和 CSS 模板
- CSS 框架
- CSS 方法论
- CSS动画
- Javascript 动画库
- Javascript 图表库
- UI 组件和工具包
- React UI 库
- Vue UI 库
- Angular UI 库
- Svelte UI 库
- React Native UI 库
- 设计系统和样式指南
- 在线设计工具
- 可下载的设计工具软件
- 设计灵感
- 图像压缩
- Chrome 扩展程序
- Firefox 扩展程序
- AI 图形设计工具
- 其他
UI 图形
包含现代 UI 组件的网站和资源，格式包括 PSD、Sketch、Figma 等。它们非常适合用于 Web 组件/UI 的创意。
| 网站 | 描述 |
|---|---|
| SVG 正弦波 | 将完美的正弦波导出为 SVG，用于您的前端项目 |
| UI Design Daily | 各种类型的超棒 UI 组件 |
| 100 Daily UI | 免费的 Figma 产品、元素和屏幕库 |
| Sketch App Sources | Sketch UI、线框、图标等等 |
| Humaaans | 炫酷的人物插画，拥有混搭能力 |
| Paaatterns | 免费收集所有矢量格式的精美图案 |
| Drawkit.io | 面向设计师和初创公司的插画 |
| Absurd.design | 面向设计师和开发者的免费超现实主义插画 |
| Undraw.co | 开源插画，助您实现任何想象和创作 |
| Manypixels.co | 单色、等距高质量插画 |
| Open Peeps | 手绘插画库 |
| InvisionApp | 免费、高质量的 UI 工具包、图标包和模型库 |
| Open Doodles | 一套免费的草图插图 |
| Avataaars | Pablo Stanley 创作的免费头像插图草图库 |
| Blush | 使用 Figma 插件的免费可自定义插图 |
| Hero Patterns | 可重复使用的 SVG 背景图案集合 |
| BEAUBUS Patterns | 一套超过 150 个免费的 SVG 图案（背景） |
| IRA Design | 由 creative tim 创作的开源渐变插画合集。 |
| 透明纹理 | 透明纹理背景图案合集。 |
| icons8.com/illustrations | 矢量插图，为您的项目增添格调 |
| Patternico | 无缝图案生成器 |
| Pixeltrue Illustrations | 免费动画插图 |
| Abstract User Avatar API | 使用用户名或邮箱创建简洁灵活的用户头像的 API |
| sketchvalley | 下载免费的 PNG、SVG 或 AI 文件。 |
| PatternPad | 免费且无限的独特图案设计。 |
| Dimensions | Dimensions.com 是一个持续更新的尺寸图纸参考数据库，记录了日常物品和空间的标准测量值和尺寸。 |
| Freebiesbug | 为网页设计师和开发者精心挑选的资源，持续更新。 |
| Flexiple | 每天添加一幅新的高质量开源插图。 |
| Cool Text | Cool Text 是一款免费的图形生成器，适用于网页和其他任何需要令人印象深刻的徽标而无需大量设计工作的地方。 |
| 插图套件 | 每天添加优质开源插图 |
| Doodad 图案生成器 | 创建独特、无缝、免版税的图案。 |
| Pattern Monster | 一个简单的在线图案生成器，用于创建可重复的 SVG 图案 |
| Exemplar | 适用于 Figma 和 Sketch 的免费头像库 |
| UIBundle | 数千个免费设计资源，包括 UI 套件、模型、插图、图标、字体、3D 资源、模板等等。 |
| openby.design | 为个人和商业项目量身定制的免费 UI 设计资源。无需署名。 |
| Design Stripe | 无需任何设计技能，即可创作精美插画。 |
| HOLA SVG! | 一个分享 SVG 素材的 SVG 游乐场。 |
| symu.co | 免费模板、UI 套件、图标、PSD 文件 |
| Mesh Gradient | 生成并下载精美的网格渐变。 |
| CSS 阴影渐变 | 生成 CSS 阴影渐变。 |
| Creatica | 生成独特精美的背景和图案。 |
| Boring Avatars | SVG 随机可爱头像合集 |
| Html to Design | 将任何网站转换为完全可编辑的 Figma 设计 |
| fffuel | 一系列用于渐变、图案、纹理、形状和背景的色彩工具和免费 SVG 生成器 |
| Mesher | 一款免费工具，仅使用 CSS 代码即可创建精美的网格渐变。使用您自己的颜色或随机生成的颜色来构建最时尚的 CSS 渐变 |
字体
提供免费字体和字体工具的网站
| 网站 | 描述 |
|---|---|
| Google Fonts | 包含约 1000 种免费授权字体系列的字体库 |
| DaFont | 可免费下载字体的存档 |
| 使用和修改 | 个人精选精美、优雅、朋克、专业、不完整、怪异的字体 |
| 1001 免费字体 | 我觉得这个名字本身就说明了一切 :smirk: |
| Font Squirrel | Font Squirrel 在互联网上搜寻高质量、合法免费的字体 |
| Font Fabric | 一家数字字体铸造厂，为各种品牌制作零售字体和定制排版 |
| Just Free Fonts | 手工精选的免费、开源和公共领域字体集合，旨在用于商业用途 |
| Tiff | 一款字体差异工具，可以直观地对比两种字体之间的差异 |
| TypeKit Practice | 学习排版实践 |
| Fontjoy | 一键生成字体配对 |
| 黄金比例 | 黄金比例排版计算器 |
| FontGet | 提供多种字体下载，并按标签整齐排序 |
| FontPair | 帮助您配对 Google 字体 |
| Font Space | 一个以设计师为中心的免费字体网站，提供快速自定义预览 |
| Abstract Fonts | 个人和商业用途均可免费使用的字体 |
| Free Typography | 高质量字体列表 |
| Leon Sans | 使用代码制作的几何无衬线字体 |
| Lexend | 经实践证明，可变字体可显著提高阅读能力 |
| Apple 平台字体 | 获取在应用中使用 Apple 平台系统字体所需的详细信息、框架和工具 |
| SFWin | 适用于 Windows 10 和非 Apple 平台的 San Francisco 字体 |
| Font Flipper | 在您自己的设计上预览 800 多种 Google 字体，无需下载字体 |
| Fonts Arena | 免费精选字体 |
| Befonts | 免费提供高质量字体 |
| 阿拉伯字体 | 免费阿拉伯字体 |
| FontDrop | 轻松查看字体文件内容 |
| Open Foundry | 精选开源字体的免费平台 |
| Glyphter | 上传您自己的 SVGS 并将其转换为字体文件。如果您想要加载较小的库，这很有用 |
| Google Webfonts Helper | 一种轻松自托管 Google 字体的方法 |
| Rough Font Awesome | 当 RoughJS 遇到 Font Awesome |
| FFonts | 免费时尚字体 |
| 马拉雅拉姆语字体 | 由 Swathanthra Malayalam Computing(SMC) 维护的免费马拉雅拉姆语字体 |
| Dev Fonts | 免费查找和使用编码字体 |
| Font M | 可供下载用于 Material 编码和设计的免费字体 |
| W Fonts | 下载免费字体 |
| 现代流体排版编辑器 | 流体排版是实现响应式排版的一种现代方式。 |
| UrbanFonts | 超过 8000 种免费字体和装饰符号合集 |
| Typespiration | 灵感迸发的字体组合和配色方案 |
| Fontsource | 在整齐捆绑的 NPM 软件包中自行托管开源字体。 |
| FontBolt | 从流行文化中发现并生成您喜爱的字体。 |
| Fontshare | Fontshare 是印度字体铸造厂 (ITF) 提供的免费字体服务，让所有人都能使用优质字体。 |
颜色
帮助选择颜色的网站和资源
| 网站 | 描述 |
|---|---|
| PaletteForge | 从不同类别生成精美的调色板。 |
| Colorlab | 一站式创建调色板、渐变、色阶并检查对比度。 |
| Color Brewer 2 | 原创调色板生成器，也支持色盲用户。可能是科学上最好的选择，但可能不是最漂亮的。 |
| Huetone | 一款创建易用色彩系统的工具。 |
| Colormind.io | 调色板生成器 |
| ColorCurves.app | 使用曲线生成调色板的调色板生成器 |
| ColorGradient | 一款免费的工具，可直观地创建简单和复杂的 CSS 渐变 |
| Coolors | 创建完美的调色板，或从数千种精美的配色方案中汲取灵感 |
| UI Colors | Tailwind CSS 调色板生成器 |
| HTML 颜色代码 | 使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值 |
| 颜色和字体 | 精选的颜色、字体和资源库 |
| 调色板列表 | 选择两种您喜欢的颜色，该工具即可为您生成数千种调色板。 |
| Google Material Color Tool | 官方 Google Material Color 调色板工具 |
| Material Palette | 自由选择用于 Material Design 的调色板、图标和颜色 |
| ColorSpace | 用一种颜色生成漂亮的调色板 |
| FlatUIColors | 一组风格各异的精美调色板 |
| Adobe Color | 创建调色板、从图像中提取渐变等。 |
| Colorsinspo | 一站式色彩资源，助您轻松找到所有关于色彩的信息 |
| ColorsWall | 存储调色板并一键生成调色板的地方 |
| Happyhues | Happy Hues 是一个色彩灵感网站，它通过 Mackenzie Child 的真实案例，向您展示如何在设计项目中运用色彩 |
| Adobe Trends | 从 Behance 和 Adobe Stock 的创意社区探索不同行业的当前色彩趋势 |
| Color Hunt | 一个免费开放的色彩灵感平台，拥有数千种精选的流行色彩 |
| Gradient Hunt | 一个免费开放的渐变灵感平台，拥有数千种精选的流行渐变色 |
| Web Gradients | 一个免费的 CSS 渐变网站 |
| ColorBox | 一个免费的色彩设置网站 |
| CSS Gradient | 一个免费的自定义渐变网站以及一些渐变示例 |
| gradienta | 纯 CSS 和 jpg 渐变 |
| UI Gradients | UI 渐变颜色生成器 |
| Palette Generator | 每次按下空格键都会生成新的调色板 |
| Material Palettes | 1000+ Material Design 调色板 |
| Grabient | 渐变选择器 |
| ShadeSwash | 快速生成任意颜色的色调 |
| BrandColors | 最大的官方品牌颜色代码集合 |
| BRAND PALETTES | 徽标颜色代码和调色板 |
| Material Design 调色板生成器 | 生成类似 Material Design 的主题和调色板 |
| Colorate | 面向设计师和开发者的配色方案工具。它将帮助您汲取灵感，并作为您配色工作的资源。 |
| 0to255 | 一款可轻松调亮和调暗颜色的颜色工具。它非常适合悬停状态、边框、渐变等。 |
| 颜色混合器 | 一款显示两种颜色中间色的工具 |
| 渐变按钮 | 即用型复制/粘贴渐变按钮 |
| Khroma | Khroma 使用人工智能了解您喜欢的颜色，并创建无限的调色板供您发现、搜索和保存。 |
| whocanuse | 一款让您关注并理解颜色对比度如何影响不同视觉人群的工具l 损伤。 |
| Colorable | 颜色组合对比度测试器 |
| 颜色十六进制选择器 | 获取颜色十六进制代码和名称的工具。 |
| Saruwakakun | 适用于网站和应用程序设计的精美配色方案，带有预览功能 |
| Paletton | Paletton.com 是一款设计师颜色工具，旨在创建效果良好的颜色组合。 |
| Colorzilla | 一款功能强大的类似 Photoshop 的在线 CSS 渐变编辑器 |
| CSS 渐变编辑器 | 您可能只需要此工具来创建 CSS 渐变背景和图案。 |
| 图像颜色选择器 | 图像颜色选择器和调色板生成器 |
| CombineCOLORS | 颜色混合工具 |
| Color Lovers | 它将显示外部世界流行的配色方案。 |
| HTML CSS Color | 免费在线颜色（美国）或颜色（英国）工具：信息、渐变生成器、色轮等。 |
| HEX 颜色代码 | 它使用我们的颜色选择器、颜色图表和 HTML 颜色名称获取 HTML 颜色代码、十六进制颜色代码、RGB 和 HSL 值。 |
| CoolHue 2.0 | 一个免费工具，以 CSS 和 PNG 格式显示不同的渐变示例 |
| Colors.lol | Twitter 机器人生成的有趣调色板，每种颜色都有十六进制代码和描述性名称。 |
| colors.dopely | 超快速且简单的调色板生成器，调色板可在几秒钟内保存和共享。 |
| UIColor Picker | 带有十六进制代码的 UI 颜色集合，只需单击即可复制。 |
| Color Hex | Color-hex 提供有关颜色的信息，包括颜色模型（RGB、HSL、HSV 和 CMYK），并为所选颜色生成简单的 CSS 代码。 |
| FarbVelo | 随机调色板生成器 |
| Veranda Color | 浏览其他设计师制作的调色板，生成并提交您自己的调色板 |
| Duo | Duo 是我从个人项目或网络上找到的色彩组合集合。 |
| Lospec 调色板列表 | Lospec 调色板列表是一个像素艺术调色板数据库。 |
| Palettte App | 构建从一种颜色过渡到另一种颜色的流畅配色方案。 |
| Eggradients | 用鸡蛋制作渐变背景色。 |
| Gradientos | 轻松查找和测试渐变。 |
| Encycolorpedia | 网页颜色参考网站。色彩知识、网页颜色、十六进制颜色代码。 |
| Croma | 强大的颜色工具，包括吸管、颜色选择器和调色板生成器。 |
| 颜色设计师 | 一种颜色的渐变生成器。 |
| 双色调 | 查找可用于任何项目的精美免费双色调图像，或上传您自己的图像并在几秒钟内应用双色调效果来制作自定义双色调图像。 |
| 酷炫背景生成器 | 探索精心挑选的酷炫背景，您可以将其添加到博客和网站。 |
| 颜色阴影生成器 | 我们可以快速生成我们喜欢的颜色或任何颜色的色调，以创建具有多种色调的模板或 CSS 组件，并在同一网站上提供更多有用的工具 |
| Huemint | Huemint 使用机器学习为您的品牌、网站或图形创建独特的配色方案 |
| InclusiveColors 调色板创建器 | 创建自定义的、可访问的 Tailwind 风格调色板，您可以在其中修改整个色板的 HSL 曲线，检查 WCAG/APCA 对比度，然后导出到 Tailwind/CSS/Figma/Adobe |
| AiSeka | 发现最佳的调色板和色彩工具。 |
图标
图标资源，包括 png、svg 等
| 网站 | 描述 |
|---|---|
| Circum Icons | 为 React、Vue 和 Svelte 提供一致的 SVG 开源图标 |
| UXWing | 经过精心优化，可免费用于商业用途的图标 |
| Shapedfonts Iconclub | 8000+ 免费图标 |
| Feather Icons | 精美、可自定义的开源图标 |
| Tabler Icons | 3500+ 高度可自定义的开源 SVG 图标，支持 React、Preact、Vue、Svelte 和 SolidJS |
| Xicons | 集成了 fluentui-system-icons、ionicons 等 (Vue3、Vue2、React、SVG) 的 SVG Vue/React 组件。 |
| Iconoir | 包含 900+ 个开源图标的免费图标库 |
| Simple Icons | 1307 个热门品牌的免费 SVG 图标 |
| Linear Icons | 1000+ 个超清晰的矢量图标 |
| Icons8 | 免费图标、照片、矢量图和工具 |
| Flat Icon | 最大的免费图标数据库，包含 PNG、SVG、EPS、PSD 和 BASE 64 格式 |
| The Noun Project | 超过 200 万个精选图标，由全球社区创建 |
| Iconscout | 一站式免费下载图标插图素材 |
| IconSear.ch | 索引超过 50,000 个 SVG 图标的搜索引擎 |
| Nucleo App | Nucleo 是一个包含 27500 个图标的精美图标库，也是一款功能强大的应用程序，可收集、自定义和导出所有图标。（免费和付费） |
| Icon-icons.com | 免费图标 PNG、ICO、ICNS 和矢量文件 SVG |
| Bootstrap Icons | 专为 Bootstrap 构建的免费图标，但它们适用于任何项目 |
| Remix Icon | 简单易用的图标系统 |
| Iconmonstr | 在 313 个图标集中发现 4496+ 个免费图标 |
| Vivid.js | 即用型免费开源 SVG Icons Pack JavaScript 库。 |
| Iconfinder | SVG、PNG、CSH 和 AI 格式的免费和高级矢量图标 |
| Lordicon | 50 个免费动画交互式图标 |
| UseAnimations | SVG 和 Json 格式的免费动画图标（适用于 lottie） |
| css.gg | 700+ 开源 CSS、SVG 和 Figma UI 图标，提供 SVG Sprite、styled-components、NPM 和 API 版本 |
| IconBros | 7843+ 免费图标，分为 182 个图标集 |
| Material Design Icons | 一个图标集，允许针对不同平台的设计师和开发者下载他们项目所需的格式、颜色和大小的图标。 |
| Heroicons | Tailwind CSS 创建者提供的免费开源图标。 |
| Zondicons | 一套免费的高级 SVG 图标，可用于您的数字产品。 |
| Endless Icons | 一个提供大量免费图标的网站。图标均已标记并压缩成套件。 |
| Icomoon | 浏览 5500 多个免费图标。添加任何您想要的图标集，即可轻松浏览和搜索其图标。 |
| Eva Icons | Eva Icons 是一套包含 480 多个精美开源图标的图标包，适用于常见操作和项目。 |
| Cryptoicons | 一套包含 430 个加密货币和法定货币图标的图标集。完全免费。 |
| Ikonate | 完全可自定义且易于访问的矢量图标 |
| appicon | 为您的 IOS、macOS 和 Android 项目快速生成不同大小的应用图标 |
| LineIcons | 2000+ 设计师和开发者必备的 Line 图标 |
| Evericons | Evericons 是一个包含 460 多个免费图标的大型包，由 Aleksey Popov 设计。 |
| SVG Repo | 下载免费的 SVG 矢量文件用于商业用途。 |
| Convertio | 在线免费将 PNG 文件转换为 SVG。 （其提供的服务之一。） |
| CSS ICON | 纯 CSS 代码制作的图标集，无依赖，“随取随用”图标 |
| 统一图标 | 数千个图标，一个统一的框架。一个库，超过 40,000 个矢量图标。 |
| System UIcons | 220 多个图标，并且仍在不断增加。 |
| IconPark | 将 SVG 图标转换为多个主题，并生成 React 图标、Vue 图标和 svg 图标 |
| Radix Icons | 一个 cri由 Modulz 团队设计的 15×15 图标集。所有图标均可用作单独的 React 组件、SVG 等格式。 |
| EOS Icons | 像素完美的开源图标字体，提供连字和 SVG 格式。 |
| Ionicons | 精美的开源图标，可用于 Web、iOS、Android 和桌面应用。 |
| Phosphor Icons | Phosphor 是一个灵活的图标系列，适用于界面、图表和演示文稿 |
| Teeny Icons | TeenyIcons 是一组易于在 html 中使用的 SVG 格式图标 |
| Lucide | Lucide 是一个开源图标库，是 Feather Icons 的一个分支。 |
| Icones | 图标浏览器，提供即时搜索功能，由 Iconify 提供支持。 |
| Shitty Icons | 免费图标合集。 |
| Iconspedia | Iconspedia 是一个包含大量高质量免费图标的网站。 |
| iconhub | 为每个人提供实用且精美的图标 |
| 3DICONS | 精美的开源 3D 图标 |
| IconsDb | 免费自定义图标 |
| Emoji Guide | 3300 个表情符号及其 HTML 代码的集合，方便使用。 |
| Unicorn Icons | 100+ 个可自定义的趣味动画图标。提供 JSON 和 SVG 格式。 |
| Sargam Icons | 275+ 个开源图标，适用于 Figma、SVG 和 React。 |
| Icon buddy | 10 万+ 个开源 SVG 图标，可供设计师和开发者完全自定义。 |
| Round Icons | 全球最大的付费免费图标库，包含扁平图标、线条图标、填充轮廓、等距和实心样式。 |
| Vectopus | 为精英设计师精心挑选的顶级资源集合。 |
| IconShelf | 访问超过 250,000 个开源 SVG 图标，您可以自定义它们以适应任何设计或开发项目。 |
徽标
徽标资源
| 网站 | 描述 |
|---|---|
| LogoSear.ch | 搜索引擎，索引超过 200,000 个 SVG 徽标 |
| SVGPorn | 1000 多个高质量 SVG 徽标 |
| 支付系统徽标 | 提供 png 和 svg 格式的支付系统徽标 |
| 浏览器徽标 | 高分辨率网页浏览器徽标 |
| VectorLogoZone | 格式一致的 SVG 徽标 |
| World Vector Logo | 下载您喜爱品牌的矢量徽标 |
| 徽标制作器 | 创建自定义徽标 |
| 免费徽标制作器 | 快速、一体化徽标生成器 |
| LOGOwine | 免费下载 SVG 矢量和 PNG 文件格式的品牌徽标 |
网站图标
网站图标资源
| 网站 | 描述 |
|---|---|
| FaviconForge | 非常简单的网站图标生成器。可下载 .ico 和 .png 格式 |
| Favicon.io | 可从文本、图片或表情符号生成网站图标。可下载 .ico 和 .png 格式 |
| Favicomatic | 生成各种尺寸和格式的网站图标以及支持所有浏览器或设备所需的 HTML 代码 |
| Favicon 生成器 | 为您的网站生成 Favicon ico 文件 |
| RealFaviconGenerator | 为所有平台 (Windows、iOS、Android) 生成图标 |
| FontIcon | 使用 Font Awesome 图标生成 Favicon 和图片 |
| Favicon.cc | 在线绘制 Favicon，并浏览其他用户制作的图标库 |
| Maskable.app 编辑器 | 根据您现有的图标生成可屏蔽的 PWA 图标 |
| Favicon 生成器 | 生成网站的 Favicon 资源。支持 SVG、可屏蔽、图片压缩。纯前端。无隐私风险。快速。 |
| FaviFiles | 数秒内免费生成像素级完美图标 |
图标字体
图标字体资源
| 网站 | 描述 |
|---|---|
| Font Awesome | 网络上最受欢迎的图标集和工具包 |
| Line Awesome | 用现代线条图标替换 Font Awesome |
| Material Icons | Material Design 图标库 |
| IonIcons | 来自 Ionic 团队精心制作的开源图标 |
| Zurb Foundation Icons | 可自定义的 Foundation 图标 |
| Fontisto Icons | Fontisto 标志性字体和 CSS 工具包 · 616+ 免费图标 |
| Boxicons | Boxicons 是一个精心制作的开源图标免费合集 |
| Icofont | 2100+ 免费图标，为您的创意设计增添色彩 |
| Material Palette | 自由选择 Material Design 的调色板、图标和颜色 |
| Material Design Iconic Font | Material Design 图标字体 |
| Vscode Codicons | 来自 Visual Studio Code 的图标字体 |
| Devicon | Devicon 是一组代表编程语言、设计和开发工具的图标 |
| PaymentFont | 适用于支付运营商和支付方式的时尚网页字体。包含 116 个图标 |
| Weather Icons | Weather Icons 是唯一一款包含 222 个天气主题图标的图标字体 |
| Stroke 7 | 202 个受 iOS 7 启发的细描边图标 |
| Jam Icons | 890+ 精美图标，助您打造精彩的网页应用 |
| Fontello | 200+ 网页图标，可自定义图标名称或代码。 |
| Linea | Linea：提供 750+ 免费图标 |
| Unicons | 一套包含 1100+ 免费线条图标的图标集，可用作网页字体、SVG 图标以及 React、Vue 和 React Native 等 JS 框架的组件。 |
| Mobirise Icons | 一套免费开源的图标集，包含 150 个优雅、像素完美的线性图标，可用作网页图标字体和 SVG 图标。 |
| Hero Icons | 免费开源 Svg 图标库 |
| React Icons | 一个开源免费的 Svg 图标库，它集合了您喜爱的图标库，例如 Font Awesome 和 Material Icons，为您提供丰富的 SVG 图标供您选择。 |
图片库
为您的网站和应用提供各种免费图片库的网站
| 网站 | 描述 |
|---|---|
| Pexels | 由才华横溢的创作者分享的免费图片库 |
| Unsplash | 互联网上免费使用图片的来源 |
| Pixabay | 超过 170 万张高质量图片和视频 |
| Magdeleine | 每天提供图库和免费高分辨率照片 |
| Picspree | 免版税图片、库存照片、插图和矢量图 |
| Burst | 免费库存照片集 |
| Gratisography | 免费高分辨率图片集 |
| Life of Pix | 免费高分辨率摄影 |
| Stock Snap | 每周添加数百张高质量照片 |
| Morguefile | 超过 350,000 张可用于商业用途的免费库存照片 |
| Kaboom Pics | 库存摄影和调色板。适用于产品图片 |
| New Old Stock | 库存复古照片 |
| Pic Jumbo | 各类优质照片合集 |
| Public Domain Pictures | 各类公共领域图片 |
| Find A Photo | 搜索多个图片库网站 |
| Stockvault | 分类图片 |
| Placeholder | 免费的网络图片占位符服务。您可以指定图片大小和格式 |
| Realistic Shots | 免费高分辨率图片 |
| Negative Space | 高分辨率免费图片 |
| SkitterPhoto | 免费高分辨率摄影 |
| PicoGraphy | 精美、高分辨率的免费照片 |
| Wunder Stock | 令人惊叹的免费照片 |
| PxHere | 免费图片和免费库存照片 - Wallpaper |
| Piqsels | 免版税库存照片 |
| FoodiesFeed | 美食图片库 |
| Nappy | 一个提供精美、高分辨率黑人和棕色人种照片的网站。 |
| Generated Photos | 独特的 AI 生成模型照片 |
| Reshot | 独特的免费照片。精选、非库存图片。 |
| 免费图片 | 查找并下载免费图片库 - 全部免费，可个人或商业使用 |
| Lorem Picsum | 一个易于使用的 API，用于获取精美的占位符图片。可指定尺寸和其他参数。 |
| scienceimage | 一个专注于科学和自然图片的图片库 |
| 集成与应用网络图像库 | 免费图片，为科学家、资源管理者、政府机构、社区团体和图形专业人士提供增强科学交流的资源。 |
| Saxifraga | 免费自然图片 |
| Creative Commons | 搜索可重复使用的免费图片。 |
| AllTheFreeStock | 精选免费图片、音频和视频素材。 |
| Lorem.space - 占位符图片生成器 | 占位符图片 API，实用！ |
| Openverse | Openverse 是一个开放授权媒体的搜索引擎 |
| ISO Republic | 获取数千张免费高分辨率 CC0 图片 |
视频素材
为您的网站和应用提供各种免费素材视频的网站
| 网站 | 描述 |
|---|---|
| Pexels | 最大的免费视频库，由社区捐赠 |
| Pixabay | 类似于 Pexels 的大型免费视频库，由社区捐赠 |
| Coverr.co | 精美的免费素材视频片段 |
| Videezy | 免费高清素材和 4K 视频 |
| Mix Kit | 素材视频剪辑和音乐 |
| Life Of Vids | 免费视频剪辑和循环 |
| Videvo | 免费和高级素材视频 |
| Loopvidz | 使用 VIMAGE 应用创建的免费影院图表 |
| SplitShire | 精美独家的免费素材视频和照片 |
| Free-Stock-Video | 免费素材素材视频 |
素材音乐和音效
提供免费库存音乐和/或音效的网站
| 网站 | 描述 |
|---|---|
| YouTube Studio 音频库 | 免版税音频库，提供可下载的音乐和音效。已获准在 YouTube 上获利。 |
| 免费库存音乐 | 适用于 YouTube 视频、播客等的免版税库存音乐 |
| Bensound | 免费下载免版税音乐并将其用于您的项目 |
| Mixkit | 为您的项目提供免费音乐 |
| Freesound | 免费素材音乐和音效 |
| Free Music Archive | 面向音乐家和音效爱好者的 Creative Commons 授权音效协作数据库 |
| Musopen | 一个在线的免版权古典音乐库 |
| Pixabay | 为您的项目提供免费音乐下载，例如 YouTube 视频、音乐、Vlog、电影、播客等。 |
| Unminus | 为您的项目提供免费的优质音乐 🎁 免版税。已获得 YouTube 许可。 |
矢量图和剪贴画
免费矢量图、剪贴画、插图、图案等
| 网站 | 描述 |
|---|---|
| PNGFree.ai | PNGFree.ai 提供数百万张高质量免费 PNG 图片 |
| Vecteezy | 查找并下载免费矢量图 |
| Freepik | 免费矢量图、库存照片、PSD 和图标 |
| Free Vectors | 分享免费矢量图的矢量爱好者社区 |
| PNGTree | png、背景、模板、文字效果 |
| Vector4Free | 免费矢量图形 |
| Freeble | 矢量、图案、模型等 |
| Lukaszadam | 免费矢量图形 |
| Illlustrations | 100 幅精美插图 - png、svg |
| Clipart | 从免费合集为您的项目选择精美的剪贴画、png、涂色页、绘图等！ |
| Growwwkit illustrations | 一套 8 幅简洁、黑白、时尚的插图 |
| trianglify.io | 生成低多边形背景、纹理和矢量图 |
| blob | 为 Web 和 Flutter 应用生成 Blob 形状 |
| HiClipart | 设计师社区，分享和下载透明背景 PNG 剪贴画 |
| Stories by Freepik | 免费且可自定义的项目插图集 |
| Black Illustrations | 精美的黑人插图（免费和付费） |
| Delesign | 免费插图集及更多内容 |
| 自定义形状分隔线 | 免费工具，让设计师和开发者更轻松地导出漂亮的 SVG 形状分隔线 |
| Servier Medical Art | 3000 幅免费医学图像，可用于为您的出版物和 PowerPoint 演示文稿增添光彩 |
| Clker | 可用于任何您喜欢用途的免费剪贴画 |
| SVG wave | 一款免费且可自定义的渐变 🌈 SVG wave 生成器，适用于 UI 设计。 |
| BGjar | 适用于您的网站、博客和应用程序的免费 svg 背景生成器。 |
| Heritage Library | 复古插图（矢量和 png） |
| ROBOHASH | 从任何文本生成独特的图像 |
| Tabbied | 创建并自定义极简生成的图案/图稿，用于背景图片、印刷品和其他项目。 |
| Haikei | 一款超棒的多形状网页应用。 |
| Vector | 超棒的网站，提供各种摩洛哥矢量图。 |
| Heazy | 秒速生成独特的矢量素材。 |
| Mossaik | 免费的 SVG 生成器，包含各种工具、波浪线、平铺、斑点等等。 |
产品和图片模型
创建设备和其他产品的模型
| 网站 | 描述 |
|---|---|
| MockCity | 通过将图片自动放置在智能对象中，批量生成 PSD 模板的模型。可视化编辑器允许您更改智能对象参数并实时查看更新的模型预览。 |
| Smart Mockups | 创建精美的产品模型（免费和付费） |
| Media Modifier | 为您的产品提供精美的设计模型服务（免费和付费） |
| Shot Snap | 为您的应用或网站设计创建精美的设备模型图片 |
| Screely | 立即将您的屏幕截图转换为模型 |
| Screenshot.rocks | 在几秒钟内创建精美的浏览器和移动端模型 |
| Screen Peak | 通过 URL 创建模型 |
| Mockup World | 最大的免费照片级逼真在线模型来源 |
| Collab Shot | 实时屏幕截图和图片分享 |
| Facebook Devices | 热门设备的图片和 Sketch 文件 |
| Threed.io | 直接在浏览器中生成 3D 模型。 |
| Mockuphone | 适用于所有设备（包括 iOS、Android、Windows Phone、笔记本电脑和台式机以及电视）的 100% 免费模型 |
| Device Shots | 免费为社交媒体创建高分辨率设备模型 |
| Clean Mock | 使用最新的设备框架（如 iPhone X）和自定义背景，直接在浏览器中免费快速创建令人惊叹的模型，让您的移动或网站设计脱颖而出。 |
| Mock.Video | 通过在视频中添加设备框架即可立即创建模型。 |
| MockupBro | 使用在线模型生成器创建产品模型！只需选择一个模型，上传您的设计并下载无水印图片即可。 |
| Animockup | 在浏览器中创建动画模型🔥。 |
| Pika | 立即创建浏览器模型和精美图片，用于营销、博客文章等 |
| Lunacy | 免费从零开始创建模型 |
HTML 和 CSS 模板
提供各种免费精美网站模板和主题的网站
| 网站 | 描述 |
|---|---|
| HTML5Up | 非常现代、独特的响应式 HTML5/CSS3 主题 |
| Templatemo | 极简主题、简历主题、图库主题等 |
| FreeHTML5 | 免费和高级 HTML5 和 Bootstrap 主题 |
| StyleShout | 精心制作的免费网站模板 |
| Start Bootstrap | Bootstrap 入门主题 |
| ThemeWagon | 收集来自不同类别的 HTML5 Bootstrap 模板 |
| Colorlib | 几乎涵盖您能想到的任何主题类别 |
| Free CSS | 海量免费模板 |
| Hubspot | 模板、信息图、横幅等等 |
| Mobirise | 精美的 HTML5/CSS3 模板 |
| Bootswatch | Bootstrap 免费主题 |
| Onepagelove | 单页网站、模板和资源 |
| Themes For App | 免费 Bootstrap 主题和落地页 |
| BootstrapTaste | 高级免费 Bootstrap 模板 |
| BootstrapMade | 使用 Bootstrap 打造的优雅、简洁、美观的免费模板。 |
| W3Layouts | W3Layouts：2020 年 3784+ 个免费网站模板 |
| Tooplate | Tooplate：人人可用的免费 HTML 模板！ |
| Cruip | 完整编码的 HTML 模板，助您轻松构建初创企业落地页。 |
| UIdeck | 免费落地页模板和 Bootstrap 主题 |
| Splawr | 免费网页模板，助您开启创意！ |
| W3css_templates | 一些响应式 W3.CSS 网站模板供您使用。 |
| All-Free-Download | 下载免费网站模板 |
| mashup-template | HTML5/CSS3 免费模板 |
| Sneat Bootstrap 5 HTML 管理模板 | 开源且易于使用的 Bootstrap 5 HTML 管理模板，设计优雅，布局独特。 |
| HTMLrev | 免费精美的 HTML5 模板和登录页面 |
| Horizon UI | 最流行的 React 开源管理模板 |
| KeenThemes | 免费和专业的 Html/Css3、Bootstrap5、Vue、React、Laravel 模板 |
| ScrewFast | 开源 Astro 网站模板，包含时尚、可自定义的 TailwindCSS 组件 |
CSS 框架
CSS/UI 框架助您构建美观的网站和应用程序
| 网站 | 描述 |
|---|---|
| Tailwind CSS | 低级、实用优先的框架 |
| Bootstrap | 流行的 UI 框架，包含大量使用 CSS 和 JS 的组件 |
| Materialize | 基于 Material Design 的现代响应式前端框架 |
| Material Design Lite | 基于 Material Design 的轻量级框架，不依赖 JS |
| Bulma | 无需 JS 的现代 CSS 框架 |
| Skeleton | 适用于基本 UI 元素的超轻量级框架 |
| Uniform CSS | 完全可配置的实用程序生成器和完全使用 Sass 构建的 CSS 框架 |
| Semantic UI | 通过创建共享的 UI 词汇表，为设计师和开发者赋能 |
| Semantic UI | Semantic-UI 的社区分支 |
| Foundation | 具有简洁标记的移动优先框架 |
| Pure CSS | 一组小型、响应式的 CSS 模块 |
| UIKit | 轻量级模块化前端框架 |
| Susy | 轻量级 Sass 网格布局引擎 |
| Milligram.io | 极简 CSS 框架 |
| Vanilla Framework | 用 Sass 编写的简单、可扩展的 CSS 框架 |
| Spectre CSS | 轻量级、现代的 CSS 框架 |
| Picnic CSS | 轻量级且美观的库 |
| Wing | 专为极简主义者设计的美观 CSS 框架 |
| Chota | 一个微型 (~3kb) CSS 框架 |
| Blueprint CSS | 轻量级布局库，用于构建出色的响应式移动优先 UI，适用于各种平台 |
| W3.CSS | 一个现代 CSS 框架，默认支持桌面、平板电脑和移动设备设计。设计时独立于 jQuery 或任何其他 JavaScript 库 |
| 98.css | 一个用于忠实再现旧版 UI 的设计系统 |
| NES CSS | NES 风格的 CSS 框架 |
| Shoelace.css | 轻量级、前瞻性的 CSS 库，采用未来 CSS 语法构建 |
| MVP.css | 一个极简的 HTML 元素样式表。无需类名，无需框架，只需语义化的 HTML 即可完成 |
| Blaze.css | 开源模块化 CSS 工具包，提供出色的结构，助您快速构建网站 |
| Turret CSS | Turret CSS 是一个用于开发响应式网站的样式框架。 |
| Cutestrap | 一个强大且独立的 CSS 框架。 |
| XP.css | XP.css 是 98.css 的扩展。这是一个用于构建类似传统 UI 界面的 CSS 库。 |
| Framework7 | Framework7 - 是一个免费的开源框架，用于开发具有原生外观和风格的移动、桌面或 Web 应用程序。 |
| Hint.css | 一个纯 CSS 工具提示库，助您打造精美的网站。 |
| imagehover.io | 纯 CSS 图像悬停效果库 |
| mini.css | 一个极简、响应式、风格无关的 CSS 框架 |
| Tachyons | 使用尽可能少的 CSS 创建快速加载、高可读性和 100% 响应式的界面。 |
| Material Bootstrap | 使用 Bootstrap 进行 Material Design 设计 |
| Ivory | 一个现代化的 CSS 框架，可让您更快、更轻松地开发强大的 Web 界面 |
| Halfmoon UI | 一个响应式轻量级框架，旨在快速构建美观的仪表板和产品页面。 |
| Metro 4 | 使用 Metro 4 快速有效地创建您的网站。基于 html、css 和 javascript 构建的强大组件库。 |
| css-doodle | 一个使用 CSS 绘制图案的 Web 组件 |
| latex.css | 让您的网站看起来像 LaTeX 文档 |
| Paper CSS | 前端打印解决方案 |
| Windi CSS | Tailwind CSS 的下一代编译器 |
| Cirrus CSS | 一个以组件和实用程序为中心的 SCSS 框架，专为快速原型设计而设计。 |
| Gutenberg | 用于正确打印网页的现代框架。 |
| lit | 世界上最小的响应式 Fire CSS 框架 (395 字节)。 |
| Arwes | Arwes 是一个基于未来科幻设计、动画和音效构建用户界面的 Web 框架。 |
| Bojler | Bojler 是一个电子邮件框架，用于开发响应式轻量级电子邮件模板，这些模板可以在每个最流行的电子邮件客户端上正确呈现。 |
| Tacit | 面向初学者的原始 CSS 框架，无需类。 |
| Terminal CSS | 面向终端爱好者的现代简约 CSS 框架。 |
| Sakura | 一个极简的无类 CSS 框架/主题。 |
| PSone | PS1 风格的 CSS 框架，灵感来自 NES.css。 |
| Marx | Marx 是一个无类 CSS 重置框架，可用于任何项目（尤其是小型项目）。 |
| Tufte | 让你的网页像 Edward Tufte 的讲义一样美观。 |
| Axentix | Axentix 是一个基于 CSS 网格的开源框架，使用 HTML、CSS 和 JS。 |
| Raster Simple Grid System | 极简直观的 CSS 网格系统，采用描述性 HTML 而非语义化 CSS。 |
| flowrift | Flowrift 是一个由精美设计的 Tailwind CSS UI 块组成的库。 |
| twind | 现存最小、最快、功能最齐全的 Tailwind-in-js 解决方案 |
| Pico.css | 为所有原生 HTML 元素提供优雅的样式，无需 .classes，并自动启用暗黑模式。 |
| clay.css | 可扩展且可配置的微型 CSS 实用类和 SASS 混合宏，用于为组件添加 claymorphism 样式。 |
| BeerCSS | 在创纪录的时间内构建 Material Design 界面，让开发者轻松无压力🍻。首个实现 Material Design 3 的 CSS 框架。 |
| UnoCSS | UnoCSS 是一款即时原子 CSS 引擎，旨在实现灵活性和可扩展性。其核心不固执己见，所有 CSS 实用程序均通过预设提供。 |
| Neptune CSS | Neptune CSS 是一款轻量级 CSS 框架。使用它来更快地开发您的网站。 |
| StyleX | StyleX 是一款简单易用的 JavaScript 语法和编译器，用于设计 Web 应用的样式。 |
| Orbit | Orbit 是首个用于创建简单或复杂放射状界面的 CSS 框架。 |
CSS 方法论
CSS 方法论助您编写模块化、可复用且可扩展的代码
| 网站 | 描述 |
|---|---|
| OOCSS | OOCSS 概念帮助我们编写灵活、模块化且可互换的组件。 |
| Atomic CSS | Atomic CSS 是一种 CSS 架构方法，它倾向于使用小型、单一用途的类，并根据视觉功能进行命名。 |
| BEM | 块元素修饰符是一种方法论，可帮助您在前端开发中创建可复用组件和代码共享。 |
| SMACSS | SMACSS 是一种审视设计流程的方法，可以将僵化的框架融入灵活的思维方式。 |
| CUBE | CUBE CSS 是一种以简洁、实用和一致性为导向的 CSS 方法论。 |
CSS 动画
使用 CSS 动画为网站和应用程序创建精彩的动画
| 网站 | 描述 |
|---|---|
| Gradienty Animations | 超过 600 个精选动画，可直接复制粘贴。 |
| Animate.css | 只需添加水滴即可呈现的 CSS 动画 |
| Bounce.js | Bounce.js 是一个工具和 JS 库，可让您创建基于 CSS3 的精美动画 |
| Anime.js | Anime.js (/ˈæn.ə.meɪ/) 是一个轻量级的 JavaScript 动画库，拥有简洁却强大的 API。它兼容 CSS 属性、SVG、DOM 属性和 JavaScript 对象。 |
| Magic Animations | Animations 一直是最令人印象深刻的动画库之一。 |
| Zdog | 圆形、扁平、设计师友好的伪 3D 引擎，适用于画布和 SVG。 |
| CSShake | CSShake 的功能正如其名——一个专为网页内抖动元素而设计的 CSS 库。 |
| Hover.css | Hover.css 是一个 CSS 动画库，专为网站中的按钮和其他 UI 元素而设计。 |
| AniJS | AniJS 是一个动画库，允许您在简单的“类似句子”的结构中为元素添加动画 |
| Animista | 按需 CSS 动画 |
| Tachyons-animate | Tachyons 本身是一个原子 CSS 库，拥有大量实用类，只需向所需内容添加类即可设计任何内容 |
| Sequence.js | Sequence.js 是一个 JavaScript 库，它提供了一个响应式 CSS 框架，用于创建独特的滑块、演示文稿、横幅和其他基于步骤的应用程序 |
| Infinite | 这些动画，例如旋转和脉冲，专门设计为永久运行和重复 |
| OBNOXIOUS.CSS | 为内心强大和思维迟钝者打造的动画 |
| MOTION UI | 一个用于创建灵活 CSS 过渡和动画的 Sass 库 |
| Keyframes.app | 一个用于生成自定义 CSS 关键帧动画的图形用户界面 |
| thoughtbot | 面向初学者的 CSS 过渡和变换 |
| SVG Artista | 一个使用纯 CSS 代码为 SVG 图像中的描边和填充属性添加动画效果的实用工具 |
| AnimXYZ | AnimXYZ 可帮助您为网站创建、自定义和编写动画。专为 Vue、React、SCSS 和 CSS 打造 |
| Whirl | 轻松实现 CSS 加载动画！ |
| Hamburgers | Hamburgers 是一系列美味的 CSS 动画汉堡图标。同时，它还包含一个 Sass 库的源代码。它采用模块化设计，可自定义，因此您可以制作自己的汉堡包。 |
| CSS Loaders & Spinners | 这是一个包含各种 CSS 加载器和旋转器的库 |
| Motion One | 一个基于 Web Animations API 构建的全新动画库，文件大小最小，性能最快。 |
| pocoloco | 为您的网站生成动态背景 |
| AniX | 超级简单轻量级的 CSS 动画库。 |
| AOS | 滚动动画库。 |
| Animatopy | Just-add-water CSS 动画代码片段 |
Javascript 动画库
JavaScript 动画库，为网站和应用程序构建精彩的动画
| 网站 | 描述 |
|---|---|
| GSAP | 一个用于构建高性能动画的 JavaScript 库，可在所有主流浏览器中运行 |
| Velocity.js | Velocity 是一个轻量级动画引擎，其 API 与 jQuery 的 $.animate() 相同 |
| lax.js | 简单轻量级的原生 JavaScript 插件，可在滚动时创建流畅美观的动画！ |
| Rellax.js | 一款流畅、超轻量的原生 JavaScript 视差库 |
| three.js | 一款易于使用、轻量级的 3D 库，带有默认的 WebGL 渲染器。 |
| Atropos | Atropos 是一个轻量级、免费且开源的 JavaScript 库，用于创建令人惊叹的触控友好型 3D 视差悬停效果。 |
| wow.js | 滚动时显示动画。 |
| chocolat.js | 免费灯箱插件。 |
| Animate On Scroll | 滚动时显示动画的滚动库。 |
| Tilt.js | 一个基于 requestAnimationFrame 的轻量级 jQuery 视差悬停倾斜效果库，支持 60+fps。 |
| Roughnotation | Rough Notation 是一个小型 JavaScript 库，用于在网页上创建和动画化注释 |
| tsParticles | 一个用于创建粒子的轻量级库，是已废弃和过时的 particles.js 的改进版本 |
| Particles.js | 一个用于创建粒子的轻量级 JavaScript 库 |
| mo.js | 网页端的动态图形工具箱 |
| Lightbox2 | 一个小型 JS 库，用于在当前页面顶部叠加图片。 |
| Slick | 完全响应式轮播 |
| barba.js | 在您网站的页面之间创建流畅顺滑的过渡。 |
| Locomotive Scroll | 一个简单的滚动库，可检测视口中的元素并实现视差平滑滚动。 |
| Owl carousel | 免费的响应式 jQuery 轮播 |
| Swiperjs | 免费、开源、无需 jQuery 的现代滑块。适用于 Vanilla JS 和所有现代框架，例如 React、Vue、Angular 等。 |
| Splide | 免费的纯 JS 库，用于轮播和滑块 |
| Simple Parallax | 使用 JavaScript 实现视差效果的最简单方法 |
| KUTE.js | KUTE.js 是一款适用于现代浏览器的 JavaScript 动画引擎。 |
| Granim.js | 使用这个小型 JavaScript 库创建流畅且可交互的渐变动画。 |
| Popmotion | 简单的动画库，用于打造赏心悦目的用户界面。 |
| Vivus | Vivus 是一个轻量级的 JavaScript 类（无依赖项），可让您为 SVG 动画，使其具有绘制的效果。 |
| Typed.js | 一个 JavaScript 打字动画库。 |
| Progress Bar.js | 带有动画 SVG 路径的响应式流畅进度条。 |
| Midnight.js | Midnight.js 允许您动态切换固定标题 |
| Tingle.js | Tingle 是一个用纯 JavaScript 编写的简单模式插件 |
| Theatre.js | Theatre.js 是一个带有 GUI 的 JavaScript 动画库。它可以为 DOM、WebGL 和任何其他 JavaScript 变量添加动画效果。 |
| splidejs | Splide 是一个轻量级、灵活且易于使用的滑块/轮播组件，使用 TypeScript 编写。无依赖项，不会出现 Lighthouse 错误。 |
| nice-waves | 精美的动画波浪线 |
| Vanta.js | 只需几行代码即可创建动画网站背景。 |
| Splitting.js | 拆分功能可以创建元素并添加 CSS 变量，从而为文本、网格等元素的动画效果带来无限可能！ |
Javascript 图表库
帮助开发者将数据可视化为图表的库
| 网站 | 描述 |
|---|---|
| ChartJS | 面向设计师和开发者的简单灵活的 JavaScript 图表 |
| FrappeJS | 包含类似 GitHub 的绿色方块网格以及其他可用的图表。 |
| G2Plot | G2Plot 是一个基于图形语法的交互式响应式图表库。 |
| Google Charts | 汲取 Google 经验，创建与 Google 类似的图表。 |
| 数据驱动文档 (D3) | 将复杂海量数据绑定到交互式图表。 |
| ApexCharts.Js | 现代交互式开源图表 |
| Chartist | 简洁的响应式图表 |
| Vizzu | Vizzu - 一个免费的开源 JavaScript 库，用于构建动画图表、数据故事和交互式浏览器。 |
| AntV | Ant Design Charts，一款免费的 JS 动态数据图表库，拥有完善的文档 |
| Nivo | Nivo 提供强大的 React 组件，可轻松构建数据可视化应用，它基于 d3 构建，并具备服务端渲染能力和完全声明式的图表。 |
| Echarts | 一个开源 JavaScript 可视化库，采用声明式语法，可快速构建基于 Web 的可视化效果 |
| VChart | VChart 不仅是一个开箱即用的多端图表库，更是一个生动灵活的数据讲述者。 |
| VTable | VTable 是一款基于 Canvas 开发的高性能多维分析组件。相比传统的 DOM 表格组件，VTable 主要解决大数据量场景下的渲染和交互性能问题。 |
| VStory | VStory 是一款功能丰富的叙事系统，可以使用 VisActor 的 VChart 和 VTable，结合内置组件，创作可视化作品。 |
UI 组件和工具包
并非完全是“框架”，而是使用组件或 UI 工具包创建用户界面的工具
| 网站 | 描述 |
|---|---|
| CSSnippets | 探索大量 HTML、React、CSS 和 Tailwind CSS 代码片段，用于按钮、框阴影、卡片、复选框、下拉菜单等。 |
| Bit | 为 React、Angular、Vue 和 React Native 提供庞大的可复用 UI 组件库。也可用于与其他团队成员共享 UI 组件 |
| UILang | 面向网页设计师的极简 UI 编程语言 |
| Medialoot CSS 组件 | 日历、价格表和其他 UI 组件 |
| Froala 设计块 | 超过 170 个响应式设计块，可用于您的网页或移动应用 |
| Flowbite | Tailwind CSS 组件的开源库 |
| daisyUI | Tailwind CSS 组件 |
| Mui Treasury | 一个基于 Material-UI 的开源项目，提供一系列即用型组件。 |
| Material Design For Bootstrap | 使用 Bootstrap 构建 Material Design 的开源工具包 |
| Photonkit | Electron 的桌面 UI 库 |
| Flat UI | 极简的免费用户界面工具包 |
| Shards | 基于 Bootstrap 的免费现代 UI 工具包 |
| Themesberg | 基于 Bootstrap 和 React 的免费开源网站主题、模板和 UI 工具包 |
| Creative Tim | 所有类型的 UI 库和工具包，包括 React 等 JS 框架 |
| Brumm Shadow Maker | 制作 CSS 阴影的在线工具 |
| AdminLTE | 最佳开源管理仪表盘和控制面板主题 |
| SpinKit | 简单的 CSS 旋转器 |
| Epic Spinners | 集成 Vue.js 的 CSS 旋转器集合。 |
| Loading.io | 在线服务提供商，提供创建简单动画、旋转器、进度条等功能 |
| Moving Letters | 使用 JavaScript 和 anime.js 制作的动画文字 |
| CSS Layout | 纯 CSS 编写的流行网页布局和样式集合 |
| CSS Grid Generator | 一个开源项目，允许用户基于 CSS 网格快速创建动态布局。 |
| HTML 表格生成器 | 创建语义化、响应式且易于访问的 HTML 表格来呈现您的表格数据。设置 CSS 属性，生成代码并复制粘贴到您的项目中。 |
| Codyhouse | 使用 CodyHouse 的前端框架和可访问的 HTML、CSS、JavaScript 组件库快速启动您的 Web 项目 |
| Tailwind Starter Kit | Tailwind Starter Kit 是一款精美的 TailwindCSS 扩展，免费且开源 |
| Tailwindtoolbox | 开源入门模板和组件、插件目录以及实用工具/实用程序，助您快速启动 Tailwind CSS 项目。 |
| tailwindcomponents | 使用 TailwindCSS 的社区组件免费仓库 |
| sweetalert | SweetAlert 让弹出消息更简洁美观。 |
| sweetalert2 | 一个美观、响应迅速、可定制、易于访问的 JavaScript 弹出框替代品 |
| tailblocks | 开源、即用型 Tailwind CSS 组件。 |
| Fast | 一个可与 React、Vue 和 Angular 等现代 Web 框架配合使用的界面系统。 |
| LottieFiles | 支持 JSON、GIF 和 MP4 等多种格式的交互式动画，以及适用于 Web 和移动平台的库和插件。 |
| Kutty | 一组可访问且可复用的预建 Tailwind 组件，常用于 Web 应用程序。 |
| Tailwind 模板 | 免费的 Tailwindcss 模板集合 - 用于快速 UI 开发的 Tailwind 组件。 |
| Stitches | 使用函数式 CSS 的 HTML 模板生成器。 |
| Meraki UI 组件 | 精美的 Tailwindcss 组件，支持 RTL 语言，并基于 Flexbox 和 CSS Grid 实现完全响应式布局。 |
| Daemonites 适用于 Bootstrap 的 Material Design | Daemonite's Material UI 是一款基于 Google Material Design 的跨平台、完全响应式前端界面，使用 Bootstrap 4 开发。 |
| Stitches | CSS-in-JS，运行时几乎为零，支持 SSR、多变量，并提供一流的开发者体验。 |
| Headless UI | 完全无样式、完全可访问的 UI 组件，旨在与 Tailwind CSS 完美集成。 |
| Styled components | 为您的应用程序和网站构建精美的 UI 组件。 |
| Figma Bootstrap 5 UI 套件 | UI 套件包含 300 多个基于 Bootstrap 5 的组件，并采用原子设计系统和自动布局技术构建。 |
| Notiflix | 用于客户端非阻塞通知、弹出框、加载指示器等的 JavaScript 库，可显著提升您的 Web 项目体验 |
| CoreUI | Bootstrap 管理面板模板和 UI 组件库 |
| AgnosticUI | 易于使用的 React 组件原语，也兼容 Vue 3、Svelte 和 Angular |
| SVGR | SVGR 是一款通用工具，可将原始 SVG 转换为可立即使用的 React 组件。可通过在线方式、CLI、Node.js 以及 webpack/rollup/parcel 插件使用…… |
| uiverse | 数百个开源 UI 元素，使用 HTML 和 CSS 制作。任何人都可以贡献代码。包括按钮、复选框、微调框、卡片、输入框等等。 |
| HyperUI | 免费的开源 Tailwind CSS 组件，适用于营销和电商网站以及应用程序 UI。 |
| Flowbite 管理面板 | 使用 Tailwind CSS 和 Flowbite 构建的免费开源管理面板模板，包含 15 个示例页面、图表、小部件和暗黑模式。 |
| Wicked Blocks | 免费的 Tailwind 区块和组件集合 |
| Mamba UI | Mamba UI 是基于 Tailwind CSS 的免费开源 UI 组件和模板集合。 |
| Kitwind | 使用 Tailwind CSS 构建的完全响应式 UI 套件。 |
| DevUI | 免费开源 UI 组件，可最大程度提高生产力。 |
| Tail-Kit | Tail-kit 为您提供超过 250 个基于 Tailwind CSS 3.0 的免费组件和模板。 |
| Float UI | 使用 Tailwind CSS 构建的免费开源 UI 组件和网站模板 |
| Konsta UI | 使用 Tailwind CSS 构建的像素级完美移动 UI 组件 |
| React Native Gifted Chat | 一个聊天 UI 组件，提供即用型聊天界面，包含消息气泡、输入工具栏等功能。 |
| Wind UI | 精心制作、响应迅速、易于访问的 React 和 HTML 组件，可在您的网站或应用上使用。 |
| Sonner | 一个专为 React 设计的 Toast 组件。 |
| Pines | Pines 是一个包含动画、滑块、工具提示、折叠面板、模态框等功能的库！它是一组 UI 元素，可以复制粘贴到任何 Alpine 和 Tailwind 项目中。 |
| Kuma UI | 借助 Kuma UI 的无头、零运行时 UI 组件，轻松构建性能卓越的网站，同时享受最佳的开发者体验。向 CSS-in-JS 的未来问好。 |
| Shadcnui Blocks | 轻松预览 Shadcn UI 组件和代码片段。 |
| Shadcn studio | 预览不同组件和布局中的主题更改。 |
React UI 库
React JavaScript 框架的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Material UI | 基于 Material Design 的 React 组件，可实现更快、更轻松的 Web 开发 |
| Chakra UI | 快速构建可访问的 React 应用和网站。Openchakra |
| React Bootstrap | 为 React 重新构建的 Bootstrap。可直接在 JavaScript 中添加 Bootstrap 组件 |
| Semi Design | 一个现代、全面、灵活的设计系统，为您提供构建合理的 Web 应用和 SaaS 产品所需的所有模块化模块。 |
| Mantine | React 组件和钩子库，支持原生深色主题，专注于可用性、可访问性和开发者体验。 |
| HeroUI - 以前的 NextUI | 美观、快速、现代的 React UI 库，无论您的设计经验如何，都能创建精美的网站。 |
| Arco Design | 基于 Arco Design 系统的全面 React UI 组件库。 |
| ui-playbook | 文档齐全的 UI 组件集合 |
| ReactStrap | 另一个用于 React 的 Bootstrap UI 库 |
| React Admin | 用于构建管理应用程序的前端框架。支持开箱即用的 API |
| BlueprintJS | 基于 React 的 Web UI 工具包 |
| React Semantic UI | 基于 Semantic UI 框架的 UI 组件 |
| Shards React | React UI 工具包，采用现代设计系统，包含数十个自定义组件 |
| React Virtualized | 数据 UI 集。包含表格、列表、排序等。 |
| React Toolbox | 适用于 React 的 Material Design UI 库 |
| Elastic UI | 分发用于构建 Web 布局的 UI React 组件和静态资源 |
| React Desktop | 使用 React 实现桌面样式的组件。包含基于 MacOS 和 Windows 的组件 |
| Theme UI | 基于基于约束的设计原则构建一致且可主题化的 React 应用 |
| Onsen React | 分发用于混合移动应用的 React 和 Onsen UI 组件 |
| Evergreen | React 设计系统 |
| Rebass | 使用样式系统构建的 React 原生 UI 组件 |
| Grommet | 移动优先 UI 组件库 |
| Landing Page Template | 开源 React Landing Page 模板 |
| Elemental UI | 适用于 React.js 网站和应用的 UI 工具包 |
| Ant Design | 开源 React UI 设计库。 |
| Bumbag | Bumbag 是一款友好的 React UI 工具包，适用于 MVP 或大型应用程序。 |
| PRIMEREACT | 灵活易用的 React UI 组件终极合集 |
| Primer Components | Primer Components 是实现了 GitHub Primer 设计系统的 React 组件 |
| Orbit | 适用于旅游项目的设计系统和 React UI 组件。 |
| Base Web | Base Web 提供一套强大的开箱即用组件 |
| Backpack UI | Backpack 是我们用来构建前端应用的《孤独星球》工具集。 |
| Reaviz | 基于 D3 的 React 数据可视化库 |
| React Suite | 一套 React 组件，提供合理的 UI 设计和友好的开发体验。 |
| React Spring | 基于 Spring-physics 的 React 应用程序动画库。 |
| Recharts | 基于 React 组件构建的可组合图表库。 |
| Vercel UI | 现代简约的 React UI 库 |
| Framer Motion | 一个用于支持生产级动画的 React 库。 |
| React Spectrum | Adobe 设计系统 Spectrum 的 React 实现。 |
| @tsparticles/react | 用于创建粒子的轻量级 React 组件 |
| particles-bg | 一个 React 粒子动画背景组件 |
| Treact | 使用 TailwindCSS 作为前端框架开发的免费现代 React 模板和 UI 组件库 |
| OAH-Admin | 一款基于 Gatsby 的免费 React 管理仪表板模板，包含 oah-ui 组件和元素包。 |
| Carolina Admin Dashboard | 一款免费的 React 管理仪表板模板，由 Material-UI 组件框架提供支持，并遵循 Google 的 Material Design 规范，具有简洁清新的设计。 |
| Tabler | Tabler 是一款免费的 React 管理仪表板模板，适用于任何类型的后端 Web 应用程序。 |
| Sha-el-design | React 组件，可更轻松地进行自定义并简化开发流程。 |
| React-WeUI | React-WeUI 源于我们对 React 和微信 WeUI 设计的热爱。 |
| Supabase UI | 受 Tailwind 和 AntDesign 启发的开源 UI 组件库。 |
| Ring UI | JetBrains Web UI 组件集合。 |
| React95 | 为您的 React 应用刷新 Windows 95 风格的 UI 组件。 |
| Reakit | Reakit 是一个底层组件库，用于使用 React 构建可访问的高级 UI 库、设计系统和应用程序。 |
| Zent | 用 React 编写的基本 UI 组件集合。 |
| Gestalt | 一组支持 Pinterest 设计语言的 React UI 组件。 |
| xstyled | 一个为 React 构建的 CSS-in-JS 框架，带有基于 props 的实用程序，例如 display、fontSize 或 rotate。 |
| @use-gesture | 用于在 React 中与组件绑定的鼠标/触摸手势的实用工具。 |
| React Rainbow | React Rainbow 是一个组件集合，可帮助您快速构建应用程序。 |
| React 使用平滑滚动 | 使用 React Provider 组件添加平滑滚动效果 |
| Choc UI | Choc UI 是一组易于访问且可复用的组件，常用于 Web 应用程序中。 |
| Elementz | 一个用于轻松快速构建现代应用程序的 React 组件库。 |
| Base UI | 用于构建易于访问的 Web 应用程序和设计系统的无样式 UI 组件。由 Radix、Floating UI 和 Material UI 的创建者开发。 |
| Radix UI | 用于在 React 中构建高质量设计系统和 Web 应用程序的无样式、易于访问的组件 |
| Materio MUI React NextJS 管理模板 | 专为开发者打造的最强大、最全面的开源 MUI React NextJS 管理仪表板模板。 |
| Chakra 模板 | 不断增长的手工制作、响应迅速的 Chakra UI 模板集合，可直接用于您的 React 项目。 |
| React 可调整大小面板 | 用于可调整大小面板组/布局的 React 组件。 |
| Carbon React | 适用于网站和 UI 的丰富的 React 组件库。基于 IBM 的 Carbon 设计系统 |
| React Aria | React Hooks 库，为您的设计系统提供可访问的 UI 原语。 |
| shadcn/ui | 使用 Radix UI 和 Tailwind CSS 构建的精美设计组件。 |
| Tremor | 使用 React 组件构建图表和仪表板 |
| Aceternity UI | 复制粘贴最流行的组件并将它们用于您的网站，而无需担心样式和动画。 |
| Magic UI | 使用 React、Typescript、Tailwind CSS 和 Framer Motion 构建的免费开源动画组件。 |
| Code UI | 使用 HTML、CSS、JS 和 React、Typescript、Tailwind CSS 和 Framer Motion 构建的精美设计移动响应组件。 100% 开源，可定制。 |
| Edil Ozi | 面向开发者的组件库。您可以复制并粘贴开源组件到您的应用中。 |
| Shadcn Templates | 免费收集 Shadcn UI 模板、组件、块、样板文件等。 |
Vue UI 库
Vue JavaScript 框架的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Vuetify | Material Design 组件框架 |
| Bootstrap Vue | 将 Bootstrap 组件与 Vue 结合使用 |
| Buefy | 基于 Bulma 的轻量级 UI 组件 |
| Semantic UI Vue | Semantic UI Vue 是 Semantic UI 的 Vue 集成 |
| Arco Design Vue | 基于 Arco Design 系统的全面 Vue UI 组件库。 |
| VEUI | VEUI 是一个基于 Vue.js 的企业级 UI 组件库。 |
| Grace | 适用于 Vue 应用的设计系统。 |
| Quasar | 高性能 Material Design 组件套件，包含适用于 SPA、SSR、PWA、移动端（Cordova 和 Capacitor）、桌面端（Electron）和浏览器扩展的构建器。 |
| Element | 适用于 Vue 的桌面 UI 库 |
| Fish UI | 适用于 Web 的 Vue UI 工具包 |
| Keen UI | 受 Google Material Design 启发，API 简洁的 VueUI 库 |
| Materio Vuetify Vuejs 管理模板 | 开源且易于使用的 Vuetify Vuejs 管理模板，拥有优雅的设计和独特的布局 |
| Onsen Vue | 使用 Vue 和 Onsen UI 为混合移动应用分发组件 |
| Vuejsexamples | 实用的 Vuejs UI 组件集合 |
| Inkline | Inkline 是一个适用于 Vue.js 的现代 UI/UX 框架，旨在创建完美的响应式 Web 应用程序 |
| Vuesax | 独特且可复用的 UI 组件 |
| Antdv | 基于 Ant Design 的 Vue UI 库 |
| Shards Vue | 一款高质量且免费的 Vue UI 套件，采用现代设计系统，包含数十个自定义组件 |
| Prime Vue | 功能强大且易于使用、功能多样、性能卓越的 Vue UI 组件库，可帮助您构建令人惊叹的用户界面。 |
| Chakra UI Vue | Chakra UI 是一个简单易用的模块化组件库，可为您提供快速构建 Vue 应用程序的构建块。 |
| View UI | 数十个实用美观的 Vue 组件，适合各种技能水平的人士，并配有详尽的文档。 |
| @tsparticles/vue2 | 用于创建粒子的轻量级 Vue 2.x 组件 |
| @tsparticles/vue3 | 用于创建粒子的轻量级 Vue 3.x 组件 |
| TC Components | 一个高质量的即用型组件库，可帮助您加快开发工作流程。 |
| Vant | 基于 Vue 构建的轻量级移动 UI 组件。 |
| Equal UI | 基于 TypeScript 的开源 Vue 3 组件系统，适用于您的下一个项目 |
| Mint UI | Vue.js 的移动 UI 元素 |
| Cube UI | Vue.js 实现的出色的移动 UI 库 |
| Muse UI | 基于 Vue 2.0 优雅的 Material Design UI 组件库 |
| AT-UI | AT-UI 是一个模块化的前端 UI 框架，用于基于 Vue.js 开发快速强大的 Web 界面。 |
| Vuikit | 一个基于前端框架 UIkit 的一致且响应迅速的 Vue UI 库。 |
| Wave UI | 一个只有光明面的 Vue.js UI 框架。 |
| VueTailwind | 一组 Lightview 和完全可定制的 Vue 组件，针对 TailwindCSS 进行了优化。 |
| Oruga | Oruga 是一个轻量级的 Vue.js UI 组件库，无需依赖 CSS 框架。 |
| BalmUI | BalmUI 是一个模块化、可定制的 Vue.js Material Design UI 库。 |
| Weex UI | 一个基于 Weex 的交互丰富、轻量级、高性能的 UI 库。 |
| Varlet | Varlet 是一个基于 Vue3 开发的 Material Design 移动组件库，由社区的合作伙伴开发和维护。 |
| Naive UI | 一个 Vue 3 组件库。相当完善。可自定义主题。使用 TypeScript。速度也不错。 |
| Vuestic | 适用于 Vue 3 的免费开源 UI 库 🤘。 |
| Vue Final Modal | Vue Final Modal 是一个基于 Vue.js 的轻量级、无渲染、移动友好且功能丰富的模态框组件。 |
| Vuetensils | Vuetensils 是一个基于 Vue 2.x 的轻量级组件库，它集成了一些常用的 UI 功能，但只保留了极简的样式，避免了代码臃肿。您可以专注于品牌推广，无需担心可访问性问题。 |
| NuxtLabs UI | 适用于 Nuxt 的完全样式化和可自定义的组件。 |
| shadcn-vue | shadcn-ui 的 Vue 移植版。 |
Angular UI 库
Angular JavaScript 框架的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Material Angular | 基于 Material Design 的 Angular UI 库 |
| NG Bootstrap | 基于 Bootstrap 框架的 Angular UI 库 |
| PrimeNG | 强大的 Angular UI 组件库 |
| Onsen Angular | 适用于 Angular 和 Onsen UI 的混合移动和 PWA UI 库 |
| NG Lightning | 用于 Lightning 设计系统的原生 Angular 组件和指令 |
| NG Semantic | 基于 Semantic UI 的 Angular UI 库 |
| Nebular | 可定制的 Angular UI Kit、身份验证和安全 |
| Alyle UI | 适用于 Angular 的极简组件集 |
| NGX Bootstrap | 另一个基于 Bootstrap 框架的 Angular UI 库 |
| NG Zorro | 基于 Ant Design 的 Angular UI 库 |
| 数据表分页 | 用于分页的 npm 库 |
| 多选下拉菜单 | 用于表单中的多选下拉菜单 |
| NG Particles | 用于创建粒子的轻量级 Angular 组件 |
| Covalent UI | 专注于解决常见企业需求的 Angular UI 平台 |
| Clarity | 由 VMware 团队开发的基于 CSS 的 Angular UI 框架 |
| Taiga UI | Taiga UI 是一款完全可摇树优化的 Angular UI 套件，包含多个基础库和一些插件。 |
| ngx-admin | 基于 Angular 10+ 和 Nebular 的管理模板 |
| spartan | 支持 Angular 全栈开发的尖端工具。 |
Svelte UI 库
Svelte JavaScript 编译器的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Svelte Material UI | 基于 Material Design 的 Svelte UI 库 |
| SvelteStrap | 基于 Bootstrap 框架的 Svelte UI 库 |
| Svelte Flat UI | 基于扁平化设计的 Svelte UI 库 |
| 景点 | 适用于 Svelte 的超酷 UI 套件 |
| Svelteit | 适用于 Svelte 和 Sapper 项目的极简 UI/UX 组件库 |
| Carbon Components Svelte | 一个实现了 IBM 开源设计系统 Carbon 设计系统的组件库。 |
| Radix Svelte | 这是 Radix UI 为 Svelte 移植的版本。 |
| shadcn-svelte | shadcn-svelte 是由社区主导的非官方 Svelte 移植版本。 |
| Skeleton | Skeleton 是一个基于 Svelte + Tailwind 构建的开源 UI 工具包，可让您使用 Svelte + Tailwind CSS 创建响应式 Web 界面。 |
| Aceternity UI Svelte | 免费的超棒动画组件。 |
| Svelte UX | 收集 Svelte 组件、操作、存储和实用程序，用于构建高度交互的应用程序。 |
| Flowbite-Svelte | Flowbite-svelte 是一个基于 Flowbite 设计系统、使用 Svelte 组件和 Tailwind CSS 实用程序类构建的开源 UI 组件库 |
| bits-ui | Svelte 的无头组件 |
| melt-ui | 一组适用于 Svelte 的无头、可访问的组件构建器 |
React Native UI 库
React Native 框架的 UI 和组件库
| 网站 | 描述 |
|---|---|
| Magnus UI | Magnus UI 是一款强大的 UI 框架，可帮助您在 React Native 中轻松构建一致的用户界面 |
| React Native UI 库 | React Native UI (RNUI) 是 Wix 为 React Native 提供的 UI 工具集和组件库 |
| React Native 论文 | React Native Paper 是一个高质量、符合标准的 Material Design 库，涵盖所有主要用例。 |
| UI Kitten | UI Kitten 是一个用于创建令人惊叹的跨平台移动应用程序的 React Native 框架。它基于设计系统，可将您的产品从 MVP 提升到企业级。 |
| React Native Elements | 跨平台 React Native UI 工具包，提供用于在 React Native 中创建应用程序的一体化 UI 工具包。 |
| NativeBase | React Native 和 Vue Native 必备的跨平台 UI 组件。 |
| Shoutem UI | Shoutem UI 工具包使您能够轻松构建具有专业外观的 React Native 应用程序。 |
| tailwind-rn | 在 React Native 项目中使用 Tailwind CSS。 |
| Ant Design Mobile RN | 一个基于 Ant Design 的可配置移动 UI 组件库，基于 React Native。 |
| SnackUI | SnackUI 是一个适用于 React Native + react-native-web 的 UI 套件，它通过优化编译器实现了更快的运行速度。 |
| Moti | Moti 是 React Native 的通用动画包 |
| Tamagui | 针对原生和 Web 进行优化的通用 React 设计系统。 |
设计系统与风格指南
设计系统、风格指南、工具包、文档。其中一些是顶级公司/网站的设计指南
| 网站 | 描述 |
|---|---|
| Material Design | Google 的 Material Design |
| Ant Design | 企业级产品的设计系统 |
| Apple 设计资源 | 使用 Apple 设计和 UI 的指南和模板 |
| Primer | 使用 GitHub 的设计系统进行设计、构建和创作 |
| Arco.design | 由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统。 |
| Alta UI | Oracle 设计系统及工具包 |
| Pulse | 设计系统、指南及 React 组件库 |
| Bolt | 基于 Twig 和 Web 组件的强大 UI 组件 |
| Clarity 设计系统 | UX 指南、HTML/CSS 框架及 Angular 组件 |
| AtlasKit | Atlassian 官方 UI 库，基于 Atlassian 设计指南构建 |
| 奥迪设计资源 | 奥迪 UI 设计系统和工具包 |
| Carbon 设计系统 | Carbon 是 IBM 的开源产品和体验设计系统 |
| Yelp 风格指南 | Yelp 风格指南、组件和工具包 |
| Comet | 可扩展的视觉语言、组件和设计资源设计系统 |
| ETrade 设计系统 | 将金融与简洁易用融为一体的指南和工具包 |
| Fundamental 库 | 开源和社区驱动的项目，旨在打造一致的用户界面 |
| Infor 设计 | 为 Infor 产品打造有意义体验的指南和资源 |
| Lexicon | 用于打造精美 UI 的体验语言 |
| Marvel 风格指南 | 设计原则和组件集 |
| Microsoft Fluent UI | Microsoft 的 UX 框架集合 |
| Pluralsight 设计系统 | 使用 Pluralsight 进行设计的设计指南和组件 |
| Polaris | 为所有 Shopify 商家打造卓越体验的设计系统 |
| Mozilla 协议 | Protocol 是一套适用于 Mozilla 和 Firefox 网站的设计系统 |
| SendGrid 样式指南 | 用于在 SendGrid 开发一致 UI/UX 的 UI 库 |
| VTEX 样式指南 | VTEX 中与产品设计相关的可重用模式、组件和资源 |
| Rizzo | 包含 UI 组件、JS 组件、小部件等的样式指南 |
| Atomize | 帮助开发者与设计师协作并轻松构建一致用户界面的 UI 框架 |
| StyleGuides.io | 包含 500 多个样式指南的目录 |
| Done Design System | 开源设计系统、指南和组件 |
| 斯柯达品牌系统 | 斯柯达品牌应用程序开发设计指南 |
| Spectrum | Adobe 的设计系统，提供组件和工具，帮助产品团队更高效地工作，并使 Adobe 的应用程序更具凝聚力。 |
| Asphalt | Gojek 的设计语言系统。一系列指南和组件，旨在打造卓越的用户体验。 |
| 用户体验法则 | 设计师在构建用户界面时必须考虑的关键准则集合。 |
| 清单设计 | 清单设计是一个精心挑选的清单列表，涵盖了从网站页面到 UI 组件，再到品牌资产。 |
| 人性化设计 | 一个通过关注用户福祉的模式，为设计符合伦理道德的人性化数字产品提供指导的资源。 |
| Pr1mer 指南 | 一套受人机界面启发的开源通用指南。由 Pr1mer Tech 创建和维护 |
| Patterfly | PatternFly 是 Red Hat, Inc. 推出的一款开源设计系统。 |
| 模式 | 一份关于改进设计模式和组件模式的资源，用于使用原生 JavaScript 和 React 构建强大的 Web 应用。 |
| 开发者设计原则 | 一份关于改进开发者设计原则和指南的资源。 |
在线设计工具
各种在线设计工具，从照片编辑器到线框图等等
| 网站 | 描述 |
|---|---|
| Figma | 在线图形设计工具（免费和付费选项） |
| Penpot | Penpot 是第一个面向跨领域团队的开源设计和原型设计平台。Penpot 不依赖于操作系统，基于 Web，并使用开放 Web 标准 (SVG)。面向所有人，由社区赋能 开源且可自行托管 |
| Vectr | 免费矢量图形软件 |
| Taler | 使用数百个可自定义模板，在几分钟内创建社交媒体横幅设计 |
| Canva | 创建精美设计（免费和付费） |
| Get Waves | 免费的 SVG 波形生成器，可为网页设计制作独特的 SVG 波形 |
| Clippy | 简单的 CSS 剪辑路径制作器 |
| Fancy Border Radius | 在 CSS 中指定 border-radius 的八个值（border-radius 生成器） |
| Wireframe.cc | 线框图工具（免费和付费） |
| Fotor | 照片编辑器和设计制作器 |
| Pixlr | 在线照片编辑器 |
| Animoto 视频制作器 | 在线制作视频 |
| RemoveBG | 删除图像背景 |
| 照片创建器 | 创建自己的照片，无需搜索图库 |
| Visme | 创建演示文稿、信息图表等 |
| Infogram | 创建信息图 |
| ChartGo | 在线创建图表和图形 |
| Cartoon Photo | 将照片转换为卡通 |
| Whimsical | 线框图、图表等（4 个免费） |
| Whiteboard | 在线绘图工具 |
| Octopus | 网站地图生成器 |
| Onlineboard | 用于头脑风暴的实时共享白板 |
| CTA Button Maker | 创建行动号召按钮 |
| Blobmaker | Blobmaker 是一款免费的生成式设计工具，可帮助您快速创建随机、独特且外观自然的 SVG 形状。 |
| Personas | 一款适合现代生活的趣味头像生成器 |
| Photopea | 在线 Photoshop 编辑器 |
| Excalidraw | 用于绘制手绘图表的虚拟白板 |
| Diagrams | 图表软件和流程图制作器 |
| Mermaid | 渲染受 Markdown 启发的文本定义，以动态创建和修改图表（例如流程图、序列图、甘特图或用户旅程图）。(自由/开源软件) |
| MapInSeconds | 使用地图可视化数据的简单方法 |
| Grid Malven | 创建 CSS 网格时参考的 CSS 网格速查表 |
| Flex Malven | 使用 Flexbox 时参考的 Flexbox 网格速查表 |
| Smart Upscaler | 将图像分辨率放大 2-4 倍（4 个免费） |
| GetAvataaars | 由 Fang-Pen Lin 使用 Pablo Stanley 草图库开发的有趣且丰富多彩的免费头像网页生成器工具 |
| Big Heads | 使用 Robert Broersma 开发的 Big Heads 轻松为您的项目生成头像。 |
| Webflow | 打破代码壁垒，更快构建更优质的商业网站。无需编码。 |
| Trace | 立即去除照片背景 |
| Neumorphism.io | 生成 Soft-UI CSS 阴影代码 |
| DB Designer | 免费在线设计数据库 |
| Ui Bakery | 可视化创建功能齐全的 Web 应用 |
| Faux | 将真实代码转换为仿真代码 |
| Rive | 实时交互式设计工具，可让您设计、制作动画，并立即将您的资源集成到任何平台。 |
| Unscreen | 100% 自动免费去除视频背景 |
| Kodeshot | 将您的源代码转换为精美的图片，用于您的文章、推文、消息、帖子…… |
| Wix | 创建您引以为豪的网站 |
| GTmetrix | 网站速度和性能优化 |
| Yellow Lab Tools | 在线测试，帮助加速繁重的网页 |
| Framer | 团队原型设计工具 |
| Draw.io | 免费在线图表编辑工具 |
| UXWing SVG 编辑器 | 在线创建和编辑 SVG |
| CSS 箭头 | 创建并导出自定义框的 CSS 代码，该框带有从侧面延伸出的箭头。非常适合用于工具提示、弹出窗口等。 |
| Lucidchart | 图表和可视化工具，可用于创建数据库、流程图、面板、楼层地图等。免费套餐包含 3 个多页文档 |
| Carbon | 通过输入或拖放文件，创建并分享源代码的精美图像。 |
| PixCleaner | 精准便捷的背景去除工具 |
| Glass UI | 基于玻璃态设计原则的现代 CSS UI 库，可帮助您快速设计和构建精美的网站和应用程序。 |
| Glassmorphism | 一款出色的在线工具，可在 CSS 代码片段中快速生成玻璃态 UI。 |
| TableConvert | 在线表格转换是一款基于 Web 的工具，可将 Excel、URL、HTML、Markdown 表和 CSV 转换为 Markdown 表、CSV/TSV、JSON、XML、YAML，并可插入 SQL、HTML、Excel 和 LaTeX 表。 |
| Doodle Ipsum | 插画中的 lorem ipsum。只需自定义你的涂鸦，获取代码，然后将其用于你的网页原型、落地页或无代码工具即可。 |
| Figen | 文章封面和背景生成器工具 |
| Windframe | 使用 Tailwind CSS 快速制作原型并构建精美网站的工具（免费版和付费版） |
| Slickr | 用于设计博客封面图片的工具。 |
| 阴影调色板生成器 | 创建一组华丽逼真的 CSS 阴影。 |
| Ray.so | 用于创建精美代码图片的在线工具。 |
| Codepng | 将您的源代码转换为可共享的精美图片。 |
| CSS 网格生成器 | 用于创建 CSS 网格布局的工具 |
| JSONT | 简单而强大的在线 JSON 格式化工具 |
| Jitter | 用于创建动态图形/设计的在线工具 |
| Visily | 帮助非设计师设计网页和移动应用模型的工具 |
| okso.app | 具有嵌套“绘图内绘图”结构的绘图应用 |
| Calc 生成器 | 用于轻松创建精确 Calc() CSS 函数的工具 |
| Scrollbar.app | 用于创建自定义 CSS 滚动条的简单在线编辑器 |
| GrapesJS | 开源、多功能的 Web 构建框架，它结合了多种工具和功能，旨在帮助您（或您的应用程序用户）在无需任何编程知识的情况下构建 HTML 模板。 |
可下载的设计软件
免费 UI、照片、3D 建模等软件。Photoshop 等付费软件的替代品
| 网站 | 描述 |
|---|---|
| Gimp | 类似于 Photoshop 的免费开源图像编辑器 |
| Gravit Designer | 功能齐全的免费矢量图形设计应用，适用于所有平台 |
| Blender | 开源、免费动画、3D 建模等。 |
| Raw Therapee | 跨平台原始图像处理程序 |
| Be Funky | 在线设计程序 |
| Krita | 专为数字艺术家设计的素描和绘画程序 |
| Pencil Project | GUI 原型设计软件 |
| Inkscape | 强大的免费设计工具 |
| Adobe XD | Adobe 的免费设计工具 |
| Shapes.so | 可在项目中用作代码的图标 |
| Lunacy | Windows 版 Sketch |
| InVision Studio | InVision 的免费屏幕设计工具 |
| Darktable | 免费开源摄影工作流程应用程序和 Raw 编辑器 |
| Inpixio 照片编辑器 | 免费照片编辑器：仅适用于 Windows |
| Colorpicker | 开源色彩软件：轻松检索、操作和存储您的色彩！ |
| Google Web Designer | 创建引人入胜、基于 HTML5 的交互式设计和动态图形，可在任何设备上运行。 |
| Origami Studio | Facebook 创建的交互式界面设计工具：仅适用于 Mac |
设计灵感
这里有一些网站可以为你提供设计和 UI 方面的灵感
| 网站 | 描述 |
|---|---|
| Websitevice | 精选的专业网站设计图库，为寻求创意和最佳实践的开发者和设计师提供灵感。 |
| CSS Zen Garden | 展示 CSS 的强大功能，超过 200 种对同一 HTML 文件的纯 CSS 诠释。 |
| Behance | 不同创作者推荐的设计项目 |
| Dribbble | 不同创作者的设计项目 |
| Landingfolio | Landingfolio 提供网络上最佳的落地页灵感、模板、资源和示例。 |
| Foxyapps | 来自最佳移动应用设计的设计灵感 |
| Httpster | 展示来自世界各地人们制作的网站 |
| Land Book | 展示大量网站以帮助寻找灵感 |
| Frontend Mentor | 使用 HTML、CSS 和 Javascript 进行真实世界的 UI 挑战 |
| Awwwards | 一个对全球最佳 UI 网站进行评级和收集的网站 |
| Codrops | 一个收集最佳 UI 创意和模式并制作教程的网站 |
| SaaS Landing Page | 发现由顶级 SaaS 公司创建的最佳落地页示例 |
| Saaspages.xyz | 精选最佳落地页合集，专注于文案和设计。 |
| Screenlane | Screenlane 是一个网站和新闻通讯，提供最新的网页和移动设计灵感。 |
| lapa ninja | 最佳落地页灵感 |
| Freefrontend | 使用 css、html 和 javascript 的免费前端设计。最新作品，部分设计 |
| Webframe | 发现精美的 Web 应用设计并从中汲取灵感 |
| Collect UI | 从每日 UI 存档及其他资源中收集每日灵感。精心挑选，每日更新。 |
| Graphic Burger | 该网站提供免费和付费图标、模型、UI 套件、文本效果和背景。该网站的资源混合了免费和付费资源。图标格式包括 PNG、SVG、EPS 和 Sketch。有些资源容易混淆，因为免费资源中间夹杂着赞助内容。 |
| Really Good Emails | 该网站为用户提供大量公司电子邮件，涵盖客服到市场营销等各个领域。 |
| 免费设计资源 | 该网站提供字体、模型、模板图形和 UI 套件。 |
| Site Inspire | siteInspire 是顶级网页和交互设计的展示平台。 |
| Web Design Inspiration | 一个提供网页设计灵感的网站，每日更新。 |
| NavNav | 响应式导航示例 |
| Calltoidea | 收集各种网页组件，激发设计灵感。 |
| Mulzli Search | 设计灵感搜索引擎 |
| DeviantArt | 获取 3.7 亿件艺术作品，激发设计灵感。 |
| Design your way | 收集各种网页和移动设计 |
| SiteSee | 精选精美现代网站图库。 |
| UI Garage | 每日精选 UI 灵感与图案。 |
| ecomm.design | 电商网站设计图库与科技灵感。 |
| Design Nominees | 评选最佳网站、应用和游戏的平台。 |
| Design Vault | 真实数字产品截图和图案库 |
| CSS 按钮 | 84 个精美 CSS 按钮示例。 |
| CSS box-shadow | 91 个精美的 CSS box-shadow 示例。 |
| Super Designer | 赋予您超能力的设计工具。 |
| Landings | 根据您的偏好，找到最适合您设计灵感的落地页。 |
| Page Collective | Page Collective 是设计灵感网站网络的一部分。 |
| Curated | 利用来自网络的超凡网页设计灵感，释放您的创造力。 |
| Maxibestofone | 每日网站和字体灵感推送。 |
| Bento Grids | Bento Grids 是一个精选的基于磁贴的布局集合，这些布局因 Apple 的摘要幻灯片而广受欢迎。 |
| Landing Gallery | 汇聚最佳落地页设计灵感。 |
| a-fresh.website | 精心挑选的网站和组件灵感库。 |
| bestwebdesigntools | 发现网络上最新的设计工具、代理机构和落地页模板 |
| App Motion | 探索精选的最佳应用动效设计 |
| Uiland Design | 来自全球顶级公司的最佳移动 UI 灵感之家 |
图像压缩
可压缩大图像的网站
| 网站 | 描述 |
|---|---|
| TinyPNG | 智能 PNG 和 JPEG 压缩 |
| Optimizilla | 在线 JPEG 和 PNG 优化/压缩器，提供设置和压缩包下载 |
| Compressor.io | JPEG、PNG、GIF、SVG 压缩 |
| Squoosh.app | 来自 Google Chrome 实验室的图像压缩 |
| BulkResizePhotos | 批量图像调整大小、压缩和转换，可在浏览器内完成所有任务（可离线运行） |
| iLoveIMG | 速度最快的免费网页应用，轻松修改图像 |
| SvgOMG | 在线 SVG 优化器，拥有丰富的设置，可直接在其中剪切和粘贴 SVG 代码。 |
| CompressJPEG | 压缩大小甚至大于 5MB 的 JPEG 图像 |
| CompressNow | JPEG、GIF、PNG 压缩 |
| Promo Image Resizer | 免费图像和照片调整器 |
| 图像优化器 | 免费且带有质量选项的图像优化器 |
| SVGminify | 此工具可删除多余信息，从而减小 SVG 文件的大小 |
| JPEG 优化器 | 免费在线工具，用于调整和压缩数码照片和图像以便在网络上显示 |
| Resizing.app | 在线调整图像大小 |
| EZGif | 动画 GIF 制作器和图像编辑器，包含图像优化功能并支持 WebP 转换 |
| OnlinePngtools | 调整 png 大小而不会丢失透明背景。 |
| Verexif | 删除图像中的元标记以减小图像大小并提高隐私安全性 |
| Vecta Nano | 使用无损压缩技术，通过删除不必要的数据来压缩低效的 SVG 代码。（免费和付费） |
| Watermarkly | JPEG 图像的私有客户端压缩。该应用不会将图像发送到服务器进行处理。 |
| Jpeg.io | 将任何主流图像格式转换为高度优化的 JPEG 格式 |
| CompressImage.io | 压缩 JPG 和 PNG 图像。无限制。批量转换。转换为 WebP。离线工作 |
| JPEG Compressor | 免费图像压缩工具，支持 JPEG、PNG、SVG、JPG、WEBP 和 GIF。 |
Chrome 扩展程序
面向设计师和网页开发者的实用 Chrome 扩展程序。
| 网站 | 描述 |
|---|---|
| WhatFont | 识别网页字体的最简单方法。 |
| WhatRuns | 了解网站的运行机制。框架、分析工具、WordPress 插件、字体 - 应有尽有。 |
| Web 开发者 | 添加工具栏按钮，其中包含各种 Web 开发者工具。 |
| 超棒的屏幕截图和屏幕录像机 | 全页面屏幕截图和屏幕录像机 - 二合一。即时分享截屏视频 |
| daily.dev - 为忙碌的开发者提供的新闻 | 轻松获取编程新闻。只需打开新标签页，即可轻松设置。忙碌开发者必备工具！ |
| JSONView | 验证并查看 JSON 文档。 |
| JSON Lite | 用于查看 JSON 文件的浏览器扩展程序。 |
| Window Resizer | 调整浏览器窗口大小以模拟各种屏幕分辨率。 |
| Responsive Viewer | 一次显示多个屏幕，响应式设计测试器 |
| BrowserStack | 在任何桌面或移动浏览器上立即测试您的网页。 |
| VisBug | 使用 JavaScript 构建的开源网页设计调试工具 |
| Kontrast - WCAG 对比度检查器 | 在浏览器中快速实时检查和调整对比度，以满足 WCAG 2.1 要求 |
| PerfectPixel | 在已开发的 HTML 顶部添加半透明图像叠加层，以便轻松执行像素完美比较，有助于复制 UI 设计。 |
| Pesticide | 将 Pesticide CSS 插入当前页面，勾勒出每个 HTML 元素的轮廓，以便更好地查看其在页面上的位置，有助于构建布局。 |
| Site Palette | 设计师和前端开发人员为任何网站获取颜色的必备工具。 |
| ColorZilla | 高级吸管、颜色选择器、渐变生成器和其他丰富多彩的功能 |
| JavaScript 和 CSS 代码美化器 | 打开 .css/.js/.json 文件时美化 CSS、JavaScript 和 JSON 代码 |
| Imageye - 图片下载器 | 查找并下载网页上的所有图片。使用 Imageye，您可以查找、浏览和下载网页上的所有图片。 |
| GoFullPage - 全页面截屏 | 完整可靠地截取当前页面的屏幕截图 - 无需请求任何额外权限！ |
| Stylebot | 立即更改网页外观。 |
| ColorPick 吸管 | 一款可缩放的吸管和颜色选择器工具，可让您从网页等内容中选择颜色值。 |
| React 开发者工具 | 将 React 调试工具添加到 Chrome 开发者工具中。它允许您在 Chrome 开发者工具中检查 React 组件层次结构。 |
| Wappalyzer | Wappalyzer 是一款技术分析器，可以向您展示网站构建所使用的技术。 |
| Fake Filler | 伪填充器是一种表单填充器，它使用虚假/虚拟数据填充页面上的所有输入。 |
| Page Ruler Redux | 一款网页开发者\设计师专用的标尺，可获得完美的像素尺寸和定位，以测量任何网页上的元素。 |
| 网页编辑器 | 网页编辑器是一种工具，可为您提供一种增强的方式来检查任何网站元素、更改其属性、插入内容、设计和以您想要的方式进行可视化。 |
| CSSViewer | 一款简单的 CSS 属性查看器。 |
| Fonts Ninja | 识别任何网站的字体、收藏、试用并购买。 |
| Lighthouse | 一款开源自动化工具，用于提升 Web 应用的性能、质量和正确性。 |
| Debug CSS | 为页面上的所有元素添加轮廓，以显示导致更改所需布局的罪魁祸首元素。有助于调试页面的 CSS |
| UX 检查 | 通过启发式评估识别可用性问题。 |
| Angular 开发者工具 | Angular DevTools 可让您了解应用程序的结构并预览指令和组件实例的状态。 |
| Redux 开发者工具 | Redux DevTools 为您的 Redux 开发工作流程提供强大的支持。除了 Redux 之外，它还可以与任何其他支持状态处理的架构一起使用。 |
| Hackertab.dev | Hackertab 帮助开发者在一个标签页中随时掌握最新的开发资讯和资源。 |
| JSON Formatter | 格式化 JSON 内容并为其添加颜色，以提高可读性。它还可以折叠和展开嵌套结构。 |
| SEO Minion | 一款 SEO 工具，包含页面 SEO 分析、失效链接检查、SERP 预览等功能。 |
Firefox 扩展程序
面向设计师和 Web 开发者的实用 Firefox 扩展程序。
| 网站 | 描述 |
|---|---|
| WhatFont | 识别网页上的字体 |
| WhatRuns | 发现网站上使用的技术 |
| Web 开发者 | 用于 Web 开发任务的工具栏 |
| 超棒的截图和屏幕录像机 | 截取并注释截图 |
| daily.dev - 忙碌开发者的资讯 | 开发者资讯和资源 |
| JSONView | JSON 格式和语法高亮 |
| Window Resizer | 将浏览器窗口调整到预设尺寸 |
| Responsive Viewer | 测试网站的响应式设计 |
| BrowserStack | 在不同设备上即时预览网站 |
| VisBug | 网页设计调试工具 |
| Kontrast - WCAG 对比度检查器 | 检查对比度以确保可访问性 |
| PerfectPixel | 将图像叠加在网页上进行比较 |
| Pesticide | 为便于可视化，在网页上勾勒出元素轮廓 |
| 网站调色板 | 从网站中提取调色板 |
| ColorZilla | 高级颜色选择器和吸管 |
| Lorem Ipsum 生成器（默认文本） | 生成 lorem ipsum 文本 |
| JavaScript 和 CSS 代码美化器 | 美化和压缩 JavaScript 和 CSS 代码 |
| Imageye - 图片下载器 | 从网页下载图片 |
| Fireshot - 全页面截屏 | 截取完整网页 |
| Stylebot | 自定义网页外观 |
| ColorPick 吸管 | 简易取色器和吸管 |
| React 开发者工具 | 检查 React 组件层次结构 |
| Wappalyzer | 识别网站使用的技术 |
| Fake Filler | 使用虚假数据填写网页表单 |
AI 图形设计工具
提供免费设计生成服务的 AI 工具
| 网站 | 描述 |
|---|---|
| Leonardo.Ai | Leonardo AI 是一款基于 AI 的设计工具，可帮助您根据参考图创建设计。 |
| Galileo AI | Galileo AI 是一个 UI 生成平台，可轻松快速地进行设计构思。它允许用户从文本生成界面设计。 |
| ImgGen.Ai | ImgGen AI 是一款免费的 AI 图像生成器和增强工具。 |
| Unblurimage.Ai | Unblurimage AI 是一款 100% 免费、无需注册的在线图像模糊工具。 |
| VMind | VMind 是一款智能可视化套件，通过规则算法、机器学习和 LLM 提供智能界面。 |
| 免费 AI 图表生成器 | 是一款免费的 AI 驱动平台，可帮助您轻松创建各种类型的图表。 |
其他
未分类内容
| 网站 | 描述 |
|---|---|
| Figpeek | Figpeek 是一款新的 Figma 和 GitHub 缩略图生成器。 |
| 图像提取器 | 用于提取网站所有图像和 SVG 的在线工具，您只需输入 URL 即可 |
| Vertopal | 用于将计算机文件转换为各种文件格式的免费在线平台 |
| everysize.kibalabs.com | 检查你的响应式网页在各种尺寸下是否都看起来很棒 |
| Devhints.io | 这是互联网上一些实用的速查表 |
| The Web Toolbox | 为 Web 开发者、程序员和设计师提供的一系列方便、免费的工具。 |
| WebDevTrick | 一个著名的博客，提供许多精彩的 HTML、CSS 和 JQuery 设计。 |
| css-tricks | 为初学者和高级用户提供的免费 CSS 技巧和一些独特的想法 |
| Material Design 资源 | 使用 Material 工具、下载和交互式项目来简化你的工作流程。 |
| Nodesign.dev | 为缺乏艺术天赋的开发者提供的工具集合 |
| A11ygator | 一款用于根据 WCAG 规则扫描网站的 Web 工具 |
| Commitizen | 用于根据标准格式化提交消息的命令行工具 |
| CleanCss | 代码格式化、压缩和文件转换工具 |
| Tiny helpers | 一款面向 Web 开发者的免费单用途在线工具集合 |
| CSS Ribbon Generator | 此生成器将帮助您创建纯 CSS 的角带。 |
| 我可以使用 | 检查前端技术的跨浏览器兼容性。 |
| kangax-js-compat-table | 检查 JavaScript 版本（ES5、ES6、ES2016+ 等）在不同编译器、服务器/运行时和平台（桌面和移动）之间的兼容性。 |
| mydevice.io | 最常用的设备分辨率，包括手机和平板电脑 |
| Codepen | 构建、测试和发现前端代码。 |
| Responsively | 设计师和前端开发人员轻松在所有平台上设计和调试的工具 |
| html2pdf.js | 使用纯 JS 在客户端进行 HTML 到 PDF 的渲染。 |
| CSS 参考 | 详细收集所有 CSS 属性和定义 |
| 关键路径 CSS 生成器 | 为您的网页生成关键 CSS |
| SVG Gobbler | 浏览器扩展程序，用于在网页上查找 SVG 并下载、复制到剪贴板或导出为 PNG。 |
| shortcode.dev | 适用于 HTML、CSS、JavaScript、Node、Artisan、Blade 等语言的实用代码片段和代码示例集合。 |
| 30secondsofcode.org | 适用于 CSS、JavaScript、Python 等语言的各种代码片段和文章集合。 |
| PlayCode | Javascript 游乐场。 |
| All The Tags | 所有 HTML 标签简要说明。 |
| Vue Telemetry | 揭示支持任何网站的 Vue 插件和技术堆栈，或探索 5500 多个网站的数据库。 |
| Grid.js | Grid.js 是一个用 TypeScript 编写的免费开源 HTML 表格插件。它适用于大多数 JavaScript 框架，包括 React、Angular、Vue 和 VanillaJs。 |
| Gerillass | Gerillass 是一个基于 Sass 构建的网站开发工具，它为前端开发人员提供了一组 Sass mixins 和函数来生成可扩展的 CSS 输出。 |
| Sketchize | Sketchize 专为 UI/UX 设计师打造，帮助他们为移动设备、平板电脑和桌面设备设计精美的应用程序。 |
| {CSS}Portal | CSSPortal 拥有大量 CSS 生成器、工具和资源。 |
| DevDocs | DevDocs 将多个 API 文档整合到一个快速、有序且可搜索的界面中。 |
| papersizes | 国际纸张尺寸、尺寸和格式的最佳资源。 |
| flexboxfroggy | 通过编写 CSS 代码来帮助 Froggy 和朋友们！ |
| Designbetter Books | 推动最佳设计团队前进的实践必读之作。 |
| OverAPI | 所有备忘单合集。 |
| Pageclip | 静态 HTML 表单服务器 |
| Shields | 创建自定义徽章。 |
| williamsharkey | 随机 SVG 图形生成器 |
| Bootstrap 备忘单 | Bootstrap 类、变量和混合的交互式列表。您唯一需要的 Bootstrap 备忘单。 |
| 二维码生成器 | 使用二维码生成器轻松为您的项目创建二维码。 |
| PapersDB | 最大的论文数据库，包含公制和英制单位的尺寸、尺寸和格式。 |
| SETools.xyz | 免费在线工作工具网站 |
| SmallDev.tools | 为开发人员提供的免费工具，可帮助美化和压缩 HTML/CSS/Javascript，以及许多其他便捷工具。界面美观。 |
| Angry Tools | 免费的 Web 工具，可加快您的开发速度。 |
| Rapid API | 发现并连接到数千个 API。 |
| Readme.so | 创建 README 的最简单方法。 |
| Showcode | 精美的代码截图生成器。 |
| tldraw | 一款小巧的绘图应用。 |
| devices.css | Marvel App 开发的纯 CSS 手机和平板电脑应用。 |
| Troopl | 几分钟内即可构建并发布免费作品集。 |
| Apifox | Apifox = Postman + Swagger + Mock + JMeter |
| A Modern CSS Reset | 将所有 HTML 元素的 CSS 样式重置为跨浏览器的一致基线。 |
| Clipperly | 一体化免费在线文件服务，转换、编辑和优化您的文件。 |
| DebugBear 速度测试 | 测试并优化页面加载速度 |
| Code Beautify | 面向开发者的免费在线工具，包括代码美化器、代码格式化程序、编辑器、查看器、压缩器、验证器、转换器等 |
| Vue CheatSheet | Vue、Vue Router 和 Pinia 的交互式速查表。您唯一需要的 Vue CheatSheet。 |
| appydev | 为互联网创作和生活的人们提供的一系列精彩工具、资源和产品。 |
| ExtendsClass | 面向开发者的免费在线工具，包括图像压缩器/编码器、代码格式化程序、代码游乐场以及许多其他便捷的实用程序。 |
| RunJS | 免费在线 JavaScript 游乐场。 |
| Pillarstack | 面向前端开发者和网页设计师的各种资源。 |
关于项目
精选的设计和 UI 资源列表，包括库存照片、网页模板、CSS 框架、UI 库、工具等等。
MIT
HTML
63,376
11866
1036
2020-05-06
2025-10-02