UI知识，教你建立一套UI设计规范

iOS Human Interface Guidelines

Material Guidelines（翻墙）

采用概念 2 的：

Skeleton

Pure

Bootstrap

而概念 3 往往仅在公司或团队内部使用（详见下文“工具”）。

灵感和实例资源：

Website Style Guide Resources | 收录大量案例，该项目同时也收录了相关文章、工具、书籍、播客等。

Find Guidelines | 一个直观的 Guideline 官方链接收集列表。

Brand Style Guide Examples | 同上

All The Style Guides | 同上，托管在 Tumblr ，以博客形式呈现。

方法不限，以能够准确展现视觉设计风格和品牌识别（Identity）的规范为标准。正因其偏视觉化，编写文档不是必须的，可直接用图形编辑软件产出。例如：

Airbnb UI Toolkit Web

Salesforce1 UI Kit

Housing UI Style Guide

也可借助工具：

Style Inventory for Sketch | Sketch 插件，基于视觉稿生成 “Style Guide”。

Style Tiles | 用于快速制作“Style Guide”的 PSD 模版，

Frontify Style Guide | Frontify 是一个面向设计团队的协作平台，提供“Style Guide”生成和“Spec”工具。

CSS Stats | 解析 URl 对应网站的 Style（主要依靠分析 CSS 文件），展示相关信息，比如字体尺寸（font-size）、色板、浮动（float）采用数量等。

Stylify Me | 填入网站 URL，自动生成对应页面的“Style Guide”。提供 PDF 文件保存。

因要制作出网页文档，且其中含有大量的 Web 组件（代码片段）和元素（视觉），可借助前端框架高效产出，比如相对大众的 Bootstrap，Semantic UI。在大量的自由和开源前端框架项目中，选择有维护支持，自身喜欢或熟悉的即可。

可用工具：

设计师 Brad Frost 有一套叫做“原子设计（Atomic Design）”的 Web 设计理论，在该领域有一定影响，其核心概念就是复用“Pattern Library”，高率生产 Web 页面：

Atomic Design | Brad Frost（翻墙）

他为该理论创建了一个开源项目，基于 PHP：Pattern Lab | Build Atomic Design Systems