Interactive Prototypes in Confluence
Don't explain the prototype. Let your team try it.
Build a clickable prototype with an AI coding tool — Claude, ChatGPT, v0, Lovable — and publish it live inside your Confluence page. No screenshots to caption, no external link to open in a new tab, no separate login. The prototype sits next to the PRD, and reviewers use it instead of imagining it.
New Onboarding — Feature Review
Here's the feature-prioritization prototype from yesterday's session, built with Claude and uploaded directly to this page. Add your own ideas, drag them to re-score, and vote on what ships next.
▦ Mini-Site macroDecisions made here roll into next sprint's planning doc. Leave a comment on this page if you disagree with the ranking.
The board above is a real, working prototype — a feature-prioritization tool. Add an idea, score it on Impact vs. Effort, drag it around the matrix, watch the ranked list update. This is exactly what your team sees when you publish a Mini Site: the live app, on the page, not a picture of it.
The problem it solves
When a PM or designer needs to show a prototype in a PRD, the usual options both lose something:
- A screenshot. It's static. Reviewers can't click anything, so they ask questions the prototype already answers — "what happens when I click this?" — and the answer has to be typed out in a comment instead of demonstrated.
- A link to Figma, Vercel, Netlify, or CodeSandbox. It works, but it takes reviewers out of Confluence, often needs a separate login or permission grant, and rots: links die, previews expire, and months later the PRD points at a 404.
Either way, the prototype and the document about the prototype live in two different places. Feedback splits across a design tool's comment thread and a Confluence comment thread that never talk to each other.
How it works
- Create — build your prototype with whatever AI tool you already use (Claude, ChatGPT, v0, Lovable, or hand-write it). Keep it self-contained: HTML, CSS, and JavaScript, no external network calls.
- Upload — zip the files, or point at the folder, and upload them through the Mini-Site macro on your Confluence page.
- Publish — Mini Sites hosts the bundle and serves it inline, live, right where your team is already reading and commenting.
Prompt
Copy this into Claude, ChatGPT, v0, Lovable, or any AI coding assistant. Fill in the bracketed details first — the output is a self-contained bundle you can upload directly to a Mini-Site macro.
I want you to build a small, fully interactive clickable prototype as a self-contained web bundle.
CONTEXT
- What it's for: [describe your idea, e.g. "a feature-prioritization tool for my product team" /
"an onboarding flow mockup" / "a pricing calculator"]
- Who will use it: [e.g. "PMs and engineers reviewing a PRD"]
- The one core interaction it must demonstrate: [e.g. "users add items, score them, and see a ranked list
update live"]
HARD REQUIREMENTS
1. Output plain HTML, CSS, and JavaScript only. No React, no build step, no npm install, no bundler.
2. No external dependencies of any kind: no CDN scripts, no Google Fonts, no external images, no fetch/XHR
calls to any network address. Everything must work opening index.html directly in a browser, with no
internet connection.
3. It must have REAL client-side state and interactivity — not a static image or a series of unlinked
screens. Use actual JavaScript event handlers (click, drag, input) that visibly change the DOM.
4. Keep it to a small number of files: an index.html, and optionally one style.css and one app.js.
5. Make it visually polished — this will be shown to real stakeholders inside a Confluence page. Use
realistic example content, not "Lorem ipsum".
6. Keep it responsive enough to look reasonable in a Confluence page's content column (roughly 700–900px
wide) — avoid fixed pixel widths that overflow.
7. No login, backend, database, or account system. State lives in memory only. Do NOT use localStorage,
sessionStorage, IndexedDB, or cookies — Mini Sites serves the bundle in a sandboxed iframe with an
opaque origin, where all of those throw or silently no-op.
DELIVERABLE
Give me the complete contents of each file, ready to save to disk and upload as a Mini Sites bundle.
After the code, add a 2-3 sentence note on what interaction to try first when I open it.
Tip: if the first result feels static, follow up with: "Show me exactly which lines of JavaScript handle the click/drag interaction, and make sure clicking or dragging actually changes visible state on the page — not just console.log."
Video walkthrough
Coming soon — a screen-capture of building a prototype with AI, uploading it, and using it live in a Confluence page.