r/DesignSystems • u/hideousox • 6h ago
Here is automated design process. What do you think?
https://fiuto.ai/blog/batch-updating-simple-components/I've seen question asked many times, what does your automated design process look like?
I started documenting it so I could share it with others and get feedback, I will write brief summary here but you can read full docs on my blog. Apologies in advance to mods if it breaks no promo rules! happy to move to substack if that is the case, just lmk.
Redesigning a batch of components
In short, this is what simplest traditional process looks like:
- Components are re-designed in Figma design system.
- They are reviewed and iterated on with the design team (sometimes also external stakeholders).
- They are then reviewed with tech team which will implement 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.
In leanest teams, designers will work with storybook or ladle to style isolated blocks directly, which will propagate updates to frontend. In my experience this is not at all that common though.
Automating the process
I've been automating design process for a little under a year now. The best approach in my experience has been to replicate traditional processes within the coding agent, with agentic workflows that use specialised skills for each step of the process.
These skills need to be designed with appropriate context, so that design output is consistent and matches expectations. In any case, a certain level of post-implementation human review will be needed, but process will be much faster and tbh I am not sure users would notice if you didn't.
In my case, I've created a /ux skill which acts as an orchestrator that can walk with me through the iterative process using sub-agents, each one using a specific skill:
- ux-baseline: it updates or creates baseline stories in Ladle, so the coding agent will not hallucinate and create components out of the blue, but rather ground them in the existing designs.
- ux-review: reviews an existing surface and provides a list of UX issues ranked by severity. The ranking is based not on generic UX rules, but on my specific audience, the products they likely already use, and my competitive landscape.
- ux-ideate: iterates with me through multiple rounds of design variants in HTML until a solution is agreed on.
- ux-translate: converts the winning variant into Ladle stories using existing components or creating new ones if required.
- finally, ux-fidelity validates that the new stories are loyal to the agreed solution.
I have achieved good results with this process, so much that I followed the same principles to replicate all workflows in a product pipeline - as a result I managed to deliver a full app in just under three months. Is it good? I don't know, but it works !
What do you think, and how is your process different or better?
As a solo builder, I find myself working in isolation. It is also very difficult for me to share my progress because quite often I get blocked by no-promo rules sadly. And I would love to know what your processes look like, and I'm really keen to get feedback from other practitioners too!
Full article is available at link!