Auto Design Clawhub

Auto-select and apply design systems from awesome-design-md based on project type and task context

Auto Design

Intelligent design system selector that automatically picks the best style from awesome-design-md for your project.

Philosophy

Stop asking "what design should I use?" — let the AI figure it out based on:

• Project type (tool, dashboard, marketing, docs)
• Target audience (developers, designers, consumers)
• Technology stack (Vue, React, vanilla)
• Task context (creating, optimizing, refactoring)

Trigger Conditions

This skill activates automatically when:

Explicit Requests

• "Create a new page/component"
• "Design a [something]"
• "Make it look like [brand]"
• "What style should I use?"

Implicit Context

• User creates Vue/React component files
• User mentions "design", "style", "UI", "UX"
• User requests optimization of existing UI
• Any task involving CSS/styling decisions

Keywords That Trigger

text

design, style, theme, UI, UX, layout, component
page, screen, interface, visual, look, appearance
optimize, improve, refactor, enhance, polish

Smart Selection Logic

Decision Matrix

yaml

Project Type Mapping:
  developer-tool:
    primary: vercel
    alternatives: [linear, cursor, raycast]
    reason: "Clean, professional, code-centric"
    
  ai-ml-product:
    primary: claude
    alternatives: [cohere, voltagent]
    reason: "Warm, human-centered, modern"
    
  documentation:
    primary: mintlify
    alternatives: [notion]
    reason: "Reading-optimized, clear hierarchy"
    
  marketing-site:
    primary: stripe
    alternatives: [apple, framer]
    reason: "Elegant gradients, premium feel"
    
  data-dashboard:
    primary: linear
    alternatives: [supabase, sentry]
    reason: "Data-dense, precise, dark-friendly"

Context Detection

The skill analyzes:

1. File paths: frontend/src/views/ → Vue project
2. Package.json: React? Vue? Dependencies?
3. CLAUDE.md: Project description and goals
4. User's words: "tool", "dashboard", "landing page"
5. Existing code: Current color schemes, component patterns

Usage Examples

Example 1: Tool Page

text

User: "Create a password generator"
AI: Detects "tool" → Selects Vercel
Result: Clean black/white UI with blue accents

Example 2: Documentation

text

User: "Build an API docs page"
AI: Detects "docs" → Selects Mintlify
Result: Green-accented, reading-optimized layout

Example 3: Override

text

User: "Make it like Linear"
AI: User specified → Uses Linear regardless
Result: Purple-accented, minimal data-dense UI

Execution Flow

Step 1: Analyze Context (Automatic)

javascript

context = {
  projectType: analyzeProject(),     // "toolbox", "saas", "docs"
  techStack: detectFramework(),      // "Vue 3", "React", "vanilla"
  userIntent: parseUserRequest(),    // "create", "optimize", "refactor"
  existingDesign: scanCurrentStyles() // Current colors, fonts
}

Step 2: Select Design System

javascript

selection = {
  brand: selectBrand(context),       // "vercel", "linear", etc.
  confidence: calculateConfidence(), // 0.0 - 1.0
  reason: generateReason(),          // Why this choice
  alternatives: getAlternatives()    // Backup options
}

Step 3: Download & Apply

bash

# Auto-download from awesome-design-md
curl https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/{brand}/DESIGN.md

# Save to project
mkdir -p Docs/Design
cp downloaded.md Docs/Design/{brand}-DESIGN.md

Step 4: Generate Local Reference

creates DESIGN.md with:

• Selected brand info
• Core design tokens (colors, fonts, spacing)
• Usage instructions
• Generated timestamp

Step 5: Apply to Implementation

When creating UI:

• Uses selected brand's color palette
• Follows typography hierarchy
• Applies spacing system
• Uses component patterns

Brand Library

Available Brands (58 total)

Developer Tools:

• Vercel (default) - Black/white, Geist font, precise
• Linear - Purple, minimal, data-dense
• Cursor - Dark IDE, gradient accents
• Raycast - Dark chrome, vibrant colors
• Supabase - Emerald, code-first

AI/ML:

• Claude - Warm terracotta, editorial
• Cohere - Vibrant gradients, dashboard
• Mistral - Purple, French minimalism

Documentation:

