superdesign-claude/bin/generate.js

SuperDesign Claude v2.2 - AI-Powered Design Pattern Recognition Engine with Code Generation - PHASE 1 + CODE GEN

#!/usr/bin/env node

/**
 * SuperDesign Claude v2.0 - Generate Command
 * Focused pattern recognition and wireframe generation
 */

const { Command } = require('commander');
const chalk = require('chalk');
const boxen = require('boxen');
const ora = require('ora');
const fs = require('fs');

const { IntentAnalysisEngine } = require('../src/engines/intent/IntentAnalysisEngine');
const { PatternRecognitionEngine } = require('../src/engines/pattern-recognition/PatternRecognitionEngine');
const { ConfigurationManager } = require('../src/config/ConfigurationManager');
const { LoggingManager } = require('../src/utils/LoggingManager');

const program = new Command();

async function generateWireframe(prompt, options) {
    const spinner = ora('Initializing engines...').start();
    
    try {
        // Initialize services
        const config = new ConfigurationManager();
        const logger = new LoggingManager(config.get('logging'));
        const intentEngine = new IntentAnalysisEngine({ logger });
        const patternEngine = new PatternRecognitionEngine({ logger });
        
        // Step 1: Intent Analysis
        spinner.text = 'Analyzing design intent...';
        const intentResult = await intentEngine.analyze(prompt);
        spinner.succeed(chalk.green(`Intent: ${intentResult.intent.type} (${Math.round(intentResult.intent.confidence * 100)}% confidence)`));
        
        // Step 2: Pattern Recognition
        const patternSpinner = ora('Generating wireframe...').start();
        const patternResult = await patternEngine.recognize(intentResult);
        patternSpinner.succeed(chalk.green(`Pattern: ${patternResult.selectedPattern.name}`));
        
        // Display wireframe
        console.log('\\n' + boxen(
            chalk.cyan.bold('📐 Generated Wireframe'),
            { padding: 1, borderColor: 'cyan', borderStyle: 'round' }
        ));
        
        console.log('\\n' + boxen(
            chalk.white(patternResult.wireframe.ascii),
            {
                padding: 1,
                borderColor: 'gray',
                borderStyle: 'single',
                backgroundColor: 'black'
            }
        ));
        
        // Pattern Details
        console.log(chalk.yellow.bold('\\n🎯 Pattern Details:'));
        console.log(chalk.white(`  Name: ${patternResult.selectedPattern.name}`));
        console.log(chalk.white(`  Type: ${patternResult.selectedPattern.type}`));
        console.log(chalk.white(`  Match Score: ${patternResult.selectedPattern.score}/10`));
        console.log(chalk.white(`  Confidence: ${Math.round(patternResult.selectedPattern.confidence * 100)}%`));
        
        // Wireframe Specs
        console.log(chalk.yellow.bold('\\n📏 Wireframe Specifications:'));
        console.log(chalk.white(`  Dimensions: ${patternResult.wireframe.dimensions.width} x ${patternResult.wireframe.dimensions.height}`));
        console.log(chalk.white(`  Aspect Ratio: ${Math.round(patternResult.wireframe.dimensions.aspectRatio * 100) / 100}:1`));
        console.log(chalk.white(`  Sections: ${patternResult.wireframe.dimensions.totalSections}`));
        
        // Layout System
        console.log(chalk.yellow.bold('\\n⚙️ Layout System:'));
        console.log(chalk.white(`  Grid: ${patternResult.layout.grid.columns} columns`));
        console.log(chalk.white(`  Gutters: ${patternResult.layout.grid.gutters}px`));
        console.log(chalk.white(`  Breakpoints: ${Object.entries(patternResult.layout.breakpoints).map(([name, width]) => `${name}(${width}px)`).join(', ')}`));
        console.log(chalk.white(`  Spacing: ${patternResult.layout.spacing.scale.join(', ')}${patternResult.layout.spacing.unit}`));
        
        // Components
        console.log(chalk.yellow.bold('\\n🧩 Component Recommendations:'));
        console.log(chalk.white(`  Required: ${patternResult.components.required.join(', ')}`));
        if (patternResult.components.recommended.length > 0) {
            console.log(chalk.white(`  Recommended: ${patternResult.components.recommended.join(', ')}`));
        }
        if (patternResult.components.alternative.length > 0) {
            console.log(chalk.white(`  Alternatives: ${patternResult.components.alternative.join(', ')}`));
        }
        
        // Quality Metrics
        console.log(chalk.yellow.bold('\\n📊 Quality Metrics:'));
        console.log(chalk.white(`  Complexity: ${Math.round(patternResult.layoutMetrics.complexity * 100)}% ${getQualityIndicator(patternResult.layoutMetrics.complexity)}`));
        console.log(chalk.white(`  Accessibility: ${Math.round(patternResult.layoutMetrics.accessibility * 100)}% ${getQualityIndicator(patternResult.layoutMetrics.accessibility)}`));
        console.log(chalk.white(`  Performance: ${Math.round(patternResult.layoutMetrics.performance * 100)}% ${getQualityIndicator(patternResult.layoutMetrics.performance)}`));
        console.log(chalk.white(`  Responsiveness: ${Math.round(patternResult.layoutMetrics.responsiveness * 100)}% ${getQualityIndicator(patternResult.layoutMetrics.responsiveness)}`));
        
        // Alternative Patterns
        if (patternResult.alternatives.length > 0 && options.alternatives) {
            console.log(chalk.yellow.bold('\\n🔄 Alternative Patterns:'));
            patternResult.alternatives.forEach((alt, index) => {
                console.log(chalk.white(`  ${index + 1}. ${alt.name} (${Math.round(alt.confidence * 100)}% confidence)`));
            });
        }
        
        // Performance Info
        console.log(chalk.gray('\\n⏱️ Generation Time:'));
        console.log(chalk.gray(`  Intent Analysis: ${intentResult.metadata.analysisTime}ms`));
        console.log(chalk.gray(`  Pattern Recognition: ${patternResult.metadata.recognitionTime}ms`));
        console.log(chalk.gray(`  Total: ${intentResult.metadata.analysisTime + patternResult.metadata.recognitionTime}ms`));
        
        // Save results
        if (options.save) {
            const saveData = {
                intent: intentResult,
                pattern: patternResult,
                wireframe: {
                    ascii: patternResult.wireframe.ascii,
                    specifications: {
                        dimensions: patternResult.wireframe.dimensions,
                        layout: patternResult.layout,
                        components: patternResult.components,
                        metrics: patternResult.layoutMetrics
                    }
                },
                metadata: {
                    prompt: prompt,
                    generatedAt: new Date().toISOString(),
                    version: '2.0.0'
                }
            };
            
            const filename = options.output || `wireframe-${Date.now()}.json`;
            fs.writeFileSync(filename, JSON.stringify(saveData, null, 2));
            console.log(chalk.green(`\\n✅ Wireframe saved to ${filename}`));
            
            // Also save ASCII wireframe as text file
            const txtFilename = filename.replace('.json', '.txt');
            const txtContent = `SuperDesign Claude v2.0 Wireframe
Generated: ${new Date().toISOString()}
Prompt: ${prompt}
Pattern: ${patternResult.selectedPattern.name}

${patternResult.wireframe.ascii}

Layout Specifications:
- Grid: ${patternResult.layout.grid.columns} columns, ${patternResult.layout.grid.gutters}px gutters
- Breakpoints: ${Object.entries(patternResult.layout.breakpoints).map(([name, width]) => `${name}: ${width}px`).join(', ')}
- Spacing Scale: ${patternResult.layout.spacing.scale.join(', ')}${patternResult.layout.spacing.unit}

Required Components: ${patternResult.components.required.join(', ')}
Recommended Components: ${patternResult.components.recommended.join(', ')}

Quality Metrics:
- Complexity: ${Math.round(patternResult.layoutMetrics.complexity * 100)}%
- Accessibility: ${Math.round(patternResult.layoutMetrics.accessibility * 100)}%
- Performance: ${Math.round(patternResult.layoutMetrics.performance * 100)}%
- Responsiveness: ${Math.round(patternResult.layoutMetrics.responsiveness * 100)}%`;
            
            fs.writeFileSync(txtFilename, txtContent);
            console.log(chalk.green(`✅ ASCII wireframe saved to ${txtFilename}`));
        }
        
        // Show CSS Grid code if requested
        if (options.css) {
            console.log(chalk.yellow.bold('\\n💻 CSS Grid Template:'));
            const cssCode = generateCSSGrid(patternResult);
            console.log(boxen(
                chalk.green(cssCode),
                {
                    padding: 1,
                    borderColor: 'green',
                    borderStyle: 'single'
                }
            ));
        }
        
        return { intentResult, patternResult };
        
    } catch (error) {
        spinner.fail(chalk.red('Generation failed'));
        console.error(chalk.red('Error:'), error.message);
        
        if (options.verbose) {
            console.error(chalk.gray('Stack trace:'), error.stack);
        }
        
        process.exit(1);
    }
}

