Design Extractor Clawhub

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

Security Scan

The skill's instructions, required binaries, and behavior are coherent with its stated purpose (extracting design tokens from a project), but it's instruction-only and relies on external npm/GitHub artifacts — review those before running.

Purpose & Capability

The name/description (extract design tokens and generate DESIGN.md) align with the declared requirements: Node.js and npm are reasonable prerequisites for a Node-based extractor and the SKILL.md documents use of an npx package and a GitHub repo. There is a minor gap: the skill references a scripts/extract-design.js and the npm package 'design-extractor' but no code or install spec is bundled with the skill (it's instruction-only), which is plausible but worth noting.

Instruction Scope

SKILL.md explicitly instructs scanning the user's project files (*.css, *.scss, *.vue, etc.) and writing outputs (DESIGN-EXTRACTED.md, Docs/Design/extracted-analysis.json). That is expected for this purpose. The instructions do not ask the agent to read unrelated secrets or external system config. They do include helper conversion scripts that will read SKILL.md and write files under .claude/skills — benign for conversion, but it means the agent will perform filesystem reads/writes and should be granted only the intended repository scope.

Install Mechanism

There is no bundled install spec (the skill is instruction-only). The README suggests using 'npx design-extractor' or cloning from GitHub (https://github.com/moyubox/design-extractor). Both are common, but they fetch and execute code from external sources at runtime — you should inspect the npm package and GitHub repository before running npx or cloning.

Credentials

The skill requests no environment variables, no credentials, and no config paths. That is proportionate for a local codebase analysis tool.

Persistence & Privilege

always:false and normal user-invocable/autonomous-invocation defaults are used. The skill's instructions write files within the project or create AI-conversion artifacts (.claude/...), which is expected and limited in scope; it does not request system-wide persistence or alter other skills.

Assessment

This skill appears to be what it says: a Node-based design-token extractor that scans your project's style files and writes design docs. However, it is instruction-only and expects an external npm package or GitHub repo (uses 'npx design-extractor' and suggests cloning). Before running: 1) inspect the referenced GitHub repo and the npm package (if published) to ensure the code is trustworthy; 2) run it in a sandbox or CI environment if you're unsure, since it will read many project files and write output files; 3) avoid running npx on packages you haven't reviewed, and confirm the repository URL matches the intended project. If the owner or package isn't familiar to you, treat it as untrusted until you can audit the code.

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

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

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

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

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