AI Agents for Design Teams: Fixing Design System Debt Before It Compounds

The marketing site uses #2563EB for its primary blue. The web app dashboard uses #2C5FE0. The mobile app, built by a contractor eighteen months ago, uses #1D4ED8 with a completely different border-radius scale. Nobody decided this. It happened one Figma file and one sprint at a time, and now the design team spends more hours reconciling three surfaces than designing new ones. That is the actual state of design system debt at most companies past 40 people: not a missing style guide, but three style guides that quietly disagree with each other, a handoff process where engineers eyeball spacing values off a screenshot, and a backlog of drift tickets nobody has bandwidth to close. This is what an ai agents for design teams workflow has to solve, and it is not a problem a chatbot or an autocomplete tool is built to touch.

Why a chatbot and an autocomplete tool both miss the actual problem

Ask ChatGPT or Claude.ai to fix your design system inconsistency and it will happily generate a color palette, a spacing scale, a component naming convention, all disconnected from the Figma files and the codebase you actually have. It has no way to open your design files, audit the actual hex values in use across three product surfaces, or read the CSS your engineers shipped last quarter. It produces a plausible design system from scratch, when the real job is auditing what already exists, finding the fourteen places blue-600 got hard-coded slightly differently, and reconciling that into one source of truth. A generalist chatbot treats design system work as a greenfield exercise. For a team three years into a product, it almost never is.

Cursor and GitHub Copilot solve the opposite half of the wrong problem. They are excellent at autocompleting a CSS variable once you have decided what it should be, but they have no design judgment and no visibility into Figma at all. They will not tell you that your mobile app's border-radius scale diverges from web, because they only see the code that already exists, not the design intent behind it or the three other surfaces the code needs to match. Ask Copilot to fix your design token drift and it will autocomplete whatever value is already in the file you have open, propagating the exact inconsistency you were trying to eliminate. Neither tool closes the loop between what a designer intends, what a component library implements, and what actually ships across every surface.

Tonone's Form audits an existing design system for inconsistency across product surfaces before proposing a single new component.

Form, Tone, and Draft: the team a design system actually needs

Form is Tonone's visual designer, the agent that owns brand identity, color systems, typography, and the design system itself. Where a chatbot invents a palette from nothing, Form starts with form-audit, a systematic pass across the design system as it actually exists today: every color value in use, every spacing increment, every type scale, cross-referenced across surfaces to surface exactly where they diverge. That audit becomes the input to form-tokens, where Form defines the actual token architecture, semantic names, base values, and the mapping between them, so that 'primary-blue' means one specific value everywhere it is referenced, not three approximations. Form also owns the component-level design work that sits above raw tokens: form-component specs how a card, a button, or a modal should look and behave once the token layer underneath it is fixed, so the reconciliation work doesn't stop at colors and spacing but extends into the actual UI pieces engineers assemble pages from.

Tone is Tonone's design token engineer, and this is the agent that turns Form's token architecture into something engineering can actually consume without losing fidelity. tone-token builds the style-dictionary pipeline itself, the transform layer that takes a single source-of-truth token file and outputs CSS custom properties, iOS asset catalogs, and Android resource files from the same definitions, so a token defined once cannot silently drift as it crosses platforms. tone-theme handles the multi-brand or multi-surface case directly, where the marketing site, the web app, and the mobile app all need to share a base token set while overriding specific values for their own context, without three separate teams maintaining three separate token files by hand.

Draft rounds out the picture on the UX side. A design system is not just colors and spacing, it is also the flows and information architecture that determine whether the checkout on mobile behaves like the checkout on web. draft-patterns catalogs the recurring UX patterns across surfaces (form validation, empty states, error handling, loading states) and flags where one surface solved the same problem differently than another, which is often where the most confusing user-facing inconsistency lives, well past the pixel level a token audit alone would catch. When the pattern audit turns up a genuinely broken flow rather than a naming mismatch, draft-wireframe gives the team a fast way to propose the reconciled version without waiting for a full high-fidelity redesign pass.

Tonone's Tone formalizes design tokens into a style-dictionary pipeline so a value defined once cannot silently drift across web, iOS, and Android.

