# Turn a product brief into a task-tested UI prototype

> Prototype one three-screen journey and test it with three people before handing the design to a developer.

- Canonical: https://gptnavi.com/workflows/product-brief-to-task-tested-ui-prototype
- Category: Coding
- Difficulty: Beginner
- Setup time: 2-4 hours
- Estimated time saved: Measure in a pilot; savings depend on the task
- Last materially updated: 2026-10-22
- Best for: Founders and product designers
- Tools: Notion, Google Stitch, Google Sheets

## Quick answer

Google Stitch can explore UI and connect prototype screens. The prototype tests whether people understand the journey; backend behavior, data persistence, authentication, and production accessibility require implementation and testing later.

## When to use it

- New feature exploration
- MVP design handoff

## Steps

1. **Specify one user task** — Write who the user is, the starting point, the action to finish, and how success is observed. Limit the first prototype to three screens and include an empty or error state. Tool: Notion. Expected output: A task brief and acceptance criteria
2. **Explore and connect the screens** — Provide the brief and approved references to Google Stitch. Choose one coherent direction, align text and spacing, and connect the primary route. Use sample data and label simulated actions in the prototype. Tool: Google Stitch. Expected output: A clickable three-screen prototype
3. **Observe three task attempts** — Ask three intended users to complete the task without coaching. Record completion, hesitation, misclicks, and misunderstood labels. Revise the two most disruptive issues and repeat those steps. Tool: Google Sheets. Expected output: A short usability record and revised prototype
4. **Prepare a development handoff** — Export the supported design or code artifacts and list states, responsive rules, component choices, and unresolved questions. Have a developer inspect the output and implement real data flows before release. Tool: Google Stitch. Expected output: Reviewed handoff artifacts and implementation scope

## Prompt templates

### Prompt to adapt

Design three screens for [user] completing [task]. Use [brand references], consistent spacing, readable labels, and one error state. Describe each screen's success condition and what must be implemented beyond the prototype.

## Common mistakes

- Mistaking a clickable mockup for a functioning product
- Adding screens before validating the main task

## Related workflows

- https://gptnavi.com/workflows/staging-critical-path-to-reviewed-ai-regression-tests