LLMs and design systems

Before, when I made a web app, I always started with the components, and I always started in Figma. I would build the whole design system there and then implement it in the application, and then I would use something like Storybook as a centralized repository of all the components, which worked for me also as a source of truth. That was my process for years.

With agentic coding all of this changed, because now I am much faster working in code than I am in Figma.

What Figma is for now

I still use Figma, but I use it for something else now. I use it to work in the 2D visual space, because that is a different type of thinking. What I do there is lay things out, or make a very lo-fi prototype of what I want, just to see it.

Then I screenshot that sketch and I pass it to the agent, which is constrained by the components that already exist in the project, and it composes the view.

Storybook, replaced by the app itself

And at some point I realized that for the size of the projects I do, Storybook is not necessary anymore. The catalogue is still exactly the thing I want, but the agent can build one for me inside the app.

In one of my projects that catalogue has more than a hundred stories, with:

• Groups, a filter and deep links
• Keyboard navigation
• Switchers for the viewport and the background

It has most of the things I found useful in Storybook and none of the setup.

There is also a small audit script that goes through the project looking for:

• Components that are not registered
• Stories that are fake
• Raw HTML sitting in a view where a component should be

It is what stops the agent from writing its own markup instead of reaching for what is already there. A set of rules only works if something can check it.

As long as the agent has a good component library and a good set of rules, a lo-fi sketch is enough for it to compose a high quality interface.