A worked example: reconciling three surfaces at a 60-person product company

Take a real shape of this problem. A 60-person B2B SaaS company has three live product surfaces: a marketing site (Webflow-exported, then hand-modified), a web app dashboard (React, Tailwind, two years of incremental commits), and a mobile app (React Native, built partly by a contractor team that rolled off eighteen months ago). The design team is four people. Engineering has flagged 47 open tickets tagged 'design drift', mostly small things: a button that is 4px taller on mobile, a card border-radius that is 8px on web and 12px on the marketing site, a success-state green that is a slightly different hue in the app than in the emails Copy's team sends. No single ticket is a crisis. Forty-seven of them, compounding every sprint, is a design team that spends more time triaging inconsistency than shipping anything new.

The team runs form-audit first. It walks the three surfaces (production URLs, the exported Figma files, and the mobile app's compiled asset catalog) and returns a structured inventory: 6 distinct blue values in active use where there should be 1, 3 different spacing scales (a 4px base grid on web, an inconsistent mix of 4px and 5px increments on mobile), and 2 conflicting definitions of what 'primary' button styling means depending on which surface you check. This is the input Form needed before proposing anything new, and it is exactly the step a generalist chatbot has no way to perform, because it requires reading actual production surfaces, not describing an idealized one.

From that audit, Form runs form-tokens to define the reconciled token set: one primary blue, one spacing scale, one radius scale, with semantic names mapped to base values. Tone then takes that token definition and runs tone-token to build the actual pipeline, producing the CSS custom properties file for the web app and marketing site, and the corresponding Swift and Kotlin resource files for the mobile app, all generated from the same source file so a future token update propagates everywhere in one pull request instead of three manual edits that inevitably drift again within two sprints.

// tokens/color.json, single source of truth, before pipeline transform
{
  "color": {
    "primary": {
      "value": "#2563EB",
      "description": "Reconciled from 6 in-use values, replaces marketing #2563EB, web #2C5FE0, mobile #1D4ED8"
    },
    "success": { "value": "#16A34A" },
    "radius": {
      "card": { "value": "8px", "description": "Was 8px web, 12px marketing, inconsistent mobile" }
    }
  }
}

// tone-token output, web (CSS custom properties)
:root {
  --color-primary: #2563EB;
  --color-success: #16A34A;
  --radius-card: 8px;
}

// tone-token output, iOS (Swift)
enum DesignToken {
    static let colorPrimary = UIColor(hex: "#2563EB")
    static let radiusCard: CGFloat = 8
}

The result: 47 drift tickets become one migration PR per surface, reviewed once, closed together. Six months later, when the team adds a fourth surface (an admin console), it inherits the token pipeline on day one instead of accumulating its own drift from scratch. That is the compounding effect a real design system pipeline produces, and it is the opposite of what happens when three surfaces each get their own ad hoc palette because nobody owned the reconciliation.

The migration is the visible part; the governance is what keeps 47 tickets from becoming 47 again in a year. The design team schedules a quarterly form-audit re-run against production, not the token file, so a hard-coded hex value that snuck back in through a rushed marketing landing page or a mobile hotfix gets caught before it compounds into a second reconciliation project. Because the audit checks actual shipped surfaces rather than the design files, it catches the failure mode that breaks most design systems within a year of launch: someone hard-coding a one-off value under deadline pressure and nobody noticing until the next full audit, by which point it has been copy-pasted into six other components.

Form vs the alternatives

Form, Tone, and Draft are not competing with Figma, they work from what is already in your design files and codebase. They are also not competing with ChatGPT's ability to describe design principles in the abstract, or with Cursor's ability to autocomplete a CSS value once a human has already decided what it should be. The comparison below is about the specific capabilities a design team actually needs when the problem is reconciling what exists, not generating something new from a blank canvas.

Tonone's Draft catalogs recurring UX patterns across product surfaces and flags where the same problem was solved two different ways.

Install and try

Tonone is free and MIT-licensed. Install it once and Form, Tone, Draft, and the rest of the 100-agent team are available in your Claude Code session. You pay only for the Claude Code token usage during the work itself.