Building a Web Design System with AI: A 960-Hour Project in 55 Minutes

I had some specific requirements for the Design System:

• Built using React and TypeScript
• It should contain basic components for an e-commerce website
• All of the components should be responsive and mobile-friendly
• Should meet AA accessibility guidelines
• Should eventually scale to add support to React Native
• Should support multiple brands; therefore, we needed a robust token system

I picked Cursor to help me turn my vision into a reality. I gave it the details, selected Claude 3.5-sonnet as my desired model, and off we went to spend quality time together building the project from scratch. It suggested using styled-components for scalability, and I agreed because I was already familiar with it. Then I saw the folder structure being created in a matter of minutes, and I felt like a goddess approving files here and there, scanning through them, and more or less understanding what was going on. Because things have only slightly changed since the last time I added a line of Frontend code over 10 years ago. Claude, my new best friend, explained the process and broke it down into digestible steps for me. I tried to praise the work every now and then, because it seemed to appreciate the feedback.

All I had to do was start the server to preview the magic. Luckily, I knew how to do that on my own. But I’m sure Claude would have helped me with something as simple as that had I just asked for it.

And there I had it —a fully responsive landing page with instances of basic components: buttons showcasing different variants and states, including an optional icon. Other form elements, such as Input fields, checkboxes, radiobuttons, and the cherry on top: A product card. I was feeling greedy and asked for a Modal and a Toast with three states. Claude didn’t forget about my wishes, and not only allowed for one brand, but also delivered light and dark themes. Creating a toggle that allowed me to quickly switch between them.

I stared at the screen, looking at what, to my rusty eye, seemed to be a decent solution that was produced in less than an hour and a couple of prompts. A similar output that three years ago, had taken two full-time engineers in my team about three months to deliver. A 99.9% reduction in time and effort, from approximately 960 person-hours to 55 minutes.

To be fair to my former colleagues, Claude’s work was fast but far from perfect. My QA trained eye couldn’t help but notice how certain elements weren’t exactly aligned. Also, the dark theme did not work properly on the product card. Nothing that Claude would get upset about after I pointed it out, as it promptly fixed those details for me.

I was absolutely impressed and excited. I spent the next couple of hours (deep into past midnight, followed by vivid dreams of AI prompts) playing around with my new project. I asked Claude to create proper documentation and a repository in GitHub. I uploaded a first version, and then decided to branch out to integrate Storybook. And, this is where the real collab happened and where I spent most of the time, as it was no easy task.

The Collaboration Challenges

After a couple of hours, I felt we were going in circles, moving random settings to plug my design system into this well-known framework. I copied and pasted console errors, killed and restarted Storybook servers several times.

Claude was getting tired, I could tell. Even after starting a new chat every now and then. It insisted I should see things working and even suggested clearing the browser’s cache —the last resort of every developer, myself included. I started to doubt the quality of the output. But at the end, we made it, we had a running instance, and I could see the full splendor of my components.

As I continued asking for features, “Let’s add a third brand that also has light/dark modes”. I started to notice my initial requirements were not being taken into account as much. I had to ask Claude to remember that we already had a working token system, and values should not be hard-coded in the components. At some point, it created documentation for random components we hadn’t yet implemented, and I got a Spinner as a freebie somehow, too. Not to mention that hell broke loose briefly when I asked for an accessibility audit of the components we had created. Some frustration and boredom started to creep in, caused by the need to repeat myself, making the excitement wear off.

Conclusions

Even though I panicked for a bit after seeing how quickly Claude produced what I asked for (fearing for my own role in this industry), my little experiment allowed me to understand that we are not yet at a point where AI will fully take over tech jobs. A lot of manual intervention, and hence, rework is still required to produce quality output that can truly solve high-scale product and tech problems. However, what is becoming increasingly evident is that organizations will start to consider replacing those who fail to learn how to utilize AI to their advantage and can't exercise critical thinking to make their tasks more efficient. To me, AI's potential lies in how it will allow people in the tech industry to become creators rather than makers. Problem solvers rather than machine language writers. Isn’t that exciting?

Also, this technology is moving incredibly fast; more efficient models are launching every day. As of today's time of writing, Claude's Sonnet version is 4, making me think that this from-scratch Design System experiment is a little outdated, only a few weeks after I worked on it. Most AI models now have a memory, which would've allowed me to store my initial requirements, avoid the need to repeat myself, and minimize the frustration of subpar output.

AI can be leveraged to produce fast-track drafts, but it is critical and collaborative thinking that empowers the delivery of final products. Models might be getting better at writing the code, but the human mind is still writing the story to create meaningful outcomes.

Instead of spending months building foundational components, Design System teams can now focus their human expertise on strategic decisions: Defining a scalable architecture, establishing governance frameworks, and solving complex user experience challenges for both internal and external customers. The question isn't whether AI will transform design systems work; it's whether your organization will be strategically positioned to capture that value.

If you are wondering how to integrate AI into your design systems workflow, let's have a chat. I can help you deliver measurable efficiency gains while maintaining the quality and coherence your users expect.