Case study · Design System + AI

From three contradicting systems to one that AI can read and use.

In January 2025 I started rebuilding the Bitcoin Suisse design system from scratch: one source of truth with variables, light and dark mode, and clear naming. In 2026 I made it compatible with AI, so I can design directly from VS Code into Figma using the real components and tokens.

Role

Sole UX/UI Designer

Part 1

DS rebuild, from Jan 2025

Part 2

AI compatibility, 2026

Status

In use

Problem

Three separate design systems, sometimes contradicting each other. No variables, no light and dark mode. As a relatively new designer, I couldn’t tell which one was true.

Part 1

One modern system: variables, semantic naming, light and dark mode, documented components.

Part 2

Made the system AI-compatible: Figma MCP, a 400-line custom skill, VS Code Copilot connected to the repo.

Result

AI creates designs that respect the system on about 85% of attempts. Components can be changed within its output.

Figma variables panel for Design System BTCS: 3 collections (Alias 13, Brand 51, Mapped 64), groups for text, surface, icon and border, with Light and Dark columns showing semantic names like button-primary-hover pointing to color/red/600.

01 / Before

Three systems, and none of them agreed.

When I joined, the product had three separate design systems. Colors were named by appearance, not by role. There were no variables and no dark mode. Components had scattered annotations instead of proper documentation.

Old color palette

Old Light Theme Palette: flat names like Primary Main, Grey 100, Background Default, with no dark mode equivalent.
Flat names. No variables. No dark mode.

Old button documentation

Old button variants page with pink annotation arrows pointing at individual states and scattered notes like Hover effect is grey 100, pressed is grey 50.
Scattered annotations. Hard to find the truth.

02 / One system

128 variables. Light and dark. One source of truth.

I replaced the three systems with one. Every color has a semantic name, a light value and a dark value. Components are documented with all their states, sizes and best practices.

Variables with light and dark values

Variable list: button-primary maps to Red 500 in light and Red 500 in dark, button-primary-hover maps to Red 600 in both, surface-error maps to Error 100 in both, each with its hex value.
Every variable has a name, a light value and a dark value.

Buttons with proper documentation

Buttons and Text Links page with written annotations: all states (Default, Hover, Focus, Active, Disabled), all sizes (Large, Medium, Small), and best practices listed on the left.
All states, all sizes, with written best practices.

03 / AI

A clean system is not enough. AI needs rules.

Once the system was solid, I connected it to AI. But a well-organised Figma file alone doesn’t stop an AI from inventing colors or picking the wrong component. It needs explicit rules.

Figma Design System → MCP Server → Custom Skill (400+ lines) → VS Code Copilot → Back to Figma

01

Figma MCP

Connects Figma directly to AI tools: components, variables, layout rules and tokens are read in real time, not from screenshots.

02

A custom skill

A 400-line set of rules that tells the AI what it can and can’t do. It locks the AI to one approved library and rejects everything else.

03

Connected to the repo

The Bitcoin Suisse code repository is connected through VS Code Copilot, so the AI knows which components exist in code, not just in Figma.

04

Design from VS Code

I prompt in VS Code and the design appears in Figma, using the real components and variables. No copy-pasting tokens.

The core rules from the skill:

# What the AI must follow

Never invent colors, fonts, spacing, or icons.

Single approved source: use only Design System BTCS.
Reject archived, deprecated, or similarly named libraries.

No-primitive-first rule:
If a design-system component exists, do not build from rectangles and text.

Variable-binding gate:
Bind tokens for fills, text color, strokes, corner radius, padding, gaps.
Literal values only when no token exists — and log the exception.

Text-style gate:
Apply a DS text style to every text node.
Do not create unstyled freeform text.

04 / The hardest part

The font that AI couldn’t load.

The design system uses a licensed font (Suisse Int’l) that isn’t available in the Figma plugin sandbox. Every time the AI tried to apply a text style, it failed.

  1. First attempt

    AI applies the text style, then tries to set the text. Fails: the font isn’t loaded.

  2. Second attempt

    AI loads Inter as a fallback and writes the text. Then applies the real text style. But the order matters: style first, then text = failure. Text first, then style = it works.

  3. The fix

    Set text content using a fallback font (Inter), then apply the real DS text style afterward. The rendering pipeline has broader font access than the plugin sandbox, so the final result shows the correct typeface.

  4. Written into the skill

    The rule is now permanent: always load the font, write the text, then bind the style. The AI doesn’t repeat this mistake.

Every failure became a rule. The skill got better because the AI got it wrong first.

05 / Outcome

A system that AI reads, uses and respects.

85%

of AI-generated designs follow the system correctly. Components can be changed within the output.

128 variables

Across 3 collections, with light and dark values, organised into 5 groups.

400+ lines

of rules in the custom skill, built from real failures over several iterations.