Design systems in the age of AI
We can build faster, but are we building better?
It has become significantly easier to go from idea to something that actually works. AI can help us explore design, write code, create content, and solve problems that previously required much more time. For those of us working with design and development, this means new opportunities – and a completely different pace.
But faster production is not automatically better production.
When it becomes easier to create, it also becomes easier to create too much. More variations, more custom solutions, and more decisions that work well in isolation but don't necessarily work together. A solution might look good and function perfectly today, yet still be difficult to develop further as the website grows or needs change.
That is why we at Atom Agency believe design systems and clear frameworks have become even more important.
A good system creates a common foundation for how a website is designed and built. It helps us make consistent decisions, reuse what already works, and develop new parts without starting from a blank page every time.
When AI becomes part of the process, the system also takes on a new role. It no longer just helps people work consistently together. It also gives us something to guide AI with – and something to evaluate the results against.
Because the important question is not just what AI can create.
How do we know that what AI creates is actually good, well-considered, and sustainable over time?
Speed is not the same as scalability
AI has made it possible to produce solutions in a very short time. A new section, a feature, or even an entire page can go from idea to finished solution significantly faster than before.
But there is an important difference between building fast and building scalably.
A website rarely consists of isolated parts. Typography, colors, spacing, buttons, forms, and recurring components need to hang together. When the same problem is solved in different ways across different parts of the website, complexity grows rapidly, even if each individual solution works.
This is not a problem that arose with AI. It has always been a central part of good web design and web development. The difference is that AI can accelerate both good and bad ways of working.
For us, scalability is therefore not primarily about how large a website can become. It is about how easily it can be developed further without becoming more complicated with every change.
This requires a common structure. A system that helps us reuse decisions instead of making new ones every time, and that makes it clear what is part of the website's visual and technical language.
This is where a design system comes in.
Design systems create structure and a common language
A design system is essentially a common language for how a digital product should look and function. Instead of making the same decisions over and over again, we define them once and create a system that can be reused.
At a fundamental level, it involves things like colors, typography, spacing, buttons, forms, and how content is laid out on the page. For those working closer to design and development, the same structure can be described through, for example, design tokens, CSS variables, components, grids, spacing systems, and naming conventions.
The terms are less important than the principle behind them: every decision should ideally have a clear place in the system.
If a primary button is used in twenty different places, for example, we shouldn't have twenty separate buttons that just happen to look the same. They should be based on the same component and the same rules. When the design changes, we can then update the system instead of hunting down every single instance.
The same logic can be applied to much more than just buttons. A website can have reusable rules for everything from heading sizes and colors to page sections, animations, and responsive behavior. The clearer these relationships are, the easier the website becomes to develop, maintain, and evolve over time.
However, a good design system does not mean that every page has to look the same. The system shouldn't dictate exactly what we are allowed to design. It should provide us with well-defined building blocks and principles that allow us to create variety without losing the overall coherence.
This is also why design systems have traditionally been so valuable when multiple people are working on the same product. Designers and developers don't need to interpret every decision from scratch, because there is already a common language to work from.
And today, it is no longer just humans who need to understand that language.
When AI becomes part of the design and development team
When AI is used as part of the design and development process, the way we work changes too. We no longer just use tools to perform a specific task. We can describe a problem, discuss different solutions, provide feedback, and work together to reach a result.
At Atom Agency, we therefore see AI primarily as a collaborator.
This does not mean that we hand over the design or development work to AI. On the contrary, our own knowledge and decisions become at least as important. To be able to evaluate a proposal, we need to understand what constitutes a good solution, why it works, and how it fits into the bigger picture.
This is especially true when AI is used to create something. A solution might look perfect at first glance, yet still violate the principles that the rest of the website is built on. It might introduce new colors or spacing, create a new component where one already exists, or solve the same type of problem in a completely different way than before.
Therefore, the collaboration becomes better the more the AI understands the context in which it is working.
Instead of just describing what we want to create, we can provide AI with information about how we work. Which components already exist. How our design system is structured. Which rules and conventions we follow. What can be changed, and what should not be changed.
In this way, a design system becomes more than just a tool for consistency between designers and developers. It also becomes part of the context we can provide to AI.
And that is an important distinction. It is about giving AI better conditions to understand the system it is working within.
Getting more out of AI is not necessarily about writing a smarter prompt.
You don't need to get better at prompting – AI needs to understand how you work
There has been a lot of talk about prompting and how to formulate the perfect instruction for AI. But as models have improved, the actual phrasing has become less critical. We can write in plain language, be incomplete, and even make spelling errors. AI usually understands what we are trying to say.
The harder problem is context.
AI can understand that we want to build a new section on a website. But it doesn't automatically know how that specific website is structured. It doesn't know our components, our spacing system, our design tokens, or the principles we use to structure the project.
There is a difference between understanding the task and understanding how we want the task to be solved.
We have experimented a lot with this at Atom Agency. One example is giving ChatGPT knowledge about Client-First, the established system from Finsweet that we use as the foundation for how we structure our Webflow projects.
When AI knows the system, we don't need to describe every technical step. We can talk more naturally about what we want to achieve and let AI reason based on the same rules we work by ourselves.
It is starting to resemble how we collaborate with people. An experienced colleague doesn't need every keystroke described. It is often enough to explain the problem and the goal, because we already share an understanding of how the work should be carried out.
The same principle can be applied to AI. The better context we can provide, the less we need to micromanage every single task.
This is sometimes described as context engineering: creating the right conditions, information, and rules around AI instead of trying to cram everything into a perfect prompt. For us, the term itself is less important than the mindset.
We don't want to get better at talking like machines. We want to give AI enough understanding so that we can keep talking like humans.
See how we work with AI and the Atom Framework
Want to see how this works in practice? In the video below, we show how we work with AI within the Atom Framework and how a clear system provides AI with the context needed to contribute to a real Webflow project. The video goes a bit deeper technically and is primarily aimed at designers and developers who want to see the workflow itself.
The system gives us control over the result
This leads back to the question we started with: how do we know that what AI creates is actually good and sustainable?
For us, a large part of the answer lies in the surrounding system.
At Atom Agency, we have spent several years developing Atom Framework, our own framework for how we design and build websites in Webflow. It builds on Client-First and includes, among other things, our design system, component structure, layouts, spacing, design tokens, and shared principles for how our websites should function.
The framework wasn't created for AI. It was created because we wanted to build better, more consistently, and more scalably ourselves. But now that AI is becoming an increasingly large part of our workflow, the value of that structure has become even clearer.
The system gives AI something to relate to. But just as importantly, it gives us something to evaluate the result against.
We can ask if a solution uses the right building blocks, follows our principles, and is capable of being developed further. We can see when AI suggests something that already exists in the system or when a solution creates unnecessary complexity. This makes it possible to use the speed of AI without handing over control of how the final result is actually built.
This doesn't mean the system is always right. Good design still requires new ideas, exceptions, and decisions that cannot be foreseen in advance. A design system should help us make better decisions, not prevent us from making new ones.
Build the system first, then accelerate
AI will, in all likelihood, continue to change how we design and develop digital products. Which tools we use and exactly what they can do will also continue to change. That is why we believe it is more interesting to focus on what lasts.
Structure. Clear principles. A common language. And people who can determine when a solution is actually good.
The faster our tools become, the more important it is to know in which direction we want to apply that speed.
That is also how we view our collaboration with AI at Atom Agency. We don't need to give AI every instruction or craft the perfect prompt. But we do need to create the environment it works in, provide it with relevant context, and still take responsibility for the result.
AI can help us build faster. Our job is to ensure that we build the right things, in the right way.
Do you want to know more about Atom Framework, how we work with design systems, or how AI can become part of a structured and scalable design and development process? Contact us at Atom Agency and we would be happy to tell you more about how we work and how we can help you.
