Back to Details

style-guide-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Style Guide Generator

风格指南生成器

Overview

概述

Generate professionally formatted website style guides and design systems by analyzing provided URLs, screenshots, uploaded files, and user requirements. Output comprehensive PDF documents that serve as the single source of truth for design and development teams.
通过分析提供的网址、截图、上传文件和用户需求，生成格式专业的网站风格指南与设计系统。输出全面的PDF文档，作为设计与开发团队的唯一权威参考。

Workflow Decision Tree

工作流决策树

When a user requests a style guide, follow this decision tree:
  1. Gather Information
    • If user provides URL → Use web_fetch to analyze the website
    • If user provides screenshots/images → Analyze visual elements
    • If user provides existing documentation → Extract and structure information
    • If user provides minimal information → Ask clarifying questions about brand, goals, and requirements
  2. Extract Design Elements
    • Colors (primary, secondary, accent, text, background, success, warning, error)
    • Typography (fonts, weights, sizes, line heights)
    • Logo usage guidelines
    • Iconography style
    • Imagery preferences
    • UI component patterns
    • Layout and spacing systems
    • Accessibility requirements
  3. Structure Content
    • Follow the standard template structure (see Template Structure section)
    • Organize extracted information into appropriate sections
    • Add mission/vision if provided or inferred
    • Document design principles
    • Create component specifications
  4. Generate PDF
    • Use the PDF skill to create a professional document
    • Apply consistent formatting and typography
    • Include tables for color palettes, typography specs, and component states
    • Ensure accessibility with proper contrast ratios
    • Add version number and last updated date
当用户请求生成风格指南时，请遵循以下决策树：
  1. 收集信息
    • 若用户提供网址 → 使用web_fetch分析网站
    • 若用户提供截图/图片 → 分析视觉元素
    • 若用户提供现有文档 → 提取并梳理信息
    • 若用户提供的信息极少 → 询问关于品牌、目标和需求的澄清问题
  2. 提取设计元素
    • 色彩（主色、辅助色、强调色、文本色、背景色、成功色、警告色、错误色）
    • 排版（字体、字重、字号、行高）
    • Logo使用规范
    • 图标风格
    • 图像偏好
    • UI组件模式
    • 布局与间距系统
    • 无障碍访问要求
  3. 内容结构化
    • 遵循标准模板结构（见模板结构章节）
    • 将提取的信息整理到对应章节
    • 若有提供或可推断，添加使命/愿景内容
    • 记录设计原则
    • 创建组件规格说明
  4. 生成PDF
    • 使用PDF技能创建专业文档
    • 应用统一的格式与排版
    • 包含调色板、排版规格和组件状态的表格
    • 确保符合无障碍访问的对比度要求
    • 添加版本号和最后更新日期

Standard Template Structure

标准模板结构

Every style guide should follow this professional structure (based on industry best practices):
每份风格指南都应遵循此专业结构（基于行业最佳实践）：

1.0 Introduction

1.0 引言

  • Version number and last updated date
  • Purpose and scope statement
  • Target audience (design and development teams)
  • 版本号和最后更新日期
  • 目的与范围说明
  • 目标受众（设计与开发团队）

1.1 Mission & Vision

1.1 使命与愿景

  • Company mission statement
  • Company vision statement
  • Strategic positioning
  • 企业使命宣言
  • 企业愿景宣言
  • 战略定位

1.2 Design Principles

1.2 设计原则

  • 4-6 core principles that guide design decisions
  • Each principle with name and description
  • Examples: "Clarity Above All", "Empowerment Through Simplicity", "Consistency Builds Trust", "Human-Centered"
  • 4-6条指导设计决策的核心原则
  • 每条原则包含名称与描述
  • 示例："清晰至上"、"以简洁赋能"、"一致性建立信任"、"以人为中心"

2.0 Brand Identity

2.0 品牌标识

2.1 Logo Usage

