Everything you need to get Raven running with Claude Code, Claude Desktop, or any MCP-compatible client.
Design intelligence in Claude in under 2 minutes. Pick the path that matches how you use Claude.
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"
Add a .mcp.json to your project root so everyone on the team gets Raven automatically:
{
"mcpServers": {
"raven": {
"command": "npx",
"args": ["-y", "raven-mcp"]
}
}
}
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.
Prefer not to edit JSON? Download the extension and double-click it. Claude Desktop installs Raven automatically — no Node, no terminal.
macOS · Windows · Linux • ~4 MB · v1.1.1
.mcpb file above.git clone https://github.com/rhinocap/raven-mcp.git
cd raven-mcp && npm install && npm run build
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.
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.
// Claude calls this automatically when you say:
"Build a pricing page"
"What accessibility rules apply to forms?"
"Check this against Nielsen's heuristics"
Evaluate a design description against UX principles. Returns relevant principles, potential violations, and improvement suggestions.
// Try:
"This signup form has 8 fields, no social login, and the
button says Submit. Evaluate it for conversion."
Get Design for Delight (D4D) templates — customer problem statement, ideal state, hypothesis, LOFAs, and experiment design.
Get proven UI/UX patterns for a specific design type. Returns do's, don'ts, evidence, and checklists.
// Try:
"Show me the best patterns for a mobile signup flow"
"What does a high-converting pricing page need?"
Get a pre-publish checklist for a UI type. Returns actionable yes/no items to verify before shipping.
// Try:
"Give me a pre-launch checklist for this landing page"
"What should I check before shipping this mobile form?"
Get business and monetization strategies for digital products. Covers monetization, retention, onboarding, growth, and metrics.
Browse available design systems. Filter by category or search by name.
Get design tokens for a specific system. Returns colors, typography, spacing, radii, elevation, and motion tokens.
// Try:
"Use Stripe's color tokens for this checkout page"
"Give me Linear's typography scale as CSS variables"
Mix tokens from different design systems to create a custom composite.
// Try:
"Build me a design system with Linear's colors
and Stripe's typography"
Search across all principles, patterns, and strategies. Use when you need to find specific guidance or don't know which category to look in.
Audit an HTML page against design standards. Returns a score, grade, passes, and errors with specific fix recommendations.
// Try:
"Audit this landing page HTML for accessibility and mobile issues"
"Check this signup form for WCAG compliance"
Get a complete brand design system for a well-known company. Returns colors, typography, spacing, CSS variables, and implementation rules.
// Try:
"Make me an app with branding like Spotify"
"Use Apple's design language for this landing page"
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.
// 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"
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?"
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.
"Write this error message in Mailchimp's voice"
"Use GOV.UK plain-language guidelines for these forms"
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.
Copy recipes — full do/don't with examples and evidence — for error messages, empty-state copy, notifications, form validation.
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.
"Design a usability study for my mobile onboarding"
"How do I run a proper A/B test on this pricing change?"
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.
"What metrics should we track for this app?"
"Build me a HEART framework for our onboarding"
Service blueprinting, human handoff, signup-as-service, omnichannel continuity, moments of truth / recovery. Each with do/don'ts, evidence, and a checklist.
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.
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.
{ a: {label}, b: {label} } — switches on the two-actor / HI-loop layout"Map the client intake for a personal-injury firm — customer and
lawyer as two actors. Show current state and ideal state."
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.
"Audit this brand system for logo-usage consistency"
"What are the rules for gradient overuse?"
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.
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.
AccentColor.colorset/Contents.json — verifies the accent color actually defines components"Audit this SwiftUI screen against Apple's HIG"
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.
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 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.
"Audit this Expo screen for accessibility and safe areas"
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.
Register an email to receive release updates from the Raven team. One email per minor/major release — patches stay silent.
You don't need to call tools directly. Just talk to Claude naturally and Raven fires automatically.
"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.
"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.
"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.
"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 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.
"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.
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
Tokens follow the W3C Design Tokens Community Group (DTCG) format. Each token has:
$value — the token value$type — color, dimension, fontFamily, fontWeight, number, etc.$description — what the token is forRequest 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" }]
| 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 | — |
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.
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.
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.
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.
npm update -g raven-mcp
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.