style-guide-generatorGenerate 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.
Install via ClawdBot CLI:
clawdbot install TomsTools11/style-guide-generatorGenerate 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.
When a user requests a style guide, follow this decision tree:
Every style guide should follow this professional structure (based on industry best practices):
When analyzing provided materials, extract the following systematically:
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 |When information is missing or unclear:
Example 1: URL-Based Request
User: "Create a style guide for my website at example.com"
Process:
Example 2: Screenshot-Based Request
User: "Here are screenshots of my app. Create a style guide." [uploads images]
Process:
Example 3: Comprehensive Request
User: "Create a style guide using my website URL, these brand colors [list], and our mission statement [text]"
Process:
Before delivering the style guide PDF, verify:
This skill uses the following bundled resources:
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.
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.
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.
Generated Mar 1, 2026
A marketing agency needs to create a style guide for a client's website redesign. They provide the current URL and brand assets. The skill analyzes the site, extracts colors, typography, and components, then generates a comprehensive PDF to ensure design consistency across the new development team.
A tech startup launching a new app provides screenshots and minimal documentation. The skill asks clarifying questions about brand goals, extracts design elements from images, and produces a style guide to establish brand identity and UI standards for future scaling.
A retail company merging multiple e-commerce sites into one platform uploads existing style guides and URLs. The skill analyzes these materials, identifies inconsistencies, and generates a unified style guide with accessibility guidelines to streamline design and development efforts.
A university undergoing a rebrand provides old documentation and new logo files. The skill extracts colors and typography from the old materials, incorporates the new assets, and creates a style guide for internal teams and external vendors to maintain brand consistency across digital and print media.
A mobile app development team provides screenshots of their app and requests a design system. The skill analyzes visual elements, defines UI components like buttons and forms, and outputs a PDF with specifications for developers to implement consistent, accessible interfaces across iOS and Android.
Freelance designers use this skill to quickly generate style guides for clients, saving time on manual documentation. They charge per project or hourly, offering it as an add-on service to web design or branding packages, increasing their value proposition.
Design and marketing agencies integrate the skill into their workflow via a subscription model. It automates style guide creation for multiple clients, reducing labor costs and enabling faster project turnaround, billed as part of retainer or package deals.
A SaaS company licenses the skill to embed in their design or development platform. Users pay a premium for automated style guide generation, driving upsells and reducing churn by enhancing tool functionality for teams managing brand consistency.
๐ฌ Integration Tip
Integrate with web_fetch for URL analysis and PDF generation tools to automate document creation, ensuring seamless workflow for users handling multiple input types like screenshots and existing docs.
Extract text from PDFs with OCR support. Perfect for digitizing documents, processing invoices, or analyzing content. Zero dependencies required.
Fast local PDF parsing with PyMuPDF (fitz) for Markdown/JSON outputs and optional images/tables. Use when speed matters more than robustness, or as a fallback while heavier parsers are unavailable. Default to single-PDF parsing with per-document output folders.
Find, evaluate, and recommend ClawHub skills by need with quality filtering and preference learning.
Fetch full tweets, long tweets, quoted tweets, and X Articles from X/Twitter without login or API keys, using no dependencies and zero configuration.
Skill ๆฅๆพๅจ | Skill Finder. ๅธฎๅฉๅ็ฐๅๅฎ่ฃ ClawHub Skills | Discover and install ClawHub Skills. ๅ็ญ'ๆไปไนๆ่ฝๅฏไปฅX'ใ'ๆพไธไธชๆ่ฝ' | Answers 'what skill can X', 'find a skill'. ่งฆๅ...
Generate QR codes from text or URL for mobile scanning.