A developer replaced Figma with a single HTML file that serves as a living design system. AI agents reference this file to generate consistent UI components and verify new code against it, eliminating the need for a separate design tool unless custom designs are needed.
I was running into this challenge where I gotta generate so much front-end code and I don't have a designer on my team and we gotta run pretty fast cuz the expectations of the client are really fast. So I have to play the role of product manager, designer, engineer, right? I'm an AI builder, so I'm just doing whatever. There's a question there, which is how can we compound the front-end beyond just the test coverage, unit tests, integration tests, et cetera. But from a design and taste perspective, how do we compound the front-end? And that kind of brings me into design system as an HTML, extending on the idea of specs as an HTML. And visualization language layer between the human and the agent. I now have been getting into the practice of every project I work on, I create a design system.html for that particular codebase and application. What's really nice is for the Harness interacting with that codebase, like the agent's MD file, their Claude MD file, I always have some lines in there to anytime there's new frontend code, check with the design system HTML and re-leverage everything there. Or if we need to create new front-end components to satisfy the acceptance criteria of the ticket or the project at hand, then propose changes to the design system HTML. So that way this evolves over time and you can see this is also a big file, but it has all the different CTAs, ghost text, cards, and containers. And so that way as well, it's easier for the agent to always verify, did I make the component right? Because you have this source of truth for all the different components. And I'm finding that I don't need to go to Figma. This is good enough. And I need to go make something bespoke, I'll go to Magic Patterns or Claude Design, or a dedicated tool and I'll go and generate using this as context, any sort of new page or UI or UX components towards the jobs to be done identified with the new feature set.
That's a really powerful thing in itself. You don't have to use older, more rigid ways of using a design system. You can just have it on the fly. You can version it. And then combined with the way that we're using HTML as a communication tool, you can even use it for non-app things like just communication documents in this kind of style template. The coding agent solved design systems and here's what it looks like.
