UI Designer Generate production-quality React pages from natural language, serve live, iterate until satisfied.
Setup Check TOOLS.md for ### UI Designer config. If missing, run first-time setup:
Ask user which port (default: 5174) Run: bash scripts/setup.sh Save config to TOOLS.md Project Structure <serve_dir>/
├── project-a/
│ ├── project.json (config: name, preferences, design system, pages)
│ ├── assets/ (images, converted to .webp)
│ ├── landing/index.html (React page via CDN)
│ └── about/index.html
React Page Template (CDN, no build step) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function App() { return <div>...</div>; }
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>
</body>
</html>
Workflow Critical: Message the user at EVERY action — not just milestones. If you're reading a file, say "Reading project config...". If you're writing HTML, say "Writing bounty page...". If you're taking a screenshot, say "Taking screenshot...". The user should never wonder what you're doing. Treat it like a live build log.
Step 1: Project Name Ask: "What's the project name?"
If // project.json, show current setup and existing pages, ask if amending or adding If new: create directory + project.json → Message user: "Project created / loaded ✓" Step 2: Preferences (new or amending) Ask about design preferences (style, font, colors, brand assets).
Save to project.json.
→ Message user: "Preferences saved ✓" Step 3: Page Slug Ask: "What slug for this page?"
Check if exists → ask to overwrite or new → Message user: "Slug confirmed: / ✓" Step 4: Design Details & Design System Ask about page content + design system (see Design Principles below).
Update project.json with design system details.
→ Message user: "Got it, generating now..." Step 5: Generate Generate the React page. Apply Design Principles strictly.
→ Message user: "HTML generated, running visual review..." Step 6: Screenshot Review Loop bash scripts/screenshot.sh "http://localhost:<port>/<project>/<slug>/" /tmp/<slug>-review.png 1400 900
Analyze with image tool. Fix issues. Re-screenshot. Also check mobile (width=390).
→ Message user: "Review done, sending preview..." Do at least one desktop + one mobile review pass before sharing.
Step 7: Share and Iterate Send live URL + screenshot to user.
Ask for feedback. Apply changes → re-screenshot → share. Repeat.
→ Keep user informed at every iteration step Step 8: Media Assets If user provides images:
Save to /assets/ Convert to .webp: bash scripts/convert-image.sh [quality] Reference in HTML as ../assets/filename.webp → Message user: "Image converted: 1.2MB → 340KB (72% smaller) ✓" Step 9: Export Zip the project folder and send:
cd <serve_dir> && zip -r /tmp/<project>.zip <project>/
Send zip via message tool with filePath. The CDN-based React pages work standalone — just open index.html or serve with any static server.
Image Handling Convert all user-provided images to .webp for performance:
bash scripts/convert-image.sh input.png output.webp 80
Default quality: 80 (good balance of quality/size) For hero/banner images: quality 85 For thumbnails/icons: quality 70 Always report compression savings to user For placeholder images during prototyping:
Photos: https://picsum.photos/seed/// Solid placeholders: https://placehold.co/x// Design Principles Apply these consistently to every generated page. These are non-negotiable quality standards.
Layout & Spacing Use consistent spacing scale — stick to Tailwind's scale (4, 6, 8, 12, 16, 20, 24). Don't mix random values.Max content width — always constrain content (max-w-5xl or max-w-6xl). Never let text run full-width.Vertical rhythm — consistent gaps between sections (py-16 for sections, py-8 for subsections).Padding on mobile — minimum px-4 on all containers. Text must never touch screen edges.Typography Clear hierarchy — h1 largest, then h2, h3. Max 3-4 font sizes per page.Line length — max 65-75 characters per line for readability. Use max-w-prose or max-w-2xl on text blocks.Font weight contrast — bold for headings (font-bold/font-semibold), regular for body.Text color hierarchy — white for headings, gray-300 for body, gray-500 for muted/secondary.Color & Contrast WCAG AA minimum — text must have 4.5:1 contrast against background.Limit palette — max 1 primary color + 1 accent + neutrals. Don't rainbow.Consistent accent usage — primary color for CTAs, links, active states only. Don't overuse.Dark backgrounds — use layered darkness (bg-900 → bg-800 → bg-700) for depth, not flat black.Responsive Design Mobile-first — design for 390px first, enhance for larger screens.Breakpoints — use sm: (640px), md: (768px), lg: (1024px). Test all three.Touch targets — buttons/links min 44x44px on mobile.Stack on mobile — grids collapse to single column. Never horizontal scroll for content.Navigation — hamburger menu on mobile with slide-down panel. Always include.Components & Interactions Icons — always use SVG, never emoji (emoji break in headless browsers and render inconsistently).Buttons — clear hover states (color shift + slight scale or shadow). Consistent border-radius.Cards — subtle border (border-white/5 or border-dark-600), slight bg difference from page bg.Transitions — add transition class to all interactive elements. Duration 150-200ms.Focus states — all interactive elements must have visible focus rings for accessibility.Images & Performance All images in .webp — convert user images with scripts/convert-image.sh.Lazy loading — add loading="lazy" to images below the fold.Aspect ratios — use aspect-video or aspect-square classes to prevent layout shift.Alt text — every image needs descriptive alt text.Code Quality Semantic HTML — use header, main, section, footer, nav. Not div soup.No Lorem ipsum — always use contextually relevant placeholder text.React components — break UI into logical components (Navbar, Hero, Features, etc.).State management — use useState for interactive elements (tabs, modals, dropdowns).Common Mistakes to Avoid ❌ Text touching screen edges on mobile ❌ Emoji for icons (use SVG) ❌ Flat black backgrounds (use layered darks) ❌ No hover states on clickable elements ❌ Inconsistent border-radius across elements ❌ Giant font sizes that overflow on mobile ❌ Missing meta viewport tag ❌ Forgetting hamburger menu on mobile