RavenMCP Docs

Everything you need to get Raven running with Claude Code, Claude Desktop, or any MCP-compatible client.

Get Started

Design intelligence in Claude in under 2 minutes. Pick the path that matches how you use Claude.

Claude Code — one command

If you're in the terminal, this is the fastest path:

claude mcp add raven -- npx -y raven-mcp

Ask Claude to build UI and Raven's tools fire automatically:

"Build me a pricing page with 3 tiers"
"Check this signup form for accessibility issues"
"Use Stripe's design tokens for the checkout flow"
No configuration needed. Once added, Claude automatically queries Raven when you ask it to build, evaluate, or improve UI. The tools fire behind the scenes.

Team config (.mcp.json)

Add a .mcp.json to your project root so everyone on the team gets Raven automatically:

{
  "mcpServers": {
    "raven": {
      "command": "npx",
      "args": ["-y", "raven-mcp"]
    }
  }
}

Claude Desktop — manual config

Add this to your config file (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json):

{
  "mcpServers": {
    "raven": {
      "command": "npx",
      "args": ["-y", "raven-mcp"]
    }
  }
}

Requires Node.js 18 or later.

Claude Desktop — one-click extension

Prefer not to edit JSON? Download the extension and double-click it. Claude Desktop installs Raven automatically — no Node, no terminal.

Raven for Claude Desktop

macOS · Windows · Linux  •  ~4 MB · v1.1.1

