Prototype Kit
Ship a polished React + shadcn prototype in an afternoon. Without writing code.
Ship a polished prototype in an afternoon. Without writing code.
Welcome to prototype-kit — a step-by-step guide for teams who want to build real React + shadcn/ui prototypes using a free AI coding agent. Works with Gemini CLI, Claude Code, and OpenCode.
AI agents: Fetch /llms-full.txt for the complete machine-readable version of this guide. It includes all five pages concatenated with titles and URLs as separators.
What you will build
A working web prototype with real screens, navigation, and styled components — generated from your product docs in about 60 minutes.
The five steps
1. Install the agent
Install Gemini CLI on your machine and authenticate with your free Google account.
2. Install prototype-kit
Add the prototype-kit extension so the agent knows how to scaffold React projects.
3. Prepare your docs
Write three short documents that tell the agent what to build.
4. Run the prompt
Open the agent, run one command, and answer its clarifying questions.
5. Open the prototype
Start the dev server and see your prototype in the browser.