Design to code, without the handoff.

The cost was in the handoff, not the typing.

In the usual flow a design passes through five hands before it ships. Each pass loses a little detail, and every fix goes back in the queue.

Claude Code sits between me and every tool.

Everything runs on my laptop. Claude Code works in the local clone of our front-end repo, drives the running app in a browser, and reaches Figma and GitHub through connectors that are already signed in. Our engineers build the backend and APIs first and hand me the schemas and Markdown docs, so they exist before any design.

One shared library. One written rulebook.

Two things keep Claude’s output on-brand and up to standard: a design system that exists in both Figma and React, and the team’s conventions written down in the repo, where machines can check them.

My session, never my credentials.

Claude works on my own laptop and signs in to the running app with my own session. It never handles a password or token itself.

Every change is checked live before it becomes a PR.

Every request runs the same loop. I judge only the live result; Claude handles everything between the request and the PR, and a developer reviews and merges it.

1. Requestplain language
2. Searchdesign system + repo
3. Buildfrom parts
4. Checkformat, lint, types
5. Verify livemeasure in the app
6. Looks right?no: feedback goes back to Build
7. Open PRon my approval
8. Code reviewby a developer
9. Mergedby the reviewer

Worked example Asking what happens to someone leaving · merged 16 Oct

1. StageWhat happened
2. Request

   “If the person resigned, exited, retired or their contract ended, ask what to do with them: suspend, exit with a date, or do nothing.”

3. Search

   Claude found what the person drawer already allows for each status, the existing suspend reasons and exit action, and the form parts in the design system. Nothing new was invented.

4. Build & check

   New fields in the modal, English and Spanish strings, and the extra data in the query. The file grew past the size limit, so the logic moved into its own hook. Checks passed.

5. Verify live

   All seven leaving reasons checked in the running app (four ask the question, three don’t), each option’s fields and the draft note, without submitting.

6. Feedback

   “Adjust the spacing”: gaps measured at 16px, raised to 20px, re-measured. “Same options on Replace”: added.

7. Review & merge

   The reviewer asked for a date library in one helper; Claude switched all three hand-written conversions and replied, and the developer merged it the same day.

Seventeen PRs in eight days.

From small polish to whole flows: onboarding, the career profile, bulk invite and org setup. Engineers review the code; I decide on the live product.

Fast to merge, and honest about what’s missing.

All figures come from GitHub for the 17 PRs opened 9–16 October 2026. They measure review speed and size, not yet a cost saving.

Shipping front end went from occasional to routine.

Before the loop, I shipped a front-end change now and then, mostly by hand. Once it was in place, shipping became part of my everyday design work, and most of what I have merged since was made with Claude Code.

Counted from GitHub, April to October 2026. A PR counts as made with Claude when its description or a commit credits Claude Code. Closed, unmerged PRs are left out of the line totals.

The designer decides. The repo’s rules stay the bar.

The loop works because I stay the decision-maker and the repo’s rules stay the standard. It speeds up design-to-code; it doesn’t replace engineering judgement.