Building an AI-readable Design System
Creating consistency, scalability, and harmony across platforms
When I joined WorkJam, the design landscape was fragmented. Our Web, Android, and iOS applications looked and behaved like three completely different products. Colors were hardcoded, icons were inconsistent, and typography varied from screen to screen. There was no single source of truth, every update required redundant effort across teams, slowing us down and diluting the brand experience.
I built the design system that fixed that, led it as Design System Lead, and spent the end of my time there on the part nobody had solved yet: getting the reasoning out of designers' heads and making it readable by any AI tool.
I started with the building blocks, because nothing above them could be consistent while they weren't:
A cohesive color palette, built around accessible and brand-consistent tones.
A unified iconography set, replacing hundreds of hardcoded icons.
A typographic scale that balanced readability, hierarchy, and platform parity.
This foundation became the DNA of what would grow into the full Design System.
Once the visual language was defined, I began translating it into reusable components. Every component was designed to be flexible, responsive, and accessible, ensuring designers and developers could build quickly while maintaining consistency.
Over time, this evolved into a comprehensive library of over 30 components, covering everything from buttons and inputs to complex modals and data tables.
Each component was documented with:
Clear usage guidelines and best practices.
States, variants, and accessibility rules.
Token-based references for easy handoff to engineering.
As the system matured, scalability became a key focus. With the help of one engineer and the design ops we introduced design tokens: Figma variables compiling through Style Dictionary into CSS and JS for web, Swift for iOS, and Android resources, published by CI on version tags.
“Introducing design tokens was the turning point that transformed our Design System from a static library into a scalable, cross-platform framework.
Tokens were implemented for:
Color => consistent palette for our 89 Brand themes and dark mode.
Typography => shared text styles across all platforms.
Icons => single icon set mapped to token references instead of hardcoded assets.
This token-driven approach not only simplified implementation but also enabled future-proof flexibility, changing a single token could update hundreds of components instantly.
From Figma variables
To prod tokens
As the Design System expanded, I took on the role of Design System Lead, managing its growth and adoption across teams. I collaborated closely with product designers, engineers, and QA to ensure consistency, usability, and maintainability.
Key responsibilities included:
Establishing version control and change management for the Design System.
Running workshops to onboard designers and ensure adoption.
Setting up feedback loops for continuous improvement.
This collaborative process transformed the Design System into a living product, not just a static library.
In April 2026, I started integrating AI-powered workflows into the Design System process. From accelerating component documentation and content generation to improving consistency and scalability across design operations, AI is a powerful extension of the system itself.
By combining structured design systems with AI-driven workflows, we’re building a smarter, faster, and more adaptive design process for the future.
Three specific levers, not one:
Drafting the documentation. We used the Figma MCP server with Claude to extract component metadata and draft docs faster than writing them by hand. That's what made populating a repo this size realistic for a small working group.
Self-serve answers for developers. Because the repo lives in Bitbucket alongside the codebases, developers can query it through their own AI tools while implementing, instead of waiting on a designer.
Scaffolding new implementations. With structured documentation as input, AI can generate scaffold code across Storybook and native, cutting the manual translation step that was a major source of drift.
The introduction of WorkJam’s unified Design System transformed both the design workflow and the user experience:
A consistent and recognizable UI across all platforms.
Faster design-to-development handoffs and reduced implementation errors.
Improved accessibility and scalability across multiple devices.
Stronger brand identity and design efficiency at scale.
The AI was the cheapest part of this. The Figma MCP server drafts documentation faster than I could type it, and that's what made a repo of this size realistic for a small group. But the decisions that determine whether a design system survives are old-fashioned ones: what gets written down, who is allowed to press the button, and what stays empty until someone has earned the right to fill it.
The hardest thing to share was never the components. It was the reasoning.