modeinspectPrelude

How Prelude's AI-native design team ships production-grade PRs, from idea to merged in 13 days

Prelude's design team replaced static Figma mockups with high-fidelity prototypes built on their own codebase and real data, then started shipping them as PRs that pass review and merge.

13days
Idea → prototype → merged PR
Previously weeks to months
0
Engineering handoffs
Needed to prototype
Design QA
Out of the critical path
Engineering review still gates every merge
Company
Prelude
Website
prelude.so
Industry
Onboarding & trust infrastructure
Stage
Series A ($27M raised) · customers incl. BeReal, Suno, Voodoo
Team profile
AI-native design team · low designer-to-engineering ratio
Use case
Prototyping and shipping UI on their own codebase, with live data
About Prelude

The trust layer behind every signup.

Prelude is the trust layer between signups and the business. It brings verification, auth, and fraud prevention into one onboarding decision.

A Series A company backed by 20VC, Singular, and Seedcamp, it counts BeReal, Suno, and Voodoo among its customers. The product is data-dense and dashboard-driven, built by an AI-native design team that ships its own PRs.

The challenge

Design and engineering, working in different worlds.

Like most product teams, Prelude's designers and engineers worked in separate worlds. Design explored in Figma while engineering built in the codebase, and the space between them ran on handoff: specs, revisions, and waiting. With a small design team relative to engineering, that gap had a real cost. Ideas queued behind engineering capacity, and idea to production stretched from weeks into months.

Prototyping was the first problem Prelude set out to solve. Exploration lived on mock data: frames that looked right but couldn't behave right, showing the happy path instead of the messy real states a trust-and-fraud dashboard has to handle. The team often saw how a screen really held up only after engineering had built it, when feedback costs the most. The AI design tools they tried didn't close the gap. Their outputs ignored the design system, hardcoded values instead of using design tokens, and couldn't prototype real interactions on live data.

The decision

What every tool they'd tried got wrong.

Prelude chose Modeinspect for the thing every tool they'd tried had missed: fidelity, meaning real adherence to their design system and tokens rather than an approximation. In the pilot, ~95% of generated UI composed from their existing components and tokens, with zero hardcoded values in merged output. That's what could actually close the gap: designers exploring, prototyping, and fixing things in code directly, in the same world engineering works in, without a handoff for every iteration.

They were skeptical, and past experience had earned that skepticism. But the question was worth answering: could they change code themselves and trust the result?

The proof

Could it survive code review?

The real skeptics were the engineers. Guillaume's team had watched AI tools spray slop into codebases: code that runs but reads nothing like the repo, and becomes someone's cleanup job later. They expected more of the same.

A short pilot changed their minds. The very first PR Modeinspect produced went through standard engineering review and merged. The ones that followed held the same bar, reusing their logic, following their conventions, and fitting their architecture. They were starting points engineering could genuinely build on, not the cleanup job they'd braced for.

I was skeptical going in, everyone's seen AI slop end up in a codebase. Modeinspect lets our design team build what they have in mind while respecting our conventions and design tokens. It gives us a solid starting point to take over from, and it cut a lot of the back-and-forth between design and engineering.
Guillaume FietteGuillaume FietteEngineering, Prelude
How they work now

Designing against real data, not mock data.

Now Prelude goes from exploration to implementation in one place, prototyping on their own codebase with real data. What a designer builds is already production-shaped instead of a picture of it.

Real data changes what a prototype is. The team designs against the truth, with real volumes, edge cases, and empty and error states, and sees how a layout breaks before committing. Because the prototype is built on the real codebase, it can be merged rather than rebuilt.

It's something I'd wanted to prototype for a long time - I did it in five minutes, with real data. That prototype ended up as a PR we merged.
Quentin Le BrasQuentin Le BrasChief Product & Design Officer, Prelude
A Modeinspect prototype of a Prelude dashboard, built on Prelude's design system and populated with real data.
A Prelude screen prototyped in Modeinspect, using real components, real tokens, and real data.

High fidelity comes from two things: deep codebase understanding, and outputs that speak their design system and tokens natively. Designers polish a prototype to production quality in Modeinspect and open the PR. Design QA moves out of the critical path, since the work arrives already on-system, and engineering review still gates every merge.

The results

Idea to merged PR in 13 days.

Idea to merged PR
~31 days on average13 daysFor work that used to queue behind engineering capacity.
Handoffs per prototype
5+0Designers explore and iterate on the live product, not a mockup of it.
Design QA
After-build reconciliationBefore the PRCode arrives already matching the design system; engineering reviews and merges as always.
Your turn

Prototype on your codebase. Ship the result.

Spin up on your repo in under a minute, with your design system, your components, and real data. No exports, no handoff, no fidelity gap.