这些是 2021 年最有趣的前端开发工具吗？

本文最初发表在我的主网站上。

每当一年结束的时候，回顾一下我的每周时事通讯《Web Tools Weekly》的点击统计数据，看看哪些工具最受关注，总是很有趣的。

今年和往年没什么不同。我发现点击基本上有两个原因：

• 好奇心
• 会让我的生活更轻松

最终，后一个原因就是人们检查任何 Web 开发工具的原因。

请注意这篇文章的标题。我并不是说这些工具是“最好的”或“最流行的”（其中一些甚至不是那么新，只是对我来说比较新）。但它们可能是最有趣的，即使不一定是最有用的。

因此，考虑到这一点，以下是我在时事通讯中总结的 2020 年点击率最高的 60 个工具（它们可能是2021 年最有趣的选择）的粗略汇总。我非常肯定，你至少会在这里找到一些对未来项目有用的东西。

60.Pikwizard​

任何与超级热门的 Unsplash 项目类似的内容都会获得大量点击。这个图库提供超过 100 万张免版税的图片和视频，可安全用于商业用途，无需署名。

很难想象有人会取代 Unsplash 在该领域的领先地位，但如果你想寻找免费的素材库，又不想担心价格或版权问题，Pikwizard 似乎是一个不错的选择。不过，Pikwizard 的主要缺点是，搜索结果中也会包含 Adob​​e 的“高级”照片。

59. Tailwind 入门套件

Tailwind 出现在这个列表的早期，而且出现的频率很高，这并不奇怪。我认为 Tailwind 是目前最火爆的 CSS 工具，所以我一直在研究中寻找与之相关的工具和框架。

该工具包是 Tailwind 的开源插件，具有多个 HTML 元素，并附带 React、Vue 和 Angular 的动态组件。

58.蜘蛛

网页爬虫工具在我的新闻通讯中似乎一直表现不错，像 HTML 转 PDF 之类的工具也同样如此。这款工具号称是“最简单的互联网爬虫工具”。它并非免费，但如果真如宣传的那样有效，那么一次性的小额付费似乎也是一笔不错的投资。

只需单击几下即可将网站转换为可作为 JSON/CSV 下载的有组织的数据，无需编码或配置。

57. Van11y

这在 2020 年并不算新鲜，但对我来说却是全新的。它是一个可自定义、可访问的脚本集合，包含许多你可能经常在 UI 中使用的内容：手风琴、标签面板、轮播、工具提示、模态框等等——所有这些都是使用渐进式增强构建的。

这里的组件并不多，但由于包含的组件非常常见，因此足以值得收藏。

56. CSS 到 TailwindCSS

Tailwind 再次成为人们关注的焦点，这次它提供了一个在线工具，可以将标准 CSS 转换为最佳的 Tailwind CSS 等效项。

我不完全确定这个对于很多项目来说是否非常实用，但我猜这引起了很多好奇的点击，因为目前有很多开发人员正在使用 Tailwind，并且可能只是想知道这种事情会带来什么。

55.半径

设计系统几年来一直是一个热门话题，因此这个工具包出现在榜单上并不令人意外。

这套开源工具和库的目标是帮助您和您的团队从头开始构建一个设计系统，避免您通常会遇到的所有典型障碍，从而加快设计系统通常涉及的从零到英雄的过程。

54. Sail UI

Tailwind 再次成为这里的焦点。这个基础 UI 组件库相当小。我个人觉得它没什么突破性的功能，所以 Tailwind 的因素很可能是这款应用最初点击量激增的主要原因。

话虽如此，我可以看到，在来年适当的监督和维护下，这个系统将会不断发展壮大，越来越受欢迎。

53.控制

它有免费版和付费版。免费版包含 100 多幅插图，您可以根据自己的需求进行自定义，打造专属场景。免费版仅支持 PNG 格式，付费版则为 100% 矢量格式，并兼容 AI、Figma 和 Sketch。

您可以稍微修改特定插图的主题/主题，还可以更改插图的风格（实体或线性）。这项功能来自一家名为 Craftwork 的初创公司，该公司提供多种图形相关产品。

