The useful result
Create a small decision prototype with three reachable endings and a reliable reset.
- Create a small decision prototype with three reachable endings and a reliable reset.
- Use the explicit result checks to identify a failed or uncertain outcome.
An interactive prototype is more interesting when a choice visibly changes what happens next. Claude’s current Design and Artifacts guides describe interactive visual work beside the conversation. This lesson teaches a small state graph: one start, two choices and three endings. Keep it fictional and local to the prototype.
Before you start
- A Claude account with Design available under current workspace settings.
- An original fictional scenario and a written state graph.
Review evidence
Documentation-based review · 2026-10-27
Primary documentation and demo source reviewed on 27 October 2026. Exercises and expected results are illustrative unless an actual test is explicitly recorded. Local editorial review only; no provider-performance or audience outcome is claimed.
Draw the paths before generating
Use a fictional museum adventure. Start offers Gallery or Garden. Gallery offers Inspect painting or Return; Inspect ends at Ending A. Garden offers Bench or Fountain, leading to Endings B and C. Write every allowed transition.
Example / expected result
Illustrative example; not tested on the named platform.
Start → Gallery → Inspect → A; Start → Garden → Bench → B; Start → Garden → Fountain → C.
Check your result
All three endings have a path from Start and no path requires an invisible choice.
Ask for a small editable prototype
Ask Claude Design for the exact graph with buttons, visible current location and a Restart action. Keep copy short. Request keyboard access and a reduced-motion presentation rather than a complicated animated world.
Build an original museum decision prototype from this exact graph. Keep the three endings distinct and reachable. Include Back where appropriate and Restart from every ending. Use no external services, login or data collection. Explain the states and transitions before styling.Example / expected result
Illustrative example; not tested on the named platform.
Expected: each ending displays its own short conclusion and a Restart button.
Check your result
The rendered controls correspond to the graph; the assistant has not added a fourth hidden branch.
Walk each path and restart
Try every ending, then Restart and choose another route. Use keyboard controls as well as pointer clicks. Note whether prior choices leak into the new run. If a branch fails, report the specific transition rather than asking to fix everything.
Example / expected result
Illustrative example; not tested on the named platform.
Failure report: after Ending B, Restart returns to Garden instead of Start.
Check your result
All three paths work, Back is predictable and Restart clears the prior state.
When it goes wrong
A working preview is not a production application with accounts, persistence or security review. Keep unsupported features out of the brief. Availability and organization settings can vary.
Make it your own
Add one optional clue that changes only the text of Ending A, then test both versions of that path. Keep the original three-ending map intact.
Useful next resources
Sources and review
Last checked Oct 27, 2026. Features and account limits can change. Verify important results against your original material.
Did this help you complete your task?
Tell us what needs improving. No account or private output required.
Report incorrect information or a broken linkGenius Forges Editorial
Practical learning exercises based on checked primary sources and explicitly illustrative examples.
