LLMs and design systems

Before, when I made a web app, my process was always the same. I started with pen and paper or Figma, doing a very rough sketch of what I wanted to do. Once I had the idea, I moved to a high fidelity prototype, using (or creating) a proper design system. Later I translated it into code, with 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.

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.