Install Raven, then let Claude call design audits, token lookups, UI patterns, and taste checks while it builds.
Add Raven to 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 or check UI; Raven gives it callable tools:
"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 • ~5 MB · v2.0.0
.mcpb file above.git clone https://github.com/rhinocap/raven-mcp.git cd raven-mcp && npm install && npm run buildRaven provides 100 tools. Claude calls the relevant tool based on the task; the cards below show what each tool returns. Every tool appears here, grouped by job — related tools share a card.
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 UI/UX pattern guidance for a specific design type. Returns do's, don'ts, evidence, and checklists.
// Try: "Show me the checklist 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"score_page grades HTML/CSS across seven categories — structure, typography, color, spacing, and the rest — where audit_page returns pass/fail findings. suggest_contrast_fix takes failing WCAG pairs and returns the smallest color change that clears the ratio, so a fix doesn't redesign the palette. audit_layout reads visual rhythm from a rendered page's real geometry; audit_consistency compares several pages for container-width and heading-tier drift; audit_video_playback renders in headless Chromium and checks each <video> actually advances.
"Score this page and tell me the two lowest categories"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.
Start the Raven Design bridge on loopback. Click any element on your running dev server and its Structure panel (a layers tree drilled to that node) and Design panel (its computed styles and matching DESIGN.md tokens, editable inline with live preview) open on the page. Edits land as you make them, then get packaged for your agent. Pass proxy_target to point at your local server; stop_grab_session ends it and clears the queue.
"Start a Raven Design session on http://localhost:3000"Read the elements you clicked — selector, computed styles, matching DESIGN.md tokens, and the change you asked for — so your agent can apply them. get_grab_layers, get_grab_operation, and move_grab_layer back the Structure panel's layer tree and same-page reorder / reparent intents.
Read and persist the page's template slots in DESIGN.md — each slot's fixed / flexible role and its allowed tokens — so layout structure is a contract, not a guess. init_design_md / read_design_md / update_design_md create and edit DESIGN.md itself, one token at a time, without rewriting the file.
Review the added UI-code lines of a unified diff against the project's own DESIGN.md tokens and recorded design decisions — a CI-shaped design check that can fail the diff when it touches a decision the graph governs, via fail_on_governed. polish_diff turns those findings into deterministic token substitutions, ready to apply, without writing files. talon_scan runs the same detector engine over a page as pure measurement, no LLM; talon_rules enumerates its rule corpus.
"Review this diff against our DESIGN.md and fail on any governed decision"Give a project a queryable design-decision memory that both people and coding agents consult — so decisions stop getting re-litigated and lost. decision_add records an active decision with its scope, component, rationale, and rejected alternatives; decision_draft captures one now and confirms the why later; decision_commit confirms it and surfaces similar decisions; decision_evidence attaches quantitative or qualitative results. Everything is local — under your project, or ~/.raven when there's no project store — no account, no upload.
"Record that we chose tabs over a segmented control, and why"Query the graph: decision_get returns one node with its evidence and connected neighbors; decision_list filters by status; decision_history traces a full supersession lineage. Resolve conflicts without deleting anything — decision_supersede replaces a decision while keeping both nodes and their lineage, and decision_scope narrows two decisions so both can stay active.
Cold-start the graph from what you already have: decision_import mines local git history and decision-bearing Markdown into source-tagged extraction prompts; ingest_transcript / ingest_transcript_results turn a meeting or thread into reviewable candidate decisions. gap_scan ranks uncovered components, thin rationales, contested decisions, and stale derivations, so the graph stays honest.
Taste is per-surface: the same person wants different rules on a portfolio than on a product site. get_taste_interview returns a calibration interview to ask at the start of a project — identity, how it should read, voice register, which hosts identify it — and bind_taste_surface persists the answers so every later audit judges against them. create_taste_profile starts a ruleset from a template; list_taste_profiles and get_taste_profile read what's stored locally.
"Calibrate Raven for this project before we pick a direction"audit_taste judges a screenshot, component, or copy block against the bound profile rather than a generic rulebook. The loop grows from use: label_finding appends a corrected precedent when a verdict was wrong, record_taste_decision captures a direction the moment it's chosen, and list_taste_decisions reads them back. generate_taste_portrait renders a bound surface as a self-contained HTML page you can share with the rest of the team.
"Is this in voice for the project? Then remember my correction"A provider-agnostic job queue for image, video, 3D, audio, and campaign work. list_creative_models browses the model catalog and list_creative_presets the shot recipes — product photoshoots, marketplace cards, UGC ads, cinematic reveals. create_generation_job queues one; get_generation_job and list_generation_jobs read state. Raven writes the brief and tracks the job; it does not ship its own renderer.
"Queue a product photoshoot for this SKU using our brand profile"Keep a campaign consistent across jobs. create_brand_profile stores the palette, type, and voice a job should inherit — get_brand_profile and list_brand_profiles read them back. create_character_profile holds an identity reference so the same person or mascot survives across renders, and register_creative_asset registers a local or remote file a job can draw on.
plan_creative_campaign turns one brief into a multi-asset plan and can create the draft jobs for it. score_creative reads a prompt, script, or ad concept for hook strength, benefit clarity, product signal, and call-to-action — a cheap directional check before you spend a render budget on the wrong idea.
"Score these three ad concepts before we generate any of them"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. Say what you are building or checking, and Claude can call the relevant Raven tool.
"Build me a pricing page with 3 tiers for a developer tool. Use Stripe's design tokens."Raven can call get_pattern("pricing-page"), get_principles("pricing page"), and get_design_system("stripe"); Claude then builds from those returned rules and tokens.
"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 matched principles, likely violations, and 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 token set — colors, typography, spacing, radius, elevation, motion — and exports a 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 ~640KB 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.