有經驗的網頁設計師和前端知道：設計網頁前通常在白板/草稿紙畫草圖構思佈局。雖多選白板，但也有許多用軟件「打草稿」，最受青睐包括Sketch內置模板功能。相比白板手繪，Sketch模板更規整、組織更有條理，保證向後兼容性與生產力。好開始是成功一半，開好頭省卻返工麻煩。此角度看Sketch確是當代UI/網頁設計良心工具。

內置模板與基礎功能保障基本需求，第三方插件極好補充。今日推薦15個針對網頁設計師的Sketch插件，覆蓋不同設計開發需求。

1. Sketch Notebook

超方便草圖設計插件，安裝後工作區多出側邊欄，含多種元素，輕松添加/刪除註釋、調整位置、管理可見性。

2. CSS Buddy

在Sketch工作區為圖層添加CSS樣式。基本功能：輕松控制元素寬高、透明度、陰影、邊框、背景等屬性。

3. Day Player

任意Sketch文檔插入可定制圖片佔位符，內置多種佔位符服務。激活控件可設圖片寬高等元素。

4. Material Design Colour Palette Sketch Plugin

配色方案生成插件，一鍵生成快捷好用，直接工作區調用。色相、明度等屬性輕鬆控制，實用方便。

5. Content Generator Sketch Plugin

快速生成虛擬數據：用戶頭像、名稱、地理信息等作內容填充。安裝後選圖層，菜單Plugin→Generator選Geo/Persona/Photos即可。

6. Blade

將設計自動生成HTML代碼，圖層分組用<div>包裹，文本用<p>表示。設置圖層名稱可轉化為DOM元素。

7. Modulizer

控制按鈕、模塊、區域等視覺元素內邊距。所選模塊有背景時可通過調整內邊距輕鬆替換。

8. Typographic Scale

針對特定文字圖層縮放出一組字體尺寸從小到大的文字圖層。選中多個圖層組（含至少一個文字圖層）才能生成成功。

9. Dynamic Button

動態按鈕插件，生成按鈕可設內容、樣式、內外邊距等屬性。安裝後Command+J快速將文本轉按鈕。設置內邊距在文本圖層下用(0:0:0:0)參數搞定。

10. Sketch Measure

測量插件，需Sketch 3.0.2+。除測量距離尺寸外，可測圖層各種屬性，每功能有快捷鍵支持。

11. Sketch Framer

將Sketch文件導出為FramerJS，制作可交互原型。矯正Sketch-framer-config.js可定制生成文檔類型。常見操作：導入庫文件應用到整個項目。

12. Sketch.js

易用jQuery插件，生成可供訪客繪圖畫布。

13. Sketch DevTools

實用開發工具套件，以插件形式安裝。Sketch偏向UI設計，網頁開發有短板，此套正好彌補。解決無Debug工具、無API文檔等問題。

14. Sketch Preview

為程序提供更優秀預覽功能，用⌘P快捷鍵為選中畫板配置大小等屬性（⌘⇧P），生成圖像文件在Skala Preview打開。

15. Sketch Data Parser

分析數據並補充設計，下載sketch-data-parser.sketch雙擊安裝即可。