2021 年最热门的前端工具是什么？

又一年过去了，我再次荣幸地浏览了过去 12 个月 Web Tools Weekly 电子报的档案，寻找读者在 2021 年发现的最有趣的 ​​前端工具。因此，为了开启 2022 年，我整理了一个包含 60 个最受欢迎工具的列表。我相信这里至少有一两个工具可以从今天开始应用到您的前端项目中。

其中一些前端工具非常实用，而另一些工具可能只是因为好奇心而进入列表（我根据唯一点击次数来判断）。由于许多进入我的年度列表的工具都比较新，我认为这很好地反映了未来一年流行的前端工具类型。

从顶部开始倒数！

目录

• 60. Open Props
• 59. NextUI
• 58. Dopefolio
• 57. Vizzu
• 56. 10015 Tools
• 55. Snoweb
• 54. Tails
• 53. MapLibre
• 52. SVG Repo
• 51. Animated Backgrounds
• 50. Pico.css
• 49. Coding Fonts
• 48. UI-Neumorphism
• 47. Beautiful CSS Buttons
• 46. Shaper
• 45. Prestige
• 44. HTML.cafe
• 43. Charts.css
• 42. Buttons Generator
• 41. Doodad Pattern Generator
• 40. Kaboom
• 39. Skuawk
• 38. Glassmorphism CSS Generator
• 37. Kalia
• 36. AdminJS
• 35. Pancake
• 34. Mosaic Lite
• 33. Iconduck
• 32. Luxa CSS
• 31. Glitter
• 30. Components AI
• 29. Unicode Arrows
• 28. Type Scale Clamp Generator
• 27. AnimXYZ
• 26. Frontend Toolkit
• 25. colorpalettes.earth
• 24. Uncut
• 23. Lowdefy
• 22. JavaScript Booster
• 21. Layout Patterns
• 20. Baseline Background Remover
• 19. Theatre.js
• 18. Transition.css
• 17. The Component Gallery
• 16. party.js
• 15. Headless UI
• 14. Turbo
• 13. tidy.js
• 12. Tail-Kit
• 11. Tailwind Components
• 10. Pikaday
• 9. HTML Boilerplates
• 8. Whirl
• 7. Riju
• 6. DevUI
• 5. Pollen
• 4. AlterNight
• 3. UIsual
• 2. Supabase UI
• 1. CSS Layout Generator
• 您在 2021 年最喜欢的前端工具是什么？

---

60. Open Props

Open Props 提供了一组手工制作的设计令牌，这些令牌由 CSS 自定义属性组成。由于使用了这种特殊的 CSS 功能，我认为此类工具会变得越来越普遍。它们允许您引入少量有用的自定义属性组集合，例如 animations.css、borders.css、fonts.css、zindex.css 等，并且很快就会有更多集合加入。或者，您也可以只使用主 Open Props 文件一次性获取所有内容。

这绝对是一个值得关注的前端工具，如果您想帮助构建可用的令牌库，它也是一个不错的贡献目标。

59. NextUI

一个现代的 React 库，它使用 Stitches（一个流行的 CSS-in-JS 解决方案），并包含开箱即用的明暗 UI 组件以及一个默认调色板，这对于快速构建登陆页面或最初未绑定到任何品牌的其它内容非常有用。

它目前处于 Alpha 开发阶段，因此是未来一年值得关注的工具之一。

58. Dopefolio

如果您正在寻找一种简单的方法来构建自己的开发者作品集，Dopefolio 是一种快速解决方案，它针对 SEO 进行了优化，并且开箱即用地具有很高的 Lighthouse 分数。

现场演示 让您了解它是什么样子（响应式等），并且包含一个颜色选择器组件，以便您可以实时测试自己喜欢的模板主色。

57. Vizzu

这是今年进入前端工具榜单的一个独特的工具。Vizzu 是一个用于创建动画数据故事和可视化的开源 JavaScript 库。也许它之所以流行是因为现在显然需要创建和嵌入医疗数据。

借助此库，您可以轻松构建静态数据图表、动画图表和数据故事。您可以查看一些 动画图表的实时示例 或 数据故事，其中包括一个数据故事，展示了在整个电视剧《老友记》的播放过程中，哪位客串角色的台词最多。

