ui-first-builder

UI First Builder

Create beautiful, functional UI immediately. No questions. No waiting.

<core_principle>

The First-Prompt Promise

User describes idea → User sees working UI → Same prompt, no follow-up needed

This is what makes Lovable magical. We replicate it here. </core_principle>

<default_to_action> NEVER ask:

• "How many pages do you want?" → Infer from description, start with essential pages
• "What color scheme?" → Read root DESIGN.md (the design contract); if absent, trigger design identity generation first (design-craft two-pass → DESIGN-TEMPLATE.md). The identity file is how we decide without asking — distinctive per project.
• "What features do you need?" → Infer standard features for this app type
• "Should it be responsive?" → ALWAYS responsive, mobile-first

ALWAYS do:

• Create complete, working pages
• Include realistic mock data (based on language setting in CLAUDE.md)
• Add hover states and transitions
• Make it look professional immediately </default_to_action>

<component_architecture>

File Structure (Next.js 16 App Router)

src/
├── app/
│   ├── layout.tsx        # Root layout with providers
│   ├── page.tsx          # Home/Dashboard
│   ├── globals.css       # Tailwind + custom styles
│   └── [feature]/
│       └── page.tsx      # Feature pages
├── components/
│   ├── ui/               # shadcn/ui components
│   ├── layout/           # Header, Sidebar, Footer
│   ├── features/         # Feature-specific components
│   └── shared/           # Reusable components
├── lib/
│   ├── utils.ts          # cn() helper
│   └── mock-data.ts      # Realistic mock data
├── stores/               # Zustand stores
└── types/                # TypeScript types

</component_architecture>

<shadcn_components>

shadcn/ui Components to Use

Always Available (assume installed)

• Button, Card, Input, Label, Textarea
• Dialog, Sheet, Dropdown Menu, Popover
• Table, Tabs, Avatar, Badge, Separator
• Select, Checkbox, Radio Group, Switch
• Toast (sonner), Calendar, Date Picker
• Command (for search), Skeleton (loading)