# Interactive Prototype

> Build a clickable, hi-fi prototype of a product or flow — not a wireframe, not a static mock. The user can navigate, toggle states, and feel the interaction. Reach for this whenever the design has flows, multi-screen states, or many-option situations.

- **Type:** Skill
- **Install:** `agentstack add skill-aiatelie-ai-atelie-interactive-prototype`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [aiatelie](https://agentstack.voostack.com/s/aiatelie)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [aiatelie](https://github.com/aiatelie)
- **Source:** https://github.com/aiatelie/ai-atelie/tree/main/skills/interactive-prototype
- **Website:** https://github.com/aiatelie/ai-atelie

## Install

```sh
agentstack add skill-aiatelie-ai-atelie-interactive-prototype
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Interactive prototype

A clickable, hi-fi prototype of a product or flow — not a wireframe, not a static mock. The user can navigate, toggle states, and feel the interaction. Use this whenever the design has flows, multi-screen states, or many-option situations.

## When to use this skill

- The user asks for "an app", "a flow", "a multi-step thing", "let me see it working", "let me click around".
- The design has stateful behavior (toggles, modals, multi-screen navigation, form validation flows).
- There are 3+ screens that connect.
- The user needs to demo interactions to a stakeholder.

## When this skill does NOT apply

- **Single static surface** (a banner, a poster, a thumbnail, a single-screen marketing page) → that's purely visual; use the existing DesignCanvas with one or more `` instead.
- **Comparing variations of one element side-by-side** → also DesignCanvas, multiple `` children in a single ``.
- **Timeline-based motion** (the page advances on a clock, elements enter/exit on a schedule) → that's [`animated-video`](../animated-video/SKILL.md), not this skill.

## Build with React + Babel (inline JSX)

The project's iframe loads React + ReactDOM + Babel-Standalone from CDN at the top of `index.html`. Use these exact script tags with pinned versions and integrity hashes — newer minor versions sometimes break the inline-JSX flow without notice:

```html

```

**Don't add `type="module"` on script imports.** Babel-standalone doesn't transpile module imports cleanly in this CDN setup; the iframe will silently fail to mount.

**Style-object naming.** Never declare `const styles = { ... }`. Multiple components in the same file (or multiple `` blocks sharing the iframe window) will collide on the `styles` global. Always namespace: `const terminalStyles = { ... }`, `const composerStyles = { ... }`.

**Cross-file scope.** Each `` block is its own scope. Components defined in one block aren't visible to the next without going through `window`. At the bottom of every component-defining block, write:

```js
Object.assign(window, { Terminal, Line, Spacer /* every component declared here */ });
```

The next block can then read them off `window` directly: `const { Terminal, Line, Spacer } = window;`.

## Starter components to drop in

The host's MCP starters server exposes these via `mcp__starters__copy_starter`. Each is a single `.jsx` file that drops into the project; reference it from the iframe's `` with `.jsx">`.

| Starter | Use it for |
|---|---|
| `ios_frame.jsx` | Mobile prototype with iOS status bar, home indicator, keyboard. |
| `android_frame.jsx` | Mobile prototype with Android status bar, navigation bar. |
| `macos_window.jsx` | Desktop window chrome — title bar, traffic-light buttons. |
| `browser_window.jsx` | Web app inside a browser frame — URL bar, tabs. |
| `design_canvas.jsx` (DesignCanvas) | Laying out 2+ static screens side-by-side for comparison. |

The DesignCanvas wrapper is already present in fresh projects (see [skills/frontend-design/SKILL.md](../frontend-design/SKILL.md) and the project's `index.html`). Add additional `` children to the existing `` to lay multiple flows side-by-side.

## Build process

1. **Confirm the brief.** Use `mcp__ask-user__ask_user` if anything's vague: how many screens, which device frame, what states matter.
2. **Look for prior art** in the project before generating from scratch — existing components, uploaded screenshots, anything in `uploads/`. Designs are stronger when they riff on something concrete.
3. **Show the user something fast.** Drop in a placeholder version of the first screen with assumptions visible (annotations, a `// TODO` comment block at the top), let them react before going deep on every screen.
4. **Build the React components per screen.** Keep each screen in its own component file (`HomeScreen.jsx`, `ProductDetail.jsx`, etc.), shared primitives in a `Primitives.jsx`. Wire navigation via state.
5. **Add tweaks.** A couple of `make-tweakable` knobs by default (color, copy, layout variant) so the user can riff without re-prompting. See [skills/make-tweakable/SKILL.md](../make-tweakable/SKILL.md).
6. **Iterate.** The user is using the running prototype — every change should be visible in <5 seconds.

## Defaults

- Center the prototype in the viewport (mobile frame) or fill the viewport with reasonable margins (desktop / browser frame).
- **No "title" screen** — the prototype IS the artifact; there's no need for a launcher slide.
- Simple animation: CSS transitions or React state. Reach for `animations.jsx` only when motion is *the design* (timeline-based, choreographed entries, hero animations) — see [animated-video](../animated-video/SKILL.md).
- Real-feeling content: avoid lorem ipsum. If real content isn't available, use plausible-but-fake (names from popular open datasets, real product types, real-shaped numbers).

## Anti-patterns

- **Wireframe-grade detail.** If the prototype is meant to demonstrate interaction, every screen has to be *believable*. A wireframe with grey blocks where photos go, "lorem ipsum" headlines, and unbranded buttons fails as a prototype the user can react to.
- **Modal-everywhere navigation.** Pressing a "next" button shouldn't always pop a modal that hides the previous screen. Use real screen transitions (slide left/right for horizontal flows, slide up for modals/sheets, fade for overlays).
- **State that resets on navigation.** If the user clicks "Back", their form data should still be there. Use a single shared state object at the root component, not per-screen `useState`.
- **`window.alert`** for confirmations or feedback. It feels like a developer artifact, not a designed product. Build the confirm/feedback UI inline.
- **Inline event handlers wired to nothing** — every button should do something visible, even if it's just toggling a piece of mock state. A non-functional button breaks the illusion the prototype is trying to create.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [aiatelie](https://github.com/aiatelie)
- **Source:** [aiatelie/ai-atelie](https://github.com/aiatelie/ai-atelie)
- **License:** MIT
- **Homepage:** https://github.com/aiatelie/ai-atelie

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-aiatelie-ai-atelie-interactive-prototype
- Seller: https://agentstack.voostack.com/s/aiatelie
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.