How it works
A prototype kit an agent can build from without making things up.
Protokit is a set of prototype kits for designers who work with coding agents. Each kit is a working app with three things an agent needs and usually lacks: a registry of the components that exist, design tokens that define the brand, and rules that keep the prototype inside both.
The loop
A brief goes in
Paste a meeting transcript, notes or a feature list. The transcript-to-prototype skill writes a short
BRIEF.md (who it is for, the screens, the flows, the open questions) before any code is written.
The agent builds from the registry
DESIGN_SYSTEM.md lists every component with its path and one-line rules, and llms.txt adds each API.
The hallucination guard is a rule in that file: list the components you intend to use, and if one is
not in the registry, stop and say so. The add-component skill adds it properly, with a Kitchen Sink demo
and a registry entry, in the same change.
A quality gate checks it
The qc-pass skill runs typecheck and lint, the token and registry checks, guards against hard-coded
colours and stray icon libraries, then looks at the affected screens (the iOS simulator for mobile, a browser at 375px and 1280px for web)
in light and dark.
What is in a kit
Components
A native kit and a web kit, every component previewed live in its Kitchen Sink.
Foundations
One tokens.json for colour, spacing, radius, type and motion, light and dark.
Patterns
Screen skeleton, multi-step flows, confirmations, success, loading, permissions.
Screens
Sample apps built only from the kits, in the native and web kits: the worked examples.
One source for everything
The list of components lives in one file, registry/components.ts. From it the build generates the
registry tables in DESIGN_SYSTEM.md, the component list in llms.txt, this site's component pages and a
shadcn registry. Tokens work the same way: tokens/tokens.json builds
the CSS variables, the TypeScript theme, Figma variables and DESIGN.md. Nothing that describes the kit is
written twice, so the docs, the agent and the code cannot drift apart.