MCPInstall

claude-design-system-hooks

by reason-machinesFrontend & Design

AI-powered design-to-code engine that generates production-ready UI components from natural language using Claude API

Installs
169
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/reason-machines/design-skills --skill claude-design-system-hooks
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads claude-design-system-hooks automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Claude Design System Hooks

Skill by ara.so — Design Skills collection.

What This Project Does

Claude Design System Hooks is a neuro-adaptive design orchestration engine that transforms natural language descriptions into production-ready UI code. It bridges Claude AI's cognitive capabilities with multi-framework code generation, allowing you to create entire design systems, component libraries, and responsive UI patterns through conversational prompts.

Key capabilities:

  • Design-as-Dialogue: Describe UIs in natural language, get framework-specific code
  • Multi-Framework Output: Generate identical designs in React, Vue, Angular, or vanilla HTML/CSS
  • Design Token Extraction: Automatically parse color palettes, typography, spacing from specs
  • Accessibility-First: Built-in WCAG 2.2 compliance checks during generation
  • Plugin Ecosystem: Extend with Figma sync, Storybook integration, A11y auditing

Installation

Prerequisites

# Requires Node.js 18.x or higher
node --version  # should be >= 18.0.0

# Requires npm 10.x or higher
npm --version  # should be >= 10.0.0

Basic Installation

# Clone the repository
git clone https://github.com/BharathKumarSuresh/claude-design-system-hooks.git
cd claude-design-system-hooks

# Install core dependencies
npm install @claude-design/core @claude-design/cli

# Configure with your Claude API key
claude-design configure --api-key $CLAUDE_API_KEY

# Verify installation
claude-design --version

Docker Installation

# Pull official image
docker pull claude-design-engine:2026-stable

# Run containerized
docker run -p 3000:3000 \
  -e CLAUDE_API_KEY=$CLAUDE_API_KEY \
  claude-design-engine:2026-stable

Configuration

Profile Configuration File

Create .claude-design.json in your project root:

{
  "profile": {
    "name": "my-design-profile",
    "version": "2026.3",
    "preferences": {
      "framework": "react",
      "version": "18.x",
      "styling": "tailwind",
      "component_library": "shadcn-ui",
      "responsive_breakpoints": ["sm", "md", "lg", "xl", "2xl"],
      "accessibility_level": "wcag_22_aa",
      "code_style": "typescript_strict"
    },
    "design_tokens": {
      "primary": "#6366f1",
      "secondary": "#8b5cf6",
      "accent": "#f59e0b",
      "neutral": "#64748b",
      "spacing_scale": [4, 8, 12, 16, 24, 32, 48, 64, 96],
      "border_radius": {
        "sm": 4,
        "md": 8,
        "lg": 12,
        "xl": 16
      }
    },
    "plugins": [
      {
        "name": "a11y-auditor",
        "enabled": true,
        "config": {
          "strict_mode": true,
          "auto_fix": false
        }
      }
    ]
  }
}

Environment Variables

# Required
export CLAUDE_API_KEY="your-claude-api-key"

# Optional - for hybrid AI workflows
export OPENAI_API_KEY="your-openai-api-key"

# Optional - configure output directory
export CLAUDE_DESIGN_OUTPUT_DIR="./generated-components"

Key Commands

Interactive Mode

# Start conversational design session
claude-design interact --profile my-design-profile

# With custom framework
claude-design interact --framework vue --styling scss

# With accessibility constraints
claude-design interact --accessibility wcag-22-aaa

Batch Generation

# Generate from YAML specification
claude-design generate \
  --input ./design-specs/dashboard.yaml \
  --output ./src/components \
  --framework react \
  --styling tailwind \
  --include-tests \
  --include-stories

# Generate from Figma export
claude-design generate \
  --input ./figma-export.json \
  --output ./components \
  --framework angular \
  --accessibility wcag-22-aa

# Generate entire design system
claude-design generate \
  --input ./design-system-spec.yaml \
  --output ./design-system \
  --framework react \
  --include-tokens \
  --include-docs \
  --verbose

Component Generation

# Generate single component
claude-design component create \
  --name ProductCard \
  --description "Card displaying product image, title, price, and add-to-cart button" \
  --framework react \
  --output ./src/components/ProductCard

# Generate with props specification
claude-design component create \
  --name DataTable \
  --props-file ./specs/datatable-props.json \
  --framework vue \
  --with-types

Design Token Management

# Extract tokens from image/mockup
claude-design tokens extract \
  --input ./mockups/homepage.png \
  --output ./tokens/design-tokens.json

