Auto Design Clawhub

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

Install

openclaw skills install auto-design-clawhub

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

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

Smart Selection Logic

Decision Matrix

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:

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

Usage Examples

Example 1: Tool Page

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

Example 2: Documentation

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

Example 3: Override

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)

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

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

# 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

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

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)

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

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

Option 3: Manual Steps

Copy SKILL.md content (skip YAML frontmatter)
Create .claude/skills/auto-design/skill.md

Add:

## Name
auto-design

## Description
[from metadata]

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

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

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:

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:

ClawHub (native): Uses YAML frontmatter
Claude Code: Uses markdown headers
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)