56. 10015 Tools

我似乎每年都会发现一些这类前端工具。10015 Tools 是一组前端工具，而不是单个工具。它包括文本工具、图像工具、CSS 工具、编码工具（例如缩小器）、颜色工具、社交媒体工具以及杂项类别下的其他一些工具。

这绝对是我见过的功能更全面的多合一解决方案之一，因此我相信您在这里会发现一些有用的前端工具，可以随时回来使用。

55. Snoweb

图标集总是很受欢迎，我每年都会遇到至少十几种新的图标集。此图标集包含优化的 SVG 图标，其中许多图标在您将鼠标悬停在其上时具有内置的动画效果（例如 打开/关闭信封图标）。

与许多图标网站一样，您可以按关键字搜索或按类别筛选，其中一个类别是“品牌”类别，其中包含 Twitter、Facebook、Vimeo、YouTube、Snapchat 等的图标。

54. Tails

这是第一个进入榜单的基于 Tailwind 的工具；随着 Tailwind 持续普及，这几年一直是一种趋势。此前端工具是一个用于使用 Tailwind CSS 的项目的拖放式页面构建器。

它为每个 15 个类别提供了两个免费的“块”，因此这里有很多免费的东西，您可以通过每月付费解锁其余部分。

53. MapLibre

这个开源地图库于 3 月份推出，并在全年广受欢迎。它包含一个 JavaScript 库以及用于在 iOS 和 Android 应用程序中显示地图的 SDK。

如果您想了解基于 Web 的前端工具的功能，文档中包含大量使用 JavaScript 的示例。

52. SVG Repo

SVG Repo 仅凭数量就进入了榜单。它是一个包含超过 300,000 个免费、优化、基于 SVG 的图形和图标的资源库，其中大部分都允许商业使用。

您选择的每个图标都会显示其所属的许可证类型。您可以按关键词搜索并“保存”图标到您的收藏夹以供日后使用（无需登录）。

51. Animated Backgrounds

这个工具今年进入了前 60 名，但可能不是其中最实用的前端工具。就像我在一开始说的那样，有些东西纯粹出于好奇心就会被点击。它是一个动画背景的画廊，来源是各种 CodePen 演示。

这个画廊很有用，因为它将背景显示为预先录制的视频，因此您不必担心所有演示都加载并导致浏览器选项卡崩溃。谨慎使用这些工具，如果确实需要使用，因为它们通常会使用大量的 JavaScript 和 CSS。

50. Pico.css

这与当今流行的 CSS 框架有所不同。它有点像反 Tailwind 工具，更像是一个启动 CSS 文件（例如重置）而不是一个成熟的框架。

Pico.css 为所有原生 HTML 元素提供了优雅的默认样式（您可以在此处预览），而无需在标记中添加大量类——并且整个文件压缩并 gzip 后小于 10kb。

49. Coding Fonts

编码字体似乎是最近的一个令人兴奋的新趋势，CSS-Tricks 利用这个趋势开发了这个小型的交互式信息应用程序。

在左侧选择一个字体以显示示例代码、字体信息（连字、斜体等）、成本（大多数是免费的），以及显示 HTML、CSS 或 JavaScript 示例代码的选项。

48. UI-Neumorphism

这个 React 库基于旧的拟物化趋势，这种趋势显然在几年前已经过时了。这种趋势是否正在卷土重来？可能不会。事实上，这个 React 库已经有大约两年的历史了，即使我是在去年第一次分享它。

该库包含大量不同的组件，它们都实现了“新拟态”外观。很有意思，但可能不适合许多项目。

47. Beautiful CSS Buttons

几乎每个应用程序或网站都需要按钮，因此这样的集合总是很受欢迎。其中许多与您可能在其他地方看到的有所不同。

许多按钮包含有趣的悬停效果，您可以轻松地直接复制和粘贴页面上任何单个按钮的 HTML 和 CSS。

46. Shaper

这个交互式工具允许您实时修改页面上的各种 UI 设置以构建不同的页面元素。调整好您喜欢的设置后，您可以获取代码，该代码使用 CSS 自定义属性。

