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

Source references

• ^[src-009] Nate Herk — Claude Design cluster (2026-04-17 to 2026-04-21)
• ^[src-038] Google A2UI Team — “A2UI v0.9: The New Standard for Portable, Framework-Agnostic Generative UI” (2026-04-17)
• ^[src-040] Rustin Banks — “Design UI using AI with Stitch from Google Labs” (2026-03-18)