Dananz/prototype-skill

Several live, clickable versions of any UI, built while you watch.
Claude Code · Codex · Other agents · Features
Ask your agent for a few versions of a UI. Prototype opens one live app, builds clickable
variants while you watch, and checks them against your real product. Review them, leave
comments on the design, and choose which one to build into your codebase.
## Requirements
Node 22.12+ (or a newer supported LTS) and pnpm or npm.
Chrome, Chromium or Edge for screenshots; terminal, file editing and image viewing in your agent.
macOS, Linux or Windows. Optional Tailscale makes the link reachable on your phone; otherwise use the local URL.
Subagents and image generation are optional. Sandboxed agents need package installation,
access to the preview server, and write access to /.prototypes/ and ~/.prototypes/.
A remote container cannot reach a laptop's localhost directly.
Chrome profiles created by Prototype are removed when the browser stops. Each start also
sweeps the skill's own profiles older than 24 hours, skipping active browsers and links.
On Windows, PROTOCHROMESWEEPALL=1 opts into deleting other programs' stale Chrome
profiles, Chrome/Playwright temp folders, and CRX downloads from the temp directory.
Leave it unset to keep cleanup limited to Prototype's own files.
## Choose your agent
Claude Code
Install from the plugin marketplace:
text
/plugin marketplace add Dananz/prototype-skill
/plugin install prototype@prototype-skill
Then ask for a prototype:
text
/prototype the checkout page
/prototype 3 empty states for the inbox
Turn on auto-update under /plugin → Marketplaces → prototype-skill. Without it, proto up
notices when a newer version is out and asks the agent to run claude plugin update.
Install without the plugin system
sh
git clone https://github.com/Dananz/prototype-skill ~/.claude/skills/prototype
proto up keeps the clone current on its own when it can reach GitHub (a clean checkout of
main, checked every six hours). To update by hand, run git -C ~/.claude/skills/prototype pull --ff-only. On Windows, use
"$HOME\.claude\skills\prototype" as the clone destination in PowerShell.
Codex
Clone the complete repository into the user skill directory:
sh
git clone https://github.com/Dananz/prototype-skill ~/.agents/skills/prototype
Then invoke the skill, or select it in the skill picker:
text
$prototype 3 alternatives for the checkout page
proto up keeps the clone current on its own when it can reach GitHub and write to the skill
folder (a sandbox may block either). To update by hand, run
git -C ~/.agents/skills/prototype pull --ff-only. Restart Codex if the skill
does not appear. For a project-only install, use /.agents/skills/prototype.
Windows or an existing Claude installation
In PowerShell:
powershell
git clone https://github.com/Dananz/prototype-skill "$HOME\.agents\skills\prototype"
On macOS or Linux, reuse an existing Claude checkout with a symlink:
sh
mkdir -p ~/.agents/skills
ln -s ~/.claude/skills/prototype ~/.agents/skills/prototype
Use a clone or a symlink at that destination, not both.
Other agents
OpenCode also discovers the shared skill directory:
sh
git clone https://github.com/Dananz/prototype-skill ~/.agents/skills/prototype