Skip to content
Get packs

Throwaway Prototype Builder

Builds a disposable, runnable prototype to settle how a product should work or feel before committing to it

Source Download skill
Repository
EveryInc/compound-engineering-plugin
Stars
25,850
Licence
MIT
Files
10 files

What it does

When you are unsure how a flow, layout, or interaction should behave and a quick sketch would not settle it, this skill has the agent build a throwaway working version and open it in a local web preview. You can click through it, leave comments on screens, and make the call yourself. The agent then saves your decisions in a short notes file so a later planning or implementation step can pick them up.

Great for

  • Product builders deciding how a flow or interaction should behave before writing the real feature
  • Designers who need to judge layout density, visual finish, or how a screen reads in context
  • Developers who want a cheap, disposable test of an approach before it becomes expensive to change

Skip it if

  • Quick visual brainstorming or deciding what to build; a rough sketch or plan is cheaper and better for that
  • Shipping the prototype as a product: it is explicitly throwaway code, and running a local server or editing an existing app tree carries its own risks if misused
  • Headless or automated pipelines with no human to judge the result, since the skill is designed to stop in that case

Try asking

  • “Prototype how the checkout flow should handle errors before we plan the real implementation”
  • “Build a throwaway version of the dashboard at real finish so I can judge the density and layout”
  • “Prototype the onboarding wizard's step transitions so I can click through it and decide the behavior”
  • “Scale this prototype into our existing settings page as an overlay to check how the chrome feels”
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 10 original files, the MIT licence and an attribution note.

    ce-prototype.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip ce-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

  • Be specific about the question you want settled, and say whether it is about how something looks or how it behaves, so the right fidelity is chosen
  • Review the prototype yourself in the browser and give the judgment directly; the skill is designed so your perception decides, not the agent's
  • Accept the .context gitignore offer when prompted so the prototype files stay out of version control and survive for the next step

What's inside

  • assets/annotate.css
  • assets/annotate.js
  • references/annotation-loop.md
  • references/build.md
  • references/craft-floor.md
  • references/preview.md
  • references/scoping.md
  • references/write-back.md
  • scripts/light-webserver.js
  • SKILL.md

Redistributed unmodified from EveryInc/compound-engineering-plugin 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.