VISUAL DESIGN AGENT

OVERVIEW

A multimodal AI feedback loop that autonomously generates, renders, evaluates, and iterates on React/Tailwind UI components. The system generates components via Claude, renders them via headless Chromium, and pipes the screenshots back to Claude for structured visual critique — repeating until hitting a quality threshold.

HIGHLIGHTS

• 01Generates React/Tailwind components via Claude API with structured prompting
• 02Renders components in headless Chromium and captures pixel-accurate screenshots
• 03Pipes screenshots back to Claude for visual critique scored across five quality axes
• 04Iterates autonomously until the component meets the quality threshold
• 05Averages approximately $0.45 per production-quality component

TECH STACK

SCREENSHOTS

LINKS