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

引導(dǎo)語

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

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

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

1、excalidraw

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

2、mycolor-space

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

3、grabient

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

4、box-shadows

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

5、grid-generator

cssgrid-generator.netlify.app，基于我們的需求，可視化的動態(tài)生成基本的 CSS 網(wǎng)格布局代碼。

6、keyframes

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

7、svg-backgrounds

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

8、undraw

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

9、shaper

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

10、fontjoy

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

11、headless-ui

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

12、sizzy

sizzy.co，面向前端開發(fā)者的瀏覽器，讓你開發(fā)響應(yīng)式設(shè)計站點變得更輕松。

結(jié)束

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