Skip to content
Get packs

Throwaway Prototype Builder

Builds quick disposable prototypes to test logic/state models or compare UI variations

Source Download skill
Repository
mattpocock/skills
Stars
309,658
Licence
MIT
Files
4 files

What it does

When you have a design question, this skill tells your AI agent to build a short-lived prototype to answer it rather than jumping into production code. For questions about whether logic or a state model feels right, the agent builds a single HTML file with buttons and guided walkthroughs you can open in a browser and play with. For questions about how a UI should look, it generates several very different variations on one page that you can switch between, with a floating bar to choose them. The prototype is marked as throwaway, kept in memory, and the validated decision is then folded into the real code.

Great for

  • Developers who want to sanity-check a tricky state machine before implementing it
  • Designers or product people who want to compare several radically different UI directions quickly
  • Teams that want a clear, documented way to keep throwaway experiments out of the main branch

Skip it if

  • Production features that need tests, error handling, or persistence, since the skill explicitly skips polish and stores state in memory (the prototype is not meant to be shipped)
  • Projects where the agent should not create new routes or branches without review, since it may add throwaway code and commit it to a separate branch

Try asking

  • “Build a prototype to check whether this order-cancellation state model feels right before I implement it”
  • “Make a few radically different UI variations of the checkout page so I can pick a direction”
  • “Create a single HTML file that walks a non-developer through the edge cases of our subscription logic”
Step-by-step guide: how to use Throwaway Prototype BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    prototype.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip prototype.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip prototype.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • State your question clearly (logic vs. look) so the agent picks the right branch; if ambiguous, it will state its assumption at the top of the prototype.
  • Review the generated prototype before running it, since UI prototypes start via project commands such as pnpm and may execute code in your project.
  • Keep the verdict and the question it answered in your issue or commit so the decision is recorded even after the prototype is discarded.

What's inside

  • agents/openai.yaml
  • LOGIC.md
  • SKILL.md
  • UI.md

Redistributed unmodified from mattpocock/skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.