Agentic design system

Product Designer

Next.js, React, Tailwind, Anthropic API, Figma REST API

Web

New designers joining the team couldn't tell what already existed in our Figma design system. So they did what everyone does — pinged a senior, or scrolled the library for twenty minutes hoping to recognise the right component. The question was always the same shape: "do we have something for X?" I wanted to answer it in plain English, against the real library, without anyone having to know what things were named.

I decided early that a wrong answer was worse than no answer. A tool that confidently points you at a component that doesn't exist erodes trust faster than one that occasionally says "nothing matched." That one constraint shaped most of the engineering — exact-name matching over fuzzy guessing, grounding the model in real data instead of letting it improvise, and being honest in the UI about what the tool can't see. I also wanted it to know not just what components exist, but where they're actually used in the product — so a designer could see a real screen, not just a catalogue entry.

1

With ~200 components after collapsing variants, nobody holds the full set in their head. The knowledge lived with a few seniors, and it didn't scale.

2

It matches names, not intent. If you don't already know a component is called "Segmented control," searching "toggle" won't find it.

3

Knowing a chip exists doesn't tell you how it's used. Designers wanted to see it in context in an actual product screen — before reaching for it.

How might we let a designer ask, in their own words, what the design system offers — and get a grounded, in-context answer instead of a naming guess?

The Figma API doesn't hand you a clean list — it returns every variant separately, so one "Button" shows up forty times. Two build scripts fix that: one collapses variants into a searchable catalogue, the other walks a real product file and resolves each component instance back to the screen it sits on. It matches on exact name on purpose — a false match would be worse than a miss.

Instead of one canned API call, the app hands the model two tools and lets it choose. "Do we have a chip?" needs only a search; "how is the chip used in onboarding?" needs a search, then a usage lookup on every match. The model runs the loop itself, capped at five turns. Deciding what to pull, and when, is what makes it an agent rather than two hardcoded queries.

While the loop runs, the interface shows a thinking state and, at the end, how long it took. Matches render as cards with an "Open in Figma" link; when the model looked up usage, the real product screens appear beneath. The API key is supplied per person and stored only in the browser — never in the code.

The design system designer used to spend ~4 hours a week answering the same questions what exists, what's it called, where's it used . The tool absorbed them. That time roughly 200 hours a year, close to a full working month shifted from answering questions to designing the components the team actually needed and were required.