52.公共 API

这是一个面向软件开发者的免费公共 API 目录。如果您刚刚开始基于 API 进行开发，或者想从中汲取灵感，构建一个使用这些 API 的新产品或服务，那么这里可能是个不错的选择。

类别包括开放数据、加密货币、科学、金融、体育和健身等等。

51. css-media-vars

这绝对是列表中独一无二的。如果你已经熟悉 CSS 变量和媒体查询，那么将这两个概念结合起来的想法一定会让你着迷。

该页面提供了实时可编辑的演示，以便您可以准确地看到该技术的工作原理以及如何自定义各种断点。

50. guijs

正如我一开始提到的，任何声称能够简化开发者工作的内容在我的新闻通讯中总能获得大量点击。这篇文章的标语正是如此。

这是一款多功能的 Windows 和 Mac 原生应用，可帮助您管理开发项目。它包含项目管理、软件包安装、脚本管理等功能。

49.邪恶模板

厌倦了 Tailwind 吗？是的，不太可能。这套 Tailwind 模板包含四个易于定制的模板，并且可以与你的任何全栈工具集（Next.js、Vue、Laravel、Gatsby、React 等）集成。

只有一个模板是免费的，但只需支付少量捆绑费用，您就可以获得终身支持。

48. H3

该微框架最小化后大小不到 4KB，可帮助您使用现代 JavaScript 构建客户端单页应用程序 (SPA)。

它有多小？API 仅由 7 个方法和 2 个属性组成。当然，并非每个项目都适用，但如果你将来想深入开发类似的东西，或许源代码本身就很值得学习。

47.线条很棒

Font Awesome 的免费替代品，包含 1300 多个平线图标，并完全覆盖主要的 Font Awesome 图标集。

还包括导入 Figma、Sketch 或 Photoshop 的选项。

46. BEM 命名备忘单

我刚开始做新闻简报的时候，偶尔会加一期“学习工具”之类的内容。虽然现在我不再这么做了，但我还是决定加这期，而且效果还不错。

这是一份精心设计的指南，介绍了使用 BEM 命名方法多年来一直受到 CSS 开发人员的欢迎。

45. Embla旋转木马

轮播图一直很受欢迎，点击量很高，所以这并不奇怪。这是一个简洁、可扩展的轮播图库，拥有流畅的动画和精准的滑动体验。

它与库无关、无依赖、并且开源，因此对于原始 JavaScript 项目来说，它看起来是一个不错的选择。

44.打开窥视

手绘插图库，用于创建人物场景，每幅画均以 PNG 或 SVG 格式提供。

您可以直接从网站上获取部分图片，也可以下载完整的图形包，将其导入您选择的图形工具中。然后进行混合搭配，即可获得超过 50 万种可能的插图组合。

43. CSS 部分分隔符生成器

这是列表中最简单的工具之一。它可以轻松生成纯 CSS 的精美分区分隔符，并将其添加到您的页面中。

您可以交互地调整分隔符及其模式的外观和大小，然后抓取 HTML 和 CSS 放入样式表中。

42. Lion Web 组件

一组 Web 组件，具有所有开发人员在 UI 工具包中想要的三个特点：性能、可访问性和灵活性。

我喜欢演示/文档站点上的每个组件如何向您展示可访问性违规（剧透：没有很多）以及可访问性“通行证”，因此您可以看到每个组件如何供所有用户访问。

41.调试可视化工具

这个 VS Code 扩展有超过 31,000 次安装和强大的 Marketplace 评级，告诉我到目前为止很多人都喜欢它。

顾名思义，它允许您在调试时可视化数据结构。它最适用于 JavaScript/TypeScript，并且已在 C#、Java、PHP、Python 等平台上测试过。理论上，它适用于任何可以在 VS Code 中调试的语言。

40. Geist UI

这个开源设计系统具有用于 React 和 Vue 的 UI 库，为构建现代界面提供了另一种选择。