您可以在演示视图和“规格”视图（即代码以及其他有用信息）之间切换。此工具特别关注排版以及其余的 UI 样式，这是使布局看起来正确的关键部分。

45. Prestige

这是一个基于文本的浏览器内 HTTP 客户端——类似于Postman，但没有界面。它允许您以纯文本定义请求，您可以选择将其保存为 Gist。它包括独立的 Cookie 管理，并且具有深色和浅色模式。

正如作者解释的那样，“我创建 Prestige 是因为我在工作时需要这样的应用程序……以及使用外部 API。”

44. HTML.cafe

这可能是整个列表中最简单的工具。HTML.cafe 或多或少是一个简易版的CodePen，找不到更好的词来形容它了。我不认为人们会对这种东西感兴趣，因为已经存在功能强大的工具可以做到它能做的事情。尽管如此，它仍然是一个非常简单的 HTML 编辑器，带有实时预览。

它没有像 CodePen 那样单独的 CSS 或 JavaScript 窗口，但您可以根据需要轻松地将它们包含在<style>或<script>元素中。我认为这个工具最好的用途可能是帮助完全不熟悉 HTML 的学生的教师，因为它消除了所有复杂性。

43. Charts.css

这个前端工具有点像 Tailwind CSS 和 Chart.js 的混合体。简而言之，Charts.css 是一个 CSS 框架，允许您使用实用程序类使用 HTML 和 CSS 构建图表。

您可以创建条形图、折线图、多数据集图表、百分比列和 3D 条形图。最棒的是，这些图表是可访问的、响应式的，并且易于根据您的品牌需求进行自定义。

42. Buttons Generator

“Buttons Generator”可能有点用词不当，因为该页面并不能真正让您“生成”按钮。与之前的按钮资源一样，这是一个使用 HTML 和 CSS 构建的按钮库。

它们按类别划分，包含一些简洁的悬停或点击效果，您可以点击任何按钮将代码复制到剪贴板。

41. Doodad Pattern Generator

这个交互式工具允许您构建自己的图案化背景，您可以将其导出为各种格式。您可以使用“随机”按钮生成随机图案，或从各种类别样式中选择。您还可以编辑颜色、滤镜和各种变换。

导出对话框允许您保存图案并通过本地存储加载以前保存的图案。将您的图案导出为 JPEG、PNG、内联 SVG、SVG 文件或 CSS 背景。

40. Kaboom

每年我都会遇到至少一两个新的 JavaScript 游戏库，而这个库就是今年榜单上的一个。它似乎拥有一个相当优雅且易于使用的 API，并且包含了一套完整的组件、事件和其他内置函数。

有一个方便的 游乐场 可以让你初步体验它的使用，以及一个 入门教程 来帮助你开始。

39. Skuawk

如果你想要一个 Unsplash 的替代方案，Unsplash 可能是你获取免费库存图片的首选来源之一，那么这个包含美丽公有领域图片的集合可能是一个不错的选择，里面有一些非常棒的照片。

有 16 个类别的图片来自不同的摄影师，他们都允许他们的图片在 CC0 许可证下使用（即你可以随意使用）。

38. Glassmorphism CSS 生成器

这是一个在线生成器，可以让你在页面元素上构建 “玻璃质感”效果——有点像磨砂玻璃。这个工具显然应该是更大 UI 库的一部分，该库将在许多不同的 UI 组件上整合这种效果。

无论如何，我更喜欢这种效果而不是“拟态”效果，而且我的受众似乎也同意这一点。

37. Kalia

这是榜单上三个 VS Code 工具之一。它是一个吸引人的颜色主题，你可以用它来设置你的 VS Code。

该扩展到目前为止只有大约 800 次安装，这令人惊讶，但它具有一个漂亮的柔和色彩外观，我认为很多人会喜欢。

36. AdminJS

如果你是一个 Node 开发人员，这是一个可以添加到 Node.js 应用程序中的开源管理面板。它将根据你从几乎任何数据库中添加的数据为你生成一个 UI，允许你和你的团队管理应用程序的内容。

你可以使用 这个示例应用程序 试用它，该应用程序基于 MongoDB 和 Postgres。

35. Pancake

