Type /prototype in Claude Code and get a clickable, themeable, zero-dependency HTML prototype — Tailwind CDN and vanilla JS, no build step, clone and run.
# 1 · install the skill git clone https://github.com/kurenn/claude-prototype ~/.claude/skills/prototype # 2 · in a Claude Code session, just type /prototype # 3 · run the folder it builds cd my-demo && python3 serve.py
Below is a real, running mini-dashboard — one of the kind the skill outputs. Flip its Theme or View and it re-skins live, tokens cross-fading in place. Everything that's alive — the active control, the live row, today's bar — lights up in one reserved signal hue. Nothing else on this page uses it.
Couldn't reach the sync service
Something went wrong on our end. Your recent activity is still cached.
Your roastery, ready to fill
No subscriptions yet. Import your first batch and revenue, shipments, and activity show up here.
Cardinal Coffee · roastery dashboard, running on demo data
It asks how the thing should feel before it builds. A short Q&A — tone, inspiration, audience, scope — drives real, domain-matched content, and it confirms the design direction with you before writing a single screen.
Tone-keyed font and palette menus with anti-monoculture rotation, plus guards against the category reflex and the “tasteful AI editorial” cluster — warm + display-serif + amber — that's become its own machine-made tell.
A pre-emit self-critique scores every screen on six hostile-reviewer axes, 35 slop-gate lint rules run before handoff, and a blind design judge ranks rendered output. Assess is a non-skippable completion gate.
Cross-document View Transitions, a fake-latency loading engine with spinner-delay discipline, and three motion tiers the skill picks from context — all vanilla, all degrading cleanly under reduced motion.
Every prototype ships one visible bar — Theme · Layout · Persona · Motion · Loading · Share · Feedback. It never wraps to a second line, and reviewers judge the options they can see. It's the one you're looking at now.
Plain HTML, Tailwind via CDN, a handful of vanilla JS files. No webpack, no Node, no framework — it deploys to any static host as-is. If it needs a build step, it isn't a prototype.
Signature move, icon stance, imagery stance, motion tier — every prototype names them in DESIGN.md. Design by decision, not by accident.
Tone drives the type and palette — not a template. Four families it reaches for, each a deliberate, disciplined direction rather than a coat of paint.
prototype.
Install once, then build prototypes by talking to Claude. It's open source, and it runs anywhere a browser opens.
# clone into Claude Code's skills directory git clone https://github.com/kurenn/claude-prototype ~/.claude/skills/prototype # restart the session, then just type /prototype
MIT · v0.4.0 · zero dependencies
Shift + ? · recent screens