popeye-cli 1.0.1 → 1.2.0

package/src/workflow/ui-designer.ts

@@ -0,0 +1,337 @@
+/**
+ * UI Designer Module
+ * Generates UI design specifications from natural language project ideas
+ * Ensures Popeye handles all UI/UX automatically without user intervention
+ */
+
+import { generateCode } from '../adapters/claude.js';
+import { THEMES, detectProjectType, type DesignTheme } from './ui-setup.js';
+
+/**
+ * UI Design Intent - what the user wants their app to look like
+ */
+export interface UIDesignIntent {
+  /** Overall style preference */
+  style: 'modern' | 'elegant' | 'minimal' | 'vibrant' | 'professional' | 'playful';
+
+  /** Target audience */
+  audience: 'business' | 'consumer' | 'developer' | 'creative' | 'general';
+
+  /** Industry/domain */
+  industry?: string;
+
+  /** Color preferences */
+  colorPreference?: 'warm' | 'cool' | 'neutral' | 'colorful' | 'monochrome';
+
+  /** Key UI features needed */
+  features: string[];
+
+  /** Accessibility requirements */
+  accessibilityLevel: 'A' | 'AA' | 'AAA';
+
+  /** Dark mode support */
+  darkMode: boolean;
+
+  /** Mobile-first design */
+  mobileFirst: boolean;
+}
+
+/**
+ * Complete UI specification generated by the designer
+ */
+export interface UISpecification {
+  /** The design intent derived from the idea */
+  intent: UIDesignIntent;
+
+  /** Selected theme */
+  theme: DesignTheme;
+
+  /** Theme name for reference */
+  themeName: string;
+
+  /** Project type detection */
+  projectType: string;
+
+  /** Components recommended for this project */
+  recommendedComponents: string[];
+
+  /** Layout patterns to use */
+  layoutPatterns: string[];
+
+  /** Navigation style */
+  navigationStyle: 'sidebar' | 'topbar' | 'bottom-tabs' | 'hybrid';
+
+  /** Key pages to create */
+  keyPages: Array<{
+    name: string;
+    route: string;
+    description: string;
+    layout: string;
+  }>;
+
+  /** Design system notes for code generation */
+  designNotes: string;
+}
+
+/**
+ * Analyze the project idea and generate UI design intent
+ */
+export async function analyzeUIIntent(
+  idea: string,
+  onProgress?: (message: string) => void
+): Promise<UIDesignIntent> {
+  onProgress?.('Analyzing project idea for UI intent...');
+
+  const prompt = `Analyze this project idea and determine the UI design intent. Return ONLY a JSON object (no markdown, no explanation).
+
+Project Idea: "${idea}"
+
+Return JSON with this exact structure:
+{
+  "style": "modern" | "elegant" | "minimal" | "vibrant" | "professional" | "playful",
+  "audience": "business" | "consumer" | "developer" | "creative" | "general",
+  "industry": "string or null",
+  "colorPreference": "warm" | "cool" | "neutral" | "colorful" | "monochrome",
+  "features": ["list of UI features needed like forms, tables, charts, cards, etc"],
+  "accessibilityLevel": "AA",
+  "darkMode": true or false,
+  "mobileFirst": true or false
+}
+
+Consider:
+- Who will use this app (business users need clean/professional, consumers want modern/friendly)
+- What type of data/content will be displayed
+- What interactions are needed
+- The overall mood/tone of the application`;
+
+  try {
+    const result = await generateCode(prompt, '');
+
+    if (result.success && result.response) {
+      // Parse the JSON response
+      const jsonMatch = result.response.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const intent = JSON.parse(jsonMatch[0]) as UIDesignIntent;
+        onProgress?.(`UI Intent: ${intent.style} style for ${intent.audience} audience`);
+        return intent;
+      }
+    }
+  } catch {
+    onProgress?.('Using default UI intent (analysis failed)');
+  }
+
+  // Default intent if analysis fails
+  return {
+    style: 'modern',
+    audience: 'general',
+    colorPreference: 'cool',
+    features: ['cards', 'forms', 'buttons', 'navigation'],
+    accessibilityLevel: 'AA',
+    darkMode: true,
+    mobileFirst: true,
+  };
+}
+
+/**
+ * Generate complete UI specification from intent
+ */
+export async function generateUISpecification(
+  idea: string,
+  intent: UIDesignIntent,
+  onProgress?: (message: string) => void
+): Promise<UISpecification> {
+  onProgress?.('Generating UI specification...');
+
+  // Select theme based on intent
+  let themeName: string;
+  switch (intent.style) {
+    case 'elegant':
+    case 'professional':
+      themeName = 'elegant';
+      break;
+    case 'minimal':
+      themeName = 'minimal';
+      break;
+    case 'vibrant':
+    case 'playful':
+      themeName = 'vibrant';
+      break;
+    default:
+      themeName = 'modern';
+  }
+
+  // Override based on audience if style is generic
+  if (intent.style === 'professional' && intent.audience === 'business') {
+    themeName = 'minimal';
+  }
+
+  const theme = THEMES[themeName];
+  const projectType = detectProjectType(idea);
+
+  onProgress?.(`Selected theme: ${theme.name}`);
+  onProgress?.(`Project type: ${projectType}`);
+
+  // Generate detailed specification using Claude
+  const prompt = `Generate a UI specification for this project. Return ONLY a JSON object (no markdown).
+
+Project Idea: "${idea}"
+Style: ${intent.style}
+Audience: ${intent.audience}
+Project Type: ${projectType}
+
+Return JSON:
+{
+  "recommendedComponents": ["list of shadcn/ui components needed"],
+  "layoutPatterns": ["grid", "flex", "etc"],
+  "navigationStyle": "sidebar" | "topbar" | "bottom-tabs" | "hybrid",
+  "keyPages": [
+    {
+      "name": "Page Name",
+      "route": "/route",
+      "description": "What this page does",
+      "layout": "dashboard" | "form" | "list" | "detail" | "kanban" | "landing"
+    }
+  ],
+  "designNotes": "Brief notes for consistent design (colors, spacing, component usage)"
+}`;
+
+  try {
+    const result = await generateCode(prompt, '');
+
+    if (result.success && result.response) {
+      const jsonMatch = result.response.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const spec = JSON.parse(jsonMatch[0]);
+
+        return {
+          intent,
+          theme,
+          themeName,
+          projectType,
+          recommendedComponents: spec.recommendedComponents || [],
+          layoutPatterns: spec.layoutPatterns || ['flex', 'grid'],
+          navigationStyle: spec.navigationStyle || 'sidebar',
+          keyPages: spec.keyPages || [],
+          designNotes: spec.designNotes || '',
+        };
+      }
+    }
+  } catch {
+    onProgress?.('Using default specification (generation failed)');
+  }
+
+  // Default specification
+  return {
+    intent,
+    theme,
+    themeName,
+    projectType,
+    recommendedComponents: ['button', 'card', 'input', 'dialog', 'dropdown-menu', 'avatar', 'badge'],
+    layoutPatterns: ['flex', 'grid'],
+    navigationStyle: 'sidebar',
+    keyPages: [
+      { name: 'Dashboard', route: '/', description: 'Main dashboard', layout: 'dashboard' },
+      { name: 'Settings', route: '/settings', description: 'User settings', layout: 'form' },
+    ],
+    designNotes: `Use ${theme.name} theme consistently. Maintain ${intent.style} aesthetic throughout.`,
+  };
+}
+
+/**
+ * Generate design system prompt for code generation
+ * This is injected into Claude's context when generating UI code
+ */
+export function generateDesignSystemPrompt(spec: UISpecification): string {
+  return `
+## UI Design System
+
+You are generating code for a ${spec.intent.style} ${spec.projectType} application.
+
+### Theme: ${spec.theme.name}
+- Primary color: hsl(${spec.theme.colors.primary})
+- Border radius: ${spec.theme.borderRadius}
+- Font: ${spec.theme.fontFamily}
+
+### Components to Use
+Always use these shadcn/ui components (from @/components/ui/):
+${spec.recommendedComponents.map(c => `- ${c}`).join('\n')}
+
+### Layout Patterns
+${spec.layoutPatterns.map(p => `- ${p}`).join('\n')}
+
+### Navigation
+Use ${spec.navigationStyle} navigation pattern.
+
+### Accessibility
+- Target WCAG ${spec.intent.accessibilityLevel} compliance
+- All interactive elements must be keyboard accessible
+- Use semantic HTML elements
+- Include proper ARIA labels
+
+### Mobile Responsiveness
+${spec.intent.mobileFirst ? 'Design mobile-first, then scale up for larger screens.' : 'Design for desktop, with responsive adjustments for mobile.'}
+
+### Dark Mode
+${spec.intent.darkMode ? 'Support dark mode with class-based toggling.' : 'Light mode only.'}
+
+### Design Notes
+${spec.designNotes}
+
+### Key Pages
+${spec.keyPages.map(p => `- ${p.name} (${p.route}): ${p.description} - Use ${p.layout} layout`).join('\n')}
+`;
+}
+
+/**
+ * Main function: Design UI from idea
+ * Call this early in the Popeye workflow to establish UI direction
+ */
+export async function designUI(
+  idea: string,
+  onProgress?: (message: string) => void
+): Promise<UISpecification> {
+  onProgress?.('Starting UI design process...');
+
+  // Step 1: Analyze the idea to understand intent
+  const intent = await analyzeUIIntent(idea, onProgress);
+
+  // Step 2: Generate complete specification
+  const spec = await generateUISpecification(idea, intent, onProgress);
+
+  onProgress?.(`UI design complete: ${spec.theme.name} theme with ${spec.recommendedComponents.length} components`);
+
+  return spec;
+}
+
+/**
+ * Save UI specification to project
+ */
+export async function saveUISpecification(
+  projectDir: string,
+  spec: UISpecification
+): Promise<void> {
+  const { promises: fs } = await import('node:fs');
+  const path = await import('node:path');
+
+  const specPath = path.join(projectDir, '.popeye', 'ui-spec.json');
+  await fs.mkdir(path.dirname(specPath), { recursive: true });
+  await fs.writeFile(specPath, JSON.stringify(spec, null, 2));
+}
+
+/**
+ * Load UI specification from project
+ */
+export async function loadUISpecification(
+  projectDir: string
+): Promise<UISpecification | null> {
+  const { promises: fs } = await import('node:fs');
+  const path = await import('node:path');
+
+  try {
+    const specPath = path.join(projectDir, '.popeye', 'ui-spec.json');
+    const content = await fs.readFile(specPath, 'utf-8');
+    return JSON.parse(content) as UISpecification;
+  } catch {
+    return null;
+  }
+}