# 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](https://ravenmcp.ai). It is **not endorsed by, affiliated with, or supported by Intuit Inc.** or any other company referenced in its source data. See [NOTICE](./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**: **115 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) | **115** | 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 ```bash 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`) ```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`: ```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](https://ravenmcp.ai/raven.mcpb) and double-click it. Claude Desktop installs Raven automatically — no Node, no terminal. Package version tracks npm. ### From source ```bash 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 | | `audit_video_playback` | Render a page and observe whether each `