AI BUTTON GENERATION

Comprehensive guidelines for AI-assisted development within the Editor platform

AI Button Generation System

Overview

The AI Button Generation system provides intelligent, automated button design creation with real-time customization, theme integration, and cross-platform export capabilities for the nx monorepo.

Features

🎨 Intelligent Design Variations

🎯 Smart Theme Integration

📱 Cross-Platform Export

How to Use

1. Access the AI Generator

Navigate to http://localhost:5300/#/ux/widgets/button and scroll to the "🤖 AI Button Generator" section.

2. Configure Your Design

Basic Settings

Color Configuration

Choose between two color modes:

Theme Colors (Recommended):

  1. Check "Use Theme Colors"
  2. Select a theme scheme (Primary, Secondary, Accent, etc.)
  3. Colors automatically adapt to your app's theme

Custom Colors:

  1. Uncheck "Use Theme Colors"
  2. Use color pickers to select primary and secondary colors
  3. Real-time preview updates automatically

Advanced Options

3. Generate Designs

Click "✨ Generate AI Designs" to create 3 unique button variations:

4. Preview & Apply

5. Export & Share

Export to Other Apps

  1. Click "📤 Export Widget" on any design
  2. Widget is saved to localStorage with key exported-ai-widgets
  3. Access in editor-web or other nx apps via WidgetImportService

Copy CSS

  1. Click "📋 Copy CSS" to get complete CSS code
  2. Includes hover states, focus states, and responsive breakpoints
  3. Ready to use in any application

Technical Implementation

Core Services

ButtonGenerationService

generateButtonDesigns(request: ButtonGenerationRequest): Observable<ButtonDesign[]>

WidgetImportService

getExportedWidgets(): Observable<ImportedWidget[]>
importWidget(widget: ImportedWidget, targetApp: string): Observable<boolean>
exportAsFiles(widget: ImportedWidget): void

Data Flow

  1. User configures design parameters in UI
  2. ButtonGenerationService processes request with theme colors
  3. Enhanced fallback system creates varied designs based on mood-style combinations
  4. UI renders live previews with actual CSS
  5. Export system saves to localStorage for cross-app usage

Integration Points

With Theme System

With Widget System

With Storage System

API Reference

ButtonGenerationRequest Interface

interface ButtonGenerationRequest {
  style: string;                    // Design style preference
  purpose: string;                  // Button functionality
  mood: string;                     // Emotional tone
  primaryColor: string;             // Main color (if not using theme)
  secondaryColor: string;           // Accent color
  text: string;                     // Button text content
  size: 'small' | 'medium' | 'large';
  industry: string;                 // Target industry
  accessibility: boolean;           // Prioritize accessibility
  useThemeColors?: boolean;         // Use app theme colors
  themeColorScheme?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error';
}

ButtonDesign Interface

interface ButtonDesign {
  id: string;
  name: string;
  description: string;
  styles: Record<string, any>;      // Complete CSS styles
  cssClass: string;                 // Generated CSS class name
  cssCode: string;                  // Complete CSS code
  properties: Record<string, any>;   // Widget properties
  accessibility: AccessibilityInfo;  // WCAG compliance data
  usage: UsageInfo;                 // Best practices recommendations
  responsive: ResponsiveStyles;     // Mobile/tablet variations
  variants: ButtonVariants;         // Outline/ghost/soft variations
  themeTokens?: Record<string, string>; // CSS custom properties
}

Best Practices

Design Selection

Accessibility

Performance

Cross-App Usage

Troubleshooting

Common Issues

"No designs generated"

"Theme colors not applying"

"Export not working"

Development Mode

Enable debug mode in the component to see:

Future Enhancements

Planned Features

Contributing

To enhance the AI generation system:

  1. Extend getCreativeFeatures() with new mood-style combinations
  2. Add new theme color schemes in theme configuration
  3. Implement additional export formats (Figma, Sketch, etc.)
  4. Create industry-specific design patterns

Need Help? Check the component's debug mode for detailed logging and service status information.