UX Designer

Figma-to-code prototyping for M360 with Claude and Storybook

M360 product intelligence tool prototype in Storybook

The challenge

M360's design handoff followed the usual Figma-to-dev route. But the Figma files had drifted behind the shipped code — they'd first been managed by an agency, C35, and had fallen out of sync with what engineering had actually built. That gap broke the trust UX and dev normally rely on, and it had stalled feature work that depended on the designs being accurate.

I needed to close that gap and get stalled feature work moving again. Static screens couldn't show anything genuinely interactive — like keyword highlighting across a comparison table, or a version diff on policy wording — before code existed, so I also needed a way to demonstrate those features before they were built.

Process

I set up a Storybook environment that pulled the latest components straight out of Figma via MCP. I combined those with our existing code components, so new and established parts of the system sat side by side and stayed in sync with the codebase. On top of that, I built full interactive prototypes — a product comparator, keyword highlighting, and policy wording version diffs — that behaved like the real product, not a simulation of it. I also defined a set of Claude skills, so once a composition was approved, it was almost code-ready and could go to production quickly instead of being rebuilt from scratch.

Gallery

Results

Reviews with the product owner and development team shifted from talking about static screens to clicking through something close to the finished product. Approval got faster and far less ambiguous. Because approved compositions were already close to production code, development picked up work with far less rebuilding — saving real time across the handoff. Both product and development called it out as a noticeably better way of working together.

Key learnings

Collapsing design and code into one Storybook environment removes the step where intent usually gets lost in translation. A working prototype convinces people faster than any deck of static screens.

Role

UX Designer