2.1 Logo使用规范

  • Primary logo specifications
  • Clear space requirements
  • Incorrect usage examples
  • Minimum size requirements
  • Color variations (full color, black, white)
  • 主Logo规格
  • 留白要求
  • 错误使用示例
  • 最小尺寸要求
  • 色彩变体（全彩、黑色、白色）

2.2 Color Palette

2.2 调色板

  • Organized table with Role, Color Name, HEX, and RGB values
  • Primary colors (1-2)
  • Secondary colors (1-3)
  • Accent colors
  • Text colors
  • Background colors
  • System colors (Success, Warning, Error)
  • Accessibility notes for each color combination
  • 整理为包含角色、颜色名称、HEX和RGB值的表格
  • 主色（1-2种）
  • 辅助色（1-3种）
  • 强调色
  • 文本色
  • 背景色
  • 系统色（成功、警告、错误）
  • 每种色彩组合的无障碍访问说明

2.3 Typography

2.3 排版

  • Heading font specifications (H1, H2, H3)
  • Body text specifications
  • Caption/small text specifications
  • Font families, weights, sizes, and line heights in tabular format
  • Web font loading considerations
  • Fallback fonts
  • 标题字体规格（H1、H2、H3）
  • 正文字体规格
  • 说明/小号文本规格
  • 以表格形式呈现字体族、字重、字号和行高
  • Web字体加载注意事项
  • 备选字体

2.4 Iconography

2.4 图标系统

  • Icon style guidelines (outlined, filled, line weight)
  • Grid system specifications
  • Size variants
  • Usage examples
  • Link to icon library
  • 图标风格规范（轮廓、填充、线条粗细）
  • 网格系统规格
  • 尺寸变体
  • 使用示例
  • 图标库链接

2.5 Imagery

2.5 图像规范

  • Photography style guidelines
  • Illustration style guidelines
  • Image treatment specifications
  • Do's and don'ts
  • Quality requirements
  • 摄影风格指南
  • 插画风格指南
  • 图像处理规格
  • 注意事项
  • 质量要求

3.0 Content Style Guide

3.0 内容风格指南

3.1 Voice and Tone

3.1 语气与语调

  • Voice characteristics (consistent attributes)
  • Tone variations (how voice adapts to context)
  • Examples for different scenarios
  • 语气特征（一致属性）
  • 语调变体（语气如何随语境调整）
  • 不同场景示例

3.2 Grammar and Mechanics

3.2 语法与格式

  • Punctuation rules
  • Capitalization standards
  • Voice preference (active/passive)
  • Number formatting
  • Date and time formatting
  • 标点规则
  • 大小写标准
  • 语态偏好（主动/被动）
  • 数字格式
  • 日期与时间格式

4.0 UI Components

4.0 UI组件

4.1 Buttons

4.1 按钮

  • State variants (Primary, Secondary, Tertiary, Disabled)
  • Size variants
  • Usage guidelines
  • Code snippets (HTML/CSS)
  • Accessibility requirements
  • 状态变体（主按钮、次按钮、三级按钮、禁用态）
  • 尺寸变体
  • 使用指南
  • 代码片段（HTML/CSS）
  • 无障碍访问要求

4.2 Forms

4.2 表单

  • Input field specifications
  • Label positioning
  • Validation states
  • Required field indicators
  • Error message styling
  • Help text formatting
  • 输入框规格
  • 标签定位
  • 验证状态
  • 必填字段标识
  • 错误消息样式
  • 帮助文本格式

4.3 [Additional Components as needed]

4.3 [按需添加其他组件]

  • Cards
  • Modals
  • Navigation
  • Tables
  • Alerts/Notifications
  • Tooltips
  • Badges
  • Progress indicators
  • 卡片
  • 模态框
  • 导航
  • 表格
  • 提示/通知
  • 工具提示
  • 徽章
  • 进度指示器

5.0 Layout & Grid

5.0 布局与网格

  • Grid system specifications (columns, gutters)
  • Responsive breakpoints
  • Spacing scale (base unit and multipliers)
  • Container widths
  • Margin and padding conventions
  • 网格系统规格（列数、间距）
  • 响应式断点
  • 间距尺度（基础单位与倍数）
  • 容器宽度
  • 外边距与内边距约定

