←Back/Design/v0
IntermediateDesign

Streamline Design Reviews with an AI-Powered Prototyping Studio

Build and iterate on high-fidelity prototypes directly in your browser. This workflow uses a custom web UI to generate designs from prompts, visually annotate feedback, and automatically implement revisions with AI.

Streamline Design Reviews with an AI-Powered Prototyping Studio

Source episode · 19:04

Stripe’s Owen Williams on Killing ‘Blurple Slop’ with an Internal Prototyping Studio

with Claire Vo

19:04 to 29:39: Owen shows a browser studio that generates a prototype, captures visual annotations, summarizes feedback, and queues the resulting changes for AI.

Read the full episodeWatch on YouTubeListen on SpotifyListen on Apple

Before you start

What you need

  • A product brief and target user journey
  • The connected design system and application shell
  • Reviewers who can annotate the live prototype

What you’ll make

A high-fidelity prototype with location-specific review notes converted into an ordered queue of implementation tasks.

Tools used

Step by step

The workflow

Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.

7 steps

Step01

Generate a Prototype with a Prompt

In a web-based prototyping studio, write a single, detailed prompt to generate a new dashboard or UI. Describe the page's purpose, key components like charts and tickers, and the type of data to display. The AI will query your integrated design system to build a high-fidelity page.

Example prompt
build a BFCM dashboard for a pet store showing live sales on a chart at the top of the page. A ticker with the latest sales. And trending products. Make sure the data is realistic and real time.
Step02

Visually Annotate for Revisions

To revise a specific part of the prototype without writing a complex new prompt, activate the 'annotate-for-AI' feature. Click directly on the UI element you want to change, such as an oversized chart or incorrect component.

Example prompt
To revise a specific part of the prototype without writing a complex new prompt, activate the 'annotate-for-AI' feature. Click directly on the UI element you want to change, such as an oversized chart or incorrect component.

My actual values:
[insert the files, settings, accounts, or constraints for this step]

Give me the exact commands, settings, or output to use. Finish with a pass or fail check for visually annotate for revisions.
Step03

Provide Contextual AI Feedback

With an element selected, provide a short, direct instruction describing the change. The AI uses the visual context from your selection to understand the command, avoiding the need to specify class names or complex selectors.

Example prompt
the chart is way too tall. It should be a narrow page spanning chart
Step04

Review the AI-Generated Fix

The AI automatically applies the change and generates a new variant of the prototype. Compare the before and after versions to confirm the revision is correct before accepting it.

Example prompt
The AI automatically applies the change and generates a new variant of the prototype. Compare the before and after versions to confirm the revision is correct before accepting it.

My actual values:
[insert the files, settings, accounts, or constraints for this step]

Give me the exact commands, settings, or output to use. Finish with a pass or fail check for review the ai-generated fix.
Step05

Run a Collaborative Design Review

Activate the tool's 'Design Review Mode' to start a collaborative session. Share the prototype's URL with teammates so they can leave comments and feedback directly on the interactive elements, instead of in a separate document.

Example prompt
Activate the tool's 'Design Review Mode' to start a collaborative session. Share the prototype's URL with teammates so they can leave comments and feedback directly on the interactive elements, instead of in a separate document.

My actual values:
[insert the files, settings, accounts, or constraints for this step]

Give me the exact commands, settings, or output to use. Finish with a pass or fail check for run a collaborative design review.
Step06

Generate an AI Summary of Feedback

Once the review session is complete, use an AI feature to generate a concise, actionable summary of all comments left on the prototype.

Example prompt
Summarize the following design feedback comments. Group them into logical themes like 'Visual Polish,' 'User Flow,' and 'Data Display.' For each theme, create a bulleted list of the specific, actionable changes requested. Feedback comments:
[paste all comments from the design review]
Step07

Queue AI Tasks from Feedback

Convert the AI generated summary directly into a task list. You can then queue these tasks for the AI to execute, which automatically implements the requested changes and creates new prototype variants for final approval.

Example prompt
Convert the AI generated summary directly into a task list. You can then queue these tasks for the AI to execute, which automatically implements the requested changes and creates new prototype variants for final approval.

My actual values:
[insert the files, settings, accounts, or constraints for this step]

Give me the exact commands, settings, or output to use. Finish with a pass or fail check for queue ai tasks from feedback.

What good looks like

  • Each comment remains attached to the element and state it refers to
  • The feedback summary preserves disagreements and priority
  • Queued changes can be traced back to the original annotation

Build your next product with ChatPRD

Turn an idea into a PRD, user stories, and a plan.

Try ChatPRD free

After the steps

Runbook notes

How to recover when the loop fails and where human judgment helps.

Recover

If it goes sideways

Review comments lose the visual context that made them useful
Capture the route, viewport, selected element, and screenshot with every annotation.
The agent implements contradictory comments in one pass
Group feedback by decision, surface conflicts, and resolve priority before queueing changes.

Keep building

Related workflows

Create an Automated Workout Tracker with a Simple Claude Voice Note
beginnerPersonalClaude

Create an Automated Workout Tracker with a Simple Claude Voice Note

Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.

Open
How to Rebuild Your Gmail Inbox Inside Claude to Manage Email
advancedOperationsClaude

How to Rebuild Your Gmail Inbox Inside Claude to Manage Email

Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.

Open
Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'
intermediateSalesClaude

Automate Client Proposals and Onboarding with a Claude 'Pipeline Operator'

Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.

Open

Start shipping
better products.

Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.

Start building freeRequest a demo
Free to start
No credit card
SOC 2 certified
Enterprise ready