UI Designer

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:

1. Ask user which port (default: 5174)
2. Run: bash scripts/setup.sh <port>
3. 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 <serve_dir>/<project>/ exists: read 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:

1. Save to <project>/assets/
2. Convert to .webp: bash scripts/convert-image.sh <input> <output.webp> [quality]
3. 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/<name>/<width>/<height>
• Solid placeholders: https://placehold.co/<width>x<height>/<bg>/<text>

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