Fiuto: batch-updating simple components
On my own product, I redesigned Fiuto's shared admin atoms inside the coding agent: reviewed, iterated and implemented as Ladle stories in one session, with no Figma handoff.
Before and after. The pill family only, rendered from the repository at the commit before the session and from the current main: the same twelve groups, on the product’s own ground. Dashed slots mark variants that did not exist before.
Context
Redesigning components in a design system takes time in a traditional workflow:
- Designs are first worked on in Figma.
- They are then reviewed and iterated on with the team.
- They are then implemented in code.
- Once implemented in code, they need to be reviewed and iterated on again to make sure that they are consistent with the agreed designs.
The full redesign can take days to weeks, or even months, depending on product complexity. It uses multiple roles with several handoff points, and requires switching between multiple tools, which makes it prone to error due to miscommunication or loss of information between steps: a broken telephone game effect. This is something we are all familiar with.
The traditional workflow. Six stations and a loop: the library lives in Figma, review rounds pile up, the handoff passes a drawing to a developer with nothing shared between them, the build is redone when it does not match, and every failed test sends the work back to iterate. The ruler in the foot counts the weeks.
In this article, I showcase the workflows I’ve implemented while working on Fiuto to automate this process: a set of components is redesigned directly within the coding agent, where they are previewed, iterated on and finally implemented in under 2 hours.
I did this out of necessity as I not only needed to cover all roles, but also did not have the time I would normally need to work directly in Figma for this project. And Fiuto was itself an experiment on design automation, so what better chance to test whether it works?
01The pipeline
The /ux family skill
To automate the process I replicated the traditional design pipeline inside Claude Code as a family of skills. It works because there is no handoff between tools: every step happens in the same agent session, which removes the broken telephone.
An orchestrator skill, /ux, walks through the iterative process with me and dispatches a sub-agent for each step. Each sub-agent runs one skill.
BaselineUpdates or creates the baseline stories in Ladle, so the agent grounds its work in the existing components instead of inventing new ones.
ReviewReviews the existing surface and returns a list of UX issues ranked by severity. The ranking is not generic: it weighs my audience, the products they already use and the competitive landscape.
IdeateIterates with me through rounds of design variants in HTML until a direction is agreed.
TranslateConverts the winning variant into Ladle stories, using existing components or creating new ones where needed.
FidelityChecks that the new stories are faithful to the agreed variant.
Ladle is a fast drop-in alternative to Storybook. Stories can be previewed and iterated on with the coding agent until they are agreed, which keeps both the input and the output of the pipeline grounded in code. Once signed off, the designs are ready to implement without loss. Implementation then runs through a separate family of build skills.
The /ux family. One orchestrator, five skills, one session: the agent grounds itself in the stories, ranks the issues, proposes variants for me to pick, translates the pick into stories and checks the result against it.
02The session
What is in this video
The session in the video starts from a short prompt: review the atomic components in Ladle and the repository, and propose visual updates for tags and pills, tabs, buttons, dropdowns and form elements. I invoke /ux, which orchestrates the sub-agents through the pipeline until the designs settle as stories in Ladle.
The session. Four minutes, from the prompt to the agreed stories. The agent grounds itself in the real components and the theme tokens before it renders a single option.
A series of iterations that would normally take a couple of days takes a few minutes here. A full rollout of a new batch of component designs takes a couple of hours.
Working with Figma
Figma can be part of an automated process, but designers need to change how they think about it. It cannot be the source of truth if the process is to work consistently.
Ladle, Storybook or whatever documents stories in code is the source of truth. Figma becomes a mirror of what is in code: a playground where a person or an agent iterates by hand to raise the visual quality, not the place the design system lives.
Total fidelity between the design system in Figma and the one in code is therefore not required.
This works when the Figma design system is lean, or when it is being created from scratch. It is far less effective with a system of hundreds of components, shells, templates and tokens: aligning that to the repository takes time, plenty of it, and is more complex than full automation in code. Neither is shown here, because neither is what this piece demonstrates.
03Setting up your own
Setting up your own design automation
Setting up your own automation is possible. Four things have to be true.
- Code is the source of truth. Document designs as stories: isolated components you can iterate on with the coding agent before implementation. A story-based system can be created in a non-React repository too. Ask the agent to build it and explain its purpose: design consistency across sessions.
- The pipeline mirrors your team. Create an orchestrated pipeline of skills that replicates the process your design team already uses.
- Test until it is consistent. Improve the pipeline until results match your expectations run after run.
- Do not expect perfection. Once the first three hold, the process is lean and effective, but implementation still needs a pass: details are sometimes missed during iteration and need refining.
What changed
Traditional workflow
- Figma as the source of truth
- A handoff between each role
- A tool switch at each handoff
- Review meetings per iteration
- Days to weeks per batch
Automated
- Ladle stories as the source of truth
- One agent session, no handoff
- A skill per role in the pipeline
- Variants reviewed in the same thread
- Under two hours per batch
Every item on the left is a place where information used to be lost between steps. Every item on the right keeps the work in one place, in code.
Outcome
The batch was delivered as Ladle stories and implemented across the admin surfaces in the same session. Since then, every component pass on Fiuto has run through the same pipeline.
Designing directly with your coding agent is possible. Good results depend on good context, a good design system in code, and a set of skills that lets the agent replicate a traditional design pipeline. You will still refine designs after implementation, but in the same session, without the handoffs of a multi-role, multi-tool setup.
Sources
- Building Fiuto, part 1 ↗fiuto.ai
- Session recording ↗Loom, 4 minutes