Back
Internal tool · Concept project

Design Copilot

Most of what a team needs is already in the library. This tool helps you find it before you draw it again.

HERO SCREEN — Components view, both modes
The library and the search bar share a screen, so finding is never a separate trip.
The problem

Teams keep rebuilding things they already have

Designers redraw what the library already covers. Engineers rebuild what design forgot was there. Everyone sees the polish and nobody sees where it came from. After enough of that, the system stops being a system.

BriefSearchBuildHandoff
What happensA goal landsSomeone digs through FigmaThey draw it againIt goes to engineering
Where it breaksNobody knows what existsNames have driftedIt's a copy of somethingNobody knows why
What it costsRe-scopingHoursA second version to keep aliveA round of rework
The idea

One tool, two ways in

Both ways end in the same place: a real component from the real library.

01 · Mode

Search and import

Look for a component by tag, prop, or what it looks like. Bring it straight into the file.

02 · Mode

Say what you need

Describe the job in plain words. The tool matches it to components that already exist and hands back a layout.

OVERVIEW SCREEN — 248 components · 89% covered · 12 gaps
Coverage sits on the first screen. If the library can't do the job, you find out now, not at handoff.
Decisions

Four calls that shaped the tool

Each one had a cheaper option. Here's why I didn't take it.

01

Everything has to resolve to a real component

What I decided
The tool can only hand back components that exist in the library.
What else I looked at
Letting it generate fresh UI when nothing matches.
Why I said no
Generated UI slips past the system quietly. Do it enough and the library stops meaning anything.
What that says
The library is the product. The tool just points at it.
02

Making a new component is not a button

What I decided
A new component needs a review before it goes in the library.
What else I looked at
One click to create from any gap.
Why I said no
Cheap creation is how duplicates got into the library in the first place.
What that says
A new component is a decision, not a side effect.
GAPS SCREEN — Adapt, Build new, Borrow
When nothing matches, the tool says so and offers three routes. Build new is the last one on the list on purpose.
03

Show where a result came from

What I decided
Every result is marked verified, adapted, or unverified.
What else I looked at
Sort by relevance and leave the status out.
Why I said no
Hidden status makes it a black box. Nobody trusts a black box with their design system.
What that says
Trust is something you can see on the screen.
04

The same question gets different answers

What I decided
The answer changes shape depending on who asked.
What else I looked at
One output everyone reads.
Why I said no
Stakeholders don't read specs. Engineers don't read paragraphs.
What that says
The tool meets people where they already are.
How it works

Three layers

Layer 01

Library

The source of truth. React components and Figma tokens, kept in sync.

Layer 02

Navigator

Reads props, states and accessibility rules, then matches a request to what's there.

Layer 03

Workspace

Where you preview, check and export.

LAYER 01LibraryThe source of truthReact components · Figma tokens · Synced liveLAYER 02NavigatorThe matching layerProps and states · Accessibility rules · Intent matchLAYER 03WorkspaceWhere you workLive preview · Checked layout · ExportReads the library as it is todayHands back real components
Flow

What actually happens when you ask

Search and importBy tag, prop or shapeSay what you needPlain words inLibrary matchReal components outSomething you can usePreview · spec · exportimportdescribechecked

Two doors in, one door out. Both go through the library.

GAP FLOW — Adapt, Build new, Borrow
Adapt is first because it's usually the right answer. Borrow pulls from another team's library and marks it as such.
One questionFour answersPMWhat we can reuseDESIGNERComponents to pull inENGINEERA spec that maps to codeSTAKEHOLDERA short written summary

Same question. Four answers. Nobody has to translate for anyone else.

Where it fits

It wins two rows out of six

Storybook already does documentation better than this ever will, and it exists. Copilot only beats it on the two rows nobody else is playing: finding something by describing it, and saying out loud what's missing.

Figma Dev ModeStorybookZeplinDesign Copilot
Documents componentsSomeBest there isNoDoesn't try. Reads Storybook.
Real code you can shipSnippetsYesSnippetsPoints at yours
Find something by describing itNoNoNoYes
Tells you what's missingNoNoNoYes
Works todayYesYesYesNo. It's a concept.
Cost to set upLowHighLowHigh. Needs a clean library first.

The honest read: this only makes sense for a team whose library is already good and already ignored. If the library is a mess, fix that first.

What's not proven

Nobody has used this yet

The decisions above are arguments, not results. Three things would tell me if the argument holds.

  1. 01Watch five designers search the library and count what they miss
  2. 02Check whether the match is right often enough to trust
  3. 03Find out if the review gate slows people down or saves them
Design Copilot — a foundation teams can actually build on.
Case study by Stefani Papili