<ai-design-systems>
Our main practice — and our public lab.
Open-source MCP servers, Figma tooling, workshops, talks, and research at the intersection of AI and design systems. Every tool below came out of real client work. Every recommendation we make, we’ve shipped first.
<context-beats-autonomy>
AI doesn’t replace design systems. It makes them more essential.
An AI agent is only as good as the structured context it can reach: tokens, components, metadata, behavioral intent. Our Context-Based Design Systems framework describes how that context should flow between design and engineering — and it shapes everything we build.
<artifact-flow>
Context flows through artifacts. Humans stay present throughout.
- + intent Design Branch Variants, states, intent encoded
- + structure AI-Assisted Component First coded draft
- + review Pull Request Context carried into review
- + validation Context Engineering Standards, tests, accessibility
- + contract Versioned Component Shipped to the library
- + composition Layout Generation Prompt-based UI
- + fidelity Product Refined intent, shipped at fidelity
// feedback informs the next iteration — the loop runs on context, not autonomy
<what-we-offer>
Want this inside your organization?
Audits, discovery, workshops, and integration — the four ways teams work with us on AI and design systems.
AI-readiness audits
Most enterprise design systems weren’t built with AI in mind, and the gap shows up fast once you start integrating these tools. We audit your tokens, component structure, metadata, and documentation — and hand you a prioritized path to leverage.
- Token & structure review
- Metadata & docs assessment
- Prioritized roadmap
Discovery & research
Ongoing research at the edge of MCP, agents, and generative UI — scoped to your stack. We prototype against your real system, not a demo repo, so you see exactly what these workflows do for your team before you commit.
- MCP & agent prototyping
- Workflow demos on your system
- Findings you can act on
Workshops & training
We teach what we practice — hands-on team workshops, conference talks, and the AI & Design Systems course with Brad Frost. No slideware theory; live demos from real client work.
- Team workshops
- Speaking engagements
- AI & DS course with Brad Frost
MCP & AI integration
We connect your design system to the AI tools your team already uses — MCP servers, Figma tooling, Storybook workflows — built by the people who wrote the open-source tools below.
- MCP server integration
- Figma & Storybook tooling
- Embedded engineering
<start-here>
Is your design system AI-ready?
Our scorecard covers the six dimensions that determine how well a design system can support AI workflows. Score yourself in 10 minutes and find out where your leverage is.
06
dimensions scored
10 min
to score yourself
<open-source>
The tools we build in public
Open-source, in production, used by real teams. We don’t just talk about this stuff — we build it.
$ npx figma-console-mcp
An MCP server that gives AI assistants full read and write access to your Figma design system. Extract variables, components, and styles as structured data — or create and update tokens and layouts through natural language.
$ npx story-ui
Connects your design system to AI workflows: generate real, working UI layouts from plain-language prompts, straight into Storybook.
$ npx figmalint
An AI-powered Figma plugin that audits your files for component consistency, accessibility compliance, and token usage — with auto-fix suggestions and developer handoff exports.
$ npx design-systems-mcp
A dedicated MCP server that gives AI tools structured, reliable context about your design system — a knowledge base your AI can query.
$ npx altitude
Our in-house design system and AI testbed. It powers Story UI, FigmaLint demos, and our MCP research — and it can be the foundation your system starts from.
// the full hub
All open-source tools — including the five-part Figma Console MCP series and the story behind each project.
visit /tools →<learn-with-us>
Workshops, talks, and the course
We teach the same workflows we run with clients — live demos, real systems, no vaporware.
-
course
get early access →
AI & Design Systems — with Brad Frost
A co-created online course on applying AI to design systems in ways that are grounded, practical, and shaped by real work with large-scale teams.
-
webinar
read the recap →
Storybook: When AI Meets Design Systems
Why design systems give AI the context it needs to be genuinely useful — for the Storybook community.
-
workshop
Maven: Doing More With Your Design System in Figma
Hosted with Joey Banks (Baseline Design) — flexible components and libraries, Figma MCP, Figma Make, and Storybook.
-
session
Into Design Systems: Vibe Coding Design Systems
Spec-driven development, token exports, and AI-built documentation sites — live at the Online Jam.
-
talk
SuperFriendly: AI-Enabled Design Systems and Product Design
How design systems become the leverage point for AI-era product design.
AI just turns the lights on.
Adaptive infrastructure, the discipline AI exposes, and why the invisible parts of a design system — structured context, metadata, behavioral intent — matter most.
AI-ready design systems.
Structured context, metadata, token architecture, and the shift from component libraries to adaptive, AI-enabled infrastructure — with Arseni Harkunou.
<from-the-lab>
Workflow demos & field notes
What happens when AI actually understands your design system — documented as we build it.
Design Systems
What Happens When AI Actually Understands Your Design System
A quick demo showing how Claude, the Figma MCP, and the Design Systems Assistant MCP work together to deliver smarter, context-aware design system support.
AI
A2UI: How AI Agents Build Real User Interfaces
What if AI agents could build real interfaces on demand, not code snippets you copy-paste, but actual components from your design system? A2UI makes that possible.
AI
Rethinking Design-to-Product Workflows with MCP, Design Systems, and Generative UI
By combining Figma’s MCP server, a structured design system, and natural language UI generation, we’re not just speeding up design-to-dev, we’re rethinking the entire path from idea to product.
<cta>
Want this inside your organization?
We run AI-readiness audits, workshops, and embedded engagements. A 30-minute discovery call is the fastest way to start.