2021 년 60 개의 가장 인기있는 프론트 엔드 도구

1 년이 지났고 지난 12 개월 동안 Web Tools Weekly Newsletter Archives를 검토하게되어 2021 년에 독자들이 찾은 가장 흥미로운 프론트 엔드 도구를 찾고 있습니다. 그래서 2022 년을 시작하기 위해 60 개의 가장 인기있는 도구 목록을 작성했습니다. 오늘부터 프론트 엔드 프로젝트에서 사용할 수있는 도구가 하나 이상 있다고 생각합니다.

일부 프론트 엔드 도구는 매우 실용적이지만 다른 도구는 호기심 때문에 목록에있을 수 있습니다 (클릭만으로 판단합니다). 연간 목록을 만드는 많은 도구가 비교적 새롭기 때문에 내년에 프론트 엔드 도구가 인기가 될 수있는 좋은 표시라고 생각합니다.

위에서 아래로 계산하십시오!

### 목차

-60. 소품을 엽니 다

• 59. Nextui
• 58. 도프폴리오
• 57. 비즈
• 56. 10015 도구
• 55. 스노우
• 54. 꼬리
• 53. maplibre
• 52. SVG Repo
• 51. 애니메이션 배경
• 50. pico.css
• 49. 코딩 글꼴
• 48. ui-oreumorphism
• 47. 아름다운 CSS 버튼
• 46. 셰이퍼
• 45. 명성
• 44. html.cafe
• 43. 차트 .CSS
• 42. 버튼 생성기
• 41. Doodad 패턴 생성기
• 40. KABOOM
• 39. Skuawk
• 38. 유리 상원 CSS 생성기
• 37. 칼리아
• 36. adminjs
• 35. 팬케이크
• 34. 모자이크 라이트
• 33. Iconduck
• 32. Luxa CSS
• 31. 반짝임
• 30. 구성 요소 ai
• 29. 유니 코드 화살표
• 28. 스케일 클램프 생성기 유형
• 27. animxyz
• 26. 프론트 엔드 툴킷
• 25. Colorspalettes.earth
• 24. 자르지 않은
• 23. Lowdefy
• 22. 자바 스크립트 부스터
• 21. 레이아웃 패턴
• 20. 기준선 배경 제거
• 19. Theatre.js
• 18. Transition.css
• 17. 구성 요소 갤러리
• 16. party.js
• 15. 헤드리스 UI
• 14. 터보
• 13. tidy.js
• 12. 테일 키트
• 11. 테일 윈드 구성 요소
• 10. Pikaday
• 9. HTML 보일러 플레이트
• 8. 회전
• 7. 리주
• 6. 데부이
• 5. 화분
• 4. 대안
• 3. uisual
• 2. supabase ui
• 1. CSS 레이아웃 생성기
• 2021 년에 가장 좋아하는 프론트 엔드 도구는 무엇입니까?

### 60. 열린 소품

Open Props는 CSS 사용자 정의 속성으로 구성된 수제 디자인 토큰 세트를 제공합니다. 이 특별한 CSS 기능으로 인해 이러한 도구가 점점 더 일반화 될 것임을 알 수 있습니다. Animations.css, Borders.css, Fonts.css, Zindex.css 등과 같은 작고 유용한 사용자 정의 속성 컬렉션을 소개 할 수 있습니다. 또는 메인 오픈 소품 파일을 사용하여 한 번에 모든 것을 얻을 수 있습니다.

이것은 확실히 조심해야 할 프론트 엔드 도구이며, 사용 가능한 토큰 라이브러리를 구축하는 데 도움이된다면 좋은 기여 목표이기도합니다.

59. Nextui

인기있는 CSS-in-JS 솔루션 스티치를 사용하고 기본 색상 팔레트와 함께 인기있는 CSS-in-JS 솔루션 스티치를 사용하고 기본 색상 팔레트와 함께 로그인 페이지 또는 원래 브랜드와 관련이없는 기타 컨텐츠를 신속하게 구축하는 데 유용 할 수있는 최신 React 라이브러리입니다.

