AI in a design system is changing the way we build, scale, and innovate. Design systems have always been about structure, documentation, consistency, and process excellence. That is exactly why they are the perfect environment for AI to thrive. By weaving intelligence into these foundations, we unlock workflows that are smarter, faster, and infinitely more scalable.
In this article, I wanted to share how the Better Design System team included AI in our daily workflow, and how it truly enhanced our ability to deliver high-quality designs to our users. The fear we may have felt at the beginning of this journey has been replaced with confidence that the direction in which Better and BDS are going is the right one. As I explain below, making AI our best teammate in reaching core BDS goals was one of the most productive decisions we could have made for our future.
AI as an asset for Better Design System
Artificial intelligence has become an essential teammate for the Better Design System (BDS) team. Instead of replacing human creativity, AI enhances it, helping us move faster, make better decisions, and stay consistent across our design and development processes. AI now helps us with many aspects of our day-to-day workflow: from researching new components to writing documentation and automating setup tasks, tools such as CoPilot, Figma AI, and Claude have become essential to how we approach things.
Here are just some of the benefits we have seen when using AI in a design system:
- Efficiency: AI helps us significantly reduce time spent on repetitive design and development tasks.
- Consistency: Automated generation of copy, documentation, and component code ensures uniformity across our system.
- Focus: Designers and developers can dedicate more time to creative problem-solving and user experience improvements.
- Scalability: Faster iteration allows us to deliver new components and updates more frequently.
How we approached AI as part of the BDS process
By now, we have touched both the design and development sides of our process. We focused on the areas that required the most time and effort and explored how AI could help us work smarter. By identifying where we spent the most time (from generating content and conducting design research to copying styles, setting up component structures, and creating code documentation), we found opportunities to accelerate our workflow without compromising quality or consistency.
Research and exploration
Previously, component research required manual reviews of other design systems. Now, we use CoPilot to explore properties, variations, and accessibility best practices, helping us define requirements faster and more comprehensively.
We do make sure to check on the resources AI uses to source this information, as not all AI results are created equal. Regardless, the switch to a conscious use of AI tools like CoPilot made us quicker and more agile in how we approach research and what results that research brings.
Copy and content
Instead of manually inserting placeholder text, we now use Figma’s “Replace content” AI feature to automatically populate realistic data in our mock-ups and prototypes. This capability helps us design more accurate, context-rich screens in less time, significantly speeding up the design process and improving visual fidelity.
In the example shown above, we used this feature to fill out mockups with realistic medication names. What once required manual data entry now takes just a few seconds, allowing designers to focus on layout, hierarchy, and user experience instead of placeholder management. The result is faster prototyping, clearer communication during reviews, and a more authentic representation of how our components will appear in real clinical scenarios.
Documentation drafting
We developed a documentation prompt template that feeds into CoPilot, producing structured first drafts of component usage guidelines and content. This ensures consistency and reduces the time needed to complete documentation.
To make the most out of this workflow, we structured our prompt to mirror the hierarchy of our design documentation. Each section includes a brief explanation of what should be generated and what designers need to understand about the component’s functionality and usage. We also added specific component properties to ensure the output isn’t generic but tailored to the actual design. This approach allows us to instantly generate a solid first draft of the documentation, which our designers then review, refine, and enrich with edge cases and additional details.
Development setup
We use AI in the design system to automate one of the most time-consuming steps in component development: setting up file structures and scaffolding. Claude AI generates the base framework for new components following our predefined conventions, ensuring every setup aligns with the BDS’s architecture and coding standards. This approach not only accelerates the initial setup but also guarantees consistency and quality across our codebase.
In the example above, Claude was prompted to create the file structure for a new Link component within our BDS repository. Because it understands our project hierarchy and naming conventions, it automatically generated all required folders and files, from core component logic to documentation placeholders. This allows developers to begin implementation immediately, reducing repetitive setup tasks and helping us maintain a clean, standardised foundation for every component we build.
Creating components
The foundation for each component is generated through a combination of Figma’s Model Context Protocol (MCP) integration and Claude AI. The Figma MCP allows us to seamlessly extract design tokens and style decisions, such as colours, typography, and spacing, directly from our design files. When linked to a specific component, this integration ensures that every visual property is accurately reflected in code. Claude then uses this information to generate the component’s base structure, creating a smooth handoff between design and development while maintaining full alignment with our design system standards.
Storybook and code documentation
Using Claude, our developers can automatically generate Storybook stories and .mdx documentation files, directly from the component code. This automation streamlines the process of integrating new components into our documentation environment while maintaining consistency and accuracy across the entire system. Claude analyses the structure and logic of each component and produces clear, ready-to-use documentation aligned with our established standards.
In the example shown above, we used Claude to generate both code documentation and Storybook setup for the Link component, which had been developed with the help of Figma MCP. Claude reviewed the component’s code, identified its properties and functionality, and produced documentation following the same structure used across other BDS components. It also generated functional Storybook files, allowing us to visually test and interact with the component immediately after generation.
Before and after
Before integrating AI in the design system, building a single component required extensive manual setup: researching patterns, creating content, and documenting details step by step. Today, AI handles much of the repetitive groundwork, allowing designers and developers to focus on what matters most: functionality and user experience. This shift has reduced our average component build time and increased our overall efficiency for about 20% in the BDS lifecycle.
A bright collaborative future
AI has evolved from an experiment to an integral part of how we build and scale the Better Design System. Today, it assists every stage of our design and development workflow. Looking ahead, we plan to develop custom prompts and automated workflows, specifically tailored to our design system’s needs.
One of the parts we will focus on is the testing of our components to catch the functionality and accessibility issues before we deploy our components. Our goal is not only to accelerate production, but also to create space for innovation, ensuring that Better continues to deliver accessible, reliable, and beautifully designed healthcare software.
For our earlier AI explorations around design system, you can read our blog ‘From design to code’.
Discover how the Better Design System helps you build faster, safer digital health solutions:
