Visual Prototyping with AI
Workflow pattern where AI generates interactive HTML/CSS prototypes through a visual, iterative canvas rather than pure code generation. The key distinction from chat-first tools (like Claude Code) is real-time direct manipulation — tweaking colours, fonts, and layouts via UI controls rather than sending new prompts — which dramatically reduces token consumption during the iteration phase.
Key points
- Claude Design implements this pattern; Lovable and Bolt are cited as prior art [src-009]
- The Tweaks panel (palette, font, layout sliders), in-canvas drawing annotations, and inline element editing replace prompt-response cycles — cheaper and faster for visual exploration [src-009]
- Sketch-first approach (wireframe before high-fidelity) is best practice to reduce expensive iteration cycles [src-009]
- One visual change per prompt — multi-change prompts result in partial execution [src-009]
- Export to ZIP and open a fresh Claude Code session when context becomes polluted after many iterations [src-009]
- Token efficiency tactic: use Opus 4.7 only for planning and major structural changes; switch to Sonnet 4.6 for incremental edits [src-009]
- Google’s A2UI post describes a production complement to visual prototyping: rather than generating a one-off HTML prototype, agents can generate portable UI intent that a client renders from approved component catalogs [src-038].
- This shifts AI UI generation from “make a screen” toward “select and configure existing components in real time,” which is closer to productized generative interfaces [src-038].
- Google Labs’ Stitch article adds an explicit design-canvas variant: an AI-native infinite canvas where natural language, images, text, code, voice, and project history become context for high-fidelity UI design [src-040].
- Stitch emphasizes interactive flow validation: static designs can become prototypes, screens can be stitched together, and next screens can be generated from clicks [src-040].
Related entities
- Claude Design — Anthropic’s implementation of AI visual prototyping
Related concepts
- Claude Design System — brand manifest feeding visual iterations
- Claude Code Token Economics — direct manipulation UI reduces token cost vs. prompting
- Claude Design → Claude Code Hand-off — next step after prototyping
- Generative UI
- A2UI
- Component Catalog Driven UI
- Stitch
- Vibe Design
- AI-Native Design Canvas
- DESIGN.md