@GitHub_Daily: Saw a nice website and want to replicate it, but extracting colors, fonts, and spacing requires digging through CSS for hours. SkillUI takes a URL and automatically extracts the entire design system. Colors, fonts, spacing, animations, component screenshots, packaged into a Skill that Claude Code can read directly. GitHub: …

X AI KOLs Timeline 08/15/26, 04:00 AM Tools

cli-tool design-system web-scraping ai-integration css-analysis playwright claude-code

Summary

SkillUI is a command-line tool that extracts a complete design system from any website, including colors, fonts, spacing, animations, and component screenshots, and packages it into a format directly readable by Claude Code, helping quickly replicate a website's visual style.

Saw a nice website and want to replicate it, but extracting colors, fonts, and spacing requires digging through CSS for hours. SkillUI takes a URL and automatically extracts the entire design system. Colors, fonts, spacing, animations, component screenshots, packaged into a Skill that Claude Code can read directly. GitHub: http://github.com/amaancoderx/npxskillui… Open the output folder, start Claude, and tell it to follow this style—all design details are already included. It also supports Ultra mode, using Playwright for full visual extraction, capturing scrolling screenshots, interaction states, and animation detection. If you want to quickly replicate a website's visual style, this tool saves a lot of effort.

Original Article

View Cached Full Text

Cached at: 08/15/26, 03:53 PM

Reverse-Engineering Design Systems into Claude-Ready Skills (Static Analysis Only)

Core Approach

Use static analysis to extract, structure, and document design system components, tokens, and patterns directly from source files. No runtime AI or API calls—just code/file inspection.

Step-by-Step Process

1. Scan Source Files

Analyze CSS/SCSS, JavaScript/TypeScript components, theme files, and documentation.
Identify repeated patterns, variables, and component structures.

2. Extract Design Tokens

Colors: Pull variables (--primary-color, theme.colors.*).
Typography: Gather font families, sizes, weights, line heights.
Spacing: Map padding/margin scales, grid gaps.
Breakpoints: Collect responsive thresholds.
Shadows/Borders: Extract elevation and radius values.

3. Parse Components

Locate component definitions (React, Vue, etc.).
Document props, variants, states, and usage patterns.
Extract default values and accepted types.

4. Map Relationships

Trace token usage in components (e.g., which colors are used where).
Identify composition patterns (cards, modals, buttons).

5. Structure for Claude

Generate a knowledge base in plain text or Markdown:

# Design System: [Name]
## Tokens
- **Primary Color**: #3A86FF (used in buttons, links)
- **Font Scale**: 14px (base), 16px (body), 24px (heading)
## Components
### Button
- **Props**: size (sm/md/lg), variant (primary/ghost)
- **Default Style**: Background: Primary Color, Border-radius: 8px

Include code snippets for component usage.
Add constraints (e.g., “Never use spacing value > 64px”).

6. Validate Locally

Cross-check extracted data with visual examples (screenshots/docs).
Ensure completeness and consistency.

Tools for Static Analysis

CSS/SCSS: PostCSS, stylelint, custom parsers.
JavaScript: AST parsers (Babel, TypeScript compiler).
JSON/YAML: Direct reading for config files.
Documentation: Regex or markdown parsers.

Example Output Snippet

design_system:
  tokens:
    colors:
      primary: "#3A86FF"
      text: "#1A1A1A"
    spacing:
      scale: [4, 8, 16, 32, 64]
  components:
    Button:
      description: "Used for primary actions"
      props:
        variant: ["primary", "outline", "ghost"]
        size: ["sm", "md", "lg"]
      usage: |
        <Button variant="primary" size="md">Click Me</Button>

This structured data can be fed directly into Claude as a skill for design-related queries.