英文 | https://levelup.gitconnected.com/45-front-end-developer-tools-e496b9c3503
翻译 | 杨小爱
工具，对于我们人类来讲，实在是太重要了，而在我们的日常工作与生活中，只要是好的工具，都可以为我们带来方便提升效率。
作为开发者的我们，学会使用一些适合自己的开发工具，可以让我们的生活更加自由轻松，因此，今天我跟大家分享45款实用的工具，主要是针对开发与设计人员的，希望这些工具能够帮助到你。
现在，我们就开始今天的内容。
1、Checklist Design
地址：https://www.checklist.design
在设计按钮、卡片、表格等网站元素时，通过网站上提供信息和基本元素来综合网站设计知识的地方。
2、Web Gradients
地址：https://webgradients.com/
在这里我们可以实现网站漂亮的渐变背景颜色的设计与合成。
3、Webframe
地址：https://webframe.xyz
收集精美的 Web 应用程序设计并每周更新。
4、spline
地址：https://spline.design
该应用程序可帮助我们为网站创建 3D 效果。
5、type anything
地址：https://app.typeanything.io
允许我们为网站设计排版Web 应用程序，例如字体选择、字体粗细、字间距……
6、Laws Of UX
地址：https://lawsofux.com
设计师在构建网站用户界面时的最佳实践集合。
7、animista
地址：https://animista.net
帮助我们练习用于网站开发的 CSS 动画效果的 Web 应用程序。
8、screenlane
地址：https://screenlane.com
专门为网站综合UI设计。
9、Froala 设计块
地址：https://froala.com
网站设计合成，上面有超过 170 个 UI 响应式设计。
10、 3Dicons
地址：https://3dicons.co
用于网站设计和开发的免费 3D 图标集合。
11、Collectui
地址：https://collectui.com
UI设计摘要并每天更新。
12、humaaans
地址：https://www.humaaans.com
为设计师收集人物插图。
13、设计原则
地址：https://principles.design
一个致力于提供设计原则和方法的开源集合。
14、learn-anything
地址：https://learn-anything.xyz
当我们想学习一些东西时，这里提供详细的路线。
15、简历设计
地址：https://standardresume.co
一个 Web 应用程序，可帮助设计人员、开发人员创建精美的简历/简历。
16、pictogon
地址：https://pictogon.com
帮助您为您的网站创建交互式图像。
17、 ui play book
地址：https://uiplaybook.dev
用于构建 UI 组件的文档。
18、ui patterns
地址：http://uipatterns.io
它可以帮助我们发现设计模式以及如何解决网站设计过程中的常见问题。
19、 网站博物馆
地址：https://www.kapwing.com
是综合各个发展阶段著名网站设计的地方。在我看来，它将帮助我们更好地了解如何设计和开发网站界面。
20、用户体验挑战
地址：https://uxtools.co
网站用户体验设计练习集。我喜欢它的是，在每个挑战中，都会有特定的教程文章。
21、用户体验项目清单
地址：https://uxchecklist.github.io
一个帮助我们检查 UX 功能是否符合设计标准的地方。
22、登陆页面清单
地址：https://landingpage.fyi
综合了 100 多种登陆页面工具，例如选择域名、登陆页面设计软件、标志制作工具……
23、 Ray
地址：https://ray.so
为我们的代码创建漂亮图像的在线软件。
24、像素测量
地址：https://getpixelsnap.com
帮助我们精度测量网站中元素之间的距离。
25、Patternpad
地址：https://patternpad.com
为网站创建漂亮背景图案的Web 应用程序。
26、 Klart
地址：https://klart.io
该网站的一组漂亮的调色板。
27、 Drawkit
地址：https://drawkit.com
为 Web 项目提供免费的插图和图标资源。
28、 Get Waves
地址：https://getwaves.io
为网站创建波浪动画效果的工具。
29、用户体验流
地址：https://products.ls.graphics
它可以帮助我们在 Sketch、Figma 和 Adobe XD 中创建漂亮的网站布局变得容易。
30、Code to go
地址：https://codetogo.io
合成片段，帮助我们解决网站开发中的常见问题。
31、Blobmaker
地址：https://www.blobmaker.app
帮助我们轻松地为网页元素创建 blob 效果。
32、网页代码工具
地址：https://webcode.tools
为 HTML、CSS、元标记、JSON... 合成生成器工具
33、Responsively
地址：https://responsively.app
该应用程序可帮助我们在许多不同的设备屏幕上快速测试网站项目。
34、 前端清单
地址：https://frontendchecklist.io
可以帮助我们在构建前端项目时检查要点的工具。
35、Sketch2Code
地址：https://sketch2code.azurewebsites.net
使用 AI 将手绘设计转换为 HTML 的工具。
36、Bootstrap Magic 4.0
地址：https://sketch2code.azurewebsites.net
它可以帮助我们在使用 Bootstrap4 设计网站时，让主题设计变得快速和容易。
37、 Glassmorphism CSS 生成器
地址：https://ui.glass/generator/
帮助我们为网站设计创建玻璃效果。
38、UnusedCSS
地址：https://unused-css.com
为 Web 项目删除不必要的 CSS 属性。
39、Magic Pattern
地址：https://www.magicpattern.design
网站设计工具的集合。
40、Cool Backgrounds
地址：https://coolbackgrounds.io
帮助我们为网站开发创建精美的背景图像效果。
41、Loremipsum
地址：https://loremipsum.io
帮助我们在网站开发过程中快速创建内容。
42、谷歌字体
地址：https://fonts.google.com
它是网站免费字体的集合。
43、Wicked Backgrounds
地址：https://wickedbackgrounds.com
44、 自定义形状分隔线
地址：https://www.shapedivider.app/
帮助我们为网站项目创建漂亮的形状。
45、UI Design Daily
地址：https://www.uidesigndaily.com
它是一个为网页设计合成 UI 设计的地方。
总结
我希望这篇文章能帮助到你，可以快速选择适合自己的Web开发设计工具，如果您有任何问题，请在留言区给我，我会尽快回复。
学习更多技能
请点击下方公众号
121
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
