Log inSubmit server
Pattern MCP logo

Pattern MCP

Checks UI component decisions against a registered code or Figma design system and records auditable outcomes.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Pattern MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "pattern-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "pattern-mcp"
      ],
      "env": {
        "ANTHROPIC_API_KEY": "YOUR_VALUE_HERE",
        "ANTHROPIC_WORKSPACE_ID": "YOUR_VALUE_HERE",
        "FIGMA_ACCESS_TOKEN": "YOUR_VALUE_HERE",
        "PATTERN_TOOLS": "YOUR_VALUE_HERE"
      }
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Values are written into the snippet above so you can paste it as is. They never leave your browser.

Automated check passed— started and listed 5 tools correctly ().

Overview

pattern-mcp MCP server checks an agent’s UI requirements against a registered component library or Figma file before implementation. Its core workflow extracts requirements, recommends an existing component or identifies a custom-build gap, verifies the completed file, and records the decision. An optional enforcement boundary can require the check, while ledger features support later review and provenance checks. Reach for it when coding agents need to reuse established design-system components instead of recreating them.

Use cases

  • Check a requested UI component against an existing code library
  • Reuse matching Figma components before starting a custom build
  • Verify a completed component against extracted requirements
  • Record design-system decisions for later project recommendations

Key features

  • Code-folder, manifest, and Figma design-system registration
  • Requirement extraction and component recommendations
  • Coverage-based reuse versus custom-build decisions
  • Post-build component verification
  • Auditable decision ledger with provenance checks
  • Optional advanced cost and outcome tracking

Tools5

What Pattern MCP lets your agent do. Expand a tool for its parameters.

Verified live~4.9k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked

Recent health check succeeded.

5/5 checks healthy over the last 16d

What it can do

From the 5 tools this server returned when we ran it.

Handles credentials · 1Read-only tools · 5
Network at startup4 connections
Files written at startup4
Install scriptsNone
npm provenanceSigned build
Package age77 days
Maintainers1

Observed 2026-11-11 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · pattern-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars9Stargazers on the source repository.
npm downloads1.1kPackage downloads in the last 30 days.
Last commit3d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed5Callable tools this server registers over MCP.

How Pattern MCP works

What pattern-mcp does

pattern-mcp gives coding agents a structured way to consult a product’s design system during UI implementation. The design system can be represented by a components folder, a manifest, or a Figma file. After registration, the server evaluates a requested UI need against the available components and returns a recommendation the agent can act on.

A recommendation distinguishes between reusing an existing component and building a custom component. When it selects a custom build, the response identifies unmet requirements so the agent can implement the missing portion rather than reconstructing an existing pattern. Primitive needs can be handled without scoring. The server also keeps “no candidates found” separate from a low-coverage result.

An opt-in enforcement boundary can make the design-system check mandatory. Decisions are written to an auditable ledger, and later tools can inspect ledger activity, verify liveness, or export provenance.

How it works

The normal flow is:

  1. Register a design system for a project_id.
  2. Extract requirements from the requested UI need, or provide an existing checklist.
  3. Compare each registered candidate with those requirements using captured names, props, descriptions, and Figma information.
  4. Calculate requirement coverage and return a structured result.
  5. Build or reuse the component based on the recommendation.
  6. Run verification against the built file and record the resulting decision.

Coverage is calculated from the individual requirements checked by the server rather than accepting a model-supplied percentage without calculation. A recent matching judgment may be returned as a ledger cache hit instead of triggering a new search and scoring pass. The record_component_decision tool preserves what the agent actually chose so later recommendations in the same project can use that history.

Setup and configuration

Run the initialization command through the package runner:

Terminal
npx pattern-mcp init

Initialization detects supported installations of Claude Code, Claude Desktop, Cursor, and Codex CLI, connects the clients it finds, and can prompt for an Anthropic API key. It can also register a components folder or Figma file during unattended setup:

Terminal
npx pattern-mcp init --yes --design-system <components-folder>
npx pattern-mcp init --yes --figma <file-link>

Use npx pattern-mcp keys to add or replace credentials later. The --from-env option reads supported credentials from the shell. Restart the client after changing keys.

The server advertises five core tools by default. Set PATTERN_TOOLS=full to advertise the advanced tools as well. Direct calls to known advanced tool names remain possible even when they are not included in the advertised tool list.

Tools and capabilities

Core tools include:

  • register_design_system for connecting a project to a code, manifest, or Figma-based design system.
  • extract_requirements for producing a checklist independently of recommendation scoring.
  • recommend_component for evaluating a UI need and choosing reuse or custom implementation.
  • verify_component for checking the built file against the requirement checklist and recording the result.
  • record_component_decision for storing the agent’s actual implementation choice.

The advanced tier includes Figma evidence retrieval, ledger reading, build-cost and outcome-proxy reporting, ledger liveness checks, provenance export, snapshot-reference backfilling, and posting ledger provenance to GitHub.

Limitations and notes

Registration is required before recommend_component can evaluate a project. The server has nothing to judge until a design system is registered for the relevant project. The default tool tier exposes only the five tools needed for the main register–extract–recommend–build–verify workflow, so advanced operations may need PATTERN_TOOLS=full for automatic discovery. Figma-based workflows also require the appropriate Figma access token.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Pattern MCP

pattern-mcp is an MCP server that connects coding agents to registered code-based or Figma design systems. Its main tools extract UI requirements, recommend existing components or identify custom-build gaps, verify completed components, and record decisions. An advanced tier adds ledger, provenance, liveness, and cost/outcome tools.

Run `npx pattern-mcp init` to install and connect detected Claude Code, Claude Desktop, Cursor, or Codex CLI configurations. Use `--yes` for unattended setup, and add `--design-system <components-folder>` or `--figma <file-link>` to register a source during initialization.

Register it with the `register_design_system` tool before requesting recommendations. Pattern accepts a components folder, manifest, or Figma file, and registration is associated with a `project_id` that later recommendation and decision calls use.

Yes, pattern-mcp supports Cursor. The `npx pattern-mcp init` command detects Cursor and can connect it automatically; credentials can also be added or updated later with `npx pattern-mcp keys`.

Related MCP servers

All in Developer Tools All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewPattern MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/pattern-mcp?style=directory)](https://allmcps.com/mcp/pattern-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/pattern-mcp"><img src="https://allmcps.com/api/badge/pattern-mcp?style=directory" alt="Pattern MCP on AllMCPs" /></a>