大家都知道作為一名UI設(shè)計者，前端工作從工種劃分角度上講并不屬于他（她）的工作范疇之內(nèi)，但實際情況中，許多美工兼任了這一崗位，成為了一名獨特的“多面手”，而就目前的前端技術(shù)發(fā)展狀況看，一般的HTML+CSS已完全不能滿足市場和老板的期望，你的UI/UX打造的越炫酷，后面而來的頁面重構(gòu)所承擔(dān)的技術(shù)壓力就越大，不過哪里有危險，哪里就有英雄（小白鼠）出現(xiàn)，為了解決這種難題，像 CSS Hat 這種工具就孕育而生了。

CSS Hat 是一款寄居在Photoshop里的插件，他可以將PSD作品中每一層的元素即時生成標準的CSS樣式，此外還能生成更多的標準樣式，諸如CSS3,LESS,SCSS,SASS等。

產(chǎn)品特點：

1. CSS Code 即時生成，官方甚至用了 “We swear” 這樣的毒誓！

2. 插件支持Photoshop CS 4, CS 5, CS 6 以及 CC。

3. 插件可以在Mac或Win上無設(shè)備數(shù)量限制的運行

4. 除了生成CSS代碼，還可以針對瀏覽器聲明專有的樣式語句，支持代碼高亮，代碼批注，為樣式自動添加class名稱，為層元素自動添加寬，高樣式

5. 可以自動生成字體集，字體樣式，大小以及粗度。

使用貼士：

初次使用前需要將插件安裝進PS，然后手動在窗口-擴展功能菜單里找到CSS Hat，啟用即可

Extra：

CSS Hat 團隊為配合新品發(fā)布，還開發(fā)了另外一款姊妹插件：SUBTLE PATTERNS?【SP】

SP 是一款供設(shè)計師進行創(chuàng)意頭腦風(fēng)暴的圖案快速填充工具，內(nèi)置超過300種Patterns，單獨售價為11.99 $。

操作視頻：

http://instagram.com/p/cmdLgdRfdm/

SUBTLE PATTERNS?購買地址

CSS Hat 操作界面

?安裝窗口