Raven — Claude Code MCP server: what it does, how to install
Design intelligence and UI audits for coding agents: tests markup contrast, tap targets, and design system tokens.
claude mcp add --transport http raven-mcp https://mcp.ravenmcp.ai/api/mcpWhat Raven does
The server equips coding assistants with a structured design database. Agents inspect user interfaces against Nielsen's 10 Heuristics, WCAG standards, and 21 UX laws. Tools like audit_page and score_page inspect static HTML or rendered pages for font choices, contrast failures, and spacing scale mistakes.
Through evaluate_design, agents perform visual diffs using base64 PNG images. Routing generative rendering tasks requires configuring the RAVEN_CREATIVE_RUNNER variable with your own credentials.
Deployment choice determines feature scope. The local stdio command unlocks 111 tools, including the Taste Engine and Grab. In contrast, the public remote endpoint offers roughly 45 stateless tools. Connecting both local and hosted endpoints at the same time duplicates tool definitions in your agent.
What it helps with
- audit HTML markup against WCAG contrast and accessibility criteria
- inspect visual changes using before and after screenshot comparisons
- import UI tokens inspired by Stripe or Linear
- generate category scores from 0 to 10 for layout spacing and typography
Example prompts for the agent
- Audit this HTML file for contrast and typography issues with
audit_page - Evaluate layout changes between my two UI screenshots using
evaluate_design - Fetch Linear design tokens to align button padding and borders
How to install Raven
1Platform CLI: remote server
claude mcp add --transport http raven-mcp https://mcp.ravenmcp.ai/api/mcp2Platform CLI
claude mcp add raven -- npx -y raven-mcp1Platform CLI: remote server
codex mcp add raven --url https://mcp.ravenmcp.ai/api/mcp2Platform CLI
codex mcp add raven -- npx -y raven-mcpConfig file
{
"mcpServers": {
"raven": {
"url": "https://mcp.ravenmcp.ai/api/mcp"
}
}
}{
"mcpServers": {
"raven": {
"command": "npx",
"args": [
"-y",
"raven-mcp"
]
}
}
}Config file
{
"servers": {
"raven": {
"type": "http",
"url": "https://mcp.ravenmcp.ai/api/mcp"
}
}
}{
"servers": {
"raven": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"raven-mcp"
]
}
}
}1Platform CLI: remote server
gemini mcp add -t http raven https://mcp.ravenmcp.ai/api/mcp2Platform CLI
gemini mcp add raven npx -y raven-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Raven
How to install Raven in Claude Code?
Run claude mcp add raven -- npx -y raven-mcp to launch the local stdio version with full capabilities. Alternatively, connect the remote endpoint via claude mcp add --transport http raven https://mcp.ravenmcp.ai/api/mcp.
What does Raven do?
It supplies design rules, UX frameworks, and ready-to-use style tokens directly to your agent. The server enables automated layout scoring, accessibility verification, and visual diffing.
What is the difference between local and remote setups?
Running locally with npx provides 111 tools along with Grab and the Taste Engine. The public remote URL exposes about 45 stateless tools without Grab or Taste.
