Design Extractor Clawhub

Extract design tokens from existing code and generate DESIGN.md with awesome-design-md comparison

Design Extractor

Extract design tokens from existing project code and generate standard DESIGN.md files.

Overview

This skill analyzes your project's CSS, SCSS, Vue, and other style files to:

• Extract color palettes with usage statistics
• Identify typography systems (fonts, sizes, weights)
• Catalog spacing values (padding, margin, gaps)
• Document visual effects (borders, shadows)
• Compare with awesome-design-md brands

Trigger Conditions

This skill activates when user requests:

• "Extract design from my project"
• "Generate DESIGN.md"
• "Analyze project styles"
• "Extract colors/fonts from codebase"
• "Create design documentation"
• Any request involving design system extraction

Prerequisites

• Node.js >= 18.0.0
• Project with style files (.css, .scss, .vue, etc.)

Installation

bash

# Via ClawHub CLI
clawhub install design-extractor

# Or manually clone
git clone https://github.com/moyubox/design-extractor.git
clawhub skill publish ./design-extractor

Usage

Command Line

bash

# Extract from specific directory
npx design-extractor frontend/src

# Extract from current project
npx design-extractor .

# Output will be:
# - DESIGN-EXTRACTED.md (extracted design system)
# - Docs/Design/extracted-analysis.json (raw data)

As a Skill

Once installed, the skill automatically:

1. Scans project for style files
2. Extracts all design tokens
3. Categorizes colors (primary, background, text, accent)
4. Compares with awesome-design-md brands
5. Generates DESIGN.md

What Gets Extracted

Category	Details
Colors	CSS variables, hex codes, RGB values with usage frequency
Typography	Font families, sizes, weights, line heights
Spacing	Padding, margin, gap values
Effects	Border radius, box shadows, borders
Components	Button, input, card patterns

Example Output

markdown

# Project Design System

> Extracted from: frontend/src
> Date: 2026-04-08

## Color Palette

### Primary
- **Primary** (`#667eea`): 24 uses
- **Secondary** (`#764ba2`): 10 uses

### Background
- **Background** (`#ffffff`): 26 uses

## Comparison

Closest awesome-design-md match:
- Mintlify: 100% similarity
- Stripe: 100% similarity
- Vercel: 66.7% similarity

Cross-Platform Compatibility

For AI Agents: Converting to Claude Code

If you're an AI assistant (Claude, GPT, etc.) and need to convert this ClawHub skill to Claude Code format:

Automatic Conversion Steps:

1. Read this SKILL.md file

2. Extract sections:

   • metadata.description → "## Description"
   • ## Trigger Conditions → "## Trigger Conditions"
   • ## Execution Steps → "## Execution Steps"
   • All content after frontmatter

3. Create Claude Code structure:

   text

   .claude/skills/design-extractor/
   └── skill.md
   

4. Generate Claude Code skill.md:

   markdown

   # Design Extractor
   
   ## Name
   design-extractor
   
   ## Description
   Extract design tokens from existing code and generate DESIGN.md 
   with awesome-design-md comparison.
   
   ## Trigger Conditions
   - User requests design extraction
   - User asks to generate DESIGN.md
   - User wants to analyze project styles
   - [Add all trigger conditions from this file]
   
   ## Execution Steps
   ### 1. Scan Project
   [Copy execution steps from this file]
   
   ## Implementation
   Use the Node.js script at scripts/extract-design.js
   

Quick Conversion Template:

javascript

// conversion-script.js
const fs = require('fs');
const yaml = require('yaml');

const skillContent = fs.readFileSync('SKILL.md', 'utf8');
const [, frontmatter, body] = skillContent.split('---');
const metadata = yaml.parse(frontmatter);

const claudeSkill = `# ${metadata.name}

## Name
${metadata.name}

## Description
${metadata.description}

## Trigger Conditions
${extractTriggers(body)}

## Execution Steps
${extractExecution(body)}

${body}
`;

fs.mkdirSync('.claude/skills/' + metadata.name, { recursive: true });
fs.writeFileSync('.claude/skills/' + metadata.name + '/skill.md', claudeSkill);
console.log('Converted to Claude Code format!');

Manual Conversion Checklist

• Remove YAML frontmatter
• Add "## Name" section
• Add "## Description" section
• Ensure "## Trigger Conditions" exists
• Ensure "## Execution Steps" exists
• Place in .claude/skills/{name}/skill.md

Technical Details

Extraction Algorithm

1. File Discovery: Recursively scans for .vue, .css, .scss, .less files
2. Regex Extraction: Uses patterns for colors, fonts, spacing
3. Normalization: Converts #fff → #ffffff, rgb() → hex
4. Categorization: Classifies colors by luminance and usage
5. Comparison: Matches against known design systems

Supported File Types

• Vue Single File Components (.vue)
• CSS (.css)
• SCSS/Sass (.scss, .sass)
• Less (.less)

Metadata Reference

For AI agents parsing this file:

yaml

skillType: "design-extraction"
language: "javascript"
platform: "node"
outputFormat: "markdown"
designSystemReference: "awesome-design-md"

License

MIT-0 (Public Domain)

Related

• awesome-design-md
• ClawHub
• Claude Code

---

AI Note: This file contains both ClawHub-compatible metadata AND instructions for converting to other AI platforms. Preserve the "aiCompatibility" section when forking or modifying.