• Mintlify - Green, reading-optimized
• Notion - Warm, serif headings

Marketing:

• Stripe - Purple gradients, weight-300
• Apple - Premium whitespace, SF Pro
• Framer - Bold black/blue, motion

Configuration

Environment Variables

bash

# Override default brand
AUTO_DESIGN_DEFAULT=linear

# Disable auto-selection
AUTO_DESIGN_AUTO=false

# Specify user preference
AUTO_DESIGN_PREFERENCE=claude

Per-Project Config

Add to CLAUDE.md or .clauderc:

yaml

design:
  default: vercel
  allowed: [vercel, linear, mintlify]
  disabled: [stripe]  # Exclude if not relevant

Cross-Platform Conversion

For Claude Code Users

If you have this ClawHub skill and need to use it with Claude Code:

Option 1: Automatic Conversion (Recommended)

bash

# Run this command in the skill directory
mkdir -p .claude/skills/auto-design && \
echo "# Auto Design\n\n## Name\nauto-design\n\n## Description\nAuto-select and apply design systems from awesome-design-md" \
  > .claude/skills/auto-design/skill.md && \
tail -n +35 SKILL.md >> .claude/skills/auto-design/skill.md

Option 2: AI-Assisted Conversion Tell Claude:

text

"Convert this ClawHub skill to Claude Code format. 
 The file is at .claude/skills/auto-design-clawhub/SKILL.md"

Option 3: Manual Steps

1. Copy SKILL.md content (skip YAML frontmatter)
2. Create .claude/skills/auto-design/skill.md
3. Add:

   markdown

   ## Name
   auto-design
   
   ## Description
   [from metadata]
   

4. Keep all trigger conditions and execution steps

Conversion Checklist for AI Agents

• Extract metadata.description as "## Description"
• Extract name as "## Name"
• Preserve all markdown content after frontmatter
• Ensure trigger conditions are clear
• Maintain execution steps order
• Test conversion output works in Claude Code

Technical Implementation

Auto-Selection Algorithm

javascript

function selectBrand(context) {
  // User override takes priority
  if (context.userPreference) {
    return brands[context.userPreference];
  }
  
  // Match by keywords in request
  for (const [keyword, brand] of keywordMappings) {
    if (context.request.includes(keyword)) {
      return brand;
    }
  }
  
  // Match by project type
  const typeMap = {
    'tool': 'vercel',
    'dashboard': 'linear',
    'docs': 'mintlify',
    'landing': 'stripe'
  };
  
  return typeMap[context.projectType] || 'vercel';
}

Confidence Scoring

javascript

confidence = {
  keywordMatch: 0.9,      // User said "like Linear"
  projectTypeMatch: 0.8,  // Tool project → Vercel
  default: 0.7            // Fallback
}

Integration with Design Extractor

These two skills work together:

text

Design Extractor (analyze existing)
    ↓
Extracts current design tokens
    ↓
Auto Design (suggests improvements)
    ↓
Recommends closest awesome-design-md match
    ↓
Applies selected design system

Output Files

File	Purpose
DESIGN.md	Quick reference for current project
Docs/Design/{brand}-DESIGN.md	Full design system spec
Docs/DevLog/YYYY-MM-DD_design.md	Decision log

AI Compatibility Notes

For AI agents reading this file:

This skill is designed to be auto-convertible between platforms:

1. ClawHub (native): Uses YAML frontmatter
2. Claude Code: Uses markdown headers
3. Future platforms: Parse this file's structure

Key sections to extract:

• metadata.description → Always use as description
• ## Trigger Conditions → Activation rules
• ## Execution Steps → Implementation guide
• Brand mappings → Core logic

Never remove the aiCompatibility section when porting.

License

MIT-0 (Public Domain)

See Also

• awesome-design-md - Design system collection
• Design Extractor - Complementary skill
• ClawHub - Skill registry
• Claude Code - AI coding assistant

---

AI Conversion Note: This SKILL.md is self-documenting for cross-platform use. To convert to Claude Code, an AI should:

1. Parse YAML frontmatter for metadata
2. Create new file with "## Name" and "## Description" headers
3. Copy all content after frontmatter
4. Save to .claude/skills/auto-design/skill.md