CMCarl MannSolutions Architect
Engagement · 05

Design-to- code.

Figma to production React, read carefully -- not approximated.

For design teams whose work deserves better than a sprint that reduces it to "close enough". Pixel-accurate React, accessible by default, built to the design system instead of around it. The designer's intent survives the implementation.

2-8wk typicalReact + TailwindAAaccessibility minimum
What you get

The design, read carefully.

Most design-to-code work loses 20% on the way in, because the engineer didn't ask the designer the right three questions. The engagement starts with those questions, not a Jira ticket.

01

Pixel-accurate, the boring way

Tokens out of the design system, components built to the spec sheet, spacing measured rather than guessed. The "is that 14 or 15 px" debate doesn't make it to standup.

02

Accessibility as a default

Semantic HTML, keyboard reachability, focus rings the designer can live with, colour contrast checked before review. WCAG AA as a floor, not a wishlist.

03

A component library your team can extend

React components in your stack -- TypeScript, your framework, your test runner. Documented, named the way the design file names things, written so the next engineer doesn't have to guess which prop does what.

Engagement model

Per screen,
or per system.

Two common shapes -- a short engagement on a defined set of screens, or a longer one that builds the design system the rest of the work hangs off.

  1. 01

    Design audit

    An hour reading the Figma file end to end. Output is a written list of the questions the file raises -- variants that aren't quite consistent, states that aren't drawn, tokens that drift -- before any code is written.

  2. 02

    Token + primitive layer

    Colour, spacing, radius, typography wired to your design system's vocabulary. Form primitives, buttons, inputs, modal -- the boring scaffolding everything else sits on.

  3. 03

    Screens, in sequence

    One or two screens at a time, with the designer in a loop. Friday demo, Monday note. Adjustments tracked in writing -- no "hmm, can we move that?" lost in a Slack thread.

  4. 04

    Handoff with docs

    Storybook (or your equivalent), a component README, and a written list of the patterns now codified. The next designer ships a new screen in a day -- not a sprint.

Scope notes

A good fit, and a not-quite-fit.

Good fit

A design team that wants their work shipped well.

  • A Figma file with intent behind it -- spacing systems, typography scales, components that have variants and states.
  • A designer in the loop. The best work happens when the designer and engineer can hold one conversation, not relay messages.
  • A modern React stack (Next, Vite, Remix) with TypeScript and a test setup -- or the willingness to set one up before code starts.
  • An interest in accessibility as a baseline, not a last-week retrofit.

Less of a fit

A bag of screenshots, build it Tuesday.

  • Static mockups with no system underneath -- the engagement would spend the whole budget inventing what the designer hasn't decided yet.
  • React Native or Flutter targets. This is a web practice; happy to recommend native specialists.
  • "Just ship it like Linear / Stripe / [admired competitor]" without a design file -- a sales pitch, not a brief.
  • Pixel-pushing through an agency PM who'll relay every question with a 48-hour latency. Won't fit the cadence.

The design,
rendered in code.

A Figma share link, a stack you already use, and the screen you'd like to see in production first. A reply lands inside 24 hours on weekdays.

Start a Project Booking Q3 2026
© 2026 Carl Mann · All rights reserved · Made by hand on the open web~ delegate the technical ~Set in Instrument Serif, Manrope & JetBrains Mono