Every screen your coding agent 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, padding, and alignment |
| Row | Horizontal layout with gap and alignment |
| Text | Typography: title, headline, body, caption, label |
| Card | Surface container, optional Liquid Glass |
| Button | Apple’s own button in Liquid Glass, tinted with your accent. Primary, secondary, ghost, destructive. Can show an SF Symbol or a logo before the label |
| Toggle | Apple’s own switch, tinted with your accent |
| Slider | Apple’s own slider for picking a value in a range |
| Stepper | Minus and plus buttons for counting up or down |
| Picker | Choose one option: segmented control, pull-down menu, or wheel |
| DatePicker | Pick a date, a time, or both |
| Menu | A button that opens a list of actions |
| Input | Text field |
| Modal | Apple’s own bottom sheet with a grabber, sized to its content. Swipe down to close |
| Alert | Apple’s own alert with a title, a message, and buttons |
| Divider | Separator |
| Lottie | Plays a Lottie animation |
Bottom navigation uses Apple’s native tab bar directly (via expo-router) rather than a Proto component, for the 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.
Tell your agent:
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.Your agent installs the package and rewrites screens with the new imports. The iPhone preview updates.
Custom or proprietary libraries
For a library your agent 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>Your agent reads these and follows the exact API pattern when generating screens. Two or three examples cover most libraries. It 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), Your agent 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 your agent 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.