# Generate CSS/SCSS variables from tokens
claude-design tokens generate \
  --input ./tokens/design-tokens.json \
  --format css-variables \
  --output ./styles/tokens.css

# Validate token consistency
claude-design tokens validate ./tokens/*.json

Plugin Management

# List available plugins
claude-design plugins list

# Install plugin
claude-design plugins install @claude-design/figma-sync

# Configure plugin
claude-design plugins configure figma-sync \
  --token $FIGMA_TOKEN \
  --sync-mode bidirectional

# Browse marketplace
claude-design marketplace browse --category animation

# Install community skill
claude-design marketplace install @community/lottie-animator

Usage Patterns

Pattern 1: Natural Language Component Generation

// In your Node.js script or AI agent workflow
const { ClaudeDesign } = require('@claude-design/core');

const designer = new ClaudeDesign({
  apiKey: process.env.CLAUDE_API_KEY,
  framework: 'react',
  styling: 'tailwind'
});

async function generateLoginForm() {
  const result = await designer.generate({
    prompt: `Create a modern login form with:
      - Email and password fields
      - Remember me checkbox
      - Forgot password link
      - Social login buttons (Google, GitHub)
      - Dark theme with purple accent
      - Fully accessible with keyboard navigation`,
    options: {
      includeTests: true,
      includeStorybook: true,
      accessibility: 'wcag-22-aa'
    }
  });

  console.log('Generated files:', result.files);
  // Writes to ./src/components/LoginForm/
  await result.save('./src/components/LoginForm');
}

generateLoginForm();

Pattern 2: Design System Specification

# design-system-spec.yaml
system:
  name: "Corporate Design System"
  version: "1.0.0"
  framework: "react"
  styling: "tailwind"

tokens:
  colors:
    primary: "#0066cc"
    secondary: "#6b7280"
    accent: "#f59e0b"
    success: "#10b981"
    error: "#ef4444"
    warning: "#f59e0b"
  
  typography:
    scale: "major-third"
    base_size: 16
    fonts:
      heading: "Inter, sans-serif"
      body: "Inter, sans-serif"
      mono: "Fira Code, monospace"
  
  spacing:
    unit: 4
    scale: [1, 2, 3, 4, 6, 8, 12, 16, 24, 32]
  
  breakpoints:
    sm: 640
    md: 768
    lg: 1024
    xl: 1280
    "2xl": 1536

components:
  - name: "Button"
    variants: ["primary", "secondary", "outline", "ghost"]
    sizes: ["sm", "md", "lg"]
    states: ["default", "hover", "active", "disabled"]
  
  - name: "Card"
    props:
      - name: "variant"
        type: "string"
        values: ["default", "bordered", "elevated"]
      - name: "padding"
        type: "spacing"
        default: 4
  
  - name: "Modal"
    features: ["backdrop", "close-button", "keyboard-escape"]
    accessibility: "wcag-22-aa"

pages:
  - name: "Dashboard"
    layout: "sidebar-content"
    components: ["StatCard", "DataTable", "ChartWidget"]

# Generate entire system
claude-design generate \
  --input design-system-spec.yaml \
  --output ./design-system \
  --include-docs \
  --include-storybook

Pattern 3: Programmatic API Usage

// advanced-usage.ts
import { ClaudeDesign, DesignConfig } from '@claude-design/core';
import { FigmaSyncPlugin } from '@claude-design/figma-sync';
import { A11yAuditor } from '@claude-design/a11y-auditor';

const config: DesignConfig = {
  apiKey: process.env.CLAUDE_API_KEY,
  framework: 'react',
  typescript: true,
  styling: 'tailwind',
  plugins: [
    new FigmaSyncPlugin({
      token: process.env.FIGMA_TOKEN,
      fileKey: 'abc123def456'
    }),
    new A11yAuditor({
      strictMode: true,
      level: 'wcag-22-aaa'
    })
  ]
};

const designer = new ClaudeDesign(config);

async function buildNavigationComponent() {
  // Generate component from description
  const nav = await designer.component.create({
    name: 'MainNavigation',
    description: `
      Responsive navigation bar with:
      - Logo on left
      - Menu items in center
      - User profile dropdown on right
      - Mobile hamburger menu
      - Sticky header on scroll
    `,
    responsive: true,
    a11y: {
      ariaLabels: true,
      keyboardNav: true,
      screenReader: true
    }
  });

  // Audit accessibility
  const auditResults = await designer.audit.a11y(nav.code);
  console.log('Accessibility score:', auditResults.score);

  // Generate tests
  const tests = await designer.tests.generate(nav.code, {
    framework: 'jest',
    coverage: 'full'
  });

  // Save all artifacts
  await nav.save('./src/components/MainNavigation', {
    includeTests: true,
    includeStorybook: true,
    includeTypes: true
  });
}

buildNavigationComponent();

Pattern 4: Design Token Extraction

const { TokenExtractor } = require('@claude-design/core');

async function extractFromMockup() {
  const extractor = new TokenExtractor({
    apiKey: process.env.CLAUDE_API_KEY
  });

  // Extract from image
  const tokens = await extractor.fromImage('./mockups/homepage.png', {
    extractColors: true,
    extractTypography: true,
    extractSpacing: true,
    extractBorderRadius: true
  });

  console.log('Extracted tokens:', tokens);
  
  /*
  {
    colors: {
      primary: { hex: '#6366f1', name: 'Indigo' },
      secondary: { hex: '#8b5cf6', name: 'Purple' },
      accent: { hex: '#f59e0b', name: 'Amber' }
    },
    typography: {
      headings: { family: 'Inter', weight: 700, scale: [32, 24, 20] },
      body: { family: 'Inter', weight: 400, size: 16 }
    },
    spacing: [4, 8, 12, 16, 24, 32, 48],
    borderRadius: { sm: 4, md: 8, lg: 12 }
  }
  */

  // Generate CSS variables
  const css = await extractor.toCSS(tokens);
  await fs.writeFile('./styles/tokens.css', css);

  // Generate Tailwind config
  const tailwindConfig = await extractor.toTailwind(tokens);
  await fs.writeFile('./tailwind.config.js', tailwindConfig);
}