主站点链接到两个版本的单独文档页面，并且还有一个排版样式表和通用样式表，用于许多固执己见但优雅的默认设置。

39. sysend.js

这是此列表中另一个独特的库：它是一个小型库，允许您在同一浏览器中打开的页面之间发送消息。

它没有依赖关系，支持跨域通信，并使用 HTML5 LocalStorage 或较新的 BroadcastChannel API（无论浏览器支持哪一个）。

38.英雄生成器

我见过很多针对各种前端编码问题的在线生成器，但这个有点不同。它是一个交互式工具，用于生成网页的英雄图像标题部分，这是一种常见的设计模式，你通常会不必要地一遍又一遍地重新发明它。

当您调整设置时，页面会实时更新，然后您可以获取完整的 CSS，即使您在此处生成它之后，也可以稍后扩展或修改它。

37.玩具脸

这绝对不适合您构建的每个网站，但如果您需要一些有趣、多样化的 3D 头像用于设计模型或完整的项目，这可能会奏效。

这 120 多个头像拥有玩具般的外观。它们并非免费，但您可以终身访问套装中的新版本，提供高分辨率 JPEG 和透明 PNG 格式。

36.半月

我猜这个产品之所以吸引了很多人的注意，是因为它被宣传为具有“内置暗模式”，而现在很多开发人员都喜欢这种模式。

但这只是一个功能。它是一个功能齐全的前端框架，类似于 Bootstrap，拥有大量组件和实用程序。

35. V-仪表板

管理仪表板启动模板和框架在我的新闻通讯中似乎总是表现良好，因此毫不奇怪，这是点击次数最多的工具之一。

它是用 Vite、Vue 3、Tailwind CSS 和 TypeScript 构建的。

34.刺绣

这是此列表中的另一个独特条目。这个交互式生成器使用 CSS 的 border-image 语法创建“9 块”边框。

您可以在页面上绘图，然后复制包含数据 URI 的 CSS，并使用边框图像标准。您可以成为全球 20 位发现边框图像用途的人之一！

33.猎鹰

这不是一个新工具，但今年我第一次遇到它，所以它在这个列表中得到了认可。这是一款适用于 Mac、Windows 和 Linux 的开源 SQL 编辑器。

支持连接到 RedShift、MySQL、PostgreSQL、IBM DB2、Impala、MS SQL、Oracle、SQLite 等。根据 GitHub 仓库的信息，它已经有几年没有更新了，但我认为这不会对类似的东西造成什么大问题。

32. Neumorphism.io

还记得新拟态（Neumorphism）风靡一时的年代吗？嗯，它至今依然有它的地位。这款在线生成器将帮助你以交互方式生成带有“软 UI”（例如 3D 盒状阴影和光照）的元素代码。

提供大量精细的选项来完善您所追求的外观。

31.Meraki用户界面

另一个 UI 库，同样基于 Tailwind CSS。包含按钮、卡片、表单、下拉菜单、英雄组件等等。

这款组件的一个亮点是，它可以轻松地将 UI 元素切换为从右到左 (RTL) 的布局，从而支持 RTL 语言。您可以在测试各种组件演示时以交互方式体验 RTL 功能。

30. calcolor.co

该网站为每种颜色代码提供了一个专门的页面，其中包含信息、颜色的各种语法（十六进制、RGB 等）。

使用它来查找匹配的颜色变体，了解有关颜色属性的更多信息，或转换颜色值。

29.尾块

我们目前有多少个 Tailwind 工具？我记得有 7 个。这个是一组 Tailwind UI 组件，分为 15 个类别。

类别包括电子商务、博客、CTA、页脚、画廊等。

28.良好的电子邮件代码

这是三款跻身此榜单前 30 名的 HTML 电子邮件代码工具中的第一款。这是一个小型 HTML 电子邮件组件库，采用最佳实践构建，旨在最大程度地支持电子邮件客户端。

每个组件都有一个描述，包括模板、预标题、容器、列、按钮等。

27.像素精简版

