A design system: foundation first

• A Figma design system with three layers of tokens: raw colours, meaning-based colours, and component tokens.

• A short rules file for naming, tokens and accessibility.

• A specs folder with one Markdown file per component.

What I set up:

The design agent:

• A Claude agent builds and edits components in Figma. It follows the rules file.

• Every colour comes from a token, never a hex value.

• Every component has its states: hover, focus, disabled, error.

• The agent checks contrast and reports what it found.

• The result is over 30 components.

From specs to working screens

Last, a second agent turned the specs into clickable HTML screens.

How it works

• It builds only from the Markdown specs, never from Figma directly.

• Colours and spacing are CSS variables named after the Figma tokens.

• The real logo and icons were exported from the design file.

• Radios, checkboxes, dropdowns and the Switcher work on every page.

• Extra states, such as errors or empty lists, switch on with a URL flag.

A repeatable loop

• Every change goes the same way: fix it in Figma, update the Markdown, then update the page.

• The yellow warning alert, the segmented Switcher and the Remove button with a bin icon all went through this loop.

Result

Connected screens, tested in the browser, with documented design decisions.