majiayu000 UI Generator
Create beautiful UI from descriptions. Integrates with theme-factory.
Process
Understand request
- "Login page" → form with email/password
- "Dashboard" → stats cards, charts, tables
- "Settings" → form sections, toggles
Apply theme
- Load current theme from theme-factory
- Use theme colors and fonts
- Follow frontend-design principles
Generate code
- React/Next.js components
- Tailwind CSS styling
- Responsive by default
Preview
- Hot reload in browser
- User sees result immediately
Component Patterns
| Request | Components |
|---|---|
| "login page" | Form, inputs, button, link |
| "dashboard" | Stats cards, chart, table |
| "settings" | Sections, toggles, form |
| "landing page" | Hero, features, CTA, footer |
| "pricing" | Tier cards, comparison table |
| "profile" | Avatar, info, edit form |
Design Rules
From frontend-design skill:
- No Inter, Roboto, Arial
- No purple gradients on white
- Distinctive, memorable aesthetics
- Motion and micro-interactions
Usage
User says: "Add a pricing page with 3 tiers"
- Generate PricingPage component
- Create PricingTier subcomponent
- Apply current theme
- Add to routes
- Show preview: "Here's your pricing page"