Design System for AI and Developers

Goal

Create a design system that serves both human designers/developers and AI tools, reducing inconsistencies and development time.

Hypothesis

If AI agents are provided enough context, production ready code can be generated by AI with increased reliability and trust.

Result

8+ engineering teams and cloud AI agents have started using the new atomic design system which has led to dramatically increased code quality and team velocity.

Press Coverage

Summary

‍

Design inconsistencies and slow development cycles plagued the SDLC for our 30+ Healthcare applications. Teams worked in silos with varying component implementations, creating maintenance burdens and UX issues.

As the Lead UX Designer for an EMR, I identified a unique challenge: build a design system that works for both human teams and AI coding agents. This required an architecture that could handle both traditional development and the unpredictable nature of AI-generated code.

‍

Process

‍

Foundation Building → Component Development → AI Support → Team Adoption

‍

Current State

‍

An internal survey between engineering and product, concluded that 88% of our developers are writing front end code and 65% of our developers are NOT Confident when something had been developed before.

‍

"What we call our design system is actually just a collection of random components with no consistent API or implementation strategy." Lead Engineer

‍

"I was really intrigued by their idea of having forms/tables that were nearly 100% configuration with almost no html/scss. If we can make that a reality, then I think velocity would seriously improve." Team Lead

‍

Foundation Building

‍

Additional abstraction layers create a more robust and framework agnostic design system for use by Angular, React, Web Component, and Dart repos. The new design system is backwards compatible supporting our previous more fragile design system.

‍

Sequence of Variables and Components

‍

Tokens in JSON → Variables in CSS, Component Variables, Theming → Application Specific Components

‍

Component Development

‍

More granular components removed AI's guesswork. Additional foundational variables (Color, spacers, radius, elevation, animation, and typography,) and AI specific rules removes assumptions. CoPilot modes were specifically created to support development planning and agent work.

‍

Atomic Components

‍

Ions (css variables) → Atoms (Smallest element) → Molecules (Composition of basic elements) → Organisms (Complex Elements) → Templates (Large Scale UI elements)

‍

Data Table Cells Example

‍

String Cell → Hyper Link Cell

‍

An image of a string cell atomic being used to create a Hyper Link Cell

‍

Data Table Functions and Paginator Example

‍

Filter Button + Search + Menu Button → Table Functions

Chip List Box + Chip List Box → Paginator

‍

Two different table components for interacting with data table, table functions and the table paginator

‍

Generic Table Card Example

‍

For AI generated UIs, we are provide easily configurable elements to assemble. Instructions and patterns for creating new molecules and organisms scale.

‍

Button + Icon Button + Slide Toggle + Table Functions + Table Cells + Paginator → Generic Table Card

‍

An image of a template component build out of many atoms, molecules, and organisms.

‍

Easier Design to Code Handoff with Figma and StoryBook

‍

Sharing design system updates across 800+ developers is only possible with video updates, presentations, application/ examples, and ADRs.

‍

This video tells the story to Leadership how we are refining to design to code pipeline - reducing the burden engineers and AI have about understanding Figma's and making assumptions.

‍

Results

‍

My teams are actively generating semantic and scalable production ready code. Our velocity has increased 65% over the last quarter while maintaining 4x9's code quality.

‍

Watch my teammate Arri as they use CoPilot to generate a new UI from our atomic components.

‍

Design Systems for AI, agentic coding, and the design to code pipeline is rapidly changing. Checkout a WellSky blog article here that covers some of the thoughts our company has taken to adopt AI.