johnalbertini14-glitch 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 <port> - 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: readproject.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
<project>/assets/ - Convert to .webp:
bash scripts/convert-image.sh <input> <output.webp> [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/<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
transitionclass 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-videooraspect-squareclasses 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