6.0 Accessibility (A11y)

6.0 无障碍访问（A11y）

  • WCAG compliance level (2.1 AA standard)
  • Color contrast requirements
  • Alt text guidelines
  • Keyboard navigation standards
  • Screen reader considerations
  • Focus indicators
  • WCAG合规等级（2.1 AA标准）
  • 色彩对比度要求
  • 替代文本指南
  • 键盘导航标准
  • 屏幕阅读器适配注意事项
  • 焦点指示器

7.0 Resources

7.0 资源

  • Links to design files (Figma, Sketch, Adobe XD)
  • Icon library location
  • Illustration library location
  • Font files repository
  • Code repository
  • Additional documentation
  • 设计文件链接（Figma、Sketch、Adobe XD）
  • 图标库位置
  • 插画库位置
  • 字体文件仓库
  • 代码仓库
  • 补充文档

8.0 Changelog

8.0 更新日志

  • Version history with dates
  • Changes summary for each version
  • 带日期的版本历史
  • 每个版本的变更摘要

Information Extraction Process

信息提取流程

When analyzing provided materials, extract the following systematically:
分析提供的素材时，请系统提取以下内容：

From URLs/Websites:

从网址/网站中提取：

  1. Fetch the website using web_fetch
  2. Analyze HTML/CSS for:
    • Color values (background-color, color properties)
    • Font families and typography (font-family, font-size, font-weight)
    • Spacing patterns (margin, padding values)
    • Component structures
  3. Take note of:
    • Visual hierarchy
    • Button styles and states
    • Form element treatments
    • Navigation patterns
    • Responsive behavior (if observable)
  1. 使用web_fetch获取网站内容
  2. 分析HTML/CSS以提取：
    • 色彩值（background-color、color属性）
    • 字体族与排版（font-family、font-size、font-weight）
    • 间距模式（margin、padding值）
    • 组件结构
  3. 记录：
    • 视觉层级
    • 按钮样式与状态
    • 表单元素处理方式
    • 导航模式
    • 响应式表现（若可观察）

From Screenshots/Images:

从截图/图片中提取：

  1. Identify color palette using visual analysis
  2. Determine typography hierarchy
  3. Note spacing and layout patterns
  4. Identify UI component variants
  5. Observe design principles in practice
  1. 通过视觉分析识别调色板
  2. 确定排版层级
  3. 记录间距与布局模式
  4. 识别UI组件变体
  5. 观察实际应用的设计原则

From Existing Documentation:

从现有文档中提取：

  1. Extract mission/vision statements
  2. Gather existing brand guidelines
  3. Collect color specifications
  4. Document current typography standards
  5. Note any existing component libraries
  1. 提取使命/愿景宣言
  2. 收集现有品牌规范
  3. 整理色彩规格
  4. 记录当前排版标准
  5. 记录现有组件库信息

Creating Professional Tables

创建专业表格

Use well-formatted tables for specifications. Example formats:
Color Palette Table:
| Role       | Color       | HEX     | RGB           |
|------------|-------------|---------|---------------|
| Primary    | Brand Blue  | #378DFF | 55, 141, 255  |
| Secondary  | Light Blue  | #A5CAFF | 165, 202, 255 |
Typography Table:
| Element | Font Family | Weight  | Size (px) | Line Height |
|---------|-------------|---------|-----------|-------------|
| H1      | Inter       | Bold    | 48        | 1.2         |
| H2      | Inter       | Bold    | 36        | 1.3         |
| Body    | Inter       | Regular | 16        | 1.5         |
Button States Table:
| State     | Appearance              | Usage                          |
|-----------|-------------------------|--------------------------------|
| Primary   | Solid fill, primary     | Main call to action on a page  |
| Secondary | Outline, primary color  | Secondary actions              |
| Tertiary  | Text only              | Less important actions         |
使用格式规范的表格呈现规格说明。示例格式：
调色板表格：
| Role       | Color       | HEX     | RGB           |
|------------|-------------|---------|---------------|
| Primary    | Brand Blue  | #378DFF | 55, 141, 255  |
| Secondary  | Light Blue  | #A5CAFF | 165, 202, 255 |
排版表格：
| Element | Font Family | Weight  | Size (px) | Line Height |
|---------|-------------|---------|-----------|-------------|
| H1      | Inter       | Bold    | 48        | 1.2         |
| H2      | Inter       | Bold    | 36        | 1.3         |
| Body    | Inter       | Regular | 16        | 1.5         |
按钮状态表格：
| State     | Appearance              | Usage                          |
|-----------|-------------------------|--------------------------------|
| Primary   | Solid fill, primary     | Main call to action on a page  |
| Secondary | Outline, primary color  | Secondary actions              |
| Tertiary  | Text only              | Less important actions         |

