Coding prompts · How to use a skill

build-throwaway-prototype-prompt

A prompt that has the AI build a throwaway prototype to answer one design question fast - a click-through HTML demo of the logic, or 3 radically different UI variants on one page with a switcher bar. Use when the user wants to prototype an idea, try a few layouts, check if a state model feels right, or mock something up before building it properly.

Version 1.0 · Updated 2026-10-31

View raw SKILL.md

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/raw' -o ~/'.claude/skills/build-throwaway-prototype-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/files/LICENSE.txt' -o ~/'.claude/skills/build-throwaway-prototype-prompt/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/raw' -o '.cursor/skills/build-throwaway-prototype-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/files/LICENSE.txt' -o '.cursor/skills/build-throwaway-prototype-prompt/LICENSE.txt'

curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/raw' -o '.agents/skills/build-throwaway-prototype-prompt/SKILL.md' && curl -fsSL --create-dirs 'https://theskillvault.ai/api/skills/build-throwaway-prototype-prompt/files/LICENSE.txt' -o '.agents/skills/build-throwaway-prototype-prompt/LICENSE.txt'

{
  "mcpServers": {
    "theskillvault": {
      "url": "https://theskillvault.ai/mcp"
    }
  }
}

Build a throwaway prototype (prompt)

A prototype is throwaway code that answers one question. The question decides its shape. "Does this logic feel right?" gets a one-file demo you click through. "What should this look like?" gets a few very different versions of the page that you flip between.

When to use

• You are unsure whether a flow, rule or state model works and want to poke at it.
• You want to compare a few layouts for a page before building one properly.
• You need something a non-developer can try and react to.

Steps

1. Paste the prompt below and fill in your question.
2. Open the demo file or the page link the AI gives you. Click through it.
3. Tell the AI what you learned. It folds the winning idea into the real code and parks the prototype on a separate branch.

Prompt

Build a throwaway prototype to answer this question: {{YOUR QUESTION}}

First decide which kind it is and say so at the top:
A) LOGIC - "does this logic / state model feel right?"
B) UI - "what should this look like?"
If unclear: backend code -> A, a page or component -> B, and state the assumption.

Rules for both:
1. Mark it as a prototype in names and paths. Put it next to the code it is for,
   following the project's existing conventions.
2. One command or one double-click to run it.
3. No persistence: keep state in memory. If the question is about storage, use a scratch DB
   or file named "PROTOTYPE - wipe me".
4. No polish: no tests, no extra error handling, no abstractions. Learn fast.
5. Show the full relevant state after every action or variant switch.

If A (LOGIC):
- One self-contained HTML file, no framework, bundler or server. Plain HTML/CSS/JS inline.
- Write the question in a visible intro at the top.
- Put the logic in one pure module (a reducer, state machine or pure functions) with no DOM access,
  so it can be lifted into real code later. The page only calls into it.
- Use domain words a non-developer understands. Layout, top to bottom: title and question;
  a readable current-state panel; one free-play button per action; tabbed guided scenarios
  (happy path, tricky edge case, something that should be illegal) that reset state first.
- Clean and restrained: one accent colour, no animation.

If B (UI):
- Prefer the existing page that would host it, so variants sit next to the real header and data.
  Only make a new route (with "prototype" in its path) if there is no sensible host.
- Default to 3 variants, max 5. They must differ in structure (layout, hierarchy, main action),
  not just colour. Name them VariantA, VariantB, VariantC.
- Switch with a ?variant= URL param. Add a floating bottom bar with left/right arrows and the
  variant name; arrow keys also switch, but not while typing in an input.
  Hide the bar in production builds.
- Keep existing data fetching. Point any writes at a stub, never real data.

When I pick an answer: fold the decision into the real code (rewritten properly, with tests),
commit the full prototype to a throwaway branch, and note the verdict and branch name
on the issue or in the commit message. Main keeps only the validated decision.

How to adapt

• Want more options? Change "Default to 3 variants" (stay at 5 or fewer).
• Using Vue, Svelte or another framework instead of React? The ?variant= switcher works the same way.
• Works with any stack and any AI coding agent.

Gotchas

• Three card grids in different colours are not variants. Ask for a redo with "no card grid".
• Do not ship prototype code. It was written without tests on purpose.
• Never point a prototype at production data, real payments or real user accounts. Keep API keys and secrets out of the demo file, since it is easy to share.

Done when

• You can state the answer to your question in one sentence.
• The winning idea is in the real code, and the prototype lives on its own branch, not main.

Example prompt

"Prototype three different layouts for my pricing page so I can pick one."

---

Adapted from "prototype" in mattpocock/skills by Matt Pocock (MIT). See LICENSE.txt.

Adapted from Matt Pocock (mattpocock/skills, 'prototype' with LOGIC.md and UI.md) (Copyright (c) 2026 Matt Pocock), MIT License. Adapted by TheSkillVault: SKILL.md, LOGIC.md and UI.md condensed into one paste-in prompt; plain-language steps; added safety, how-to-adapt and done-when sections.

Licence: MIT License. Attribution when you reuse it: Based on work by Matt Pocock (mattpocock/skills, 'prototype' with LOGIC.md and UI.md) (Copyright (c) 2026 Matt Pocock, MIT License), https://github.com/mattpocock/skills/blob/a496f5513d4a4cf889bc48e189e579f4b0bdf6aa/skills/engineering/prototype/SKILL.md; adapted by TheSkillVault, https://theskillvault.ai