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-mcpAsk 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 buildRaven provides 56 tools across 9 knowledge layers. Claude calls them automatically based on what you're asking for. Below, the original 13 tools have full docs; the newer tools from v1.2–v1.11 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"Layer 0 render-and-capture audit. Renders a live URL at every viewport & theme, scroll-settles reveals and plays videos, fires hover/click/focus, then runs the page-check engine plus pixel checks — sliced-image edge symmetry and hover-state white-wash — tagging each finding confirmed / likely-artifact / inconclusive. Requires headless Chromium.
"Render and audit https://example.com on mobile and desktop, light and dark"Compute WCAG 2.1 contrast ratios for every text element on a rendered page. Returns per-element ratio, AA/AAA pass-fail, and delta-to-pass for failures. Replaces the manual eyedropper + ratio math.
Render a page at multiple breakpoints and flag content visible on desktop but hidden on mobile — detecting display:none / zero-size and Tailwind hidden md:block patterns. Categorizes each as likely-oversight vs intentional-decorative.
WCAG 2.5.5 / Apple 44pt web tap-target audit. Collects every interactive element and emits a per-element fix table for any below the minimum — selector, role, measured w/h, per-axis pixel deficit, and a concrete CSS fix, sorted worst-first.
Typographic-scale report over rendered DOM text. Detects the dominant modular-scale ratio, flags off-scale sizes, checks line-height consistency against the body rhythm, and flags weight ladders with >4 weights or non-standard values.
Per-item content evaluation for UX writing. Each item (heading/prose/cta/label/caption/metric) returns a pass/warn/fail verdict with the matched principle, concrete issues, and a before→after rewrite — metrics need a number+unit, CTAs stay action-led ≤4 words, prose loses passive voice, jargon, and hedging.
Given PNG file paths, measures per-pixel luminance variance in the bottom strip and flags high-variance rows as likely-sliced — catching content cut off inside a correctly-sized export that dimension checks cannot detect.
Flags content cropped inside a device-mockup frame: object-fit:cover aspect-ratio crop loss (names the cropped edges and hidden fraction), baked-in pan/zoom (Ken Burns) drift via block-matched displacement, and content truncated at a frame edge. Catches a 16:9 clip silently sliced inside a ~1.82-aspect screen cutout.
Score an accessibility-enriched iOS snapshot — missing accessibilityLabel/value/traits on interactive elements, sub-44pt targets, per-text WCAG contrast, Dynamic-Type clipping, and VoiceOver reading order. Returns grade, score, errors, warnings, and voiceover_order.
Compare an iOS element snapshot to an Android one against a checklist of named spatial relationships (vertically-centered, baseline-aligned, equal-gap, equal-size, present…) and return per-relation match / mismatch / uncertain with measured deltas — catching cross-platform drift past device-verified parity claims.
Verify a wire contract (ordered token list / field set / schemaVersion) is identical across N source files — iOS Swift, proxy JS, Android Kotlin. Flags tokens missing in some layers, schemaVersion drift, and the prefix-ordering bug that silently corrupts directive parsing. Returns a per-layer report + BLOCK/PASS verdict.
Run adversarial queries against a live endpoint and return a per-query verdict — shape-valid / shape-invalid / confident-wrong / uncertain — against an expected shape schema plus per-query contains/equals expectations. Catches responses that pass shape but are wrong.
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.jsonTokens 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-mcp129 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.