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可幫助您創建隨站點變化的實時樣式指南。