web应用安全设计指南_Web设计师的十种生活方式指南工具–最佳

生活风格指南是从站点或应用程序中收集的UI元素和模式的文档，目的是允许开发人员在整个项目中使用一致的风格 。 过去，开发人员手动创建样式指南，这是很多工作。 不久之后，他们开始使工作流程自动化，并且将前端代码转换为组织良好的UI库的样式指南工具已经开始出现。

生活风格指南与代码风格指南不同，后者包含有关如何编写可读和可维护代码的规则，而生活风格指南是前端模式的集合，例如按钮，小部件和印刷元素CSS类 。 代码样式指南可确保代码一致性 ，而生活样式指南可确保整个站点的视觉一致性 。

在这篇文章中，我们整理了10个方便的工具，可以帮助您生成自己的生活方式指南 。

1.

该工具非常有趣：只需粘贴您要分析的网站链接，然后观看它的样式指南就可以通过单击鼠标生成。 使用Stylify Me ，您可以快速获得站点模式的概述，包括颜色，字体，大小和间距。 该过程完成后，您可以下载PDF样式指南 。

2.

Fabricator允许您构建自己的UI工具包，组织设计系统并根据工具包代码生成样式指南。 如果您是团队成员，则可以在Markdown中编写文档，以使其他开发人员更易于使用。 它可以帮助您以自己喜欢的方式组织设计/编码例程 。

3.

Frontify包括从数字模型到线框图的所有内容。 他们还有一个样式指导工具，可提供简洁的设计流程，而无任何麻烦。 您可以免费注册，然后手动插入所有必要的信息。 该过程应包括调色板，字体选择，图标，徽标，可能的口号或首选的网络副本。

4.

随着AIGIS，您可以从任何文本文件风格指南（如.css ， .scss ， .styl ， .md ）。 您还可以在Markdown中编写文档，并自定义网站主题。

5.

全息图由Trulia创建，是生成样式指南的绝佳解决方案。 这是一个Ruby gem，可以解析CSS中的注释，以生成出色的样式指南。 全息图具有带有一些基本样式和导航的模板系统，使样式指南的生成更加容易。

6.

借助Styledown ，您可以轻松编写CSS样式指南，因为它是基于Markdown的样式指南生成器 。 由于它是平台无关的，因此可与大多数Web开发设置一起使用。 它几乎不需要启动并运行。 另外，您需要添加到CSS的注释非常少。 您可以在嵌入式CSS注释中创建CSS文档，也可以在单独的Markdown文件中创建CSS文档。

7.

KSS（Knyle样式表）主要是一种文档规范和一种样式指南格式，具有自己的注释语法 。 KSS还包括一个Ruby库来解析.sass ， .scss和.css文件与KSS准则纳入简洁的风格引导记录。 KSS适用于更高级的用户和专业团队，因为要生成样式指南 ，需要编码知识。

8.

使用SC5样式指南生成器，您可以直接在浏览器中创建和编辑样式指南。 它基于KSS ，其中包括一些很酷的功能，例如由AngularJS驱动的UI，可帮助您查看，搜索和测试样式。 SC5使用与KSS相同的文档符号。 它支持SASS，LESS，PostCSS和纯CSS样式表。

9.

StyleDocco是一个方便的Node.js应用程序， 可从您的样式表创建样式指南 。 您可以使用npm 安装它。 在生成的样式指南中，StyleDocco会显示预览，其中包含您已应用的样式以及HTML代码示例。

在StyleDocco的主页上，您可以找到两个样式指南示例，一个是从默认样式表 生成的 ，另一个是从Bootstrap站点生成的 。 这些示例还可以帮助您了解SytleDocco使用的文档语法。

10.

Pattern Lab是可帮助您创建模块化设计系统的工具的集合。 Pattern Lab是一个自定义的静态网站生成器 ，它将网站上的所有样式元素拼接在一起，并从中形成模板和页面。 它可以用作项目的模式库和前端样式指南 。 Pattern Lab允许您抽象地和在上下文中同时查看样式组件。

翻译自: https://www.hongkiat.com/blog/best-living-style-guide-tools/