Design intelligence for AI-generated UI — principles, patterns, content, brand, design tokens.
Quick Install
Automated & IDE SetupCopy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.
Not yet automatically verified
We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.
Manual Client & Custom JSON ConfigExpand JSON ▾
Client Config & Setup
Choose your client or environment
Target File:
💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.
Capabilities & Tool Schemas (63)
Inspect callable tools, capabilities, and parameters exposed to AI agents by Raven.
get_principlesGet design principles relevant to a UI context
get_patternGet proven patterns for a specific UI type
get_business_strategyGet business/monetization strategies
evaluate_designEvaluate 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/…
search_knowledgeSearch across all principles, patterns, and strategies
get_checklistGet a pre-publish checklist for a UI type
Documentation Overview
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_RUNNERto 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
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)
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:
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
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 |
Related MCP Servers
Adoption & maintenance
Factual signals from GitHub, npm, and our automated checks — not a rating.
GitHub stars
6
Stargazers on the source repository.
Last commit
1mo ago
Most recent push to the default branch.
Tools exposed
63
Callable tools this server registers over MCP.
Reviews
No reviews yet — be the first to share how this listing worked for you.
Frequently Asked Questions about Raven
AllMCPs Directory Badge
Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.
Badge Style:
Live Dynamic SVG Preview
Markdown (GitHub README)
[](https://allmcps.com/mcp/raven)HTML Embed
<a href="https://allmcps.com/mcp/raven"><img src="https://allmcps.com/api/badge/raven?style=directory" alt="Raven on AllMCPs" /></a>Technical Specs & Signals
CategoryArchitecture & Design
5/5 checks healthy over the last 46d
52Quality signal: Good · 52/100How this signal is calculated ▾
Server availabilityNot measured
Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.
Verified ownership10/20
Documentation & tools25/30
Adoption & activity4/15
Community engagement0/10
A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.
Supply-chain signal
No high-severity advisories surfaced by our automated scan.
Critical 0High 0Medium 0Low 0
Scanned 3d ago via OSV.dev · raven-mcp (npm)
Own this project?
This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.
Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.
Claim & get free dofollowShare & Embed
Add our SVG badge (dark/light directory styles) or embeddable widget to your site.