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#

CategoryDetailsColorsCSS variables, hex codes, RGB values with usage frequencyTypographyFont families, sizes, weights, line heightsSpacingPadding, margin, gap valuesEffectsBorder radius, box shadows, bordersComponentsButton, 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

```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.