The Role of AI in Product Design
When you build a product, one of the first things you do is to design how it works. To do that quickly and consistently, you need building blocks that fit together like Lego: a logo, colours, fonts, buttons, input fields, user flows. That's a design system, and building one normally takes months if not more.
The old model goes like this: Designers produce the system and present it to stakeholders. Once approved, it's handed to frontend developers to turn into reusable code libraries. That handoff is slow and rarely clean. Decisions get reopened the moment they meet real code; how an interaction actually feels, whether it's usable, the edge cases nobody thought about in the isolation of the design phase. When the libraries finally exist, product teams build on them and immediately hit requests the designs were never built for. It is an upfront investment that keeps on growing with each redesign or iteration. The value shows up much later, which is why executives are often skeptical of the whole exercise.
We recently started building Alasin, and had to design every interface from scratch. First I followed the old model. I quickly realized that it would be impossible to get to our targets with it. So I have decided to give a try using AI in the design process. The results came back fast enough that it changed how I think about the old model of designing:
The new model is a lot more straightforward: I work with an LLM to build the design system and an interactive prototype at the same time, so the system is never presented as static screens. The stakeholders test the prototype directly or watch videos of it. How an interaction feels, whether it's usable, the edge cases that used to surface in code: all of it comes up while the it is still cheap to make changes, and the answers are written back into the design itself. By the time the prototype is approved, the questions have been asked and answered. The handoff is then a single step; We ask our LLM to generate the handoff documentation for a coding agent with all of the assets needed, rather than one human explaining intent to another or to an agent. This was possibily the biggest productivity gain that I have figured during my test. I never try to explain what my coding agent needs to do. Instead one agent talks to another agent in the most efficient way. The product ships from the same source of truth the stakeholders tested. The upfront investment is much smaller, the value shows up within the design phase, and each iteration updates the system instead of reopening it.
For this to work, having a consistent design system that outlines the rules is more crucial than ever. Agents love structured, well documented and well thought design system and artifacts. Those assets can be utilized across the application and will use less tokens as the LLM does not have to think from scratch each time it has to create view. It can just use the design systems you outlined like a building block. Details & boundaries matter a lot more than before. While humans can make the distinction when a design token is broken or is incomplete, for agents that is all but impossible. For instance having a consistent accent color that gets carried all way the application is not optional, it is a requirement. Otherwise the coding agent will have a confused liberal take on the implementation that you need to fix afterwards that burns tokens a lot more.
The way the party avatars work is the clearest example. Avatars need to spread out with gaps when there's room, collapse into an overlapping stack when space gets tight, and page forward with a +N token once there are too many to show. They also need a hover state that lifts a token above the stack. That's three layout regimes and the rules for moving between them. Normally it's a week of spec-writing followed by a week of engineering to find out whether the spec was right. Rapid iteration with AI and a ready design system allowed us to resolve this in one sitting. AI lets us see changes almost as fast as we can think them up and our design system keeps the results consistent despite AI shortcomings.
The gains compound. Our conditions system made that obvious. A character can carry up to 19 status conditions, and each one needs a resting-state signal, a hover state, a place on the character sheet, and an overflow rule. Early on we decided to group conditions by tone instead of giving each its own colour: Now we have 5 easy to learn categories instead of 19 individual tints to memorize. The only way to make that call with confidence is to see all nineteen rendered side by side at real size. Normally that means a designer building nineteen variants by hand. Here it took one pass. The decision was made on evidence rather than intuition, and made early enough to flow into the sheets, the badges, and the hero card without rework.
My takeaway from all of this is that AI has not made me think we need fewer designers. Nothing here replaced design thinking. Every judgment call was still mine: hiding badges until the player hovers a party avatar, moving the class label off the hero card to make room for conditions. Those are decisions about attention, taste, and hierarchy, and no tool made them for me. What the tool removed was the labor between making a call and seeing whether it was right.
What used to take months, sometimes years, now takes weeks. The speed is hard to get used to but at the same time it is quite exhilarating. I can honestly this endeavour of ours wouldn't have been possible without Claude Design or other AI tools we are using to build Alasin. I see LLMs as crucial parts of any design work going forward. In my opinion LLMs like Claude Design will replace Figma and alike.
- Nur, VP Of Engineering & Co-founder of Alasin