This arc takes one new feature end to end. The previous article covered automated design from scratch, and it stopped on a picked mockup. This one is the handoff.
A picked mockup leaves most of a screen open: which components it is built from, what it does in each state, what it looks like at mobile width, what it looks like in the other mode. So what I hand to the implementation agent is not the picture. It is components generated in the repo, plus a brief.
What translate produced
Two steps sit inside my design orchestrator, the skill I run as /ux. Skills are named instruction files a coding agent loads for a specific job. Ideate generates rendered mockups and gives me directions to choose between. Translate picks up the output of ideate and generates the components in Ladle, a workbench that renders components in isolation, outside the running app.
The feature sits on the studies list, a page that already exists. A study is Fiuto’s unit of research, and the list is where they all sit. Put the render next to the live product and it is very close to the real studies page. The one block not drawn in the render uses a component that already exists in the codebase, a stacked privacy block. My reading is that translate left it out because the component is already there to build on.
It also generated variants: the different states the list can be displayed in, and a mobile version.
The components come out in both modes. The workbench defaults to dark, and they work in light too, which is very nice.
At the time of this run the scope was the studies list only. It will probably end up on other lists as well, though I was not designing for that yet.
Beginning to end, from starting the session to components generated in Ladle, was approximately two hours. Not that long, and it includes time I lost to a bug.
Two things went wrong
The orchestrator started making a few silly mistakes towards the end of the run. The one that mattered was merging the small updates onto the dev branch. I think it was because that orchestrator was running out of context. I kicked off a new session and fixed that one with a separate agent.
The second was a bug on the translate side. The correct context was not reaching the translate agent, and that cost me 10 to 15 minutes. Fixing it was one of three things I asked the orchestrator for at the end, alongside merging those updates and creating the handoff.
The brief and the project
The last step generates a brief and a project, the ticket the build agent picks the work up from. The build agent is the orchestrator that runs implementation. That is the handover.
The brief on its own would not be enough. It is high level, and I am fairly sure a high-level description of a screen is the kind of input an agent fills in with its own guesses. Next to it sit the components, already in the repo, in the design system, in both modes, with the mobile variant and the states. The build agent wires up parts that already render.
This feature did not exist in code and had not been defined anywhere. These two articles cover from scratch up to the high-level handoff.
Doing this with your own agent
- Pick one direction before you translate anything. Translating two candidates is wasted work.
- Tell the agent to map every element to something that already exists in your codebase, and to flag anything it cannot map. What it cannot map is either a genuinely new component or a sign the design drifted from your system.
- Render the result in a component workbench, not in the app. You want to see the parts before anything is wired.
- Ask for the variants in the same pass: every state the surface has, the mobile width, and both themes if you support two.
- If the surface has a live counterpart, put the render next to it and compare. That comparison tells you whether the translation held.
- Hand over both artifacts, the brief and the built components, not the brief alone.
- Watch the length of the session. If the agent starts making basic mistakes near the end of a long run, open a new session and fix it there.
The next article covers planning and implementation: handing that project to the build agent and building the feature.
