---
name: tbt-process-to-clickable-prototype
description: "Separate a visual state transition from a real service integration for Turn a process brief into a clickable prototype with AI. Use permitted source material; this kit does not authorise external actions."
---

# Turn a process brief into a clickable prototype with AI

Separate a visual state transition from a real service integration.

Use the supplied source as authority. Check the account supports the actual file or image operation before attempting it.

## Task instruction

Build a small clickable local prototype from these supplied process rules.
Show [states and actions] with source rule IDs and meaningful error/return
paths. Use fictional data. Local controls should actually change the
prototype state, but label approvals, sends and saves as simulations.
No network calls, accounts, tracking, backend or external writes.
Provide actual runnable files and a plain explanation of what works
locally, what is simulated and what a real implementation would require.

## Source boundaries

- Required owner and date
- ≤ £500 manager route
- Simulated save and approval

## Review and correction

A clickable route demonstrates the proposed interface. It does not save to a server or authorise a real purchase.

For [case/action], the prototype [wrong state / misleading completion
message]. Rule [ID] says [actual condition], and no external action
exists in this scope. Correct the local transition and simulation label.
Keep the useful layout and other rules unchanged. Repeat that actual
case and do not claim a live service was implemented or a real request saved.

Use references/practice-source.json for the labelled example. The practice HTML is a local teaching tool; it does not call an AI service. Apply this method to the user's supplied facts rather than copying fictional example values. Do not infer approval or permission to publish.