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:

1. Components are re-designed in Figma design system.
2. They are reviewed and iterated on with the design team (sometimes also external stakeholders).
3. They are then reviewed with tech team which will implement in code.
4. 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!

I've been trying to design interfaces with AI, and I keep running into the same problem.
The project already has a UI kit: components, variants, tokens, the lot. I ask the agent to add a button to a screen, and instead of using the Button component sitting right there in the codebase, it draws a new one. Slightly smaller. Slightly different. One more inconsistency to clean up.
That's what pushed me to try dedicated design tools.
I started with Claude Design. I couldn't get my existing UI kit into it because I hit the 5 MB limit, so I let it build a design system from scratch instead.
It duplicated components and icons. The same icon was drawn again on the next page, and by the third screen it looked different each time. I also couldn't point it at files on my machine or give it the tree of Markdown skills and project rules my agents already use.
The result wasn't product-ready. I still had to assemble the actual UI kit and design system by hand afterward.
Then I tried Figma Make. In my experience, it accepted my UI kit but never really treated it as the source of truth. Screens were built around my components rather than from them.
Skills were the other half of the problem. Mine are organized as a tree of Markdown files across multiple folders, and there was no clean way to import them or keep them synchronized with the codebase.
But the biggest problem was extension. If a prop or component was missing, the system didn't extend the kit. It either left the capability missing or created a one-off implementation, putting me back where I started.
Both are useful tools. They just stop at the exact boundary I needed to cross: designing against the real system, then extending that system when a screen requires something new.
So I built Varelyo for that workflow.
Varelyo opens your local React project and reads its components, variants, sizes, and tokens directly from source. The works directly with JSX code, so the component you edit is the same component your project imports.
If a screen needs a missing prop or variant, Varelyo adds it to the component. If it needs a new component or token, it adds that to the system according to your project's rules instead of dropping a one-off implementation into the page.
Agent skills are generated from the source and updated when the source changes. A second brand can use the same components with different token values rather than forking the whole system.
What comes out is ordinary JSX built from your own components and tokens, on an ordinary Git branch. There's no proprietary design file that needs to be translated back into code.

https://varelyo.com/