AI Tooling Process Innovation Prototyping

Fast, high-fidelity prototyping with Claude Code.

Role Senior UX Designer

Timeline 2026

Platform Roche Design System / Claude Code

Deliverables Claude Code Prototyping Package (GitHub repo)

Overview

From days to minutes.

Roche’s design teams are moving faster to get products to market. Scope is growing, cycles are tightening, and the time available for the work that matters most keeps shrinking. I identified an opportunity to use Claude Code to fundamentally speed up how our team prototypes, so we could still spend time on work that matters: understanding our users’ problems and designing the right solutions.

The problem As pace and scope increase, prototyping becomes a bottleneck. Manual prototyping in Figma often requires you to pick between speed and fidelity.

The solution A GitHub repo that connects Claude Code directly to Roche's design system, enabling any designer to generate high-fidelity prototypes from a single prompt.

The impact Prototype turnaround reduces from days to minutes. High-fidelity, interactive prototypes available to the entire Roche design org as fast as you can prompt.

Flow: a prompt goes to Claude Code, which uses design system components to produce a working prototype.

The Problem

Less time prototyping. More time understanding users.

As pace and scope increase, prototyping becomes a bottleneck. Manual prototyping in Figma often requires you to pick between speed and fidelity. Designers spent significant time connecting screens with overlapping flows, manually maintaining consistency, and producing static outputs that developers couldn’t build from directly. The prototypes were disconnected from the actual design system, required constant upkeep as designs evolved, and slowed the team’s ability to test ideas quickly.

Less time spent prototyping means more time understanding user needs and pain points. That time is what helps us design more meaningful solutions.

Figma prototypes were static and disconnected from real design system components

Connector-heavy flows became unmaintainable as designs evolved

Prototyping consumed time that should have gone to research and iteration

Developers couldn’t build directly from Figma prototype flows

Before: Figma frames tangled in crossing connector lines. After: a Claude Code prompt and the clean, interactive prototype it built.

The solution

A package that turns a prompt into a working prototype.

I created the Claude Code Prototyping Package: a GitHub repo containing everything Claude Code needs to build high-fidelity prototypes using Roche’s real design system components. With a single prompt, a designer can generate an interactive, component-accurate prototype ready for user testing, stakeholder review, or developer handoff.

The package includes a CLAUDE.md system prompt that teaches Claude Code the design system, the real component library, design tokens (color, spacing, and sizing), the product icon set, approved logos, typography styles, and product contexts: information about Roche products that helps Claude prototype accurately. A quick-start README gets designers who are new to the package, and to prototyping with Claude, up and running. Clone the repo, open Claude Code, and start building.

CLAUDE.md system prompt giving Claude Code full design system context

Component library with real Roche design system components

Design tokens: color, spacing, and typography

Product contexts: information about Roche products that helps Claude prototype accurately

Quick-start README for designers new to the package and to prototyping with Claude

The package's file structure — CLAUDE.md, components, tokens, icons, logos, typography, product contexts and a README — each annotated with what it gives Claude Code.

The impact

High-fidelity prototypes. A fraction of the time.

The package reduced prototype turnaround from days to minutes. Designers can now generate interactive, component-accurate prototypes directly from a prompt, without spending hours in Figma’s prototyping canvas. The package is available to the entire Roche design org, making high-fidelity prototyping accessible to every designer on the team regardless of their technical background.

Prototype turnaround reduced from days to minutes

Interactive prototypes use real design system components from the start

Available org-wide: any Roche designer can use it immediately

Frees designer time for research, iteration, and user testing

Demonstrates AI’s role in solving UX process problems at scale

Days to weeks saved per prototype, real design system components, and org-wide availability; a six-step Figma prototyping workflow compared with a four-step Claude Code workflow.

What's next

Live, in use, and growing.

The package is live and being used. Next steps include running onboarding sessions with the broader design team, expanding the component library based on designer feedback, and exploring deeper integration with Roche's development toolchain to close the gap between prototype and production.

Designer onboarding sessions across the Roche design org

Component library expansion based on real usage and feedback

Exploration of native integration with Roche's dev toolchain

Potential to extend the package to other Roche product teams

Three-phase roadmap: package published (complete), designer adoption (in progress), and platform integration (up next).

Next Case Study Setting the UX direction for Roche's flagship digital pathology platform.