英文 | 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開發設計工具，如果您有任何問題，請在留言區給我，我會盡快回複。
學習更多技能
請點選下方公衆号