PDF Generation Best Practices

PDF生成最佳实践

  1. Professional Formatting:
    • Use consistent heading hierarchy
    • Apply proper spacing between sections
    • Utilize tables for structured data
    • Include visual examples where possible
  2. Typography:
    • Use professional fonts (Inter, Roboto, or system fonts)
    • Maintain consistent sizing hierarchy
    • Ensure sufficient line height for readability
  3. Color Usage:
    • Show color swatches with hex codes
    • Ensure sufficient contrast for accessibility
    • Document color roles clearly
  4. Organization:
    • Number sections clearly (1.0, 1.1, 2.0, etc.)
    • Include table of contents for longer guides
    • Use page breaks appropriately
    • Add page numbers
  5. Accessibility:
    • Ensure document is screen-reader friendly
    • Use proper heading structure
    • Include alt text for images
    • Maintain minimum font size of 12pt
  1. 专业格式：
    • 使用统一的标题层级
    • 章节间应用合适的间距
    • 用表格呈现结构化数据
    • 尽可能包含视觉示例
  2. 排版：
    • 使用专业字体（Inter、Roboto或系统字体）
    • 保持统一的尺寸层级
    • 确保行高足够以提升可读性
  3. 色彩使用：
    • 展示带HEX码的色彩样本
    • 确保足够的对比度以符合无障碍要求
    • 清晰记录色彩角色
  4. 内容组织：
    • 清晰标记章节编号（1.0、1.1、2.0等）
    • 长指南包含目录
    • 合理使用分页符
    • 添加页码
  5. 无障碍访问：
    • 确保文档支持屏幕阅读器
    • 使用规范的标题结构
    • 为图片添加替代文本
    • 保持最小字体尺寸为12pt

Handling Incomplete Information

处理信息缺失的情况

When information is missing or unclear:
  1. Make Reasonable Inferences:
    • Extract colors from provided screenshots
    • Infer typography from website analysis
    • Estimate spacing based on visual patterns
  2. Use Placeholders:
    • "[Insert company mission statement]" for unknown content
    • "[Link to design files]" for unavailable resources
    • "Version 1.0" and current date as defaults
  3. Ask Clarifying Questions:
    • "What is your company's mission statement?"
    • "Do you have existing brand colors or should I extract them from the website?"
    • "Are there specific accessibility requirements beyond WCAG 2.1 AA?"
  4. Provide Templates:
    • Include example text for sections that need user input
    • Show format for content they should provide
    • Give guidance on what information would be ideal
当信息缺失或不明确时：
  1. 合理推断：
    • 从提供的截图中提取色彩
    • 从网站分析中推断排版
    • 根据视觉模式估算间距
  2. 使用占位符：
    • 未知内容使用「[插入企业使命宣言]」
    • 不可用资源使用「[链接至设计文件]」
    • 默认使用「Version 1.0」和当前日期
  3. 询问澄清问题：
    • 「贵公司的使命宣言是什么？」
    • 「您是否有现有品牌色彩，还是需要我从网站中提取？」
    • 「除WCAG 2.1 AA标准外，是否有特定的无障碍访问要求？」
  4. 提供模板：
    • 为需要用户输入的章节添加示例文本
    • 展示用户应提供内容的格式
    • 说明理想的信息类型

