大家好，我們除了埋頭寫代碼，有時候我們會有更多的選擇，調整我們的開發和設計流程，借助這些生產力工具，可以大大提高我們的開發效率，好了廢話不多說，今天我看了一篇關于這方面的文章，在這里分享給大家。

引導語

醒目的設計是吸引訪客注意力的有效方法。我整理了一些最有用的工具，可以幫助您改進設計工作流程。

有了這個集合，您將能夠為您的設計繪制草圖、選擇調色板、創建漸變、添加陰影、制作動畫、包括自定義背景、找到合適的插圖、試驗不同的布局系統和組件等等。

每個工具都將包括直接鏈接、說明和圖像預覽。

1、excalidraw

excalidraw.com，一個在線的手繪白板工具，白板工具簡單，用起來也順手，還可以多人一起共同編輯，建議大家來體驗下。

2、mycolor-space

mycolor.space，基于你輸入的顏色幫你生成完美的配色。

3、grabient

www.grabient.com，很棒的 UI 工具，用于生成線性漸變色。

4、box-shadows

shadows.brumm.af，你可以設置模糊、透明度、位置和其他參數設置陰影，幫我們生成陰影代碼。

5、grid-generator

cssgrid-generator.netlify.app，基于我們的需求，可視化的動態生成基本的 CSS 網格布局代碼。

6、keyframes

keyframes.app/animate，使用可視時間軸編輯器創建 CSS @keyframe 動畫。

7、svg-backgrounds

www.svgbackgrounds.com，通過這個工具，可輕松用在您的網站上設置的 SVG 背景集合。

8、undraw

undraw.co，一款國際范的免費開源插圖網站，總一個插畫適合你。

9、shaper

hihayk.github.io/shaper，界面風格塑造者。你可以使用這個工具在線嘗試排版、間距、顏色、字體等參數，幫你制作不同風格UI。

10、fontjoy

fontjoy.com，一個基于機器學習的在線字體生成器，幫你輕松生成個性化的字體（只支持英文）。

11、headless-ui

headlessui.com，一款漂亮的UI 組件，可以在使用 Vue 和 React 項目中很方便調用， 并能與Tailwind CSS 完美集成，在線使用起來十分方便，即所見，即所得。輕松復制案例代碼，就能將組件引入到你的項目里。

12、sizzy

sizzy.co，面向前端開發者的瀏覽器，讓你開發響應式設計站點變得更輕松。

結束

今天的分享就到就這里，這12個工具，你會使用哪些呢？