font-family: 'carbona-variable', sans-serif; font-variation-settings: 'slnt' 0, 'MONO' 0, 'wght' 700;font-family: 'marydale', sans-serif; font-weight: 400; font-style: normal;

CASE STUDY

Designing with Agents

From a PRD to a working prototype the whole team could click through, built on our real design system.
PRD · Notifyv1 · Draft
Agent · reading PRD
Prototype v1 · from PRD
4:11
Check Search99+
Downtown 09/25/26
Search check number
Totals
Check Count128
Net Sales$2,846.10
Checks
$#10482 ›09/25/26 • 02:04 PM
Harvest Kitchen - Downtown
Maria G.
OC: In StoreOT: Dine In
Net Sales24.50
Discounts0.00
Refunds0.00
Removed Items-
Returned Items0
Voids0
Show details
$#10481 ›09/25/26 • 01:57 PM
Harvest Kitchen - Midtown
Daniel R.
OC: OnlineOT: Pickup
Net Sales38.15
Discounts0.00
Refunds0.00
Removed Items-
Returned Items0
Voids0
Show details
Agent · Question 1 of 4
Each check lists six totals. Show them all, or key info first?
Show all totals
Key info, details on tap
Decided with PM · before Figma
Agent · Question 2 of 4
Should search also match a check’s reference?
Number only
Number or reference
Decided with PM + engineering
Agent · Question 3 of 4
Which stores should Check Search open with?
Just this store
The dashboard’s selection
Decided with PM · before Figma
Agent · Question 4 of 4
Where should filters and export live?
Top of the screen
Next to the checks list
Decided with PM + engineering
4 decisions lockedBefore Figma

ROLE

Lead Product Designer

TEAM

PM, Engineering

PLATFORM

Claude, Figma

TIMELINE

3 Months

OUTCOME

6 to 7 Notify features shipped, prototype to development in a day

01

Overview

I built an agent workflow that turns a PRD into three clickable prototype options from our design system. The team decided by testing them, Figma stayed the source of truth, and we used it on 6 to 7 Notify features in about a quarter.

02

Problem

Across Qu’s management products, every feature took the same path: requirements became a PRD, the PRD became Figma screens, and the screens became a review. The team only saw a feature working near the end, and that’s when the expensive questions came up.

03

Approach

Qu started a proof of concept to speed up delivery with AI agents. Agents drafted PRDs from requirements and PM direction. I built the next step: an agent that turns a PRD into working prototypes with Claude, ones anyone could open in a browser and click through.

To get there, I documented our design system in Markdown, pulling it together from a scattered component library, and built a 1:1 prototype of the live Notify app in Claude. After every session I folded what I’d learned into Claude skills. By the end, I could hand it a PRD and get back the three strongest options for that feature.

The agent worked from 3 inputs:

PRD

Requirements and PM direction for the feature.

System

Markdown files describing our Figma components and design system rules.

Live product

Screenshots of the real product, so prototypes started from what customers already see.

