Guide · Agent skill
How to use the ce-prototype agent skill: a throwaway prototype
Updated · written with AI from the project's own documentation and checked against our catalogue data
ce-prototype is an agent skill, a folder of instructions that an AI coding agent loads so it can do one specific job. This one has the agent build a throwaway working version of a flow, layout, or interaction when a quick sketch cannot settle how it should behave. This guide explains what the skill does, how to install it, how to trigger it with plain requests, and what it needs and risks, so you can run your first prototype and carry the decisions into planning.
Throwaway Prototype BuilderEveryInc/compound-engineering-plugin · MIT Download the skill Quick start
- 1Install the skill. Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
- 2Check the requirements. Make sure Node.js is installed, the project is a git repository, and you have a web browser for the local preview.
- 3Ask for a prototype. Invoke /ce-prototype with a clear question about how something should work, feel, or read, and name the flow or screen involved.
- 4Answer scoping questions. The agent reads the relevant parts of the repo and asks a few questions before building. Give your go-ahead when the scope looks right.
- 5Open the local preview. Open the local web address the agent gives you and click through the prototype as a user would.
- 6Comment and decide. Leave comments on screens, then send them. Record the choice you want kept, including any adjustments.
- 7Apply or continue. Apply the decisions to a related brainstorm or plan, or take the recap, then follow the next-skill recommendation.
What the skill makes the agent do
Use this skill when you are unsure how a flow, layout, or interaction should behave, and committing to the wrong answer would be expensive to undo. The agent builds a disposable working version and opens it in a local web preview. You click through it, leave comments on screens, and make the call yourself.
The skill is for judgment on the prototype, not for the agent's opinion of it. Decisions the agent makes on its own do not count as settled. The skill is not meant for quick visual brainstorming, for deciding what to build, for polishing a feature that already works, or for implementing the real thing.
- Settled by seeing: how a layout reads, what a palette does, how dense a screen feels.
- Settled by driving: how a flow moves, how a state model behaves, how a control responds.
- Output: a prototype folder plus a decisions.md file that a later planning or implementation step can read.
Install the ce-prototype skill
Download the skill ZIP from this page and unzip it. Place the resulting folder in one of two locations. Use ~/.claude/skills/ to make it available in all your projects, or use .claude/skills/ inside a single project to limit it to that project.
If you use the Claude apps instead of a local agent, upload the skill under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/
- Project install: unzip into .claude/skills/ in your project root
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with a natural request
You can name the skill directly with /ce-prototype, followed by a prompt, a path to a brainstorm file, or a path to a plan file. You can also describe the question in ordinary words and let the agent recognize that a prototype is needed. Codex and hosts that document dollar-prefixed invocation use $ce-prototype instead.
State the question as something to be answered, and name the thing you want to test. The agent scopes the question before building, so expect a few questions back before any code is written.
- Good: "I'm not sure whether checkout should be one page or three. Prototype both so I can click through them."
- Good: "Prototype the empty state for the import screen at real finish so I can judge how it reads."
- Not a fit: "Brainstorm some quick layout ideas for the dashboard."
/ce-prototypeReview the prototype and leave comments
Once the isolated preview is running, the agent gives you a local web address. Open it in a browser and use the prototype the way a user would. You can leave comments on specific screens. Each note records the element you pointed at, its text, and where you clicked.
When you send your notes, the agent reads the whole batch together and applies the ones that are clear screen edits. Notes that are not clear edits are left for you to resolve. The agent saves your decisions as the work settles.
- Click through flows and states as a real user would.
- Comment on specific screens, not on the whole page at once.
- Mark the choice you prefer, including any adjustments you want kept.
Know where the files go and what they contain
The prototype is written under .context/compound-engineering/ce-prototype/ in your repository, in a folder named with the date and a slug, so it survives for the implementation that follows. If that path is not gitignored, the agent offers to add it first. If it cannot use that location, it falls back to /tmp/compound-engineering-<uid>/ce-prototype/, where survival is best-effort.
decisions.md sits in the run folder and records the choices that have settled. It points at the prototype rather than copying it. It is a continuity note, not a plan.
- Check the ignore rule yourself with: git -C <repo root> check-ignore -q .context/compound-engineering/ (the trailing slash is required)
- Screens are kept in a screens/ directory in the run folder.
- Never commit the prototype as part of your product.
git -C <repo root> check-ignore -q .context/compound-engineering/Apply the decisions and continue
When you apply the decisions, the agent looks for a directly related brainstorm or plan file. If it finds one that is clearly linked to this prototype, it writes the decisions into that file. If not, it gives you a recap built from decisions.md instead of inventing a new document.
After a write-back, the agent recommends ce-plan to regenerate implementation planning for the changed requirements. After a run with no file changes, it may recommend ce-brainstorm for remaining product questions, or ce-plan if the session is enough to plan.
- Related brainstorm or plan passed in, or named in the session: decisions are written back into it.
- No related file: you get a recap and no extra document.
- Overlay runs into an existing app are restored afterward, so no changed files are left behind.
What people use it for
- Deciding whether a multi-step checkout should be one page or several before writing the real feature.
- Judging the density and visual finish of a dashboard layout in context.
- Testing how a drag-and-drop or state-driven interaction should behave before committing to an implementation.
- Comparing two empty-state designs at real finish on a sample screen.
- Checking how a single control or menu sits inside an existing page, using a throwaway overlay.
Frequently asked questions
Is the ce-prototype skill free to use?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms.
What do I need to run ce-prototype?
You need Node.js, because the skill runs scripts/light-webserver.js. You also need a git repository, since the skill checks that the .context directory is gitignored, and a web browser to view the local preview.
Does ce-prototype access the internet?
No. The skill is listed as not using the network. It does run scripts locally, so review the scripts before you use it on sensitive code.
How do I install ce-prototype in Claude?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for all projects, or into .claude/skills/ for one project. In the Claude apps, upload it under Settings → Capabilities → Skills.
How is ce-prototype different from brainstorming?
Brainstorming is for quick visual ideas and deciding what to build. ce-prototype is for questions a cheap sketch cannot settle, where the wrong answer would be costly to undo. The skill stops if no person is present to judge the result.
Can I use ce-prototype on an existing app?
Yes, when you ask for it or when the question is about density or chrome on an existing page. The agent makes a throwaway overlay, never commits it, and restores only the files it changed.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use ce-prototype when you need to judge how a flow, layout, or interaction should behave and a sketch will not settle it, and you are available to click through the result yourself. Pick a rough sketch or a brainstorm instead for quick visual ideas, for deciding what to build, or when no human will review the output.
Download the skill