Design Systems for AI Agents: What Figma Specs Signals for Web Teams

On 15 October, Figma introduced Specs, described as a markdown editor that captures a company's design language as a document for both designers and AI agents. It can embed FigJam diagrams and code layers. Details come from launch reports, so check Figma's own announcement for the final feature list.

The bigger point matters more than the product: AI coding and design tools now generate real interfaces, and they need clear rules to stay on-brand. If your design rules live only in people's heads, an AI assistant will guess, and guesses drift.

Why "readable by AI" matters

When you ask an AI tool to build a landing page or a component, it picks colours, spacing, fonts and wording unless you tell it otherwise. Without guidance you get generic results that you then fix by hand. A written design language reduces that rework for your team and for AI tools.

What to put in a design spec

Think of a short, plain document that a new designer or an AI agent could follow on day one:

• Brand basics: logo rules, tone of voice, words to use and avoid.
• Colour tokens: names and values (for example, primary, secondary, background, error) plus when to use each.
• Typography: font families, sizes, weights and line heights for each text style.
• Spacing and layout: a spacing scale, grid, breakpoints and maximum content widths.
• Components: buttons, forms, cards, navigation and modals, with states such as hover, focus, disabled and error.
• Accessibility rules: minimum contrast, focus outlines, touch target sizes and alt text.
• Do and do not examples: short examples of good and bad use.
• Content patterns: how headings, calls to action and error messages should read.

Make it work in code too

A spec is most useful when design and code agree:

1. Turn colours, spacing and type into design tokens in your codebase, such as CSS variables or a theme file.
2. Name things consistently in design and code so that "primary button" means the same thing everywhere.
3. Keep a markdown version in your repository so that developers and AI coding tools can read it alongside the code.
4. Use a component library and document each component's props and states.
5. Add checks: linting, visual regression tests and accessibility tests catch drift automatically.
6. Review AI output. Treat generated interfaces like a junior colleague's first draft.

A short example prompt rule

Instead of "make a pricing page", a spec lets you say: "Build a pricing page using our tokens and components, three plan cards, primary button for the recommended plan, and follow our accessibility rules." The result needs less cleanup.

Common mistakes

• Writing a 50-page guide nobody reads. Short and specific wins.
• Letting the spec and the code drift apart.
• Documenting what the design looks like but not why or when to use it.
• Skipping accessibility, which AI tools often miss unless instructed.

Start small

You do not need a new tool to begin. Write a two-page spec covering colours, type, spacing and your five most-used components, store it with your code, and improve it as you go.

KalzTech designs and builds websites and web apps on React and Next.js with reusable component systems. If you want your brand captured in a way that designers and AI tools can both use, get in touch.