这是一个用于构建跨平台 HTML5 基于 2D 游戏的另一个游戏引擎。当我第一次分享它时，它获得了大量的关注。虽然它进入了榜单，但它似乎在你编写完游戏后需要在构建步骤中使用 Python。

基本 API 使用纯 JavaScript，你可以在 这里 查看很多简洁的小例子。

34. Mosaic Lite

我发现很多使用不同前端技术的仪表盘模板。这个是用 Tailwind 和 React 制作的，并且包含了使用 Chart.js 构建的可选图表组件。

与其他类似的模板一样，它可以用于 SaaS 产品、管理仪表盘等。你可以查看 在线演示。

33. Iconduck

这是一个获取开源图标的另一个很棒的来源，它提供了超过 100,000 个图标，可以通过关键词搜索，并且所有图标都可以在商业项目中使用。

该网站包括点赞和保存图标以及图标集合以供以后使用的功能（需要 cookie，但不需要登录）。

32. Luxa CSS

这是一个 CSS 库，实际上是在 2020 年中后期发布的，但我第一次在 2021 年分享了它。它被描述为一个“极简主义”的 CSS 框架。

Luxa CSS 包含一些基本样式，以及各种组件、辅助工具和布局样式，你可以在 文档中 或通过查看 这个 CodePen 集合 查看它们。

31. Glitter

Glitter 绝对是我过去一年中遇到的最奇怪——但也最酷——的前端工具之一，而且它似乎引起了很多兴趣，即使它像任何工具一样简单。

它是一个生成器，可以生成闪光风格的文本，你可以将其保存为 SVG。当然不适用于 99% 的项目，但这是一个非常酷的文字效果。

30. Components AI

当我最初分享这个工具时，我仅分享了主题构建器，这也是它进入榜单的原因。但值得分享这整套 15+ 个工具。

除了主题构建器之外，还有一个语法高亮构建器、渐变和阴影工具、SVG 图案生成器、动画背景等等。

29. Unicode 箭头

这很简单。Unicode 箭头是一个一站式的位置，可以复制粘贴——你猜对了——Unicode 箭头以及每个箭头的关联十六进制代码。

关于这个工具没什么好说的，除了该网站允许你购买 Unicode 箭头首饰。当然，一群编码极客不会对此感兴趣，不可能。

28. 字体尺寸 Clamp 生成器

这不是第一个尝试为您生成字体尺寸的工具，但它是一个相对较新的工具，它集成了 CSS 的 clamp() 函数。

前端工具允许您选择范围、字体、预览文本，您甚至可以测试响应性（尽管我认为后一项功能没什么用，因为这只是文本）。

27. AnimXYZ

这个工具被称为“第一个可组合的 CSS 动画工具包”，支持 Vue 和 React。确切地说，这意味着您不必编写任何关键帧。它似乎有点像动画领域的 Tailwind，因为您只需要使用 HTML 类。

除了添加类之外，所有值都是完全使用 CSS 变量构建的。这意味着您可以根据需要通过修改变量本身来自定义值。

26. 前端工具包

这是一个包含 20 多个工具的多合一工具解决方案，用于执行各种编码和图像相关任务。

它包括用于 CSS、JSON、favicon、SVG、图像压缩、npm、正则表达式等的工具。

25. colorpalettes.earth

这个工具在这个列表中是独一无二的，可能会激发一些很酷的设计。该工具显示了来自自然图像（取自 Unsplash）的颜色调色板，这些图像包含在网站上，并定期添加新的调色板。

点击任何图像，您将获得一个模态窗口，可以访问构成图像派生调色板的每种颜色的十六进制值。

24. Uncut

为了增加此列表的多样性，这里有一个字体目录，目前包含 90 种字体，重点关注当代或现代字体。

所有包含的字体都是开源的，因此您可以免费将其用于个人和商业项目。

23. Lowdefy

构建内部工具在当今似乎是一件热门的事情，这是一个您可能想研究的解决方案，它允许您通过编写 YAML 来构建工具。

它被描述为一个“开源低代码框架，可以轻松构建 Web 应用、管理面板、BI 仪表板、工作流和 CRUD 应用。”

22. JavaScript Booster

