最值得收藏的 UI 設計規範建設指南。從概念釐清、靈感資源、方法工具三大維度，系統梳理 Style Guide、Pattern Library、Specification 三大核心概念及落地實踐。

概念釐清：三種「設計規範」的不同使命

1. Style Guide / Pattern Library（視覺側重）

以文檔/圖像呈現。內容：字體、字型、色板、品牌標識規範、Icon 等視覺要素展示說明。
作用：設計團隊內部風格復用、規範第三方品牌接入。
案例：Kickstarter Brand Assets、Dropbox Logos & Branding。

2. Style Guide / Pattern Library（前端開發側重）

以網頁文檔呈現。內容：UI 元素樣式風格 + 代碼片段（HTML/CSS/JS），含交互動效。如柵格系統、排版、按鈕、菜單、列表、對話框、Tooltip。
作用：設計開發協作統一風格、復用提效、保證體驗質量。
案例：MailChimp Pattern Library、Mapbox Styleguide。

3. 兩者結合

案例：Salesforce Product Style Guide、Lonely Planet Style Guide。

4. Specification（Spec，設計與開發交接）

設計師在視覺稿中直接創建。內容：Annotation（字體色值注釋）+ Measurement（尺寸邊距留白量度）。
作用：設計師與開發溝通交接，保證還原度。
工具見下文。

靈感與實例資源庫

• iOS Human Interface Guidelines、Material Guidelines（官方規範）
• Skeleton、Pure、Bootstrap（框架級 Pattern Library）
• Website Style Guide Resources（大量案例+文章工具書播客）
• Find Guidelines、Brand Style Guide Examples、All The Style Guides（直觀鏈接集）

方法與工具箱

視覺類 Style Guide 產出

方法不限，以準確展現視覺風格為準。可直接用圖形編輯軟件產出（Airbnb UI Toolkit、Salesforce1 UI Kit、Housing UI Style Guide）。
工具：
• Style Inventory for Sketch（插件，視覺稿生成 Style Guide）
• Style Tiles（PSD 模板）
• Frontify Style Guide（協作平台，含 Spec 工具）
• CSS Stats（解析網站 CSS 生成風格信息）
• Stylify Me（輸入 URL 自動生成 Style Guide，可導出 PDF）

前端類 Pattern Library 構建

借助前端框架高效產出（Bootstrap、Semantic UI 等）。
核心理論：Brad Frost「原子設計」—— 復用 Pattern Library 高效生產頁面。
工具：
• Pattern Lab（PHP 開源，Atomic Design 實踐）
• Web Starter Kit（Google 產品級樣板）
• Style Guide Boilerplate（PHP 樣板）

Spec 交接文檔高效產出

標準：降低設計師精力、開發者清晰理解。
PS 插件：
• specKing（$19，推薦）
• Specctr（$49）
• Markly App（$39.99，支持 PS/Sketch）
• Sketch Measure（免費）
其他：PNG Express（$29）、Ink（免費）
協作平台：
• Avocode（切圖、Spec、圖層轉 CSS）
• Zeplin（優質設計協作，現僅支持 Sketch，PS 開發中）
• Frontify（含 Spec）
• Assistor PS（獨立運行 PS 輔助軟件，含切圖/Spec）

建議路徑

1. 先建視覺 Style Guide（品牌/色板/字體/Icon）
2. 再建組件級 Pattern Library（含代碼片段）
3. 項目交接時產出 Spec（標注/量度）
4. 選對工具，讓規範活在工作流裡，而非躺在網盤裡