extractFromMockup();

Pattern 5: Multi-Framework Generation

const { ClaudeDesign } = require('@claude-design/core');

async function generateForAllFrameworks() {
  const designer = new ClaudeDesign({
    apiKey: process.env.CLAUDE_API_KEY
  });

  const description = `
    Product card with image, title, price, rating stars,
    and add-to-cart button. Include hover effects.
  `;

  // Generate React version
  const reactComponent = await designer.generate({
    prompt: description,
    framework: 'react',
    styling: 'tailwind',
    typescript: true
  });
  await reactComponent.save('./output/react/ProductCard');

  // Generate Vue version
  const vueComponent = await designer.generate({
    prompt: description,
    framework: 'vue',
    styling: 'scss',
    composition: true
  });
  await vueComponent.save('./output/vue/ProductCard');

  // Generate Angular version
  const angularComponent = await designer.generate({
    prompt: description,
    framework: 'angular',
    styling: 'scss',
    standalone: true
  });
  await angularComponent.save('./output/angular/ProductCard');

  // Generate vanilla HTML/CSS
  const vanillaComponent = await designer.generate({
    prompt: description,
    framework: 'html',
    styling: 'css',
    modern: true
  });
  await vanillaComponent.save('./output/vanilla/ProductCard');
}

generateForAllFrameworks();

Common Workflows

Workflow 1: Rapid Prototyping

# Start interactive session
claude-design interact --framework react --styling tailwind

# Example conversation:
# You: "Create a landing page for a SaaS product"
# Claude: [generates hero section, features grid, pricing table, CTA]

# You: "Make it dark theme with purple accent"
# Claude: [updates color scheme]

# You: "Add testimonials section"
# Claude: [adds testimonial carousel]

# Export when satisfied
# Files saved to ./generated-components/

Workflow 2: Design System Migration

# Step 1: Extract tokens from existing design
claude-design tokens extract \
  --input ./current-app/styles \
  --output ./tokens/legacy-tokens.json

# Step 2: Generate new design system
claude-design generate \
  --input ./specs/new-design-system.yaml \
  --tokens ./tokens/legacy-tokens.json \
  --output ./new-design-system

# Step 3: Create migration guide
claude-design docs migration \
  --from ./tokens/legacy-tokens.json \
  --to ./new-design-system/tokens.json \
  --output ./MIGRATION.md

Workflow 3: CI/CD Integration

# .github/workflows/design-system.yml
name: Generate Design System

on:
  push:
    paths:
      - 'design-specs/**'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install Claude Design
        run: |
          npm install -g @claude-design/cli
          claude-design configure --api-key ${{ secrets.CLAUDE_API_KEY }}
      
      - name: Generate Components
        run: |
          claude-design generate \
            --input ./design-specs/components.yaml \
            --output ./src/components \
            --framework react \
            --include-tests \
            --include-stories
      
      - name: Audit Accessibility
        run: |
          claude-design audit a11y ./src/components \
            --level wcag-22-aa \
            --fail-on-warnings
      
      - name: Commit Changes
        run: |
          git config user.name "Claude Design Bot"
          git add src/components
          git commit -m "chore: regenerate design system"
          git push