function getQualityIndicator(score) {
    if (score >= 0.8) return chalk.green('●');
    if (score >= 0.6) return chalk.yellow('●');
    return chalk.red('●');
}

function generateCSSGrid(patternResult) {
    const { layout, wireframe } = patternResult;
    
    return `.container {
  display: grid;
  grid-template-columns: repeat(${layout.grid.columns}, 1fr);
  gap: ${layout.grid.gutters}px;
  min-height: 100vh;
}

/* Responsive breakpoints */
@media (max-width: ${layout.breakpoints.tablet}px) {
  .container {
    grid-template-columns: repeat(${Math.min(layout.grid.columns, 8)}, 1fr);
  }
}

@media (max-width: ${layout.breakpoints.mobile}px) {
  .container {
    grid-template-columns: repeat(${Math.min(layout.grid.columns, 4)}, 1fr);
    gap: ${Math.round(layout.grid.gutters * 0.75)}px;
  }
}

/* Spacing utilities */
.spacing-xs { margin: ${layout.spacing.scale[0]}px; }
.spacing-sm { margin: ${layout.spacing.scale[1]}px; }
.spacing-md { margin: ${layout.spacing.scale[2]}px; }
.spacing-lg { margin: ${layout.spacing.scale[3]}px; }`;
}

program
    .name('superdesign-generate')
    .description('Generate wireframe and layout from design prompt')
    .version('2.0.0')
    .argument('<prompt>', 'Design description to generate from')
    .option('-s, --save', 'Save wireframe and specifications to files')
    .option('-o, --output <filename>', 'Output filename (without extension)')
    .option('-a, --alternatives', 'Show alternative pattern suggestions')
    .option('-c, --css', 'Generate CSS Grid template code')
    .option('-v, --verbose', 'Show verbose error information')
    .action(generateWireframe);

if (require.main === module) {
    program.parse(process.argv);
}

module.exports = { generateWireframe };