현재 개발의 알파 단계로 등재되어 있으므로 내년에주의를 기울여야 할 또 다른 도구입니다.

58. 도페폴리오

자신만의 개발자 포트폴리오를 쉽게 만들 수있는 방법을 찾고 있다면 Dopefolio는 SEO에 최적화되고 등대 점수가 높은 빠른 솔루션입니다.

Live Demos는 (응답 형 등) 모양을 알려주고 색상 선택기 구성 요소가 포함되어있어 자신이 선호하는 템플릿 기본 색상을 실시간으로 테스트 할 수 있습니다.

57. 비즈

올해의 프론트 엔드 도구 목록의 고유 한 도구입니다. Vizzu는 애니메이션 데이터 스토리 및 시각화를 만들기위한 오픈 소스 JavaScript 라이브러리입니다. 아마도 그 인기는 오늘날 의료 데이터를 만들고 포함시킬 필요성 때문일 것입니다.

이 라이브러리를 사용하면 정적 데이터 차트, 애니메이션 차트 및 데이터 스토리를 쉽게 구축 할 수 있습니다. TV 시리즈 친구들의 전체 실행에서 어떤 카메오 캐릭터가 가장 많은 라인을 가지고 있는지 보여주는 데이터 스토리를 포함하여 애니메이션 차트 또는 데이터 스토리의 실시간 예를 볼 수 있습니다.

56. 10015 도구

매년 이와 같은 프론트 엔드 도구를 찾는 것 같습니다. 10015 도구는 단일 도구가 아닌 일련의 프론트 엔드 도구입니다. 여기에는 텍스트 도구, 이미지 도구, CSS 도구, 코딩 도구 (예 : 미니 퍼), 컬러 도구, 소셜 미디어 도구 및 기타 기타 범주의 도구가 포함됩니다.

이것은 내가 본 가장 포괄적 인 올인원 솔루션 중 하나이므로 항상 다시 사용할 수있는 유용한 프론트 엔드 도구를 찾을 수 있다고 확신합니다.

55. Snoweb

아이콘 세트는 항상 인기가 있으며 매년 최소한 12 개의 새로운 아이콘 세트를 발견합니다. 이 아이콘 세트에는 최적화 된 SVG 아이콘이 포함되어 있으며, 그 중 다수는 오프닝/닫는 봉투 아이콘과 같이 마우스 위로 올릴 때 내장 애니메이션이 있습니다.

많은 아이콘 사이트와 마찬가지로 카테고리별로 키워드 또는 필터로 검색 할 수 있습니다. 그 중 하나는 브랜드 카테고리로 트위터, Facebook, Vimeo, YouTube, Snapchat 등에 대한 아이콘이 포함되어 있습니다.

54. 꼬리

이것은 Tailwind가 더 인기를 얻음으로써 지난 몇 년 동안 트렌드였습니다. 이 프론트 엔드 도구는 Tailwind CSS를 사용하는 프로젝트를위한 드래그 앤 드롭 페이지 빌더입니다.

여기에는 15 개의 카테고리 각각에 대해 2 개의 무료 "블록"이 포함되어 있으므로 매월 나머지를 잠금 해제하기 위해 지불 할 수있는 무료 물건이 많이 있습니다.

53. maplibre

이 오픈 소스 맵 갤러리는 3 월에 시작되었으며 연중 인기를 얻었습니다. iOS 및 Android 애플리케이션에 맵을 표시하기위한 JavaScript 라이브러리와 SDK가 포함되어 있습니다.

웹 기반 프론트 엔드 도구의 가능성을 이해하려면 문서에는 JavaScript 사용의 많은 예가 포함되어 있습니다.

52. SVG Repo

SVG Repo는 전적으로 숫자를 기준으로 목록에 있습니다. 30 만 명이 넘는 무료 SVG 기반 그래픽 및 아이콘이있는 라이브러리이며, 대부분 상업적으로 사용할 수 있습니다.