Download .mcpb
  1. Download the .mcpb file above.
  2. Double-click it (or drag into Claude Desktop's Settings → Extensions).
  3. Click Install in the dialog and restart Claude Desktop.

Install from source

git clone https://github.com/rhinocap/raven-mcp.git
cd raven-mcp && npm install && npm run build

Tool Reference

Raven provides 32 tools across 8 knowledge layers. Claude calls them automatically based on what you're asking for. Below, the original 13 tools have full docs; the 19 newer tools from v1.2–v1.6 are listed with summary descriptions.

Principles Layer

get_principles

Get design principles relevant to a UI context. Returns usability heuristics, Laws of UX, Gestalt principles, accessibility rules, typography, color theory, mobile UX, and responsive layout.

context required
What you're designing — e.g. "signup form", "pricing page", "mobile nav", "dark dashboard"
category optional
Filter to: nielsen-heuristics, laws-of-ux, gestalt, accessibility, typography, color-theory, mobile-ux, responsive-layout, d4d
format optional
"full" (default) | "checklist" | "brief"
// Claude calls this automatically when you say:
"Build a pricing page"
"What accessibility rules apply to forms?"
"Check this against Nielsen's heuristics"

evaluate_design

Evaluate a design description against UX principles. Returns relevant principles, potential violations, and improvement suggestions.

description required
Description of the design to evaluate
context optional
What the design is — e.g. "pricing page for SaaS product"
goals optional
Array of evaluation goals — e.g. ["conversion", "accessibility", "mobile-usability"]
// Try:
"This signup form has 8 fields, no social login, and the
 button says Submit. Evaluate it for conversion."

get_d4d_framework

Get Design for Delight (D4D) templates — customer problem statement, ideal state, hypothesis, LOFAs, and experiment design.

stage optional
"frame" | "empathy" | "broad" | "narrow" | "experiment" | "recommendation" | "full" (default)

Patterns Layer

get_pattern

Get proven UI/UX patterns for a specific design type. Returns do's, don'ts, evidence, and checklists.

type required
Pattern type: signup-flow, pricing-page, navigation, forms, landing-page, dashboard, modals-dialogs, empty-states, error-states, loading-states, cta, social-proof, mobile-conversion
platform optional
"desktop" | "mobile" | "responsive"
goal optional
"conversion" | "usability" | "accessibility" | "delight"
// Try:
"Show me the best patterns for a mobile signup flow"
"What does a high-converting pricing page need?"

get_checklist

Get a pre-publish checklist for a UI type. Returns actionable yes/no items to verify before shipping.

type required
What you're shipping — e.g. "signup form", "pricing page", "dashboard"
platform optional
"desktop" | "mobile" | "responsive"
// Try:
"Give me a pre-launch checklist for this landing page"
"What should I check before shipping this mobile form?"

Business Layer

get_business_strategy

Get business and monetization strategies for digital products. Covers monetization, retention, onboarding, growth, and metrics.

type required
Strategy type: monetization, retention, onboarding, growth, metrics
stage optional
"startup" | "growth" | "mature"

Tokens Layer

list_design_systems

Browse available design systems. Filter by category or search by name.

category optional
fintech, productivity, developer, component-library, design-system
search optional
Search by name or description

get_design_system

Get design tokens for a specific system. Returns colors, typography, spacing, radii, elevation, and motion tokens.

id required
Design system ID — e.g. "stripe", "linear"
group optional
Filter to: color, color-dark, color-light, typography, spacing, radius, elevation, motion
format optional
"dtcg" (W3C standard, default) | "css" (custom properties) | "flat" (key-value pairs)
// Try:
"Use Stripe's color tokens for this checkout page"
"Give me Linear's typography scale as CSS variables"

compose_system

Mix tokens from different design systems to create a custom composite.

compositions required
Array of {system, group} pairs — e.g. Linear's colors + Stripe's typography
format optional
"dtcg" (default) | "css"
// Try:
"Build me a design system with Linear's colors
 and Stripe's typography"

Search

search_knowledge

Search across all principles, patterns, and strategies. Use when you need to find specific guidance or don't know which category to look in.

query required
Search term — e.g. "touch targets", "pricing psychology", "color contrast"
layer optional
"principles" | "patterns" | "business" | "all" (default)

Advanced Tools

audit_page

Audit an HTML page against design standards. Returns a score, grade, passes, and errors with specific fix recommendations.

html required
The HTML content to audit
url optional
URL context for the page being audited
checks optional
Array of check categories: "accessibility", "mobile", "performance", "seo", "all" (default)
// Try:
"Audit this landing page HTML for accessibility and mobile issues"
"Check this signup form for WCAG compliance"

get_brand_system

Get a complete brand design system for a well-known company. Returns colors, typography, spacing, CSS variables, and implementation rules.

company required
Company name — e.g. "Stripe", "Apple", "Spotify", "Nike"
format optional
"full" (default) | "css" | "tokens"
// Try:
"Make me an app with branding like Spotify"
"Use Apple's design language for this landing page"

generate_design_system

Generate a complete, custom design system with full token set. Provide a brand color to auto-generate a harmonious palette, pick a style preset, and export as visual HTML documentation, CSS variables, W3C DTCG JSON, Figma Variables, or SVG palette card.

name required
Name for the design system — e.g. "Acme Corp", "NightOwl"
brand_color optional
Primary brand hex color (e.g. "#FF6B35") — auto-generates a full palette using color theory
base_system optional
Start from an existing system as foundation — e.g. "stripe", "linear"
style optional
"minimal" | "bold" | "warm" | "corporate" | "playful" | "dark"
dark_mode optional
Generate dark mode tokens alongside light (default: true)
format optional
"html" (visual doc page) | "css" | "dtcg" (W3C JSON) | "figma" (Figma Variables) | "svg" (palette card) | "all"
// Try:
"Generate a design system for my startup with #FF6B35 as the brand color"
"Create a bold design system called NightOwl with dark mode"
"Export my design system as Figma Variables"

Content Design Layer v1.2

list_content_systems

Browse the registry of brand voice & tone systems. Four live: Mailchimp, GOV.UK, Shopify Polaris, Atlassian. Filter by category or tag.

"Which brand voice guides does Raven know about?"

get_content_system

Full voice & tone system for one brand — attributes, tone shifts by context (onboarding/errors/billing/success), vocabulary (use/avoid/never), grammar rules, content patterns, inclusive language.

id required
"mailchimp" | "gov-uk" | "shopify-polaris" | "atlassian"
section optional
"all" (default) | "voice" | "tone_shifts" | "vocabulary" | "grammar" | "content-patterns" | "inclusive-language"
"Write this error message in Mailchimp's voice"
"Use GOV.UK plain-language guidelines for these forms"

get_content_principles

11 UX-writing principles: clarity over cleverness, front-load meaning, active voice, be specific, acknowledge the user, match words to mental model, consistent terminology, error-message anatomy, scannable structure, inclusive language, voice vs tone.

get_content_pattern

Copy recipes — full do/don't with examples and evidence — for error messages, empty-state copy, notifications, form validation.

type required
"error-messages" | "empty-state-copy" | "notifications" | "form-validation"

Research & Data Layer v1.3

get_research_method

Qualitative (interviews, contextual inquiry, diary, field, intercepts), quantitative (surveys, analytics, A/B tests, benchmarking, clickstream), or usability (moderated, unmoderated, 5-sec, card sort, tree test, heuristic eval). Each with protocols, do/don'ts, evidence, and checklists.

category optional
"qualitative" | "quantitative" | "usability" | "all" (default)
"Design a usability study for my mobile onboarding"
"How do I run a proper A/B test on this pricing change?"

get_metrics_framework

Six canonical frameworks: HEART (Google), AARRR / Pirate Metrics (McClure), North Star Metric, Conversion Funnel, RICE Scoring (Intercom), OKRs. Each with structure, when-to-use, pitfalls, and examples.

id optional
"heart" | "aarrr" | "north-star-metric" | "conversion-funnel" | "rice-scoring" | "okrs". Omit to list all.
"What metrics should we track for this app?"
"Build me a HEART framework for our onboarding"

Service Design Layer v1.3

get_service_pattern

Service blueprinting, human handoff, signup-as-service, omnichannel continuity, moments of truth / recovery. Each with do/don'ts, evidence, and a checklist.

type required
"service-blueprinting" | "human-handoff" | "signup-as-service" | "omnichannel-continuity" | "moments-of-truth"

get_service_standard

The GOV.UK Service Standard — 14 points the UK government uses to assess whether a public service is ready to launch. Widely applicable as a rigorous service-quality checklist beyond government.

generate_service_blueprint

Render a Shostack/Stickdorn-style service blueprint as a self-contained HTML page. Two modes: classic single-actor, or two-actor HI-loop (customer↔lawyer, patient↔doctor, buyer↔agent) with swim lanes + line of interaction. Pass ideal for a current-vs-ideal side-by-side.

service_name required
Name of the service
current required
Array of steps with fields: label, user_action, frontstage, backstage, support, evidence, pain_point, delight, actor_b (for two-actor mode)
actors optional
{ a: {label}, b: {label} } — switches on the two-actor / HI-loop layout
ideal optional
Ideal-state steps rendered side-by-side with current
"Map the client intake for a personal-injury firm — customer and
 lawyer as two actors. Show current state and ideal state."

Brand & Visual Layer v1.3

get_brand_principles

Logo usage (clear space, min sizes, variants, placement, restraint), gradient usage (hierarchy, palette, contrast, trend vs signature), imagery (consistency, representation, purpose), visual hierarchy, and brand-as-system thinking.

topic optional
"logo" | "gradient" | "imagery" | "hierarchy" | "system" — or a free-form search term
"Audit this brand system for logo-usage consistency"
"What are the rules for gradient overuse?"

get_brand_trends

Current 2026 brand & visual-design trends with when-it-works / when-it-fails guidance — bento grids, monospace for tone, neon-on-dark-glass, generative patterns, brutalism rebound, AI-generated imagery, aggressive lowercase. Time-stamped (retire-before 2027-04) so it doesn't rot silently.

Mobile & Native Audit Layer v1.5

audit_swiftui

Static-analyze SwiftUI source against Apple's HIG — flags hardcoded .font(.system(size:)) below ~13pt and tiny semantic fonts, hardcoded Color(red:green:blue:)/hex vs semantic + asset-catalog colors, an empty/undefined AccentColor, interactive frames under 44×44pt, and spacing off the 4/8-pt grid. None of the web-only rules run on iOS input.

source required
SwiftUI source — a string or array of files
accent_color_contents optional
Raw AccentColor.colorset/Contents.json — verifies the accent color actually defines components
"Audit this SwiftUI screen against Apple's HIG"

audit_screen (alias: audit_ios_screen)

Score a rendered iOS or Android screen from a view-hierarchy / accessibility snapshot ({platform,elements:[{label,rect,role,fontPt,fgColor,bgColor}],viewport}) — touch targets (44pt iOS / 48dp Android), contrast (platform-standard muted roles — iOS secondaryLabel, Material onSurfaceVariant — warn, not fail), and alignment / gap-rhythm / optical balance. Pass platform:"android" for the Material thresholds; defaults to iOS. RN renders native, so this scores RN screens too. audit_ios_screen remains as a back-compat alias.

audit_ios_privacy

The "no sketchy issues" gate. Reads a native Info.plist or an Expo app.json (+ optional PRIVACY.md, entitlements, source). Flags usage-string claims that contradict the code (e.g. a HealthKit write the app never performs), unused entitlements and Android permissions, ATS cleartext exceptions, secrets shipped in the bundle or expo.extra, and default data-egress not disclosed at the point of choice.

audit_rn

Audit React Native / Expo source (JSX + StyleSheet) against the iOS HIG + Android Material conventions RN must satisfy — touchables missing accessibilityLabel/accessibilityRole, sub-44pt targets without hitSlop, allowFontScaling={false}, fontSize below ~13, screens with no SafeAreaView, and (multi-mode apps) hardcoded colors with no useColorScheme.

source required
RN source — a string or array of files
color_scheme optional
"light" | "dark" | "automatic" — single-mode apps suppress the dark-mode check
"Audit this Expo screen for accessibility and safe areas"

Reflection & Registration

raven_reflect

Summarize your local Raven usage log over the last N days — tool counts, recurring audit warnings (likely knowledge gaps), patterns requested most, design systems reached for. Reads only ~/.raven/usage.jsonl locally. Never fetches.

raven_register

Register an email to receive release updates from the Raven team. One email per minor/major release — patches stay silent.

Examples

You don't need to call tools directly. Just talk to Claude naturally and Raven fires automatically.

Build a pricing page with best practices

"Build me a pricing page with 3 tiers for a developer tool.
 Use Stripe's design tokens."

Raven will call get_pattern("pricing-page"), get_principles("pricing page"), and get_design_system("stripe") — then Claude builds the page using all three.

Evaluate an existing design

"This signup form has 8 fields including phone number and company
 size. No social login. The submit button says 'Submit'. No inline
 validation. Evaluate it for conversion and usability."

Raven calls evaluate_design and returns every principle being violated, with specific fixes.

Pre-launch checklist

"Give me a pre-launch checklist for this mobile landing page"

Returns a categorized checklist covering the pattern's requirements, accessibility, and platform-specific items.

Compose a custom design system

"Create a design system that uses Linear's color palette
 with Stripe's typography and spacing"

Raven calls compose_system to merge tokens from both systems into one set, output as CSS variables or W3C DTCG format.

Generate a complete design system

"Generate a bold design system for my startup called NightOwl.
 Brand color is #8B5CF6. Export as HTML so I can share it."

Raven calls generate_design_system to create a full token set — colors, typography, spacing, radius, elevation, motion — and exports it as a beautiful, self-contained HTML documentation page you can open in a browser or print to PDF.

Search across everything

"What does Raven know about color contrast?"

Searches all 129 principles, 22 patterns, 5 business strategy domains, content voice systems, research methods, service patterns, and brand principles for relevant guidance.

Data Structure

All knowledge lives in src/data/ as static JSON files. No database, no API calls, no latency.

src/data/
  principles/          # 129 principles across 10 files
    nielsen-heuristics.json   laws-of-ux.json
    gestalt.json              accessibility.json
    typography.json           color-theory.json
    mobile-ux.json            d4d.json
    responsive-layout.json    component-architecture.json

  patterns/            # 13 UI patterns
    signup-flow.json          pricing-page.json
    navigation.json           forms.json
    landing-page.json         dashboard.json
    modals-dialogs.json       empty-states.json
    error-states.json         loading-states.json
    cta.json                  social-proof.json
    mobile-conversion.json

  business/            # 5 strategy domains
    monetization.json  retention.json  onboarding.json
    growth.json        metrics.json

  tokens/              # 12 design system tokens
    registry.json
    systems/stripe.json, linear.json, vercel.json, …

  content/             # v1.2 — content design systems
    systems/           # 4 brand voice guides (Mailchimp, GOV.UK,
                       #   Polaris, Atlassian)
    principles/        # 11 UX-writing principles
    patterns/          # 4 content patterns (errors, empty states,
                       #   notifications, form validation)

  research/            # v1.3 — research & data analysis
    principles/        # 11 research fundamentals
    methods/           # qualitative, quantitative, usability
    frameworks/        # HEART, AARRR, North Star, funnel, RICE, OKRs

  service-design/      # v1.3 — service design
    principles/        # Stickdorn, Shostack, moments of truth,
                       #   peak-end, handoff, human help
    patterns/          # blueprinting, handoff, signup-as-service,
                       #   omnichannel, moments of truth
    frameworks/        # GOV.UK Service Standard (14 points)

  brand/               # v1.3 — brand & visual design
    principles/        # logo, gradient, imagery, hierarchy, system
    trends/            # 2026-current-trends.json

Design Tokens

Tokens follow the W3C Design Tokens Community Group (DTCG) format. Each token has:

Output formats

Request tokens in three formats:

// W3C DTCG (default) — standards-compliant JSON
get_design_system({ id: "stripe", format: "dtcg" })

// CSS Custom Properties — drop into your stylesheet
get_design_system({ id: "stripe", format: "css" })
// Output: :root { --stripe-color-primary: #635bff; ... }

// Flat — simple key-value pairs
get_design_system({ id: "stripe", format: "flat" })
// Output: [{ path: "color.primary", value: "#635bff", type: "color" }]

Available systems

System ID Status Token groups
Stripe stripe Live color, typography, spacing, radius, elevation, motion
Linear linear Live color, typography, spacing, radius, elevation, motion
Vercel vercel Planned
Tailwind tailwind Planned
Radix radix Planned
shadcn/ui shadcn Planned
Material Design 3 material Planned

FAQ

Does Raven make API calls?

No. All data is bundled locally in the npm package. No external API calls, no latency, no auth tokens needed. It's 272KB of curated JSON that runs on your machine.

Does it work with other AI coding tools?

Raven works with any MCP-compatible client. Claude Code and Claude Desktop have native MCP support. Other tools are adding MCP support — check your client's documentation.

Can I add my own design system tokens?

Yes. Add a JSON file to src/data/tokens/systems/ following the W3C DTCG format, and register it in registry.json. See stripe.json as a reference.

Can I add custom principles or patterns?

Yes. Add JSON files to src/data/principles/ or src/data/patterns/. Follow the existing file structure. Raven loads all JSON files in those directories automatically.

How do I update?

npm update -g raven-mcp

Where does the knowledge come from?

129 principles curated from Nielsen Norman Group, Laws of UX, Gestalt psychology, WCAG 2.2, typography and color theory, mobile UX (touch targets, nav consistency, font sizing), responsive layout, component architecture, UX writing (Mailchimp, GOV.UK), research fundamentals, service design (Stickdorn, Shostack, Carlzon's moments of truth, GOV.UK Service Standard), and brand systems (Pentagram, Brand New, public brand guidelines from Stripe, Airbnb, Linear, Vercel). 22 patterns based on conversion research, service-design practice, and copy-design evidence. Design tokens extracted from public-facing design systems. Metrics frameworks from Google, Amplitude, Dave McClure, and Intercom.