claude-design-studio-ui-generator

# Claude Design Studio UI Generator > Skill by [ara.so](https://ara.so) — Design Skills collection. ## Overview **Claude-Code-Design-AI** (Claude Design Studio) is a dual-brain AI system that bridges code logic and visual design. It orchestrates Claude API for nuanced design reasoning and OpenAI API for rapid code generation, producing production-ready UI components with integrated styling, animations, and accessibility compliance. **Key capabilities:** - Generate UI components from natural language descriptions - Translate raw code/APIs into visual interfaces - Multi-agent architecture (Alpha=logic, Omega=design, Sigma=QA, Theta=optimization) - Built-in hooks system for validation and post-processing - Design system harmonization (Material UI, Tailwind, custom) - Marketplace with installable skills and plugins ## Installation ### Prerequisites - Node.js v18+ or Bun runtime - Claude API key and/or OpenAI API key - 512MB RAM minimum ```bash # Clone and install git clone https://github.com/larajuniorlara/Claude-Design-Studio.git cd Claude-Design-Studio npm install # Or with Bun bun install # Initialize design profile npx claude-design init # Set up API keys export CLAUDE_API_KEY="your-claude-api-key" export OPENAI_API_KEY="your-openai-api-key" ``` ## Core API Usage ### JavaScript/TypeScript API ```javascript import { ClaudeDesign } from 'claude-code-design-ai'; // Initialize with API keys const designer = new ClaudeDesign({ claudeApiKey: process.env.CLAUDE_API_KEY, openaiApiKey: process.env.OPENAI_API_KEY, primaryRouter: 'claude', fallback: 'openai' }); // Generate a component from description const component = await designer.generateUI({ description: "pricing table with three tiers", framework: "react", style: { theme: "minimalist", primaryColor: "#FF6B35", effect: "glassmorphism" }, constraints: { responsive: true, accessibility: "WCAG-AA", animations: "subtle" } }); console.log(component.code); // React component code console.log(component.styles); // CSS/styled-components console.log(component.assets); // SVG icons, if any ``` ### Generate from Existing Data ```javascript // Transform data into visual component const products = [ { id: 1, name: "Laptop Pro", price: 1299, rating: 4.5 }, { id: 2, name: "Wireless Mouse", price: 29, rating: 4.8 } ]; const productGallery = await designer.generateUI({ data: products, componentType: "grid", desiredStyle: "card-based with hover effects", framework: "vue", constraints: { responsive: true, darkMode: true, animations: "smooth transitions" } }); // Output: Vue component with scoped styles ``` ### Code-to-Canvas Translation ```javascript // Visualize existing API logic const apiCode = ` async function fetchUserStats(userId) { const response = await fetch(\`/api/users/\${userId}/stats\`); return response.json(); } `; const visualization = await designer.visualizeCode({ code: apiCode, targetFormat: "dashboard-widget", includeWireframe: true, style: "modern-dashboard" }); console.log(visualization.componentCode); // React/Vue component console.log(visualization.wireframe); // SVG wireframe console.log(visualization.suggestions); // UX improvement tips ``` ## CLI Commands ### Interactive Console ```bash # Launch design console npx claude-design console --profile myproject.yml # Inside console: > generate component "User Profile Card" with avatar and stats > visualize codebase > optimize design consistency > export component library ``` ### One-off Generation ```bash # Generate component from command line npx claude-design generate \ --type "modal" \ --description "confirmation dialog with two buttons" \ --framework "react" \ --style "material-ui" \ --output "./components/ConfirmDialog.jsx" # Code-to-design translation npx claude-design translate \ --input "./src/api/userService.js" \ --output-type "dashboard" \ --framework "svelte" # Batch generate from skill npx claude-design skill apply \ --skill "claude-code-skill-data-visualization" \ --data "./data/sales.json" \ --output "./components" ``` ## Configuration ### Profile File (`.claude-design-profile.yml`) ```yaml project: name: "E-Commerce Platform" version: "2026.1" design_system: "tailwind" preferences: primary_color: "#3B82F6" secondary_color: "#10B981" font_family: "Inter, system-ui, sans-serif" border_radius: "0.5rem" animation_style: "spring" sub_agents: enabled: true alpha: language_preference: "TypeScript" strict_mode: true omega: design_principle: "atomic" color_theory: "complementary" sigma: accessibility_level: "WCAG-AAA" performance_budget: "mobile-first" theta: optimize_images: true minify_css: true tree_shake: true api_routing: primary: "claude" fallback: "openai" timeout: 30000 retry_attempts: 3 hooks: - type: "before_generation" action: "validate_input_schema" - type: "after_generation" action: "run_lighthouse_audit" - type: "after_generation" action: "check_accessibility" marketplace: auto_update: true installed_plugins: - "claude-code-plugin-responsive-grid" - "claude-code-plugin-dark-mode-toggle" skills: - "claude-code-skill-accordion" - "claude-code-skill-data-table" - "claude-code-skill-modal" ``` ### Programmatic Configuration ```javascript const designer = new ClaudeDesign({ profile: { project: { name: "My App", designSystem: "custom" }, preferences: { primaryColor: "#667eea", fontFamily: "Poppins" }, subAgents: { enabled: true, alpha: { languagePreference: "TypeScript" }, omega: { designPrinciple: "material" } } }, claudeApiKey: process.env.CLAUDE_API_KEY, openaiApiKey: process.env.OPENAI_API_KEY }); ``` ## Common Patterns ### Pattern 1: Design System Harmonization ```javascript // Ensure all generated components match your design system const designer = new ClaudeDesign({ profile: { designSystem: "material_ui_v5" } }); const button = await designer.generateUI({ description: "primary action button", ensureHarmony: true // Automatically uses Material UI tokens }); // Output will use MUI's Button component and theme tokens ``` ### Pattern 2: Skill Stacking ```javascript // Combine multiple skills for complex components const dashboard = await designer.composeFromSkills({ skills: [ { name: "claude-code-skill-data-table", config: { sortable: true } }, { name: "claude-code-skill-chart", config: { type: "line" } }, { name: "claude-code-skill-filter-bar", config: { filters: ["date", "category"] } } ], layout: "two-column", framework: "react" }); ``` ### Pattern 3: Responsive Generation ```javascript // Generate with mobile-first breakpoints const hero = await designer.generateUI({ description: "hero section with background image and CTA", responsive: { breakpoints: { mobile: 320, tablet: 768, desktop: 1024, wide: 1440 }, strategy: "mobile-first" } }); // Output includes @media queries and fluid typography ``` ### Pattern 4: Sub-Agent Workflow ```javascript // Use specific sub-agents for targeted tasks const result = await designer.runWorkflow({ agents: ["alpha", "omega", "sigma"], input: { description: "user authentication form", requirements: { logic: "email validation, password strength", design: "modern, accessible", validation: "security best practices" } } }); // Agent Alpha: Handles form validation logic // Agent Omega: Designs form layout and styling // Agent Sigma: Validates WCAG compliance and security ``` ### Pattern 5: Hooks for Quality Control ```javascript const designer = new ClaudeDesign({ hooks: [ { type: "after_generation", action: async (component) => { // Custom validation const contrastRatio = calculateContrast( component.styles.textColor, component.styles.backgroundColor ); if (contrastRatio < 4.5) { throw new Error("Insufficient color contrast"); } } } ] }); const card = await designer.generateUI({ description: "info card" }); // Hook runs automatically and validates contrast ``` ## Framework-Specific Examples ### React with TypeScript ```typescript import { ClaudeDesign, ComponentConfig } from 'claude-code-design-ai'; const designer = new ClaudeDesign({ claudeApiKey: process.env.CLAUDE_API_KEY }); const config: ComponentConfig = { description: "user notification toast", framework: "react", language: "typescript", style: { theme: "dark", animations: "slide-in-right" } }; const toast = await designer.generateUI(config); // Generated output includes: // - NotificationToast.tsx // - NotificationToast.module.css // - types.ts (TypeScript interfaces) ``` ### Vue 3 Composition API ```javascript const modal = await designer.generateUI({ description: "confirmation modal with cancel and confirm actions", framework: "vue", vueVersion: 3, compositionApi: true, constraints: { accessibility: "keyboard-navigable", teleport: true } }); // Output: Vue 3 SFC with <script setup>, <template>, and <style scoped> ``` ### Svelte ```javascript const chart = await designer.generateUI({ description: "animated bar chart", framework: "svelte", data: salesData, constraints: { reactive: true, animations: "smooth" } }); // Output: .svelte file with reactive $: statements ``` ## Plugin System ### Installing Plugins ```bash # From marketplace npx claude-design plugin install claude-code-plugin-responsive-grid # From local file npx claude-design plugin install ./plugins/my-custom-plugin.js ``` ### Creating Custom Plugins ```javascript // my-gradient-plugin.js module.exports = { name: "gradient-enhancer", version: "1.0.0", transform: (component, options) => { // Post-process generated component if (options.gradientStyle === "cosmic") { component.styles.background = "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"; } return component; }, hooks: { afterGeneration: (component) => { console.log("Gradient plugin applied"); } } }; ``` ```javascript // Use plugin const designer = new ClaudeDesign({ plugins: [ require('./my-gradient-plugin.js') ] }); const hero = await designer.generateUI({ description: "hero section", pluginOptions: { gradientEnhancer: { gradientStyle: "cosmic" } } }); ``` ## Skills System ### Using Pre-built Skills ```javascript // Apply accordion skill const faq = await designer.applySkill({ skillName: "claude-code-skill-accordion", data: [ { question: "What is this?", answer: "An FAQ item" }, { question: "How does it work?", answer: "Magic" } ], options: { multipleOpen: false, animated: true } }); ``` ### Creating Custom Skills ```yaml # my-skill.yml name: custom-pricing-table version: 1.0.0 description: Generate pricing tables with tier comparison parameters: - name: tiers type: array required: true - name: highlightTier type: number default: 1 template: framework: react pattern: | Grid layout with {tiers.length} columns Highlight tier {highlightTier} with accent color Include feature comparison checkmarks Add CTA button for each tier ``` ```bash # Install custom skill npx claude-design skill install ./my-skill.yml ```