Automatically transform websites, screenshots, and documentation into comprehensive, professional PDF style guides and design systems.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install style-guide-generator
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install style-guide-generator using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Style Guide Generator?
The Style Guide Generator is a specialized tool within the Openclaw Skills ecosystem designed to bridge the gap between raw web assets and formal design documentation. By leveraging automated web fetching and visual analysis, it extracts critical brand elements such as color palettes, typography hierarchies, and UI component patterns to construct a single source of truth for design and development teams.
This skill ensures brand consistency by synthesizing information from disparate sources into industry-standard documentation. It covers everything from mission statements and strategic positioning to granular technical specifications like spacing scales and accessibility (A11y) requirements, providing a professional output ready for stakeholder distribution.
Style Guide Generator Use Cases
- Converting an existing website into a formal brand identity document for onboarding new developers.
- Creating a unified design system from application screenshots during a product handoff.
- Standardizing typography and color usage across multiple digital properties to ensure brand consistency.
- Generating professional PDF design specifications for client delivery or internal design audits.
How Style Guide Generator Works
- The agent gathers input data by fetching live URLs, analyzing uploaded screenshots, or parsing existing documentation.
- Technical specifications such as HEX codes, font weights, and spacing scales are systematically extracted from the source material.
- Extracted data is mapped to a professional template structure covering Brand Identity, UI Components, and Layout rules.
- The skill utilizes integrated PDF generation tools to produce a high-fidelity, formatted document.
- A version-controlled changelog is initiated to track the evolution of the design system over time.
Style Guide Generator Setup
To begin using this skill within the Openclaw Skills environment, ensure your local environment is configured to handle the analysis scripts.
# Install necessary dependencies for website analysis
pip install -r requirements.txt
# Enable the skill and its bundled resources
openclaw skills enable style-guide-generator
Once configured, you can trigger the generator by providing a target URL or uploading visual assets for analysis.
Style Guide Generator Data Schema & Taxonomy
The skill organizes design data into structured tables and markdown sections for maximum clarity. The metadata taxonomy includes:
| Category | Data Points Captured |
|---|---|
| Color Palette | HEX, RGB, Role (Primary/Secondary), and Accessibility Notes |
| Typography | Font Family, Weight, Size (px), and Line Height |
| UI Components | State variants, code snippets, and specific usage guidelines |
| Layout | Grid columns, gutter widths, and responsive breakpoints |
| Brand Identity | Logo specifications, clear space requirements, and imagery styles |
Style Guide Generator Advanced Features
- Automated accessibility (WCAG 2.1 AA) contrast checking for all extracted color combinations.
- Seamless integration with web analysis scripts to reverse-engineer CSS variables directly from live production sites.
- Support for multi-source synthesis, combining live site data with uploaded mission statements or brand documents.
- Generation of standardized code snippets for UI components to accelerate frontend development.
- Version history tracking through an automated changelog section included in the generated PDF.
SKILL.md
Loading
Related Openclaw Skills
Resume Optimizer
A professional AI-driven resume builder and analyzer that generates ATS-friendly PDF documents.
Research Company
Automate the creation of professional B2B company research reports in PDF format from a single source URL.
Prompt Engineering Expert
An advanced skill dedicated to designing, refining, and optimizing high-performance prompts and custom instructions for AI agents.
Critical Article & Outline Writer
A specialized writing agent for creating analytical, skeptical, and engaging tech industry critiques and outlines.
Transcript to Content
An AI-powered workflow designed to transform conversational meeting transcripts and training recordings into structured, professional documentation and learning materials.
Claw-to-Claw (C2C)
A secure protocol for AI agents to coordinate schedules, tasks, and messages on behalf of humans with end-to-end encryption and manual approval gates.
Featured*
