Hand an agent a brief. Get a prototype that looks designed.
Protokit is a set of prototype kits that coding agents build from. A themed component registry, design tokens with a contrast gate, and rules that keep every screen inside what the kit ships. For mobile and web, on one brand.
Read https://<this site>/install.md and follow it to set up the kit for this project. Then read AGENTS.md and DESIGN_SYSTEM.md, and build only from the components they list.
Live components
Every card is the web kit running live. Change the theme with the bar at the bottom, or open the theme studio.
Brief in, prototype out
- 1
Give an agent a brief
A meeting transcript, a few notes or a feature list. The transcript-to-prototype skill turns it into a short brief and a screen list before any code.
- 2
It builds from the registry only
113 registered components across the native and web kits, each with an API, usage notes and a live demo. If something is missing, the agent says so instead of inventing it.
- 3
You get a themed prototype
Light and dark, on your brand, on a phone or in a browser in minutes. Every screen uses the same tokens, spacing and patterns, so it looks designed, not generated.
Sample apps, built only from the kits
A shop, a habit tracker and Northwind, a made-up invoicing product, each built with both kits. They are the worked examples an agent copies the structure of. All live, all following this page's theme.
Everything a screen needs, and nothing else
113 components, live and themed, each marked Native, Web or both: list rows, sheets, a camera and Face ID in the native kit; app shells, data tables, pricing and AI chat with tool calls and approvals on the web.
- Actions6Buttons, toggles and commit affordancesNativeWeb
- Inputs and selection20Fields, choices, dates and pickersNativeWeb
- Navigation7Tabs, menus, headers and steppersNativeWeb
- Data display19Lists, stats, charts, badges and avatarsNativeWeb
- Feedback and status8Alerts, toasts, progress and empty statesNativeWeb
- Containers and layout8Cards, accordions and long-form textNativeWeb
- Overlays10Dialogs, sheets, popovers and menusNativeWeb
- Media and icons5Icons, images and placeholdersNativeWeb
- Marketing1PricingNativeWeb
- AI product10Chat, streaming, tool calls and approvalsNativeWeb
- Native only9The device: camera, Face ID, permissions, share, tab barNative
- Web only10Pages and the browser: app shell, tables, heroes, commandWeb
Guardrails, not guidelines
One token file
tokens.json (W3C format) builds the CSS variables, TypeScript theme, Figma variables and DESIGN.md. 38 semantic colours, no hex in screens.
Contrast that cannot regress
The token build refuses any palette where text on its surface, or a status colour used as text, falls below WCAG AA, in either theme.
A registry agents can read
DESIGN_SYSTEM.md, llms.txt and a shadcn registry are generated from one list, so the docs, the agent and the code never disagree.
A quality gate
The qc-pass skill runs typecheck, lint, the token and registry checks, then looks at the screens on a simulator or in a browser, in both themes.
Platforms
Available
Native kit
Expo, React Native and NativeWind on react-native-reusables. Runs on a phone through Expo Go or a development build, and in the browser.
Native setupAvailable
Web kit
Next.js, Tailwind 4 and shadcn/ui on the same tokens: dashboards, marketing pages, AI product screens and the web version of a mobile prototype, from one brand file.
Web setupBuilt to be read by agents
Everything on this site is also available as plain text: the install guide an agent follows, an index of every component with its API, and shadcn registries so an existing Expo or Next.js app can pull in single components.