The Designer Who Ships

How we took a Figma-only designer to pushing production components in a React Native codebase.

The before

Two engineers. A designer building genuinely good designs in Figma.

The loop looked healthy: she'd design, we'd validate, everyone agreed this was the new UI for some old part of the app or the new feature. Then the design sat for weeks while we prioritized other things.

When I finally got to implementation, the harsh truth landed. Some radial gradients, some SVG effects that React Native doesn't easily expose, some visual touches were never going to survive contact with the framework. Not because they were bad designs, but because the framework, the time window, or both couldn't honor them.

So we shipped a lesser version. Not out of laziness. Out of the collision between what React Native can do and the hours I had to do it in.

There was also the asset tax. Figma is a good starting point, but every visual asset still had to be exported, imported, wired into the codebase by hand. And some technical choices happened without anyone realizing they were hard, because the designer shouldn't be expected to know the capabilities of a framework she doesn't write code for.

The result: a persistent gap between the design we agreed on and the design that shipped. A product problem, masquerading as a process problem.

The thing we changed first

We couldn't teach her React Native, and we shouldn't have tried. The real fix was making the codebase something she could work in directly.

I prepped the repo for agents. That's the whole foundation and it's worth stating plainly: she didn't suddenly become a developer. She got a codebase that had been made safe and legible for an agent to work in, and Claude Code let her work through it.

She started vibe-coding her own components in a packages/ui folder. She pushed them through reviews. And those reviews did double duty: each one not only caught problems, it made her Claude Code setup a little better, a little more constrained, a little more likely to write correct code the first time.

She saw everything in Storybook. Storybook turned out to be the ideal room for her: an isolated environment where a component either rendered or it didn't, with no app context to reason about.

If your designer is stuck in Figma and the design keeps degrading on the way to production, this is a fixable problem. See the work.

The rule that removed the framework question

We documented how a component should be built, and one rule did the heavy lifting:

If it renders properly in her Storybook, it works in the app.

Web, iOS, Android. Landscape and portrait. The skills and the CI we set up enforced it, so she stopped needing to know what the framework could or couldn't do. The "will this work in the app" question, the one that used to silently degrade every design, was answered by the system instead of by an engineer's availability.

That alone changed the design-to-production gap from a gamble into a guarantee.

recipe.md

We added a file called recipe.md, created whenever the designer worked on a component: what this component is about, how it's meant to be used, how it wires into the real app.

It sounds small. It compounded. Every component came with its own explanation, so the wiring process got easier and easier with each one. Eventually we extracted the assets, the fonts, and some utils into a package that worked both in Storybook and in the app.

The flow ran better the more we used it, which is the tell that it was becoming a system instead of a series of ad-hoc saves.

What this is actually about

This is the whole point of AI workflows in a codebase, and I want to close there because it's the part people miss.

It's never finished. New models unlock capabilities that weren't there before. Rules that had to be permanently enforced can come out of the system. Things that were impossible last quarter become routine. You adapt, you correct where it fails, and it fails less each time.

The design she agreed on is now the design she ships. That's not a nicer process. It's a different product.

Two engineers, a release every two weeks. This was the Odisei Play codebase. Let's talk about your app.