04 — Leadership & systems

Building an AI-native design team

The goal was simple to say and hard to do: let AI agents turn our designs into production code without friction or hard-coded values, and give the team a system flexible enough to survive a future rebrand. It worked. Implementation and delivery got faster.

Role
Design Director. Set the strategy, designed the system, ran the training
Team
4 product designers, 1 UX researcher
System
Figma variables ↔ SCSS tokens, full parity
When
2025–2026
brand-color-blue-600
alias-color-primary-600
mapped-surface-primary-default
#273656
one decisionA button's background, expressed as meaning rather than a hex code
for agentsThe name tells an AI what the colour is for, so it can't guess wrong
The problem

Agents can't guess what a hex code means

When a component says #0b1223, a developer or an AI agent has no idea whether that's "primary text", "a dark surface" or "the brand blue". Every handoff meant interpretation, and every interpretation meant drift. A rebrand would have meant auditing every component by hand.

To make AI-assisted development correct by construction, our design decisions had to exist as names with meaning, in Figma and in code, identically.

The system

Three levels of abstraction

Designers apply only the top level to components. Each level aliases the one below it, so every colour decision is a chain of meaning rather than a value.

74

Brand

Raw primitives: six palettes, type families, a spacing scale. No meaning, just values.

brand-color-blue-600
95

Alias

Semantic roles: Primary, Neutral, Success, Error, Warning, Information, Accents.

alias-color-primary-600
162

Mapped

Component decisions: text, icon, surface, border and accent, for every interaction state.

mapped-surface-primary-default

Plus 21 tokenised typography styles and 33 responsive type variables across 3 breakpoints.

One real chain, from a button's background down to the pixel
$mapped-surface-primary-default
↳ $alias-color-primary-600
  ↳ $brand-color-blue-600 · #273656
Its hover state follows the same path
$mapped-surface-primary-default-on-hover
↳ $alias-color-primary-700 → $brand-color-blue-700 · #0b1223

The Brand level: Blue, Green, Olive, Yellow, Red, Grey.

Why three levels

Change the brand without breaking a single connection

Because each level references the one below, we can change colour at exactly the level a decision lives on, and everything above it follows:

Brand levelA rebrand swaps raw values. Every component updates, and no connections break.
Semantic levelChange what "Primary" or "Success" means across the whole product.
Context levelTune a single component or state without touching anything else.

For agents, the effect is immediate. A token like mapped-text-primary-default carries its intent, so an AI assistant can build, theme or extend a component and stay consistent with the system.

The people

A system is only AI-native if the team is

Tokens made the handoff machine-readable. The team still had to change how it worked. I designed and ran a five-session programme that took every designer, including those who had never opened a terminal, to confident AI-assisted workflows. Every step had two paths, terminal or GUI, because the goal was the concept, not the tool.

  • 01Setting up your environment1h
  • 02Understanding AI agents, subagents & skills1h
  • 03Building your personal design agent1.5h
  • 04Automating repeated design tasks with subagents1.5h
  • 05Figma MCP & AI-powered prototyping1h
Outcome

Faster from design to production, and a team that owns it

Agents now translate designs into code using tokens instead of hard-coded values, and implementation and delivery have sped up. The system is ready for the brand refresh on our 2026 roadmap.

To check whether the people side worked too, I ran an anonymous survey with the whole team after the programme:

3.7 → 7.3average confidence with AI-assisted workflows, out of 10, before vs after the programme
1–3 hsaved every week on repeated tasks by most of the team (4 of 6 participants)
100%plan to keep using AI to explore the codebase, which 5 of 6 rated the most valuable thing they learned

The highlight for me was the GitHub repository integration. It made it much easier to navigate our codebase and get up to speed with the product.

what's next

Adoption is a habit, not a session

Half the team already uses their own custom agents in real work; the other half hasn't yet. That set the follow-up: deeper sessions on advanced Figma MCP (requested by 4 of 6) and connecting AI to the tools we already ship with, so building agents becomes part of the job rather than extra homework.

Anonymous survey of all 6 participants after the programme. The training was rated 5.2 / 7 for improving workflow efficiency.