Agent skill · design visual · sundial-org
style-guide-generator
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.
Why this skill is useful
Generates comprehensive style guides with specific design elements and templates that the AI wouldn't reliably produce on its own.
What it needs
About 7k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
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 webfetch 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/style-guide-generator