这款基于 Bootstrap 4 的精美响应式 UI 套件包含 80 个组件、3 个部分、4 个示例页面和一个可选的高级版本。

使用 Sass 变量，以便您可以轻松自定义外观以满足您的需要。

26.密码邮件

这些无忧的响应式 HTML 电子邮件启动器包括 60 多个模板（分为 6 个类别）以及 12 个主题。

您可以在移动端和桌面端电子邮件视图中预览所有模板和主题。非商业项目仅免费，但完整版包含额外功能，价格适中，值得考虑。

25.大头

这个插图头像库包含一个随机字符生成器，​​您可以随时对其进行交互自定义。

一旦选择了设置，就可以使用 React 或 SVG（还提供自定义图形的直接 URL）将角色包含在项目中。

24.代码图

这又是一个代码可视化工具，这让我想知道这是否是现在需要的东西。

这是一个 Mac、Windows 或 Linux 应用程序，可让您使用图形导航代码，以直观的方式可视化函数调用。

23.签名.电子邮件

这通常不是我经常遇到的工具，但它是今年点击次数最多的工具之一。

它是一个可视化的拖放式电子邮件签名编辑器，有助于在团队电子邮件中保持一致的品牌形象。您可以从各种模板中选择，然后根据自己的喜好进行自定义。

22.叶子 PHP

不是前端工具，但对于全栈很有用：快速创建干净、简单且强大的 Web 应用程序和 API。

除了一些 WordPress 工具之外，这可能是我包含的唯一的 PHP，而且 — — 令人惊讶的是 — — 它是点击次数最多的工具之一。

21.布朗特

这个 CSS 框架略有不同：它只帮助布局，不涉及样式设置。它只提供辅助类，使定位和响应式设计更加简单。

由于其他框架的功能要么太多，要么太少，因此作者根据自己的需要制作了这个框架。

20.阿尔维斯

这绝对是这份榜单里最酷的项目。我觉得它点击量没能更高的唯一原因是，当我把它列入我的榜单时，它已经在业内广为流传了。

它是一个面向 Web 应用的未来科幻和赛博朋克风格的图形 UI 框架，包含一些精美的动画和音频。如果您还没见过它，一定要尝试一下它的各种组件。虽然您一生中不太可能在多个项目中使用它，但它用起来真的非常有趣！

19.免费插图

这不仅仅是像此列表中的其他插图包一样的单个插图包，而是一个包含各种免费插图网站的目录，其中包含有关许可证、文件类型等信息，因此您可以确定哪个图形包适合您。

您可以按文件类型（AI、SVG、GIF、SKETCH、PNG、EPS 等）进行过滤，以便轻松找到符合您需求的内容。

18. MoreToggles.css

用于设置表单元素样式的 CSS 工具非常流行。这款工具包含大量用于切换按钮（即复选框）的样式。

一定要查看展示所有不同风格和颜色的画廊。

17. PatternFly

设计系统类别中的又一佳作。这个开源设计系统包含数十个组件和布局。

组件可用 HTML/CSS 或 React 提供，并有大量演示和文档可帮助您。

16.截图.Rocks

这是一个很棒的工具，只需点击几下即可创建美观的浏览器和移动端模型。可能对演示文稿的幻灯片有用。

输入要捕获的 URL，然后自定义设备和背景，然后下载为 PNG、SVG 或 JPEG。

15.支架用户界面

这个 UI 框架是另一个以可访问性为重点构建的框架，包含大约几十个组件和实用程序。

这个非常值得深入研究，因为它有相当不错的组件以及良好的文档和演示。

14. NoDesign.dev

它如此受欢迎我一点也不意外。它的广告宣传是“为缺乏艺术天赋的开发者提供的工具集合”。

说实话，这些工具的收集相当标准，并不只适合我们当中不懂艺术的人。

13.永旺

我发现了很多日期选择器组件，因此对这个组件表示赞赏，使它位于列表顶部附近。

这个轻量级、无依赖的日期/时间选择器是用 Web 组件构建的，可以在任何地方使用。

12.前端

