Every screen Claude Code generates is built from components. The library it uses lives in DESIGN.md. Switch it any time with a prompt.
Prototo built-in components
These are always available as a fallback, even when another library is selected:
| Component | What it does |
|---|---|
| Screen | Base wrapper with safe area and optional scroll |
| Stack | Vertical layout with gap and padding |
| Row | Horizontal layout with gap and alignment |
| Text | Typography — title, headline, body, caption, label |
| Card | Surface container, optional Liquid Glass |
| Button | Primary, secondary, ghost, destructive |
| Toggle | Themeable switch |
| Modal | Bottom sheet |
| Divider | Separator |
Bottom navigation uses Apple’s native tab bar directly (via expo-router) rather than a Proto component — same reason Proto doesn’t ship its own Switch. Don’t rebuild what Apple already ships.
Using your team’s component library
If your production app uses Tamagui, Gluestack, React Native Paper, NativeWind, or a custom internal library — you can prototype with the exact same components your engineers use.
Run proto design and pick your library. Or tell Claude Code:
update DESIGN.md — switch the component library to Tamagui.
Package is @tamagui/core, import from @tamagui/core.
Then regenerate the Home screen using Tamagui components.Proto installs the package. Claude Code rewrites screens with the new imports. The Simulator updates.
Custom or proprietary libraries
For a library Claude Code may not know well, add 2–3 component examples to DESIGN.md:
## Examples
// Primary button
import { Button } from '@acme/mobile-components';
<Button variant="primary" onPress={handler}>Label</Button>
// Card surface
import { Surface } from '@acme/mobile-components';
<Surface elevated padding="md">content</Surface>Claude Code reads these and follows the exact API pattern when generating screens. Two or three examples cover most libraries — Claude extrapolates the rest.
The fallback rule
If the specified library doesn’t have a component that covers a need (for example, Tamagui has no drop-in safe-area wrapper), Claude Code falls back to a Prototo primitive silently. You never see this. Screens just work.
Why this matters at handoff
When you prototype using your team’s actual production library, the screens Claude Code generates aren’t throwaway prototypes — they are close to production code. An engineer opens a screen, sees familiar imports and patterns, and can move it directly into the production codebase with minimal rework.
The gap between prototype and production collapses from weeks to hours.