Log inSubmit server
Raven logo

Raven

Design intelligence for UI principles, patterns, tokens, audits, and local app feedback through MCP.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Raven

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "raven": {
      "command": "npx",
      "args": [
        "-y",
        "raven-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Install not yet sandbox-tested— the server itself is confirmed live (we called its tools/list endpoint). The stdio install command is a separate, ongoing check.

Overview

Raven MCP server gives coding agents design guidance, design-system tokens, UI audits, and structured feedback from locally running web apps. Its tools cover principles, reusable interface patterns, business strategy, checklists, token systems, DESIGN.md files, grabbed references, and deterministic HTML/CSS evaluation. The local stdio setup provides the full toolset, including the grab bridge and file-backed design workflows, while hosted endpoints provide smaller subsets. Reach for Raven when an agent needs design rationale, token-aware implementation guidance, or automated checks before UI changes are merged.

Use cases

  • Retrieve UX guidance for a signup flow or dashboard
  • Review UI diffs against project design tokens
  • Audit HTML and CSS for accessibility and responsive issues
  • Capture interface references and map them to local tokens
  • Score a rendered page before shipping

Key features

  • Design principles, patterns, and business strategy knowledge
  • Design-system token retrieval and composition
  • DESIGN.md parsing and token-aware diff review
  • Local app element grabbing and reference storage
  • Deterministic HTML/CSS audits and page scoring
  • Template and layer workflows for grabbed pages

Tools111

What Raven lets your agent do. Expand a tool for its parameters.

Verified live~34.3k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

12/12 checks healthy over the last 91d

What it can do

From the 111 tools this server returned when we ran it; 111 declare their own safety hints.

Runs commands · 2Can delete or modify data · 38Handles credentials · 20Makes network requests · 21Read-only tools · 72
Network at startup4 connections
Files written at startupNone
Install scriptspostinstall
npm provenanceSigned build
Package age197 days
Maintainers1

Observed 2026-10-26 in an isolated sandbox. A description of reach, not a security audit.

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)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars8Stargazers on the source repository.
npm downloads1.5kPackage downloads in the last 30 days.
Last commit4d agoMost recent push to the default branch.
Tools exposed111Callable tools this server registers over MCP.

How Raven works

What Raven does

Raven connects coding agents to a design knowledge base and local design-development workflows. It can return UX principles, accessibility requirements, typography and color guidance, UI patterns, content guidance, business strategies, research methods, and Design for Delight templates. Search tools help agents locate relevant material when the appropriate category is unclear.

The server also works with design systems and project-specific design files. Agents can browse stored systems, retrieve tokens in W3C DTCG, CSS custom property, or flat formats, combine tokens from different systems, and parse or update a project's DESIGN.md. Design reviews can use those project tokens and recorded decisions rather than relying only on generic standards.

How it works

A local stdio installation runs through npx -y raven-mcp, or from a source checkout after building the project. Raven's grab workflow starts a loopback bridge for a locally running app. The overlay lets an agent receive selected elements with selectors, computed styles, markup, geometry, and state styles. Captured references can be stored locally, searched later, rendered as offline thumbnails when possible, and mapped onto the project's own tokens without a model or network request.

For UI code, review_diff checks added lines against DESIGN.md tokens and design decisions. polish_diff proposes deterministic substitutions without changing files. Layer operations and template-slot changes are queued or persisted through the grab workflow rather than directly mutating the live page.

Page evaluation can inspect supplied HTML/CSS or, in supported local usage, render a URL with headless Chromium. audit_page returns pass/fail checks and fix instructions. score_page produces category scores, an overall grade, the weakest category, and guidance for areas Raven does not mechanically assess.

Setup and configuration

Claude Code can register Raven with:

Terminal
claude mcp add raven -- npx -y raven-mcp

Claude Desktop and Cursor can use a stdio entry with npx and the raven-mcp package. Cursor supports either a local mcp.json configuration or the hosted endpoints. Codex uses an mcp_servers.raven entry in config.toml. Claude Desktop also supports the downloadable .mcpb extension.

The public hosted endpoint is https://mcp.ravenmcp.ai/api/mcp and provides roughly 45 stateless tools without Grab or Taste. The authenticated endpoint at https://mcp.ravenmcp.ai/api/mcp-user uses OAuth and includes Taste and audits, but Grab remains local-only. Use one Raven entry at a time to avoid overlapping local and hosted toolsets.

Tools and capabilities

  • Retrieve principles, patterns, business strategies, checklists, and D4D templates.
  • Search design knowledge and stored visual references.
  • Browse, retrieve, compose, and map design-system tokens.
  • Parse, initialize, review, and update DESIGN.md files.
  • Capture, search, display, and remove locally stored page references.
  • Audit and score HTML/CSS for typography, accessibility, responsive layout, spacing, color, structure, and token use.
  • Start grab sessions, inspect selected elements and layers, manage templates, and queue layer changes.

Limitations and notes

Hosted deployments expose smaller subsets than local stdio. Grab is local-only, and URL rendering for score_page is supported in local or stdio usage rather than remote mode. Reference browsing does not return another site's markup by default; callers must explicitly request HTML. Captured thumbnails are offline reconstructions, so external images and webfonts are absent, and thumbnail creation depends on a local browser.

Reference removal is local and irreversible for deleted files. Raven's token mapping does not invent tokens or write code, and unsupported values become reported gaps. Layer permission metadata is advisory rather than enforced, and shadow-root and iframe boundaries are outside the layer-move workflow.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Raven

Raven is an MCP server that connects coding agents to a design knowledge base and local web apps, with tools for UX principles, UI patterns, design tokens, DESIGN.md reviews, page audits, and element grabbing. It supports local stdio use and smaller hosted endpoints, helping agents apply and evaluate design guidance during development.

Install Raven with `npx -y raven-mcp` through your MCP client configuration. Claude Code supports `claude mcp add raven -- npx -y raven-mcp`; Claude Desktop and Cursor use an equivalent stdio entry, Codex uses `mcp_servers.raven`, and Claude Desktop also supports the `.mcpb` extension.

Yes, Raven works with Cursor through a local `mcp.json` entry. The local configuration provides the full server, including Grab and Taste; Cursor can also connect to the public hosted endpoint or the OAuth endpoint, although hosted options have different tool subsets and Grab remains local-only.

Yes, Raven can review added UI-code lines against the project's DESIGN.md tokens and recorded design decisions. `review_diff` returns a structured CI verdict with findings and token suggestions, while `polish_diff` proposes deterministic substitutions without writing files.

Yes, Raven can audit supplied HTML/CSS and, in local or stdio usage, render a URL with headless Chromium. `audit_page` checks items such as typography, touch targets, contrast, responsive layout, spacing, and token use; `score_page` adds category scores, an overall grade, and the weakest category.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

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 PreviewRaven AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/raven?style=directory)](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>