这是另一种类型的前端工具包，其受欢迎程度与管理仪表板类似：登陆页面 UI 库。

这是一个可重复使用的 HTML 块和模板库，可帮助您通过简单的复制粘贴快速轻松地构建美观专业的落地页。虽然不免费，但包含 100 多个块和 6 个以上的模板。

11. Wireflow

这是列表中的另一个独特条目：用于创建漂亮的用户流原型的免费在线开源工具。

拖放并自定义“流程图”后，只需下载导出的图像即可。非常适合用于演示，您也可以将该工具安装为 PWA。

10.重制版

该工具做出了大胆的承诺：通过直接从 HTML/CSS 转到动态 Web 应用程序来帮助您构建应用程序和原型。

包括数据同步、内置 CRUD 功能、内置文件上传、内置用户帐户等等。你必须仔细阅读他们的文档才能真正了解这一切，但正如我所说，他们承诺的结果相当大胆。

9. CSS扫描专业版

我早在二月份就将其包含在时事通讯中，但最近已更新至 2.0 版本。

它是 Chrome、Firefox 和 Safari 浏览器“Inspect Element”的扩展程序，可让您即时获取页面上任何元素的样式、字体信息、尺寸、动画和选择器。虽然不是免费的，但目前为止开发者似乎很喜欢它。

8. Web代码工具

这是一组大型代码生成器，其中包括 CSS 效果（渐变、动画、阴影等）、HTML 工具（音频、视频等）、微数据、Twitter 卡等。

正如上面的一些条目所示，开发人员喜欢在线交互式生成器，因此这个集合中有很多可供选择。

7.阴影

这是另一个跻身前十的代码生成器。这个在线工具基于一篇文章（链接位于工具页面底部），该文章解释了如何使用分层阴影来更精细地控制阴影的平滑度。

很高兴有人愿意将这样的概念变为现实，以便更容易地使用原作者提出的技术。

6.快速

微软提供的是一套用于构建企业级网站、应用程序等的工具。

采用基于标准的 Web 组件构建，兼容多种技术，包括 React、Angular、ASP.NET、Aurelia 等。

5. CSS滚动阴影

这是我今年最喜欢的发现之一。滚动区域有时很难一眼就注意到。这款在线工具可以让你创建阴影，让可滚动的页面区域更明显地显示它们可滚动。

该工具可让您在抓取代码之前以交互方式调整背景颜色和阴影颜色。

4. CSS布局

这是一个非常棒的 CSS 流行组件、布局和样式的集合。它并非一个真正的框架，而只是一些独立的组件，它们没有任何依赖关系，只使用纯 CSS 编写。

由 91 个组件组成，您可以轻松自定义它们，因为它们只是 CSS。

3.显明的

我确信这个视频获得如此多的点击量是因为它最初是以旧名称“Dumbass”收录的。

尽管如此，它仍然是一款不错的工具，可以让你根据跨浏览器的 Web 标准构建组件。无需 JSX、无需 Shadow DOM，也无需复杂的框架。

2. css.gg

这是今年点击次数第二多的工具，最初是一个经过扩展的纯 CSS 图标集。

现在它包含 700 多个开源 CSS、SVG 和 Figma UI 图标。提供 SVG 精灵图、样式组件等多种格式。

1.黑客UI

今年点击量排名第一的工具竟然又是另一个 UI 库，这一点并不让我感到意外。它基于 React，最初宣传为不与任何品牌紧密耦合，因此很容易与你的项目集成。

有趣的是，GitHub 仓库显示该项目的开发目前处于暂停状态。我希望这只是暂时的，因为大家对这个项目的兴趣似乎相当浓厚，显示出它有潜力成为一个不错的永久选择。

您今年最喜欢的工具是什么？

我一直在寻找新的东西，所以如果您特别喜欢发现、使用任何东西，甚至是您亲自制作的东西，请随时在评论中发表或通过 Twitter 上的 DM联系我。

请务必订阅新闻通讯，以便每周了解最新、最棒的前端工具等信息。