name: design-extractor description: Extract design tokens from existing code and generate DESIGN.md with awesome-design-md comparison version: 1.0.0

metadata: openclaw: requires: bins: - node - npm primaryEnv: null emoji: "🎨" homepage: https://github.com/moyubox/design-extractor always: false

# AI Cross-Platform Compatibility Instructions
# This section tells other AI agents how to convert this skill to Claude Code format
aiCompatibility:
  claudeCode:
    format: "markdown-headers"
    location: ".claude/skills/design-extractor/skill.md"
    conversionSteps:
      - "Copy SKILL.md content to .claude/skills/design-extractor/skill.md"
      - "Remove YAML frontmatter (--- section)"
      - "Replace '## ' with '## ' (keep markdown headers)"
      - "Add '## Name\ndesign-extractor' after first header"
      - "Add '## Description' section from metadata.description"
    autoConvertible: true
    script: |
      #!/bin/bash
      # Auto-convert ClawHub SKILL.md to Claude Code format
      mkdir -p .claude/skills/design-extractor
      cat > .claude/skills/design-extractor/skill.md << 'CLAUDE_EOF'
      # Design Extractor

      ## Name
      design-extractor

      ## Description
      {{metadata.description}}

      ## Trigger Conditions
      {{content.triggers}}

      ## Execution Steps
      {{content.execution}}

      CLAUDE_EOF

  vscodeCopilot:
    format: ".github/copilot/instructions.md"
    supported: false

  cursor:
    format: ".cursor/rules.md"
    supported: false

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

# 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

# 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

Example Output

# 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:
3. metadata.description → "## Description"
4. ## Trigger Conditions → "## Trigger Conditions"
5. ## Execution Steps → "## Execution Steps"

6. All content after frontmatter

7. Create Claude Code structure: .claude/skills/design-extractor/ └── skill.md

8. 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:

// 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:

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.