Prototo works with Claude Code. You type in plain language. The better your description, the closer the output to what you imagined. Claude Code reads DESIGN.md and CLAUDE.md before every response, so you never repeat your design system, your component library, or your conventions. You describe the screen, not the setup.

​
The basics

Describe screens the way you’d describe them to another designer: what’s on it, where things are, what they do. 
add a profile screen with a large avatar at the top,
the user's name and bio below it, and a grid of
their recent posts underneath

​
Be specific about layout

Vague prompts get reasonable guesses. Specific prompts get what you actually want. ❌ “add a card” ✅ “add a card with a blurred glass background, the merchant name at the top, transaction amount large in the centre, and a category tag at the bottom”

​
Describe interactions

Navigation and gestures are part of the prompt. 
when the user taps the card, push a transaction
detail screen with the full breakdown

the bottom nav should be fixed, use the native iOS
tab bar with Liquid Glass material

​
Update existing screens

When you ask for a change, Claude Code rewrites the entire file. This is intentional — full rewrites are reliable, diffs are fragile. 
on the settings screen, move the sign out button
to the bottom and make it destructive red

make the home screen header larger and add a
greeting — "Good morning, Priya"

​
Update the design system

A single prompt can change tokens and regenerate the affected screens in one shot. 
update DESIGN.md — change the accent to #5856D6 and
tighten card radius to 16. Then regenerate the Home
and Settings screens to reflect the changes.
Claude Code updates DESIGN.md, rewrites the screens using the new tokens, and the Simulator updates in seconds.

​
Create shared components

When two screens need the same piece, ask for a shared component. 
create a shared UserAvatar component that shows initials
as a fallback when no image is set, then use it in
the Home and Profile screens
Claude Code writes the component to /components/shared/, then updates both screens to import it.

​
What doesn’t work well

Prototo generates screens from descriptions. It’s not great at:
  • Pixel-perfect positioning (“move this 4px to the left”)
  • Complex custom animations beyond standard transitions
  • Data that changes in real time
For micro-adjustments, be more descriptive rather than precise. “Make the spacing between the card and the button feel tighter” works better than “set margin to 12px”. This is the only real friction in the prompt-only model. Proto component props are descriptive — glass, variant, size, color — so most visual intent is expressible.