Design System & AI Pipeline

Overview

As Bettermode's app ecosystem grew, visual inconsistency compounded quietly. Every new app looked slightly different, components were rebuilt from scratch, and when the core product evolved, apps didn't follow. I built a token-based design system for the app layer, then connected it to Cursor AI through MCP alongside Bettermode's developer APIs, so anyone could generate a fully on-brand, technically correct app through natural language with no design review required.

The Problem

An audit of 14 existing apps found 9 different button styles, 6 inconsistent spacing scales, and 4 distinct approaches to error states, none matching Bettermode's core design language. Interviews with 3 developers confirmed the root cause: they wanted to build things that looked right but had no reference point. The problem wasn't people ignoring standards. No standards existed.

Discovery & Alignment

Before any component work began, I mapped three possible interventions and ruled out two: documentation alone required too much manual interpretation, and a component library without tokens would make future updates painful at scale. The token-based system won, with one constraint added: developers had to be a first-class audience. Every component needed documentation in both Figma and code simultaneously.

I brought the engineering lead in before design work began to align on token naming, the decision hardest to reverse once in production. A half-day session with design and engineering resolved the system's organizing principle: functional grouping over Atomic Design hierarchy, a decision that took 10 minutes of working through real examples to reach and would have taken months to undo if made wrong.

What We Built

The system was organized by function rather than complexity, grouping components by what they do and how they relate rather than by atomic hierarchy. This made it navigable for developers who needed to find a component quickly, not learn a methodology.

The token library covered every visual decision: color (primary, secondary, neutral, semantic), typography, spacing, radius, elevation, opacity, border, grid, overlay, and z-index. Each token lived simultaneously in Figma and code, meaning a single update propagated across every component and every app automatically.

Every component shipped with two documentation layers: developer docs covering all states, variants, and code examples, and designer docs covering usage guidelines, spacing rules, and do/don't examples. This dual layer created a shared language between disciplines and eliminated the interpretation gap that causes implementation drift.

The AI Pipeline

After launch, I connected the design system and Bettermode's developer APIs to Cursor AI through MCP. Anyone describing an app in natural language would now get correct tokens, correct components, and correct API calls as default output, without consulting documentation. Correct became the path of least resistance.

Impact

Component reuse across new apps hit 70%+ in the first quarter. Design inconsistency findings per app dropped from 8-12 to 2-3. The first three apps built through the AI pipeline required zero design review for visual consistency, and API integration errors dropped to zero.

One honest caveat: two developers continued building outside the system for specialized cases. We treated their output as input, reviewing custom components as candidates for the library. Three were added.