UI知識，教你建立一套UI設(shè)計(jì)規(guī)范

Web Starter Kit（HTML, CSS, JS） | Google Web Fundamentals 提供的 Web 生產(chǎn)樣板，支持創(chuàng)建“Pattern Library”形式的文檔。（翻墻）

Style Guide Boilerplate（PHP） | “Pattern Library”樣板，類似 Pattern Lab。

更多方法類文章和工具列表可參考：

Website Style Guide Resources
50 Style Guide Tools, Articles, Books and Resources | Tuts+

“Spec”應(yīng)以盡量降低設(shè)計(jì)師精力消耗，并能讓開發(fā)人員清晰理解為標(biāo)準(zhǔn)。提高效率并保證質(zhì)量的基礎(chǔ)，是選擇合適的工具。

在繪制設(shè)計(jì)稿所用的圖形編輯軟件中啟用擴(kuò)展和插件，直接生產(chǎn)“Spec”，高效直擊主題：

specKing | Photoshop（$19，推薦，正在使用）
Specctr | Photoshop, Illustrator（$49 ,PS 和 AI 單獨(dú)出售）
Markly App | Photoshop, Sketch（$39.99，PS 和 Sketch 單獨(dú)出售）
Sketch Measure | Sketch（自由）

一些其他插件也提供制作“Spec”功能，比如：

PNG EXPRESS | Automated Design Delivery for Photoshop（$29）
Ink | A Photoshop documentor plugin（免費(fèi)）

團(tuán)隊(duì)協(xié)作平臺(tái)和其他工具：

Avocode | 簡化設(shè)計(jì)師與開發(fā)人員之間的協(xié)作流程（Web 產(chǎn)品），提供 Slice（切圖）、Spec、圖層轉(zhuǎn) CSS 等功能。

Zeplin | 同樣是一款有質(zhì)量的設(shè)計(jì)協(xié)作軟件。目前僅支持 Sketch 設(shè)計(jì)稿，PS 支持仍在開發(fā)中。產(chǎn)品處于邀請內(nèi)側(cè)階段。

Frontify | 上文“Style Guide 工具”提到過，屬協(xié)作平臺(tái)，支持對設(shè)計(jì)稿“Spec”。

Assistor PS | 可獨(dú)立在系統(tǒng)中運(yùn)行的 PS 協(xié)助軟件，但需借用 PS 載入設(shè)計(jì)文檔。提供 Slice，Spec 等功能。