당신이 선택한 각 아이콘은 어떤 라이센스에 속하는지를 알려줍니다. 키워드로 검색하고 나중에 사용하기 위해 좋아하는 아이콘을 "저장"할 수 있습니다 (로그인 필요 없음).

51. 애니메이션 배경

이 도구는 올해 60 위에 있지만 가장 실용적인 프론트 엔드 도구는 아닐 수도 있습니다. 내가 처음에 말했듯이, 순수한 호기심에서 클릭하는 것들이 있습니다. 다양한 Codepen 데모의 애니메이션 배경 라이브러리입니다.

라이브러리는 배경을 사전 녹음 된 비디오로 표시하기 때문에 유용하므로 모든 데모로드에 대해 걱정할 필요가 없으며 브라우저 탭이 중단됩니다. 일반적으로 많은 JavaScript와 CSS를 사용하므로 이러한 도구를주의 깊게 사용하십시오 (있는 경우).

50. pico.css

이것은 오늘날 인기있는 CSS 프레임 워크와 다릅니다. 본격적인 프레임 워크보다 시작 CSS 파일 (예 : 재설정)과 비슷합니다.

pico.css는 태그에 많은 클래스를 추가하지 않고 모든 기본 HTML 요소 (여기에서 미리 볼 수 있음)에 대한 우아한 기본 스타일을 제공하며 전체 파일은 GZIP 후 10KB보다 작습니다.

49. 코딩 글꼴

인코딩 글꼴은 최근에 흥미 진진한 새로운 트렌드 인 것으로 보이며 CSS- 트릭은이 작은 대화식 정보 응용 프로그램을 만들기 위해이를 활용합니다.

왼쪽에서 글꼴을 선택하여 샘플 코드, 글꼴 정보 (하이픈, 이탤릭체 등), 비용 (주로 무료) 및 HTML, CSS 또는 JavaScript 샘플 코드를 표시하는 옵션을 표시합니다.

48. UI 중심

이 React Library는 몇 년 전에 구식으로 보였던 오래된 시뮬레이션 트렌드를 기반으로합니다. 이 트렌드가 돌아올까요? 아마. 사실, 작년에 처음 으로이 React Library를 공유했지만 약 2 년이 걸렸습니다.

라이브러리에는 다수의 다른 구성 요소가 포함되어 있으며 모두 "새로운 시뮬레이션"모양을 달성합니다. 흥미롭게도 많은 프로젝트에 적합하지 않을 것입니다.

47. 아름다운 CSS 버튼

거의 모든 앱이나 웹 사이트에는 버튼이 필요하므로 이러한 컬렉션은 항상 인기가 있습니다. 이 버튼 중 다수는 다른 곳에서 볼 수있는 것과 다릅니다.

많은 버튼에는 흥미로운 호버 효과가 포함되어 있으며 페이지에서 직접 단일 버튼의 HTML 및 CSS를 쉽게 복사하여 붙여 넣을 수 있습니다.

46. ​​셰이퍼

이 대화식 도구를 사용하면 페이지의 다양한 UI 설정을 실시간으로 조정하여 다른 페이지 요소를 구축 할 수 있습니다. 선호도에 컨텐츠를 조정 한 후에는 CSS 사용자 정의 속성을 사용하는 코드를 얻을 수 있습니다.

데모보기와 "사양"보기 (예 : 코드 및 기타 유용한 정보) 사이를 전환 할 수 있습니다. 이 도구는 타이포그래피 및 나머지 UI 스타일에 중점을 두므로 레이아웃을 올바르게 보이게하는 핵심 부분입니다.

45. 명성

이것은 우체국과 같은 브라우저의 텍스트 기반 HTTP 클라이언트입니다. 요청을 일반 텍스트로 정의 할 수 있으며, 이는 요점으로 저장할 수 있습니다. 여기에는 고립 된 쿠키 관리가 포함되어 있으며 밝고 어두운 모드가 모두 있습니다.

저자가 설명했듯이,“내가 일할 때 이와 같은 응용 프로그램이 필요하기 때문에 명성을 만들었고… 외부 API와 상호 작용합니다.”

