--- name: style-guide-generator description: Generate comprehensive website style guides and design systems from URLs, screenshots, and existing documentation. Use this skill when users ask to create a style guide, design system documentation, brand guidelines document, or design specification from a website, app, or existing materials. This skill produces professional PDF outputs following industry-standard style guide structure. ---

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.

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

1. 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

1. 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

1. 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

Standard Template Structure

Every style guide should follow this professional structure (based on industry best practices):

1.0 Introduction

• Version number and last updated date
• Purpose and scope statement
• Target audience (design and development teams)

1.1 Mission & Vision

• Company mission statement
• Company vision statement
• Strategic positioning

1.2 Design Principles

• 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"

2.0 Brand Identity

2.1 Logo Usage

• Primary logo specifications
• Clear space requirements
• Incorrect usage examples
• Minimum size requirements
• Color variations (full color, black, white)

2.2 Color Palette

• 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

2.3 Typography

• 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

2.4 Iconography

• Icon style guidelines (outlined, filled, line weight)
• Grid system specifications
• Size variants
• Usage examples
• Link to icon library

2.5 Imagery

• Photography style guidelines
• Illustration style guidelines
• Image treatment specifications
• Do's and don'ts
• Quality requirements

3.0 Content Style Guide

3.1 Voice and Tone

• Voice characteristics (consistent attributes)
• Tone variations (how voice adapts to context)
• Examples for different scenarios

3.2 Grammar and Mechanics

• Punctuation rules
• Capitalization standards
• Voice preference (active/passive)
• Number formatting
• Date and time formatting

4.0 UI Components

4.1 Buttons

• State variants (Primary, Secondary, Tertiary, Disabled)
• Size variants
• Usage guidelines
• Code snippets (HTML/CSS)
• Accessibility requirements

4.2 Forms

• Input field specifications
• Label positioning
• Validation states
• Required field indicators
• Error message styling
• Help text formatting

4.3 [Additional Components as needed]

• Cards
• Modals
• Navigation
• Tables
• Alerts/Notifications
• Tooltips
• Badges
• Progress indicators

5.0 Layout & Grid

• Grid system specifications (columns, gutters)
• Responsive breakpoints
• Spacing scale (base unit and multipliers)
• Container widths
• Margin and padding conventions

6.0 Accessibility (A11y)

• WCAG compliance level (2.1 AA standard)
• Color contrast requirements
• Alt text guidelines
• Keyboard navigation standards
• Screen reader considerations
• Focus indicators

7.0 Resources

• Links to design files (Figma, Sketch, Adobe XD)
• Icon library location
• Illustration library location
• Font files repository
• Code repository
• Additional documentation

8.0 Changelog

• 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

1. Take note of:

- Visual hierarchy - Button styles and states - Form element treatments - Navigation patterns - Responsive behavior (if observable)

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

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

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         |

PDF Generation Best Practices

1. Professional Formatting:

- Use consistent heading hierarchy - Apply proper spacing between sections - Utilize tables for structured data - Include visual examples where possible

1. Typography:

- Use professional fonts (Inter, Roboto, or system fonts) - Maintain consistent sizing hierarchy - Ensure sufficient line height for readability

1. Color Usage:

- Show color swatches with hex codes - Ensure sufficient contrast for accessibility - Document color roles clearly

...