这是一个 VS Code 扩展，旨在帮助您（正如其名称所示）提升您的 JavaScript、TypeScript 和 React 编码效率。该扩展在代码的某些位置添加了一个灯泡图标，指示您可以立即触发预定义的代码重构。

一些示例包括将常规函数转换为箭头函数、翻转 if-else 结构，以及一些 React 特定的重构。

21. 布局模式

这是 Google 开发者 web.dev 资源最近添加的内容之一，我假设它将在未来一年继续发展。

它包含许多“使用现代 CSS API 构建”的 UI 模式。换句话说，这是一个非常具有前瞻性的 CSS 示例集合，但应谨慎使用，因为其中包含的一些技术可能尚未获得所有浏览器的完全支持。

20. Baseline 背景去除器

不可否认，基于 AI 的背景去除工具最近层出不穷。这个工具是免费的，并且根据我的简短测试，它的效果非常好。

您可以上传最多 5MB 的图像，它将接受 JPEG 和 PNG 文件。生成的图像将下载为透明的 PNG，您可以使用它添加自己的背景或保持透明。

19. Theatre.js

这是一个动画库，但这次是一个 JavaScript 解决方案，它允许您使用方便的可视化编辑器（与您编写的代码一起使用）来为 DOM 元素或 WebGL 制作动画。

这是一个非常强大的工具，很难用几段话来概括。文档中贯穿始终的是一个冗长的 基于章节的视频，如果您想熟悉它，这确实很有帮助。

18. Transition.css

即插即用的 CSS 库总是很受欢迎，我通常每年都会发现一两个不错的库。这个库包含一些您可能在其他地方没有见过的简洁的 CSS 过渡。

您可以在页面上直接试用它们。我最喜欢的是那些在动画中加入一些犹豫的动画，以增加独特性。

17. 组件画廊

这有点像设计系统的总汇，因为它提供了来自各种技术（React、CSS、Angular、Vue 等）构建的真实设计系统中的组件示例，以及 eBay、高盛、GOV.UK 等众多品牌的组件示例。

对于任何构建自己设计系统的人来说，它都是一个方便的参考，因为您可以比较此处包含的现有系统中的相同组件。

16. party.js

这是一个有趣且独特的 JavaScript 库，它允许您向网页添加粒子效果，特别是彩带和闪光。

您只会在线情况下才会用到这个，但很高兴您可以自定义粒子形状、粒子数量、散布等。

15. Headless UI

用纳乔·自由的口吻来说，现在我们真正进入到了核心部分。这个UI组件库在2020年末发布，已经在GitHub上获得了超过12,000颗星。

这些组件（下拉菜单、选项卡、弹出窗口等）是“headless”的。这并不是说它们的能力被剥夺了；而是指它们没有样式，这样你就可以根据自己的喜好进行品牌化。它们也完全可访问，设计用于与Tailwind CSS集成，并且兼容React和Vue。没错——这个库几乎涵盖了2022年的所有前端流行语。

14. Turbo

这是另一个在2020年末发布后，在2021年表现良好的工具。它被称为“单页Web应用程序的速度，无需编写任何JavaScript”。

简而言之，Turbo是一个库，允许你利用四个主要功能：Turbo Drive、Turbo Frames、Turbo Streams和Turbo Native。它们使用Web组件为你的页面添加类似单页应用程序的性能和交互性，而无需使用繁重的自定义脚本重新发明轮子。

13. tidy.js

这是一个专门用于“整理”数据的JavaScript数据相关函数库。

它包含70多个不同类别（整理、分组、数学、排序等）下的函数，你可以使用这个游乐场来尝试不同的功能。

12. Tail-Kit

这是这份前端工具列表中第一个Tailwind UI套件，而且它非常强大。它拥有超过250个与React、Vue和Angular兼容的开源组件。

组件被分类为元素、表单、电商、导航、区块和列表，或者你可以从许多模板中选择，这些模板被分类为仪表盘、登陆页面和错误页面。

11. Tailwind Components

这是另一个Tailwind UI套件，同样包含开源组件和模板，并细分为13个类别，还包含一个“很棒”的类别，其中包括免费但高级的组件。

这个网站或多或少是一个各种社区贡献的Tailwind组件的目录，而不是像其他套件那样是一套连贯的UI元素。

