Case Study 02

Building infrastructure that closes the gap between
Figma and production.

Building infrastructure that closes the gap between
Figma and production.

Role

Designer + Developer

Year

May 2026

Two systemic problems were quietly eating my team's time. Production was drifting from design system spec, and AI-generated prototypes looked nothing like the real product forcing the team to revert to Figma for every iteration. Both tools to fix these gaps didn't exist, I built them as personal initiatives.


IDS Inspector finds design system violations on live pages. Prototyping Workbench makes AI prototypes look like production. Together they close the loop between design intent and what customers actually see.

Scope of Work

Research
Design
Build
Ship

Project details

The Problems

Same component, different padding between screens. Custom components masquerading as IDS components. No fast way to verify what's actually rendering on a live page. The gap between Figma and production was invisible until customers saw it.

My team was building three concurrent features that needed to be presented to leadership as one integrated experience. But AI-generated prototypes looked like concept art, not product. Every iteration forced a revert to Figma. The promise of AI prototyping collapsed under the cost of making it look real.

Project details

The Problems

Same component, different padding between screens. Custom components masquerading as IDS components. No fast way to verify what's actually rendering on a live page. The gap between Figma and production was invisible until customers saw it.

My team was building three concurrent features that needed to be presented to leadership as one integrated experience. But AI-generated prototypes looked like concept art, not product. Every iteration forced a revert to Figma. The promise of AI prototyping collapsed under the cost of making it look real.

Project details

The Opportunity

Opportunity 01

Production drift → Live inspection tool

A Chrome extension that identifies any element on a live IES page — component, props, tokens, IDS compliance — and generates AI-ready prompts to fix what's broken.

Opportunity 02

AI prototype slop → A constrained build environment

A prototyping kit pre-wired with the product shell, real IDS components, and real design tokens. AI tools generating into this environment produce prototypes that look like production because they're composed from the same building blocks.

Project details

The Opportunity

Opportunity 01

Production drift → Live inspection tool

A Chrome extension that identifies any element on a live IES page — component, props, tokens, IDS compliance — and generates AI-ready prompts to fix what's broken.

Opportunity 02

AI prototype slop → A constrained build environment

A prototyping kit pre-wired with the product shell, real IDS components, and real design tokens. AI tools generating into this environment produce prototypes that look like production because they're composed from the same building blocks.

Project details

The Goal

Make the systemic gaps invisible. Don't ask designers to remember to check IDS compliance — give them a tool that surfaces violations instantly. Don't ask AI to "try to match IDS" — give it an environment where it can't produce anything else.

Expected Outcomes

Outcome 01

Reduction in manual QA time

Outcome 2

Integrated into the new design system rollout

Outcome 03

3 features aligned at triad and leadership using Prototyping Workbench

Project Details

The Process & Hard Design Calls

Some of the major inflection points throughout the project

  • 01

    The strategic call

    For both tools, the decision wasn't "should I build this?" — it was "should I solve this for myself or for the org?" The cheap path was solving it for myself. A scrappy Chrome extension only I'd use. A prototype scaffold only I'd reach for. That would have saved me hours per week and stayed invisible. The more expensive path was building infrastructure. Documented, generalized, adopted across teams. That meant evening and weekend time on tools that weren't on anyone's roadmap, with no certainty anyone else would use them. I chose the org path for both. The reasoning was simple: if I was hitting these gaps, my team was hitting them too. Individual effort doesn't compound. Shared infrastructure does. A tool used by ten designers is a 10x leverage gain on the time I invested building it. The decision to build on personal time rather than asking for resourcing was deliberate. Asking for resourcing would have meant a roadmap conversation, prioritization debate, and likely a "this isn't on the team's OKRs this half" answer. Building it on personal time meant the work existed first, then proved itself.

  • 02

    Research and discovery

  • 03

    IDS Inspector — build for Claude, not just for humans

  • 04

    Prototyping Workbench — no hand-rolled pattern wrappers

Project details

Business Impact

0+

Designers using the tools

8%

Reduction in manual QA time

Partner Testimonials

"I would say if I was going through a session it's saving me at least 50% of the time it would take to do this manually, and in some cases that's more like 75% time savings."

Person profile picture.

Adam Beasely

Senior Product Designer, Intuit

"Manas built and shipped IDS Inspector independently, a tool the design team is already using in daily QA. Impactfully using prototype workbench to drive alignment in triad and leadership discussions for Landed Costs and Serial/Lot Tracking."

Person profile picture.

Nikita Gill

Design Manager, Intuit

Project details

Business Impact

0+

Designers using the tools

8%

Reduction in manual QA time

Project details

Business Impact

0+

Designers using the tools

8%

Reduction in manual QA time