Raven MCP
Odin's ravens brought back knowledge of the world — Raven brings back design intelligence.
Raven is an MCP server for coding agents. Click any element in the app you have running locally and say what should change — Raven sends the agent the selector, the computed styles, and your design tokens — then audits the result for contrast, tap targets, and typography.
Raven MCP is a personal open-source project by Andrew Cunliffe. It is not endorsed by, affiliated with, or supported by Intuit Inc. or any other company referenced in its source data. See NOTICE for full attribution of upstream sources and their licenses.
What it does
Raven gives Claude access to a comprehensive design knowledge base:
- Principles — Nielsen's 10 Heuristics, all 21 Laws of UX, Gestalt principles, WCAG accessibility, typography rules, color theory, mobile UX, D4D framework, UX writing, service design, brand, color-systems (palette-size discipline), and spacing-systems (base-unit grid + scale limits)
- Patterns — Proven UI patterns for signup flows, pricing pages, navigation, dropdown/select menus, forms, landing pages, dashboards, modals, empty/error/loading states, CTAs, social proof, mobile conversion — plus content patterns (error messages, empty-state copy, notifications, form validation) and service patterns (service blueprinting, human handoff, signup-as-service, omnichannel continuity, moments of truth)
- Content systems — Voice & tone guides: Conversational Product Voice, GOV.UK, Shopify Polaris, and Atlassian
- Research — Qualitative, quantitative, and usability methods with do/don't protocols and checklists. Metrics frameworks: HEART, AARRR/Pirate, North Star Metric, conversion funnel, RICE, OKRs.
- Service design — Service blueprinting (with HTML blueprint generation — current vs. ideal state), human-handoff patterns, signup-as-service, omnichannel continuity, moments of truth / recovery, and the GOV.UK Service Standard
- Brand & visual — Logo usage (clear space, min sizes, variants, placement, restraint), gradient usage (hierarchy, palette, contrast, trend vs signature), imagery (consistency, representation, purpose), visual hierarchy, brand-as-system, and current (2026) visual-design trends
- Business — Monetization models, retention strategies, onboarding optimization, growth mechanics, and product metrics frameworks
- Tokens — Design system tokens for Stripe, Linear, and more
- Creative studio — Local-first brand profiles, asset references, character reference profiles, provider-agnostic image/video/3D/audio generation jobs, campaign plans, and transparent creative scoring. Raven does not ship media-provider credentials; set
RAVEN_CREATIVE_RUNNER to route jobs to your own renderer.
Install
Local stdio (npx / from source) is the full product: 111 tools, including Grab, the pattern library, and the file-backed Taste Engine. Hosted endpoints are smaller subsets — pick one path and stick to it.
| Path | How | Tools | Taste | Grab |
|---|
| Local stdio | npx -y raven-mcp (Claude Code, Cursor mcp.json, Codex, Desktop mcpb) | 111 | Yes | Yes |
| Public remote | https://mcp.ravenmcp.ai/api/mcp | ~45 | No | No |
| Auth remote | https://mcp.ravenmcp.ai/api/mcp-user (OAuth) | Taste + audits (no Grab) | Yes | No |
Claude Code — one command
claude mcp add raven -- npx -y raven-mcp
Prefer one Raven entry. If both a local raven and a claude.ai / remote Raven are connected, the agent sees two overlapping toolsets — disable or rename one (e.g. raven-local vs raven-cloud) so it is obvious which product you are talking to.
Manual config (Claude Desktop or team .mcp.json)
{
"mcpServers": {
"raven": {
"command": "npx",
"args": ["-y", "raven-mcp"]
}
}
}
Cursor
Same mcp.json snippet as above (~/.cursor/mcp.json or project .cursor/mcp.json) runs the full local server (Grab + Taste). Hosted options:
- Public:
"url": "https://mcp.ravenmcp.ai/api/mcp" — ~45 stateless tools; no Grab, no Taste.
- Authenticated Taste:
"url": "https://mcp.ravenmcp.ai/api/mcp-user" — OAuth; Taste yes, Grab still local-only.
Codex
Add under mcp_servers in config.toml:
[mcp_servers.raven]
command = "npx"
args = ["-y", "raven-mcp"]
Codex may prompt to approve many Raven tools on first use — that is client approval policy, not a smaller Raven.
Claude Desktop — one-click extension
Prefer not to edit JSON? Download raven.mcpb and double-click it. Claude Desktop installs Raven automatically — no Node, no terminal. Package version tracks npm.
From source
git clone https://github.com/rhinocap/raven-mcp.git
cd raven-mcp && npm install && npm run build
Tools
| Tool | Description |
|---|
get_principles | Get design principles relevant to a UI context |
get_pattern | Get proven patterns for a specific UI type |
get_business_strategy | Get business/monetization strategies |
evaluate_design | Evaluate a design description against principles. Pass base64 PNG screenshots (before_screenshot/after_screenshot) for a structured before/after pixel diff with fix_confirmed, changed_ratio, and changed region. Pass compact: true to return only scores and violations (drops full principle/pattern bodies) when the full payload is too large. |
search_knowledge | Search across all principles, patterns, and strategies |
get_checklist | Get a pre-publish checklist for a UI type |
get_d4d_framework | Get Design for Delight framework templates |
list_design_systems | Browse available design systems |
get_design_system | Get tokens for a specific design system |
compose_system | Mix tokens from different systems |
get_brand_system | Get a full system styled like a well-known brand |
audit_page | Audit HTML/CSS against Raven's quality standards — pass html for static audit, or url to render headless with optional scroll_settle (step through reveal gates, then return to top) and viewport parameters; containerMaxWidth makes container checks token-aware. Also flags inline SVG icons that hardcode a color instead of using currentColor/a token. Pass compact: true to return only scores, violations, and fix_priority (drops embedded base64 screenshots) when the full payload is too large. |
score_page | Return a per-category (0–10) design score for a page — typography, accessibility, spacing, color, responsive layout, design tokens, structure — derived from the same checks as audit_page, plus the overall score/grade, the weakest category, and categories Raven does not mechanically assess (brand, conversion, motion). URL mode also counts determinate contrast failures while keeping indeterminate rows out of numeric scoring. Pass html and/or url (url capture is local/stdio only; remote rejects url) |
audit_layout | Evaluate visual rhythm, alignment, and optical balance; detects orphan-stretch (a lonely last-row grid/flex card stretching far wider than siblings) |
audit_responsive_visibility | Render a URL at multiple breakpoints and flag content elements that are visible on desktop but hidden on mobile (display:none/opacity:0/zero-size) — categorises each as likely-oversight (content vanishing on mobile) vs intentional (decorative) |
audit_contrast | Compute WCAG contrast for rendered text with tri-state status (pass, fail, indeterminate), effective backdrops, ratio ranges, and delta-to-pass only where the backdrop is determinate |
suggest_contrast_fix | Given failing WCAG color pairs, return the minimal fg/bg change that clears the AA/AAA target — concrete passing values to fix audit_contrast failures |
audit_url | Render a live URL at each viewport×theme, scroll-settle, fire interactions, capture real pixels + DOM, then run the page/contrast/responsive/blank-media checks plus sliced-image edge-symmetry and hover-state white-wash detection over the captures — every finding tagged confirmed/likely-artifact/inconclusive, ranked by severity. Pass compact: true to return only findings and summary (drops per-capture base64 screenshots) when the full payload is too large. |
audit_content | Per-item content verdicts (pass/warn/fail) for headings, prose, CTAs, labels, captions, metrics & outcomes against UX-writing principles + deterministic heuristics (metric needs number+unit; CTA action-led ≤4 words; prose flags passive/jargon/hedging; caption-vs-heading duplication) — with a before→after rewrite suggestion per item. Pure offline |
audit_typography | Typographic-scale report over rendered DOM text nodes (or a supplied snapshot) — detects the dominant modular-scale ratio and flags off-scale sizes, checks line-height consistency vs the body rhythm, and flags weight ladders >4 weights or non-standard values. Goes beyond audit_page's pass/fail typography checks |
audit_tap_targets | WCAG 2.5.5 / Apple 44pt web tap-target audit — enumerates every interactive element (rendered URL or snapshot) and emits a per-element fix table: selector, role, text, measured w/h, per-axis pixel deficit, and a concrete CSS fix, sorted worst-first |
audit_device_frame | Flag cropped content in device-mockup frames — frames (container box + intrinsic media + object-fit, or a DevTools snippet) detects object-fit:cover crop loss when frame AR ≠ media AR; clips (first/last frame PNGs) detects baked-in pan/zoom (Ken Burns); edge_frames (PNGs) flags content truncated at a frame edge |