Troubleshooting

Issue: API Rate Limiting

# Check current rate limit status
claude-design status --api-limits

# Configure request throttling
claude-design configure \
  --rate-limit 10 \
  --rate-limit-window 60000

Issue: Generated Code Doesn't Match Framework Version

# Specify exact framework version
claude-design generate \
  --framework react@18.2.0 \
  --input ./spec.yaml

# Update framework adapters
npm update @claude-design/react-adapter

Issue: Accessibility Audit Failures

// Enable auto-fix mode
const designer = new ClaudeDesign({
  apiKey: process.env.CLAUDE_API_KEY,
  plugins: [
    new A11yAuditor({
      autoFix: true,  // Automatically fix common issues
      strictMode: false  // Use warnings instead of errors
    })
  ]
});

// Generate with explicit a11y requirements
const component = await designer.generate({
  prompt: 'Login form',
  accessibility: {
    level: 'wcag-22-aa',
    requirements: [
      'keyboard-navigation',
      'screen-reader-labels',
      'color-contrast-4.5:1',
      'focus-indicators'
    ]
  }
});

Issue: Design Tokens Not Applying

# Validate token file structure
claude-design tokens validate ./tokens/design-tokens.json

# Regenerate CSS variables
claude-design tokens generate \
  --input ./tokens/design-tokens.json \
  --format css-variables \
  --output ./styles/tokens.css \
  --force

# Verify token references in generated code
claude-design audit tokens ./src/components

Issue: Plugin Conflicts

# List active plugins
claude-design plugins list --active

# Disable conflicting plugin
claude-design plugins disable @community/conflicting-plugin

# Reset plugin configuration
claude-design plugins reset --all

# Reinstall core plugins
npm install @claude-design/figma-sync@latest

Debug Mode

# Enable verbose logging
claude-design generate \
  --input ./spec.yaml \
  --verbose \
  --debug \
  --log-file ./debug.log

# Check system diagnostics
claude-design diagnostics --full

Advanced Configuration

Custom Subagents

{
  "subagents": [
    {
      "id": "color-theorist",
      "priority": 1,
      "specialties": ["color_harmony", "contrast_ratios"],
      "model": "claude-sonnet-4"
    },
    {
      "id": "layout-architect",
      "priority": 2,
      "specialties": ["grid_systems", "responsive_design"],
      "model": "claude-sonnet-4"
    },
    {
      "id": "typography-curator",
      "priority": 3,
      "specialties": ["font_pairing", "readability"],
      "model": "claude-haiku-3.5"
    }
  ]
}

Hybrid AI Configuration

# Configure Claude as primary, OpenAI as fallback
claude-design configure \
  --ai-provider hybrid \
  --primary claude \
  --claude-key $CLAUDE_API_KEY \
  --openai-key $OPENAI_API_KEY \
  --fallback-on-rate-limit true

This skill enables AI coding agents to leverage Claude's design capabilities for generating production-ready UI components, design systems, and accessible interfaces from natural language descriptions.

FAQ

What does the claude-design-system-hooks skill do?

AI-powered design-to-code engine that generates production-ready UI components from natural language using Claude API

How do I install claude-design-system-hooks?

Run npx skills add https://github.com/reason-machines/design-skills --skill claude-design-system-hooks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/claude-design-system-hooks/ (personal) or .claude/skills/claude-design-system-hooks/ (project).

Which AI agents can use claude-design-system-hooks?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is claude-design-system-hooks safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains claude-design-system-hooks?

It is published by reason-machines in reason-machines/design-skills. It has 169 recorded installs.

More from reason-machines/design-skills

View all →

awesome-claude-design

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

205 installs

design-md-format

reason-machines/design-skills

Create and validate DESIGN.md files that give AI coding agents structured understanding of design systems through machine-readable tokens and human-readable rationale.

178 installs

open-codesign-ai-design

reason-machines/design-skills

Use Open CoDesign to generate prototypes, slides, and PDFs from prompts with Claude, GPT, Gemini, or local models

AI & Agents175 installs

open-design-ai-prototyping

reason-machines/design-skills

Open the skill to read its SKILL.md instructions.

174 installs

diagram-design-editorial

reason-machines/design-skills

Create editorial-quality diagrams in HTML + SVG matching your brand — architecture, flowcharts, sequences, timelines, quadrants, and 9 more types.

Docs & Writing169 installs

claude-design-ui-framework

reason-machines/design-skills

AI UI/UX framework for building Claude-powered apps with React, Tailwind, screenshot-to-code, and Artifacts-style components

Frontend & Design168 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs