Implements prototype-first development tool with:
- Next.js 15 App Router with TypeScript
- Tailwind CSS + shadcn/ui component library
- AI SDK integration with Claude for variant generation
- Sandpack for live code preview
- Core tools: askQuestion, generateVariant, processFeedback, buildFullStack
- Variant grid with 5-variant display (A-E focus areas)
- Feedback panel for Figma-style commenting
- Project management pages (list, IDE view)
- Supabase client setup for auth and storage
Key differentiator: Generate 5 visual prototypes exploring different
design directions before building, rather than immediate code generation.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Two UX fixes:
1. **Contrast Issue**: Textarea text was invisible on some backgrounds
- Added CSS isolation with injected <style> element using !important
- Uses `all: revert` to reset inherited page styles
- Guarantees dark text (#1f2937) on white background
2. **Button Overlap**: Toggle and submit buttons conflicted spatially
- Toggle button now hidden when sidebar is active
- Added "✕ Exit" button to sidebar header instead
- Clean single control area, no overlap
Comment panel remains floating near click (Figma-style).
Also fixed lint issues:
- Converted localStorage loading to lazy initialization
- Removed unused hoveredElement variable
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
0xdesign