Engineering was building the next step: giving the agent direct access to the product's code, so every prototype would match what was live, one to one.
FIG. 01PRD TO PROTOTYPE · WORKFLOWINPUTprd.mdPRDRequirements + PM directionINPUTcomponents/*.mdDesign systemFigma components as MarkdownINPUTscreens/*.pngLive productScreenshots of what customers see1AGENT · CLAUDEPRD → prototypeReads the PRDApplies real componentsBuilds clickable flowsAsks the team questions2OUTPUTClickable prototypeOpens from a link, in the browser3REVIEWTeam decidesPM · Engineering · Design? Default date?? Missing data?? Partial totals?4SOURCE OF TRUTHFigmaDecisions that ship, on the design system5Decisions update the system the agent reads next time
FIG. 02FROM THE LIVE SCREEN TO A PROTOTYPE · CHECK SEARCHINPUT · LIVE PRODUCT SCREENSHOT2:13Check Search99+TotalsFiltersCheck Count888Net Sales$18,207Checks400209/21/26 • 12:13 PMSCH-002639-Austin-TXGolden, T.OC:In StoreOT:Drive-ThruNet Sales10.39Discounts0.00Refunds0.00Removed Items-Returned Items0Voids01014SCH-001574-Houston-TXDashboardInventoryMenuOUTPUT · GENERATED PROTOTYPE4:11Check Search99+76 Stores09/25/26Search check number or referenceTotalsCheck Count128Net Sales$2,846.10Checks$#1048209/25/26 • 02:04 PMHarvest Kitchen - DowntownMaria G.OC:In StoreOT:Dine InNet Sales24.50Show details$#1048109/25/26 • 01:57 PMHarvest Kitchen - MidtownDaniel R.OC:OnlineOT:PickupNet Sales38.15Show detailsDashboardInventoryMenuAGENT · CLAUDEPRD + screenshot+ design system1Store and date pickers on top,the same as the dashboard2Search by check numberor reference3Filters and export sitnext to the list4Each check shows what mattersfirst; the rest is one tap awayThe agent started from what customers already see, so the team reviewed changes, not a blank page.

04

Key decisions

DECISION 1

Keep Figma as the source of truth.

Generated prototypes are fast. But fast and inconsistent is worse than slow.
I decided Figma stays the source of truth: our components and the evolving design system for the management products. The agent read them through Markdown files, so every prototype was built from our real system, not invented patterns.
Prototypes were for exploring and deciding. Figma was for the decisions that ship.

FIG. 03ONE COMPONENT, AS THE AGENT READS ITcomponents/store-picker-row.md 1## StorePickerRow 2 3Source: Figma › Management DS › Store picker 4States: checked · partial · unchecked · disabled 5Types: store · shortcut ★ · reporting group › 6 7### Rules 8- “Select all” shows a dash when only some 9 stores are on10- Favorites is checked only when exactly11 the favorite stores are on12- Groups show “N stores · M selected”13- The button counts what’s selected1415### Don’t16- Add a second “Select all” for groups17- Hide Favorites when none are set up↑ the agent builds every state from these rulesreadsFIGMA · MANAGEMENT DS / STORE PICKERcheckboxcheckedpartialuncheckeddisabledrow typesStore AStorestore★Favorites5 storesshortcutWest Region Group4 stores · 1 selectedgroup★FavoritesNone yet · Set up in SettingsemptyfooterShow 5 stores← count follows the selectionSame names in Figma and in the Markdown file, so everyprototype state is built from the real component.

DECISION 2

Make prototypes ask the team questions.

The agent didn’t just output screens. It asked the team questions about each prototype.
We discussed each feature as a team while testing the prototype. When a decision came up, the agent asked the questions that locked it, so open decisions were settled in the room, not discovered later in the build. I made the final design calls. PMs and engineers reacted to working flows instead of reading specs, and I could test several directions for one feature before committing any of them to Figma.

FIG. 04THE AGENT’S QUESTIONS, BEFORE FIGMA9:41Dashboard StoresClear4 stores selectedSearch store, Reporting groupSTORESSelect all stores★Favorites5 storesStore AStoreStore BStoreStore CStoreStore DStoreREPORTING GROUPSWest Region Group4 storesShow 4 stores1231AGENT · QUESTION 1 OF 3LOCKED ✓Every store gets selected. What happens to Favorites and groups?Leave them as they areCheck them tooDECISION →Select all also checks every shortcut whose stores are in the list.2AGENT · QUESTION 2 OF 3LOCKED ✓Stores A–D are picked by hand, E isn’t. Should Favorites stay checked?Keep it checkedUncheck itDECISION →Favorites is a preset: it’s checked only when exactly its stores are on.3AGENT · QUESTION 3 OF 3RAISED FOR TEAMNo favorites are set up yet. Hide the row or show it disabled?Hide the rowDisabled, with a linkDECISION →Proposed: a disabled row with “None yet · Set up in Settings”.Each state was named on the prototype and settled with PM and engineering before the Figma work.

05

Outcome

One day, prototype to development

The store selector pattern went from prototype to approval to development in about a day.

6 to 7 features in a quarter

A redesigned Check Search, store selection with favorites and reporting groups, date filters with favorites and comparisons, a product tour, and the External Data states that helped close the Shake Shack deal.

Decisions moved earlier, in parallel

Everyone reacted to the same working flow, so decisions came faster. Because each feature moved quicker, I could work on several at the same time.

Problems found sooner

Because every prototype came from the real design system, inconsistencies and gaps surfaced before they reached Figma or engineering.

06

Leadership

WHERE IT FELL SHORT

The first prototypes took a lot of back and forth.

Getting the prototype to match the live app 1:1 took many rounds of prompting. Once it did, each new skill was easier to build than the last.

JUDGMENT

AI moved design judgment earlier.

It didn’t remove the hard calls. It brought them to the start, when they’re cheap to change.

SYSTEM

The design system became the input.

The agent was only as consistent as what I gave it, so the system mattered more, not less.

ROLE

From screens to rules.

My job shifted from producing screens to setting the rules the screens come from, and deciding which ideas were worth taking to Figma.

NEXT CASE STUDY

Qu Notify →
Previous
Qu Order Management
Next
Qu Notify App

© 2026 Joao Medeiros

Email · LinkedIn · Resume