Design System

What Is Design System?

The "Design System" skill for Claude Code is a specialized tool designed to extract a comprehensive design system from an existing website, HTML file, or screenshot. By leveraging browser automation and HTML inspection, this skill analyzes and documents the essential visual and structural elements of a site's design—such as color schemes, typography, component styles, spacing, and overall atmosphere. Its primary output is a semantic DESIGN.md file, which encapsulates the extracted design tokens and principles in a format optimized for consistent page generation and further automation workflows. This enables designers and developers to reverse-engineer, document, and replicate an existing visual language, even when no formal style guide is available.

Why Use Design System?

Design systems are foundational for maintaining consistency, scalability, and efficiency in modern web development and design projects. However, many projects—especially legacy sites or rapidly developed products—lack an explicit, documented system. The "Design System" skill addresses this gap by automating the extraction of key design patterns and variables from any given source. Key benefits include:

• Rapid onboarding for new projects: Quickly document a site's design language to jumpstart redesigns or new builds.
• Brand consistency: Ensure that every page and component aligns with the original visual intent, reducing drift over time.
• Design-to-development handoff: Provide developers with a single source of truth, minimizing misinterpretation and rework.
• Reverse engineering: Efficiently extract and adapt design systems from inspiration sites or competitors.
• Preparation for automation: Generate the DESIGN.md required for downstream tools like the design-loop skill, streamlining page generation and prototyping.

The skill is particularly valuable for teams working with inherited codebases, agencies needing to match client branding, or anyone aiming to document and refactor an existing UI.

How to Get Started

Getting started with the "Design System" skill involves a straightforward workflow. Here’s a practical guide to initiate a design system extraction:

1. Install and Configure Claude Code: Ensure that you have Claude Code set up with plugin support enabled. Clone or download the design-system skill from its GitHub repository.

2. Identify the Source: Decide whether you’ll analyze a live URL, a local HTML file, or a screenshot. Each method is supported:

   • Live URL: The skill uses browser automation (via Playwright or similar tools) to navigate, capture a screenshot, and extract the HTML.
   • HTML File: Directly analyze the local file content.
   • Screenshot: Limited to color and layout analysis, as component structure may be less accessible.

3. Trigger the Skill: Use one of the following trigger phrases in your Claude Code environment:

   • extract design system
   • design system
   • create DESIGN.md
   • analyse the design
   • what design does this site use
   • extract styles from
   • reverse engineer the design

4. Configure Output Location: By default, the skill writes the semantic system to .design/DESIGN.md. Ensure your project directory is correctly structured.

5. Review and Use the Output: Open the generated DESIGN.md file. This document will contain sections for color palette, typography, component styles, spacing, and atmospheric notes.

Example Command (CLI):

claude-code run design-system --source "https://example.com" --output "./.design/DESIGN.md"

Key Features

The "Design System" skill stands out due to its breadth and depth of analysis. Key capabilities include:

• Color Palette Extraction: Automatically detects primary, secondary, accent, and background colors, outputting both semantic and hex representations.
• Typography Analysis: Identifies font families, weights, sizes, and usage patterns across headings, body, and UI elements.
• Component Style Documentation: Inspects button styles, form inputs, cards, navigation elements, and other visible components for border radius, shadow, and state changes.
• Spacing and Layout: Analyzes margins, paddings, grid systems, and breakpoints.
• Atmosphere and Branding: Captures high-level design principles, such as mood, imagery style, and interactive cues.
• Semantic Markdown Output: Generates a well-structured DESIGN.md file, optimized for human readability and downstream automation.
• Automated and Repeatable: Can be run multiple times as designs evolve.

Example Output (DESIGN.md excerpt):

## Colors
- Primary: #1976d2
- Secondary: #424242
- Background: #fafafa
- Accent: #ff4081

## Typography
- Font Family: 'Roboto', sans-serif
- Headings: 700 weight, 2rem – 3rem
- Body: 400 weight, 1rem

## Components
- Button: border-radius 4px, shadow 1
- Card: background #fff, shadow 2

## Spacing
- Gap system: 8px, 16px, 32px

Best Practices

To maximize the utility of the "Design System" skill, consider the following best practices:

• Use high-quality sources: For best results, analyze clean, production-ready pages without experimental or inconsistent styles.
• Manually review the output: Automated extraction covers most use cases, but manual refinement ensures accuracy and captures nuanced brand elements.
• Iterate frequently: As your design evolves, re-run the extraction to update your documentation.
• Integrate with design-loop: Use the generated DESIGN.md as the foundation for automated page or component generation.
• Share with your team: Make the design system accessible to both designers and developers as a living document.

Important Notes

• The skill is compatible only with Claude Code and its automation environment.
• Some deeply dynamic styles (e.g., runtime-generated CSS) may require manual adjustment in the DESIGN.md.
• Screenshot-based extraction is less reliable than HTML-based methods for component structure.
• The generated design system is intended as a starting point and may need further contextualization for unique or branded experiences.
• Always respect copyright and licensing when extracting design systems from third-party sites.