Interactive Prototype
- 60 installs
- 98 repo stars
- Updated April 20, 2026
- bluzir/claude-code-design
Interactive-prototype is a Claude Code skill that builds a hi-fi clickable React prototype with realistic device chrome from a feature or app description.
About
Interactive-prototype builds a working clickable React prototype wrapped in a device frame, using pinned React and Babel inline. It auto-detects a design system from tokens, a codebase, or an ingested source, then generates multi-screen navigation with mock data. A developer uses it to produce an interactive demo triggered by prototype or clickable requests.
- Builds a hi-fi clickable React prototype with realistic device chrome (not a static mockup)
- Auto-detects design context from tokens, registry, codebase, GitHub/Figma/screenshot
- Pinned React + Babel inline; screens driven by useState with transition components
Interactive Prototype by the numbers
- 60 all-time installs (skills.sh)
- Ranked #1,215 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 1, 2026 (Skillselion catalog sync)
interactive-prototype capabilities & compatibility
Free; loads React/Babel from unpkg CDN
- Capabilities
- make deck · make tweakable · ingest figma · inspect
- Use cases
- ui design · web design · frontend
- Pricing
- Free
What interactive-prototype says it does
Build a hi-fi clickable React prototype with realistic device chrome. Triggered by "prototype", "clickable", "app mockup", "interactive demo".
Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame.
npx skills add https://github.com/bluzir/claude-code-design --skill interactive-prototypeAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 60 |
|---|---|
| repo stars | ★ 98 |
| Last updated | April 20, 2026 |
| Repository | bluzir/claude-code-design ↗ |
What it does
Generate a clickable multi-screen React prototype with device chrome to demo an app idea before building it.
Who is it for?
Skip if: Production application code (it is a prototype, not a shippable app)
When should I use this skill?
when the user asks for a prototype, clickable demo, app mockup, or interactive demo
What you get
A working multi-screen clickable React prototype inside a device frame.
- clickable React prototype HTML
By the numbers
- min 44px hit targets on mobile
- pinned React 18.3.1 + Babel 7.29.0
Files
Interactive Prototype
Build a working clickable prototype — not a static mockup. Uses React + Babel inline with pinned versions, wrapped in a DeviceFrame.
Phase 0 — Context pre-flight (auto-detect, ONE question max)
Before design questions, silently check for context: 1. Read .claude/design-tokens.json if exists 2. Bash(ls ~/.claude/design-systems/ 2>/dev/null) — if brief mentions a brand matching a folder name → auto-apply 3. Glob for codebase tokens: **/tailwind.config.*, **/theme.{ts,js,json}, **/tokens.{css,scss}, **/_variables.* 4. Scan brief for: github URL → Skill: ingest-github; Figma URL → Skill: ingest-figma; image attachment → Skill: ingest-screenshot; .md/.pdf → Read
If nothing found, ask ONE AskUserQuestion: design system from registry / codebase / screenshot / Figma / none (use frontend-design) / Claude decides. Report "Using <context>. Proceeding."
Phase 1 — Ambiguity gate
Check brief for: platform (iOS/Android/desktop/web), app category (food delivery, social, productivity, etc.), feature count, design context (brand/codebase).
If platform + category present → max 2 clarifying questions. Otherwise AskUserQuestion:
- Platform
- Screens needed (list)
- Transitions between screens (instant / slide / fade / custom)
- Does it need "live data" mocking (fake API returns)
- How interactive — taps only, or scroll/swipe/drag
- Variations wanted
Do not ask about brand context — Phase 0 already handled it.
Phase 2 — Visual system
Using context from Phase 0, commit to a mobile-aware system:
- Min 44px hit targets on mobile
- Consistent spacing / type scale from loaded tokens
- If no tokens → invoke
Skill: frontend-design
Phase 3 — Build
1. artifacts/<slug>.html with shell:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>{{name}}</title>
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="./device_frame.jsx" type="text/babel"></script>
<script src="./animations.jsx" type="text/babel"></script>
<style>body { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f4f4f6; }</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
// your components here
function App() {
const [screen, setScreen] = useState('home');
return <DeviceFrame kind="ios">
{screen === 'home' && <HomeScreen onNav={setScreen}/>}
{screen === 'detail' && <DetailScreen onBack={() => setScreen('home')}/>}
</DeviceFrame>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>2. Bash(cp starters/device_frame.jsx "$(dirname <html>)/") + Bash(cp starters/animations.jsx "$(dirname <html>)/") — copy into the same dir as the HTML 3. Navigation pattern: useState for current screen. For transitions use <Transition> from animations.jsx. 4. Critical React rule: never const styles = {...}. Use component-prefixed names: const headerStyles, const cardStyles. Inline styles also OK. 5. Mock data inline; no external fetch.
Phase 4 — Verify
Important: because this artifact loads external .jsx starters, file:// will hit CORS errors. Run /serve first (one-time), then preview via http:
/serve
/done http://127.0.0.1:4567/artifacts/<slug>.htmlFix errors → Skill: verify-artifact in background.
Phase 5 — Next steps
/make-tweakableto expose knobs (primaryColor, fontSize, density variants)/export-standalonefor offline deliverable/handoffto produce component files for the dev team/register-assetto add to overview
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k