44. html. cafe

이것은 아마도 전체 목록에서 가장 쉬운 도구 일 것입니다. html.cafe는 다소 겸손한 코드펜이므로 더 나은 용어가 부족합니다. 나는 사람들이 할 수있는 일을 할 수있는 강력한 도구가 이미 있기 때문에 사람들이 이런 종류의 일에 관심이 있다고 생각하지 않습니다. 그럼에도 불구하고 실시간 미리보기 기능을 갖춘 매우 간단한 HTML 편집기입니다.

Codepen과 같은 별도의 CSS 또는 JavaScript 창이 없지만 쉽게 할 수 있습니다.

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 Generator

这是一个在线生成器，允许您在页面元素上构建“玻璃态”效果——有点像磨砂玻璃。此工具显然应该是更大的 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 Arrows

这非常简单明了。Unicode Arrows 是一个一站式位置，用于复制和粘贴——您猜对了——Unicode 箭头以及每个箭头的相关十六进制代码。

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

28. Type Scale Clamp Generator

这不是第一个尝试为您生成类型比例的工具，但它是一个相对较新的工具，它结合了 CSS 的 clamp() 函数。

前端工具允许您选择范围、字体、预览文本，您甚至可以测试响应能力（尽管我不认为后者有多大用处，因为这只是文本）。

27. AnimXYZ

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

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

26. Frontend Toolkit

这是另一个多合一工具解决方案，其中包含 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. Layout Patterns

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

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

20. Baseline Background Remover

不可否认，基于 AI 的背景去除工具最近已经多如牛毛。这个工具是免费的，并且在我简短的测试中效果非常好。

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

19. Theatre.js

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

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

18. Transition.css

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

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

17. The Component Gallery

这有点像设计系统的集合，因为它包含来自各种品牌（包括 eBay、高盛、GOV.UK 等等）使用各种技术（React、CSS、Angular、Vue 等）构建的真实设计系统的组件示例。

它可以作为构建自己设计系统的任何人的便捷参考，因为您可以比较此处包含的现有系统中的相同组件。

16. party.js

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

您只会在非常特殊的情况下使用它，但很高兴您可以自定义粒子形状、粒子数量、分布等等。

15. Headless UI

用纳乔·利布雷的话来说，我们现在真的要进入正题了。这个 UI 组件库于 2020 年底发布，已经在 GitHub 上获得了超过 12,000 个星标。

组件（下拉菜单、选项卡、弹出窗口等）是“无头”的。这并不意味着它们的容量被削弱了；这意味着它们没有样式，因此您可以根据自己的喜好为它们设置品牌。它们也是完全可访问的，旨在与 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 主题，到目前为止只有大约 3,000 次安装，但它能够进入今年榜单的前五名。

3. UIsual

这是一个前端模板集合，但带有一些我认为许多人似乎都很欣赏的巧妙之处：它们是灰度的。

该集合目前包含八个具有不同布局的模板。由于没有任何基于颜色的品牌，这些模板是一个不错的选择，可以根据自己的需求进行自定义，而不会像其他登录页面那样。

2. Supabase UI

这是另一个开源组件库，这个库用于 React，并专门为 Supabase 产品（一个开源的 Firebase 替代品）设计。

它支持 Tailwind，我还应该指出它仍处于早期开发阶段。尽管如此，它仍然很受欢迎，足以进入此列表的第二名。

1. CSS Layout Generator

这是去年我的新闻通讯中点击次数最多的工具。它是一个功能齐全的 CSS 和 JSX 生成器，用于使用 CSS 网格布局语法生成不同类型的布局。

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

您最喜欢的2021年前端工具是什么？

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

您在过去一年中发现的、此列表中未提及的前端工具中您最喜欢的是哪些？请随时在评论中留言。您还可以订阅我的新闻通讯，以获取 2022 年的更多前端工具，如果您自己构建了一些想在以后的问题中分享的内容，请随时与我联系。

위 내용은 2021 년 60 개의 가장 인기있는 프론트 엔드 도구의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!