一段时间后，他们开始使工作流程自动化，并且将前端代码转换为组织良好的UI库的样式指南工具已经开始出现。
过去，开发人员手动创建样式指南，这是很多工作。
生活风格指南是从网站或应用程序中收集的UI元素和模式的文档，目的是允许开发人员在整个项目中使用一致的风格 。
代码样式指南可确保代码一致性 ，而生活样式指南可确保整个站点的视觉一致性 。
生活风格指南与代码风格指南不同，后者包含有关如何编写可读和可维护代码的规则，而生活风格指南是前端模式的集合，例如按钮，小部件和印刷元素CSS类 。
在这篇文章中，我们整理了10个方便的工具，可以帮助您生成自己的生活方式指南 。
1.
该过程完成后，您可以下载PDF样式指南 。
使用Stylify Me ，您可以快速获得站点模式的概述，包括颜色，字体，大小和间距。
这个工具非常有趣：只需粘贴您要分析的网站链接，然后观看它的样式指南就可以通过鼠标单击生成。
2.
它可以帮助您以自己喜欢的方式组织设计/编码例程 。
如果您是团队成员，则可以在Markdown中编写文档，以使其他开发人员更易于使用。
Fabricator允许您构建自己的UI工具包，组织设计系统并根据工具包代码生成样式指南。
3.
该过程应包括调色板，字体选择，图标，徽标，可能的口号或首选的网络副本。
您可以免费注册，然后手动插入所有必要的信息。
他们还有一个样式指导工具，可提供简洁的设计流程，而无任何麻烦。
Frontify包括从数字模型到线框图的所有内容。
4.
您还可以在Markdown中编写文档，并自定义网站主题。
随着AIGIS，您可以从任何文本文件风格指南（如.css ， .scss ， .styl ， .md ）。
5.
全息图具有带有一些基本样式和导航的模板系统，使样式指南的生成更加容易。
这是一个Ruby gem，可以解析CSS中的注释，以生成出色的样式指南。
全息图由Trulia创建，是生成样式指南的绝佳解决方案。
6.
您可以在嵌入式CSS注释中创建CSS文档，也可以在单独的Markdown文件中创建CSS文档。
另外，您需要添加到CSS的注释非常少。
它几乎不需要启动并运行。
由于它是平台无关的，因此可与大多数Web开发设置一起使用。
借助Styledown ，您可以轻松编写CSS样式指南，因为它是基于Markdown的样式指南生成器 。
7.
KSS适用于更高级的用户和专业团队，因为生成样式指南需要编码知识。
KSS还包括一个Ruby库来解析.sass ， .scss和.css文件与KSS准则纳入简洁的风格引导记录。
KSS（Knyle样式表）主要是一个文档规范和一种样式指南格式，具有自己的注释语法 。
8.
它支持SASS，LESS，PostCSS和纯CSS样式表。
SC5使用与KSS相同的文档符号。
它基于KSS ，其中包括一些很酷的功能，例如由AngularJS驱动的UI，可帮助您查看，搜索和测试样式。
使用SC5样式指南生成器，您可以直接在浏览器中创建和编辑样式指南。
9.
在生成的样式指南中，StyleDocco显示预览以及您已应用的样式和HTML代码示例。
您可以使用npm 安装它。
StyleDocco是一个方便的Node.js应用程序， 可从您的样式表创建样式指南 。
这些示例还可以帮助您了解SytleDocco使用的文档语法。
在StyleDocco的主页上，您可以找到两个样式指南示例，一个是从默认样式表 生成的 ，另一个是从Bootstrap站点生成的 。
10.
Pattern Lab允许您抽象地和在上下文中同时查看样式组件。
它可以用作项目的模式库和前端样式指南 。
Pattern Lab是一个自定义的静态网站生成器 ，它将网站上的所有样式元素拼接在一起，并从中形成模板和页面。
Pattern Lab是工具集，可帮助您创建模块化设计系统 。
翻译自: https://www.hongkiat.com/blog/best-living-style-guide-tools/