Use this when you want a clickable UI prototype as fast as possible: one screen or one flow, just enough to react to. This is the lightweight entry point. It skips the ceremony so you can see something real in minutes, then decide whether the idea is worth a deeper pass.
Reach for this when you are still figuring out whether an idea has legs, when you want to put a rough shape in front of someone in a meeting, or when writing a full spec first would cost more than just building the thing.
Related skills: When the idea is worth more rigor, graduate to
/ai-prototype-guidefor the full methodology. Spec it first with/ai-product-specif scope is fuzzy. Use/client-prototypewhen it needs a client's brand identity. Pick a build tool with/tool-recommend.
When to use this vs. the deeper skills
| Situation | Use |
|---|---|
| "I just need to see it, one screen, now" | /prototype (this skill) |
| "This is worth a real, multi-screen prototype" | /ai-prototype-guide |
| "Scope is unclear, decide what to build first" | /ai-product-spec, then come back |
| "It has to match a client's brand" | /client-prototype |
Process
Step 1: Name the one thing
State the prototype in a single sentence: who it is for, the one action they take, and what they see after. Example: "A renter taps Estimate and sees their monthly cost broken down." If you cannot say it in one sentence, the scope is too big for a quick prototype, split it or use /ai-product-spec first.
Lock these before building:
- One primary screen (a second screen only if the flow makes no sense without it)
- The single happy path (no error states, no edge cases, no settings)
- Real-ish content (use plausible sample data, not "Lorem ipsum", so reactions are honest)
Step 2: Gather one or two visual references
Grab a screenshot of any product whose layout or feel is close to what you want. One good reference beats a paragraph of description. If you have nothing, name a product the AI tool will recognize ("clean like Linear", "card layout like Notion").
Step 3: Build it in one prompt
Open your tool of choice (v0, Bolt, Lovable, Claude Code, Cursor) and describe the one screen from Step 1 in a single, concrete prompt. Include: the action, what the user sees before and after, the reference, and any real sample data. Ask for a working, clickable result, not a static mockup.
Step 4: Click through and cut
Use the prototype as the user would. Then cut anything that is not the one thing: extra fields, dead buttons, decorative sections. A quick prototype earns its speed by staying small. Resist adding "just one more" feature, that is the signal to graduate to /ai-prototype-guide.
Step 5: Ship the reaction, not the artifact
Put it in front of one person and watch them use it. The goal of a quick prototype is a reaction, not a deliverable. Capture what surprised them, then decide: kill it, keep poking, or invest in a real build.
Output
A single working, clickable prototype of one screen or flow, plus a two-line note:
- What it proved (or didn't): the reaction you got
- Next move: kill / iterate / graduate to
/ai-prototype-guide
Keep the whole loop under an hour. If it is taking longer, the idea wants a spec, not a faster prototype.