Owen Williams, Stripe's AI use case

Product Design Manager at Stripe

Built ProtoDash, an AI-powered internal prototyping studio that brings Stripe’s design system into AI-generated prototypes, helping designers and PMs create high-fidelity clickable prototypes instead of generic AI output.

The problem

What was broken before AI

Generic AI prototyping tools could produce impressive-looking screens, but they did not understand Stripe’s product environment. They missed the design system, dashboard chrome, navigation patterns, product context, and the quality bar expected from Stripe’s design team. That meant AI could help with speed, but the output still required too much translation before it felt useful inside Stripe.

What changed

What the use case made possible

Owen brought AI closer to Stripe’s own design system and product workflow. ProtoDash gave designers and PMs a way to create high-fidelity, clickable prototypes that looked and behaved more like real Stripe product surfaces. Instead of static memos or generic mockups, teams could share working prototypes, annotate problems visually, and turn review feedback into AI-executable tasks.

Why this matters

Why this use case is worth studying

Owen’s workflow shows why AI works better when it starts with the materials a team already trusts. Stripe already had a strong design system, product patterns, review habits, and a high bar for what “good” looks like. ProtoDash brought those ingredients into the AI process, so prototypes started closer to something a Stripe team could actually react to instead of feeling like generic AI output.

Use this when

When this pattern applies

Use this pattern when your team already has strong internal standards, but generic AI tools keep producing output that feels close-but-wrong. It works especially well when the missing context lives in your design system, product patterns, component library, internal docs, or review culture.

Exponential Builder analysis

AI needs your team’s materials before it can match your team’s standards.

ProtoDash became useful by starting from Stripe’s actual design system, dashboard patterns, product chrome, and review habits, which reduced the translation work that usually follows generic AI output.

The interface matters as much as the model.

Owen lowered adoption friction by wrapping the workflow in a ready-to-use prototyping environment, shareable URLs, browser prompting, and visual feedback instead of making every designer or PM assemble the stack locally.

Prototypes change the quality of product discussion.

A clickable, on-brand demo gives reviewers something concrete to inspect, annotate, and hand off, which can make feedback more precise than a memo or loose mockup.

Who this is for

Best fit

Product designers

Design systems teams

Product managers prototyping new ideas

Internal tools teams

Companies with mature product patterns or examples of good work

What to avoid

Mistakes and warnings

Where this pattern can go wrong if you copy it too literally.

Do not rely on generic AI tools to understand your company’s design system.

Watch for hallucinated components or patterns if the AI cannot access real examples.

Remove setup friction early, or adoption will stall before people see the value.

Keep human design taste in the loop; AI can get close, but the final 10% still matters.

Public workflow preview

The shape of the workflow

A high-level look at how the use case works, with the reusable pattern made clear.

Notice where generic AI falls short

AI tools could make good-looking mockups, but they did not really understand Stripe’s product, brand, or design standards.

Teach AI the company’s system

Owen connected AI to the design patterns, components, navigation, and product context that Stripe teams already use.

Make it easy for the team to start

Instead of asking every designer or PM to set everything up from scratch, ProtoDash gave them a ready-made place to create Stripe-like prototypes.

Turn ideas into clickable demos

Teams could move from a written idea or rough concept to a prototype people could click through, react to, and discuss.

Use feedback to improve the prototype

Review comments and visual notes could be turned into follow-up AI tasks, making the prototype easier to refine.

Copy the pattern

The reusable idea

Pattern in one sentence

Bring AI closer to the real system your team already uses, so the first draft starts with your standards instead of a generic average.

Reusable idea

The reusable idea is to give AI direct access to the systems your team already uses to do good work. For Stripe, that meant design patterns, product chrome, components, example projects, and review habits. The more those internal standards are built into the AI workflow, the less time people spend translating generic output into something that feels real.

Steal this workflow

Build a company-aware AI prototyping lane:

Pick one surface where generic AI output keeps missing the mark.

Create a starter shell with the real product chrome, navigation, routing, and common page structure.

Give the AI access to your design-system components, docs, examples, and usage rules.

Add explicit instructions for how to choose components, what to check before coding, and what to do when a component is unavailable.

Package the environment so designers and PMs can launch it quickly without local setup.

Make every output shareable as a working prototype URL.

Add visual annotation: let reviewers click an element, describe the issue, and turn that comment into an AI task.

Keep a human review pass for taste, product judgment, and the final quality bar.

Suggested prompt

Build a clickable prototype for [workflow or product idea] inside our [product surface] using our existing [design system] components and product shell. Include [specific screens], [key states], realistic sample data for [business context], and the expected navigation behavior. Use established patterns before creating anything custom; if a needed component is unavailable, state the closest available substitute and your assumption. After building, summarize the prototype, list the main design decisions, and flag any open questions for review.

Field notes

Get new AI use cases in your inbox

A short weekly note on how real people are using AI to save time, make money, build tools, and run their lives.

Related use cases

Keep exploring nearby systems.

Browse all

Business OperationsKnowledge Management+1

Included Health clinical team

Clinical team using an internal ambient scribe workflow at Included Health

Telehealth ambient scribe workflow where visit audio is transcribed with Whisper and processed with GPT-4o into SOAP notes and patient instructions for clinician review.

WhisperChatGPTOpenAI Audio API+5

Use case

View use case

Prototyping & DesignMarketing & Content+1

Adobe Firefly Custom Models

AI image-generation feature for training brand- or creator-specific visual models at Adobe

Brand-specific image generation workflow where creators and brands train private Firefly models on their own assets to generate visuals with consistent style, characters, and details.

Adobe FireflyFirefly Custom ModelsFirefly Boards+2

Use case

View use case

Prototyping & DesignMarketing & Content+1

Jascha Kaykas-Wolff + Alexandra Roberts

Co-creators of Eleanore; Kaykas-Wolff is a former Mozilla CMO and Roberts is an artist at Eleanore

AI-assisted beverage brand buildout workflow spanning brand identity, market strategy, web design, vendor outreach, packaging, and operational planning.

ChatGPTCustom GPTsClaude+9

Use case

View use case