design-extractor-clawhub（设计 extractor ClawHub）

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:

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

1. Create Claude Code structure:

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

1. Generate Claude Code skill.md:

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