該文章對前端開發人員來說是一個非常有價值的資源。它提供了一個集中的位置，幫助開發人員發現和了解各種前端開發工具和資源。無論是初學者還是有經驗的開發人員，都可以從這些列出的網站中受益。
Colors
首先是顔色。如果你曾經因為無法找到好的顔色組合而陷入項目困境，這裡有幾個網站可以幫助你解決問題。
Color Hunt 和 Muzli Colors 是兩個生成配色方案的網站。
Color Hunt 展示了設計師們制作的手工調色闆。調色闆按類别組織，例如粉彩色、複古色或深色。然後，可以輕松地将顔色代碼複制到你的項目中，并儲存以便将來再次檢視。
Muzli colors 功能允許更多的自定義。可以輸入特定的顔色代碼或選擇一種顔色，以生成基于你的選擇的調色闆。然後，該網站會顯示調色闆在使用中的示例。
Gradients
如果你選對了顔色搭配，漸變效果可以讓你的網站看起來很棒，但如果搭配不當，它們會讓你的網站顯得不專業。
WebGradients是一個網站，彙集了超過180個手工制作的漸變色，讓您可以輕松地将CSS複制并粘貼到您的項目中，使其脫穎而出！
Accessibility 無障礙性
當涉及到顔色時，確定對比度和可通路性在确定使用的顔色方面起着重要作用。
像 WhoCanUse 這樣的工具可以讓您輸入文本和背景顔色代碼，并可視化它們在不同視覺障礙人群中的對比度，以及受其影響的人數。
它還展示了在直射陽光下和啟用夜間模式時的顔色組合效果。這使得在你想要確定顔色調色闆保持易于通路且保持高對比度比率時更容易規劃。
CSS 生成器
接下來，當你隻是想要得到正确的陰影值或正确的動畫關鍵幀時，重寫相同的CSS可能會很繁瑣。以下是一些可以加速工作流程的工具：
動畫
Animista是一個生成CSS動畫的有用工具。您可以選擇各種動畫，如淡入淡出、滑動和彈跳，并自定義持續時間和時間，以建立獨特的效果，為您的網站增添活力。
Effects
GetWaves，這個網站可以輕松地的設計建立SVG波浪。隻需選擇方向和顔色，就可生成代碼，這可以幫助我們在建立着陸頁時分離設計。
帶有和不帶有來自getwaves的SVG波浪的落地頁示例：
接下來是 Neumorphism Generator：這是一個幫助你建立在UI設計中流行的柔和陰影效果的工具。
這可以幫助你的設計中的定價或使用者資料卡片更加突出。
Hype4 Academy 還提供了一個生成玻璃效果的工具，可以讓你的元素呈現半透明的外觀。如果你的背景與卡片元件相似，使用這個工具可以讓卡片元件更加突出，非常實用。
如果你發現自己不得不重寫相同的HTML和CSS來建立常見的布局和元素，比如自定義按鈕和切換按鈕，那麼你可能想要檢視 UI Verse。
清單
在啟動網站之前，需要完成各種各樣的任務。無論是使用正确的字型格式還是重置你的CSS，很容易忘記關鍵步驟。下面這些網站提供了一個清單，涵蓋了從可通路性和性能到SEO和安全性的所有内容。
全面檢查清單
Frontendchecklist.io 提供了一個任務清單，以確定在釋出您的網站之前完成所有任務，以確定最終産品的完美。
這個清單根據任務的重要性進行顔色編碼，并包括一些提示，例如確定所有頁面都有一個網站圖示和使用最佳字型格式。
每個任務都包含資源，可以通過點選向上箭頭來了解更多資訊：
每個元件/頁面的清單
Checklist.design 還提供了一個清單，列出了不同常見元素和頁面（如文本字段或登入頁面）中應包含的内容。
UI/UX
如果你在尋找設計使用者界面的靈感方面遇到困難，這裡有幾個網站可以參考：
PageCollective 該網站展示了各種其他網站的設計，從落地頁到定價頁。
在流行網站上檢視設計的優點在于你可以看到其他網站如何解決現實問題并確定功能性，而不僅僅關注美學。
還有Refero，它已經從各種真實網站中編制了超過12,000個完整頁面截圖。
https://segmentfault.com/img/bVc8pBa
User-Submitted
Dribbble 是另一個平台，這個網站有一個設計師社群，他們分享他們設計的截圖。你可以從中找到關于布局、動畫、插圖等的靈感。Dribbble的不同之處在于，這些設計大多是模拟圖，通常更注重美觀。
圖形
接下來，尋找免費使用的圖形和圖示可能會很困難，無論是用來解釋産品的插圖，還是提供更好使用者體驗的圖示。
Stock Photos
Unsplash提供超過3百萬張免費高品質的庫存照片供您使用。這些照片可以用于您的主要部分，填補空白處。
矢量圖形和圖示
另一方面，如果你需要為你的網站提供插圖或圖示，Freepik和Icons8提供矢量圖形和圖示。使用矢量圖形的好處是你可以輕松定制顔色并調整它們的大小，而不會失去品質。
Icons8 提供了大量免費圖示，約有 51 種風格可供選擇，這使得在設計和網站中使用圖示變得更加容易，而不必從頭開始設計它們。
如果你更喜歡簡單地複制和粘貼一些代碼來加載你的圖示，Font Awesome 是一個值得一看的網站。
他們提供了一些工具包，可以從中加載圖示，隻需将代碼粘貼到HTML頭部，或者使用CDN JS上的CDN。
動畫
最後，LottieFiles 為你提供了可供選擇的免費動畫，您可以輕松地将這些動畫添加到您的網站中，使其更加生動活潑。
字型
字型也是網站的重要組成部分，以下這些工具可以幫助您選擇和選擇獨特的字型，使你的網站脫穎而出。
免費字型
Google Fonts 提供了超過一千種免費字型供你選擇并在您的網站上使用。
要使用它們，首先選擇你需要的字型，還可以選擇所需的字型粗細。
要在你的網站上使用它們，隻需複制此代碼并将其粘貼到網站的頭部即可。
現在你就可以通過在樣式表中更改字型系列來開始使用該字型，Google字型提供了你需要更改的屬性。
從這裡開始，你可以像使用任何字型一樣使用它，并相應地更改字型的粗細和大小。
生成字型搭配
在任何網站上，你通常也會想要使用大約兩種字型，一種通常用于标題，另一種用于正文文本。Fontjoy 是一個可以幫助你生成字型配對并讓你可視化它們一起使用時的外觀的網站。你可以選擇你希望字型是相似的，平衡的，或者有高對比度的。
這些字型也可以從Google字型庫中下載下傳。
生成字型比例尺
如果你發現自己為字型大小配置設定随機值，但想要更加一緻，typescale.com 提供了你可以實作的比例尺。
該網站也允許你選擇字型和字重。然後，你可以設定基礎大小，它會自動生成你需要的大小。該網站還會生成你需要的CSS，是以你可以将其複制到你的樣式表，你就會得到一個為你的标題标簽準備好的字型比例