Styleguide Toolbox – 模板、UI 工具包、工具和生成器

已发表: 2020-06-02

样式指南是确保组织中的每个人都在同一页面上的重要工具。毕竟，保持一致的风格对品牌认知度、可读性至关重要，而且它看起来更专业。

这些 Styleguide 资源的伟大之处在于，毫无疑问，有一个可以让您按照自己想要的方式工作。无论是允许您使用自己喜欢的图像编辑器手动模拟样式，还是通过浏览器自动生成样式，这里都有适合每个人的东西。

这里有一些资源可以帮助您寻求一致性！

快速跳转：样式指南 UI 模板、样式指南 Web 模板、样式指南生成工具、生活样式指南工具和样式指南生成器。

您可能还喜欢这些工具箱：CSS Flexbox、CSS 动画、SVG 工作流工具或用于格式化 CSS 的工具。

样式指南 UI 模板

样式指南预览模板（草图）由 Tony Jones

如果您使用 Sketch 应用程序，这个免费的样式指南预览模板将帮助您开发一个漂亮、干净的样式指南。

样式指南预览模板草图

UI 样式指南模板(PSD) 由 Tony Thomas

UI 样式指南模板是一个 Photoshop (PSD) 模板，具有色板、排版、图标、表单和 UI 元素。

UI风格指南模板psd

萨曼莎沃伦的风格瓷砖（PSD）

Style Tiles的有趣之处在于，在设计过程的开始，在最终外观确定之前，它们更多地被用作讨论的催化剂。一种在客户承诺设计之前向他们展示可能性的好方法。

样式瓷砖 psd

Mark Ludemann 的响应式数字风格指南（草图）

有时，我们倾向于将样式指南视为一种万能的通用调色板。 响应式数字风格指南更进一步，定义了移动设备的风格。

响应式数字风格指南草图

Rafal Tomal 的 Web 样式指南 (PSD)

Web Style Guide旨在为忙碌的设计师提供一个简单的“备忘单”，以保持其项目的一致性。

网页风格指南 psd

詹姆斯乔治的基本五页样式指南模板（AI）

基本五页样式指南模板是一组漂亮的模板，您可以在 Adobe Illustrator 中使用。

基本五页样式指南模板ai illustrator

品牌指南模板(AI)

品牌指南模板是一种资源，您可以将其提供给客户，其中包含关于颜色、字体和不该做什么的示例的明确说明。

品牌指南模板ai illustrator

Brandbooks ZippyPixels 的免费品牌指南模板（AI 和 InDesign）

Brandbooks 免费品牌指南模板是一个令人印象深刻的文件集合，您可以使用这些文件打印出八页的品牌风格和文档小册子。

Brandbooks 免费品牌指南模板 ai indesign

风格指南网页模板

Brad Frost 的风格指南

Style Guide Guide 是用于创建出色风格指南的样板。

风格指南指南

CodyHouse的 CSS 样式指南模板

CSS 中的样式指南模板在创建时考虑到了灵活性和易于更新。

CSS 中的样式指南模板

Brett Jankord 的风格指南样板

Style Guide Boilerplate提供了一种交互式方式来显示 Web 项目的标准字体、颜色、基本样式和图案。

风格指南样板

Kemie Guaida 的Bootstrap 样式指南样板

Bootstrap Style Guide Boilerplate使用流行的框架来提供创建样式指南的有效方法。

Bootstrap 风格指南样板

样式指南生成工具

StyleDocco

使用 Node.js， StyleDocco将读取您的 CSS 并为您生成可视化样式指南。

样式向下

Styledown允许您通过在 CSS 文件中使用 markdown 来创建样式指南。

样式向下

制造商

Fabricator是一个 Node.js 工具，可让您轻松编写项目文档并创建交互式样式指南。

制造商

巨大的风格指南

Styleguide可以与您的项目一起使用，以创建一个实时、自动更新的样式存储库。

时尚指南

图案实验室

原子设计是Pattern Lab用来描述其组件驱动的样式指南系统的术语。这意味着它更深入一点，涵盖了您设计的微小细节。

图案实验室

生活方式指南工具

SC5 风格指南生成器

SC5 Style Guide Generator让您可以直接在网络浏览器中创建和编辑您的 Styleguide。

SC5 风格指南生成器

KSS – Knyle 样式表

KSS使用 Ruby 或其他使用 gems 的框架生成生活风格指南。

KSS - Knyle 样式表

文档CSS

DocumentCSS可帮助您创建随站点变化的实时样式指南。