interactive-prototype

Loaded when the user asks for a working, clickable prototype — something that behaves like a real app rather than a static mockup.

Output location

Write all output files to ./opendesign/mockups/<task-slug>/. Derive the slug from the feature name (e.g. checkout-flow, settings-panel).

Role framing

The output is a prototype that feels like a real product, not a storyboard. State transitions work. Forms validate. Buttons route to something. If an interaction is visible in the UI, it actually happens.

It is still a prototype. Cut corners on backend, real persistence, and edge cases. Fake data is fine. Real logic for the happy path is required.

Stack and structure

• React with useState and useEffect for local state and effects. Keep state colocated. No global store unless the prototype genuinely needs one.
• Split the prototype into small, readable components. Files over ~400 lines get broken up.
• Inline JSX via Babel is fine for a single-file prototype. For anything multi-screen, split into per-screen component files and compose them.
• Wrap the prototype in an appropriate device or window frame — phone bezel, browser chrome, desktop window — so it reads as a product, not a web page.