Fiuto: from an approved design to real components

Context

The previous part stopped on an agreed mockup for the studies list. This one turns that mockup into components the build agent can implement from, before any production code is written. A mockup does not tell a developer which existing components to reuse, which states the screen has, how it behaves at mobile width or whether it holds in both themes; the translate step of the /ux family answers those questions in the repository itself, producing components in Ladle that already render and a brief for a fresh build session. This part follows that step through a two-hour run, including what went wrong at its end.

Five things the handoff had to answer

The handoff for the studies list had to settle five things before the build agent could start.

1. Which existing components the design reuses. The privacy block already existed as a stacked component in the codebase, and rebuilding it for one list would have created a second version of the same element to maintain.
2. The states the list can be displayed in, drawn as variants, since a developer given only the default state will invent the others.
3. A mobile version, because a list agreed at desktop width and adapted later usually loses its hierarchy in the adaptation.
4. Both colour modes, so that the review happens once and covers both themes.
5. A brief the build agent can read from a fresh session, since the design session’s context will be gone by the time implementation starts.

In most handoffs each of these lands in a different document and the developer reconciles them. Here they land in one place, the repository, as stories and a project brief.

01The pipeline

Translate and handoff in the /ux family

The /ux orchestrator from the previous three articles runs the last stages of its pipeline here. Translate picks up where ideate left off: it takes the agreed mockup and generates the components in Ladle, reusing what the repository already has, and waits for one approval from me, that the render is close enough to the product to commit. The handoff then packages the result for the build family, a separate set of skills that plans and implements the live feature, which is the subject of the next article.

The handoff itself comes when I ask for it, since the build agent works from a fresh context and everything it needs has to be in the brief and the stories by then.

02The session

What is in this video

At 0:00 Ladle is on screen with the studies list rendered, very close to the page as it exists in the product. Ideate had produced the mockup I picked, and I had left translate out of the previous video because it had already been shown in the earlier parts; this one starts from its output.

Beside the live product, one block is missing from the render, the privacy block. My reading in the session is that translate left it out because a stacked privacy block component already exists in the codebase and the story reuses it. The render includes a few variants for the states the list can be displayed in, and a mobile version. The components also work in both colour modes without my asking, which I only point out at 2:23 while showing the app.

The scope is set at 1:36: the pattern will probably reach other lists later, but for now the work is the studies list only. From the start of the design session to the components generated in Ladle took about two hours, and what is left is the build process. I tell the agent the result looks great and ask it for three things: commit the changes, fix an issue with the /ux-translate skill that had cost me 10 to 15 minutes in a new handoff, and create the project that hands off to the build agent.

5 min Watch on Loom

The orchestrator does the three things I asked for, with one problem. Merging the small updates onto the dev branch went wrong: the session had been running for two hours and the orchestrator was starting to make silly mistakes, which I read as running out of context, so I opened a separate session and fixed the merge there. The skill fix then landed, and translate now passes the correct context to the /ux-translate agent. Finally the brief is generated: a high level handover to the implementation workflow, with the concrete states already in the repository as stories, so the build agent can start from a fresh context and wire parts that already render.

The context bug came first: translate was handing the /ux-translate agent the wrong context, and a new handoff started on it. That cost 10 to 15 minutes. Then the merge of the small updates onto the dev branch went wrong at the end of the two-hour session and was fixed in a second one. After this run I changed the translate step so that it receives the exact approved mockup markup with the target surface, its states and viewports, inventories the component system before mapping any element, and resolves each element to an existing component, a deliberate edit of a shared primitive or a new one to formalise; a fidelity review that finds a material difference now sends the specification back for one amendment before I decide whether to accept it or reopen the design.

Conclusion

Of the five questions a handoff has to answer, the translate step settled four on its own: it reused the existing privacy block instead of drawing a second one, rendered the states as variants, added the mobile version, and covered both themes without being asked. The render made each of those answers visible in seconds beside the live page, reuse included, since the block it left out was the one it already had. The fifth, a brief someone outside the design conversation can start from, came only when I asked for it, and by then the session had run long enough for the agent to lose its context, so implementation begins in a fresh one.

Sources

• Session recording ↗Loom, 5 minutes
• Session transcriptClaude Code, the run in the recording