10. Pikaday

一个JavaScript日期选择器在2021年进入了年度十大工具——谁会想到呢？它似乎满足了日期选择器组件的所有必要条件：没有依赖项，轻量级，并使用模块化CSS进行样式设置。

就像这份列表中的其他一些前端工具一样，这不是一个新的工具。它已经存在一段时间了，但我第一次在2021年分享它，令人惊讶的是它最终出现在了今年的前十名中。

9. HTML Boilerplates

这是一个实用的在线HTML生成器，它允许你自定义你想要生成的HTML入门模板的类型，并提供切换选项来选择包含的内容。这可能最适合生成登陆页面或演示的快速模板。

说实话，我认为如果该工具更新为使用一些更现代的选项会更好，但对于一个简单的HTML起点，它可以完成任务。

8. Whirl

这是另一个CSS动画库，这次专门收集用于加载旋转器的动画。它包含100多个动画加载器，其中一些非常新颖独特。

我喜欢列表中的动画（你可以在页面上直接尝试）是如何被分类为伪元素、单个元素和多个元素的。其中最好的动画是“乒乓”动画，尽管我怀疑是否有人会正确地将其归类为“内容加载”的指示！

7. Riju

想象一下，如果CodePen和JSFiddle生了一个孩子，然后你把那个孩子切成224块。这就是Riju——一个几乎适用于所有编程语言的快速在线游乐场。

我无法想象这里会缺少任何你想要尝试的编程语言，而且其中大部分是你通常不会与在浏览器中运行联系起来的语言。

6. DevUI

这是一个适用于企业级应用程序的Angular工具包，包括组件、图标、管理员仪表板模板以及用于样式和品牌化的设计系统。

我猜它进入了前端工具的前十名列表，是因为我一开始没有明确说明它是用于Angular应用程序的（主页上也不清楚）。尽管如此，我确实说明了它是为企业级项目设计的，这似乎引起了很多人的注意。

5. Pollen

这个库可以作为你自己的设计系统的基础，它使用CSS自定义属性，实用性非常明显。

它为你提供了易于自定义和扩展的低级设计标记。模块包括排版、布局、UI、网格和颜色。我猜将来会添加更多内容，所以它是一个值得关注的库。

4. AlterNight

开发者喜欢VS Code、暗黑模式和插件。将这三者结合起来，你就拥有了一个很棒的小型前端工具。

AlterNight是一个漂亮的VS Code主题，到目前为止只有大约3000次安装，但它能够进入今年榜单的前五名。

3. UIsual

这是一个前端模板集合，但带有一点我认为许多人会欣赏的特色：它们是灰色的。

该套件目前包含8个具有不同布局的模板。由于没有任何基于颜色的品牌化，因此它们是根据自己的需求进行自定义的好选择，而不会看起来像其他所有登陆页面。

2. Supabase UI

这是一个开源组件库，专为 React 设计，并针对 Supabase 产品（一个开源的 Firebase 替代方案）进行了优化。

它与 Tailwind 兼容，并且我需要指出它目前仍处于早期开发阶段。尽管如此，它仍然非常受欢迎，在本文列出的工具中排名前二。

1. CSS 布局生成器

这是过去一年里我的时事通讯中最受欢迎的工具。它是一个功能齐全的 CSS 和 JSX 生成器，可使用 CSS Grid 布局语法生成各种布局。

点击五种布局样式中的任何一种，您将进入一个交互式在线编辑器，您可以在其中使用各种 CSS Grid 功能，例如行、列、行间距、列间距、方向、网格对齐等等。这里有很多可以尝试的东西，并且该工具稍后将为其中一些示例包含 Flexbox 语法。

2021 年您最喜欢的哪些前端工具？

今年最有趣的前端工具列表到此结束。我希望您在这里找到了一些可以添加书签或在新项目中开始使用的工具。这份列表包含如此多种类的工具真是太酷了——有 UI 套件、动画库、图片网站、图片工具等等。

在这份列表中有没有您在过去一年中发现但未提及的前端工具？欢迎在评论区分享。您也可以订阅我的时事通讯，获取 2022 年更多前端工具，如果您自己构建了一些工具，并希望在未来的版本中分享，也请随时联系我。