Example User Interactions

用户交互示例

Example 1: URL-Based Request User: "Create a style guide for my website at example.com" Process:
  1. Fetch website with web_fetch
  2. Analyze HTML/CSS for design system
  3. Extract colors, fonts, spacing
  4. Structure into standard template
  5. Generate professional PDF
  6. Provide download link
Example 2: Screenshot-Based Request User: "Here are screenshots of my app. Create a style guide." [uploads images] Process:
  1. Analyze images for visual elements
  2. Extract color palette
  3. Identify typography patterns
  4. Document component styles
  5. Fill in template structure
  6. Generate PDF with findings
  7. Provide download link
Example 3: Comprehensive Request User: "Create a style guide using my website URL, these brand colors [list], and our mission statement [text]" Process:
  1. Combine all provided information
  2. Fetch and analyze website
  3. Integrate provided brand elements
  4. Structure complete style guide
  5. Generate professional PDF
  6. Provide download link
示例1：基于网址的请求 用户：「为我的网站example.com创建一份风格指南」 流程：
  1. 使用web_fetch获取网站内容
  2. 分析HTML/CSS以提取设计系统信息
  3. 提取色彩、字体、间距
  4. 整理为标准模板
  5. 生成专业PDF
  6. 提供下载链接
示例2：基于截图的请求 用户：「这是我的应用截图，请创建一份风格指南。」[上传图片] 流程：
  1. 分析图片提取视觉元素
  2. 提取调色板
  3. 识别排版模式
  4. 记录组件样式
  5. 填充模板结构
  6. 根据分析结果生成PDF
  7. 提供下载链接
示例3：综合性请求 用户：「使用我的网站网址、这些品牌色彩[列表]和我们的使命宣言[文本]创建一份风格指南」 流程：
  1. 整合所有提供的信息
  2. 获取并分析网站
  3. 整合提供的品牌元素
  4. 整理完整的风格指南
  5. 生成专业PDF
  6. 提供下载链接

Quality Checklist

质量检查清单

Before delivering the style guide PDF, verify:
  • All sections are complete or marked as placeholders
  • Color palette includes HEX and RGB values
  • Typography specifications are detailed (family, weight, size, line height)
  • Tables are properly formatted and aligned
  • Accessibility requirements are documented
  • Version number and date are included
  • Resources section links are provided (even if placeholder)
  • Changelog is started with version 1.0
  • PDF is professionally formatted
  • Document is ready for team distribution
交付风格指南PDF前，请验证：
  • 所有章节已完成或标记为占位符
  • 调色板包含HEX和RGB值
  • 排版规格详细（字体族、字重、字号、行高）
  • 表格格式规范且对齐
  • 已记录无障碍访问要求
  • 包含版本号和日期
  • 资源章节已提供链接（即使是占位符）
  • 更新日志已创建并包含Version 1.0
  • PDF格式专业
  • 文档已准备好供团队分发

Resources

资源

This skill uses the following bundled resources:
此技能使用以下内置资源：

assets/template.pdf

assets/template.pdf

The base template PDF that demonstrates the professional structure and formatting that all generated style guides should follow. This file serves as a reference for structure, section organization, and formatting standards.
基础PDF模板，展示所有生成的风格指南应遵循的专业结构与格式。该文件作为结构、章节组织和格式标准的参考。

scripts/analyze_website.py

scripts/analyze_website.py

Python script to extract design system information from websites, including colors, typography, and component patterns. Can be used to automatically gather design specifications from live URLs.
用于从网站提取设计系统信息的Python脚本，包括色彩、排版和组件模式。可用于自动从在线网址收集设计规格。

references/design_system_examples.md

references/design_system_examples.md

Reference document containing examples of well-structured design systems and style guides from leading companies. Use this for inspiration on content organization and presentation standards.
参考文档，包含知名企业的优秀设计系统与风格指南示例。用于获取内容组织和呈现标准的灵感。