Pattern

A tool to build exactly what you designed in Figma using Claude Code, Codex, and Cursor.

The agent asks
“Price breakdown with fees and taxes”
Airbnb-style rental · React + Tailwind
Verdict
custom_build
Confidence
High
Coverage
2 of 8 requirements met
Missing
Collapsible fee explanation, currency formatting, total row, discount line, fee tooltip, mobile layout
checked against your design system·12s·$0.03
install command
$ npx pattern-mcp init --yes
Install Pattern
Works withClaude Code·Cursor·Codex·Figma

Manage the entire process between the design system and shipped code.

Your design system

A Figma file, components folder, Storybook export, or JSON manifest. Registered once, and the only source Pattern judges against.

Design summaries

A text summary of each design, so your agent has it in words while it builds.

Reuse or build

A plain answer for every request: use this component, or build these missing pieces.

Requirements

Each one is tagged as yours, inferred, or general practice.

Verified code

Every pass comes with a quote from your file, confirmed by the server.

Required check

Agents can't create a component until Pattern answers.

Decision record

What was checked, what was decided, and what it cost, tied to a version of your code.

Cost and confidence

Time, tokens, and dollars beside every decision. Low confidence when runs disagree.

Ask for the screen.

Pattern tells your agent to check before it builds UI, especially from a Figma link, mockup, or screenshot. Buttons and small edits are left alone. Then it compares what the component must do with what your design system has.

coverage scoring
scoring
Task · Build the price breakdown for the booking checkout: nightly rate, cleaning fee, service fee, taxes.
Itemized line rows for rate, fees, and taxes
Nightly rate × nights subtotal
Collapsible fee explanation
Currency + locale formatting
Total row with emphasis
Discount / long-stay line
Tooltip on service fee
Mobile bottom-sheet layout
0 of 0 metScoring…

See the proof.

After the build, Pattern checks the finished file against the list. Every pass comes with a quote from your file, and the server confirms the quote is there. No quote, no pass. Things that must be absent, like “no Tailwind classes,” are searched for by the server.

a confirmation dialog
Verified: Modal is 320×224width: 320, height: 224
Verified: Escape closes itif (e.key === "Escape")
Verified: Focus returns to the triggerreturn () => trigger?.focus();
Unverified: Styled from tokens.tslook at this

Make it a rule.

Turn on the required check and your agent can't create a new component until Pattern has answered (in Claude Code, on your machine). The same check runs on every pull request, whichever agent wrote it.

Every decision is saved, and reviewers get the reasoning with the code. A record goes stale if the file changes.

turn on the required check
$ npx -p pattern-mcp pattern-check-gate init
On your machine
Agentwrite PriceBreakdown.tsx
→
Hook✕ Blocked
→
PatternDecides
→
Write✓ Allowed
On the pull request
Pattern decision recorded
Required check · Passed

Pay per check.

Pattern is MIT licensed, and checks use your Anthropic key. A full check with a build list usually runs a few cents. With a TypeSafe key, a match is scored in under a second with no Anthropic call. Common basics like buttons and inputs are answered on your machine for free.

<1sA match with a TypeSafe key, no Anthropic call
¢A full check with a build list
$0Common basics, on your machine
Setup

One command. Five guided steps.

The setup lists all five steps up front, then shows how many are done and which come next, so you always know where you are.

install command
$ npx pattern-mcp init --yes

  1. Add your Anthropic key. Pattern checks it on the spot, so a bad paste shows up now and not in the middle of a build.

  2. Add a Figma token, if your design system lives in Figma. It gets the same check.

  3. Connect your tools. Pattern is added to Claude Code, Claude Desktop or Cursor, along with a skill that tells your agent to check before it builds UI.

  4. Register your design system. Paste a Figma link or point it at your components folder. If a Figma file is huge, the setup offers to leave out the icon pages.

  5. Turn on the required check, or leave it for later. It is optional and off by default.

FAQ

Anyone whose agent builds UI against a design system: designers, engineers, and teams reviewing agent-written pull requests.

Claude Code, Cursor, and Codex. The required check on your machine is Claude Code only. The pull request check works with any agent.

No. Connect a Figma file, a components folder, a Storybook export, or a JSON manifest.

Run one command. Pattern walks you through five steps: add your Anthropic key, add a Figma token if you use Figma, connect your tools, register your design system, and turn on the required check (optional, off by default). Each key is checked on the spot.

How a page renders. "Unverified" means look at this.

Close calls get a second look. If the runs disagree, you see low confidence and the requirements they split on.

Why I built Pattern

“I kept watching agents hand-build a price table when a good one already existed, or reach for a generic card when the flow needed more thought. Pattern is the check I wanted between the product need and the code: specific about what to build, honest about what it doesn't know, and cheap enough to run every time.”

Don Richard· Creator of Pattern

Make your agent follow your design system, languages and themes.

Install once. Then ask for UI.

Install Pattern
install command
$ npx pattern-mcp init --yes