Open-source MCP Server · MIT

Pair-designwith your coding agent

Q: How do I install RavenMCP?

Install RavenMCP in one command: claude mcp add raven -- npx -y raven-mcp. It runs through npx, so there is nothing to clone or build. Full setup instructions are in the documentation at ravenmcp.ai/docs.

Q: Which AI agents work with RavenMCP?

RavenMCP works with any client that supports the Model Context Protocol — Claude (Claude Code and the Claude desktop app), Cursor, and any other MCP client. Once installed, the agent can call Raven's 70 tools directly during a conversation.

Q: What platforms can RavenMCP audit?

RavenMCP can audit web pages and layouts, iOS/SwiftUI screens, Android screens, and React Native interfaces — checking them against design principles and UI patterns and flagging issues with contrast, tap targets, typography, and accessibility.

Q: What design systems does RavenMCP support?

RavenMCP includes tokens from 12 named systems in W3C DTCG format, including Apple HIG, Material, Stripe, Linear, Vercel, GitHub Primer, Tailwind, and shadcn/ui. It also exposes 129 design principles and 22 reusable UI patterns.

Raven is an open-source MCP server. Click any element on your running page, edit its tokens and styles with real controls, and package the change for your agent — backed by audits that name the broken design rule and return the fix with evidence.

Try Raven Design →Docs →View on GitHub →

v—

Latest

—

Releases

—/wk

npm Downloads

Raven Design

Select an element. Edit its tokens and styles.

Edits land on the page as you make them, then get packaged for your agent.

Try the playground

Before & after

Without Raven, and with it.

Each pair is a real brief before Raven and after it — a fresh build, a rebuild, and a taste-profile pass.

The same brief built with Raven — a fog-wrapped coastal house under the serif headline 'Where the fog line ends, the garden begins.' — A landscape-architecture brief, without Raven and with it.

A landscape-architecture brief built without Raven — a dense illustrated hero with full navigation and a thermal-model data card. — A landscape-architecture brief, without Raven and with it.

Oddlot v2 3D workshop rebuild. — Oddlot — the v1 page and the v2 rebuild.

Oddlot v1 editorial page. — Oddlot — the v1 page and the v2 rebuild.

The Taste Engine

Turn your taste into audit rules

Raven asks how a project should look and sound, stores that surface profile locally, then audit_taste returns BLOCK/WARN/PASS findings with rule IDs and evidence.

01 Calibrate

get_taste_interview — fieldnotes

$ get_taste_interview profile:'andrew' project:'fieldnotes'

  existing_binding  null   — new surface, calibration starts

  · identity     what is fieldnotes, in a phrase — and what
                 family: portfolio, product site, docs, app UI?
  · references   links you want this surface to sit near
  · typography   editorial serif / neutral sans / mono-forward
  · motion       none / restrained reveals / choreographed
  · voice        pick a register by ear — three samples given

  12 dimensions · blocking — answers land before design work

02 Audit

audit_taste — raven-mcp

$ audit_taste project:'raven-mcp'

  verdict       BLOCK
  verdict_line  2 blocking findings — fix before ship.

  findings
    · voice-no-hype   "make every screen better"   → name the check performed
    · voice-no-hype   "built for modern teams"     → name the user and task

  suppressed             1   accepted precedent
  not_assessed           1   clause needs a live capture
  quoted_evidence_exempt { elements: 1, chars: 512 }

03 Kick off

bind_taste_surface — fieldnotes

$ bind_taste_surface surface:'fieldnotes' profile:'andrew'

  bound          fieldnotes — docs · hosts: fieldnotes.dev

  design_notes   typography   editorial serif, wide measure
                 color        near-monochrome, one accent
                 motion       none — pages arrive settled
  overrides      voice-no-hype → strict
  references     2 captured, with what to keep from each

  design_notes are acceptance criteria — echoed in every
  audit_taste project:'fieldnotes' from here on

Cinematic builds

A recipe that names its price

When a surface's taste calls for an AI-generated video hero, Raven returns the build recipe—and the recipe declares its paid dependency before your agent spends anything.

build_hint — ai-video-hero

build_hint: ai-video-hero
  technique    AI-generated video hero over a poster frame
  chain        one hero still → short clips around one
               consistent subject → reserve 4K for a single
               final shot, then web-compress; autoplay muted + inline
  depends_on   Higgsfield MCP (Seedance model) — paid, external
  cost         confirm the spend with the user before running
  fallback     still photography or licensed film, agreed first
  never        a surface that opted out of AI → no paid tool

Nine Knowledge Layers

Nine layers, one MCP server

Raven exposes principles, UI patterns, content voice, research methods, service blueprints, strategy frameworks, design tokens, and audit tools as MCP calls.

129

Design principles

Principles

Nielsen's Heuristics, Laws of UX, Gestalt, WCAG accessibility, typography, color theory, mobile UX, responsive layout, and D4D—with violations and checklists.

AccessibilityNielsenGestaltLaws of UXMobile UXResponsive

Pattern libraries

Patterns

Field-tested UI patterns for signup, pricing, dashboards, forms, navigation, CTAs—plus content patterns (errors, empty states, notifications) and service patterns (blueprinting, handoff).

Landing PagesPricingFormsHandoff

Brand voice systems

Content Systems

Voice & tone from Mailchimp, GOV.UK, Shopify Polaris, and Atlassian. Plus eleven UX-writing principles and content patterns for errors, empty states, notifications, and form validation.

MailchimpGOV.UKPolarisAtlassian

Metrics frameworks

Research & Data

Qualitative, quantitative, and usability methods with protocols, sample-size guidance, and bias traps. Metrics frameworks: HEART, AARRR, North Star, conversion funnel, RICE, OKRs.

HEARTAARRRUsabilityA/B Tests

GOV.UK standard

Service Design

Stickdorn, Shostack, moments of truth, peak-end, human-handoff patterns. Plus an HTML service-blueprint generator with two-actor (HI-loop) mode for customer↔lawyer, patient↔doctor flows.

BlueprintingHandoffHI-loopGOV.UK

2026 visual trends

Brand & Visual

Logo usage, gradient systems, imagery, visual hierarchy, brand-as-system thinking—plus a time-stamped 2026 trends file (bento grids, monospace for tone, neon-on-glass, brutalism rebound).

LogoGradientImagery2026 Trends

Strategy domains

Business Strategy

Monetization, retention, onboarding, growth, and metrics—the business context that shapes every design decision.

MonetizationRetentionGrowthMetrics

Design systems

Tokens

Production design system tokens in W3C DTCG format. Compose tokens across systems, export as CSS variables, Figma Variables, or JSON. Generate custom systems from a brand color.

StripeLinearDTCGFigma

Audit tools

Render & Audit

Render any live URL or screen and grade it—contrast, typography, tap targets, responsive visibility, asset integrity. Native SwiftUI and React Native, plus parity and API-contract checks.

WebSwiftUIContrastParity

Seventy Tools

Seventy tools, organized by job

Seventy focused calls, grouped by what they do—know, create, audit, judge. Claude calls them automatically, with no special syntax.

audit_url

Render a live URL at every viewport & theme, then catch cropped images, blank videos, hover white-wash, and hidden-on-mobile content

audit_contrast

WCAG 2.1 contrast ratios for every text element on a rendered page—AA/AAA pass-fail with delta-to-pass

audit_swiftui

Audit SwiftUI source against Apple's HIG—Dynamic Type, semantic colors, 44pt targets, AccentColor

audit_page

Score any HTML page against Raven's design quality standards—typography, accessibility, responsive, tokens

audit_layout

Evaluate a rendered page's visual rhythm, alignment, and optical balance

audit_responsive_visibility

Flag content visible on desktop but hidden on mobile across breakpoints—catches responsive-hiding bugs that only surface on real devices

audit_tap_targets

WCAG 2.5.5 / 44px tap-target audit—a per-element fix table with the exact CSS to reach the minimum, worst-first

audit_typography

Typographic-scale report—detects the modular ratio, off-scale sizes, line-height drift, and bloated weight ladders

audit_content

Per-item UX-writing verdicts—metrics need a number, CTAs stay action-led, prose drops passive voice and jargon, with rewrites

audit_asset_integrity

Detect content sliced off inside a correctly-sized export—luminance variance flags a Figma export that ended mid-form

audit_device_frame

Catch content cropped inside a device mockup—aspect-ratio cover loss, baked-in pan/zoom drift, and edges sliced at the frame

audit_consistency

Audit multiple routes for cross-page consistency—content-container width and hero heading tier against the inferred canonical

audit_video_playback

Render in headless Chromium and check every <video> actually advances—classifies each clip playing, paused, stalled, empty, or error

suggest_contrast_fix

Given failing WCAG pairs, return the minimal color change that clears the target ratio—the smallest foreground shift, with a background alternative

audit_screen

Score a rendered iOS or Android screen from an accessibility snapshot—44/48pt targets, contrast, visual rhythm

audit_ios_screen

Score a captured iOS screen snapshot—44pt targets, contrast, visual rhythm—with device-capable capture orchestration

audit_ios_a11y

Score an iOS accessibility snapshot—missing labels/traits, sub-44pt targets, per-text contrast, Dynamic-Type clipping, VoiceOver order

audit_ios_privacy

Audit Info.plist or Expo app.json—usage-string honesty, ATS, bundled secrets, undisclosed data-egress

audit_rn

Audit React Native / Expo source—touchable a11y, 44/48pt targets, font scaling, safe areas, dark mode

audit_parity

Compare iOS and Android snapshots against named spatial relationships—catches cross-platform layout drift past device-verified claims

audit_contract

Verify a wire contract is identical across iOS, proxy, and Android—flags missing tokens, schemaVersion drift, and prefix-ordering bugs

audit_api_contract

Run adversarial queries against a live endpoint—flags responses that pass shape but are confidently wrong

evaluate_design

Score a design description against relevant principles and patterns

score_creative

Score prompts, scripts, and concepts for hook strength, benefit clarity, channel fit, audience fit, and brand fit

score_page

Score a page across 7 categories—structure, type, color, spacing, accessibility, responsive, tokens—each rated 0–10, derived deterministically

Watch it work

No Figma file. No designer.

One prompt builds a real SwiftUI app—then Raven audits every screen against 73 principles and 13 patterns, flags the issues, and guides the fixes. Recorded live on the iPhone 17 Pro simulator.

get_principles · evaluate_design

Build from a prompt, design-guided

A single prompt scaffolds a full SwiftUI app—Raven's principles steer layout, color, and type from the first line of code.

get_design_system · get_pattern

Design system applied, not guessed

Activity rings, KPI cards, dark-theme elevation—every choice traced to a principle: 44px targets, 60/30/10 color, Miller's Law.

audit_ios_screen · audit_screen

Real screens, audited live

The Workouts tab built and verified end-to-end—progressive disclosure, smart defaults, and 44pt targets checked against the HIG.

get_pattern · audit_typography

Patterns with checklists

Need a dashboard or streak system? Raven returns the relevant pattern, its do's and don'ts, and the research notes before a pixel is drawn.

audit_ios_a11y · audit_contrast · audit_tap_targets

Accessibility checked after build

Raven audits VoiceOver labels, Dynamic Type, contrast ratios, tap-target sizes, and per-screen scores after the UI exists.

evaluate_design

Evaluated against 73 principles

The finished app scored against 73 principles and 13 patterns. Raven flags pure-black backgrounds, color-only indicators, and motion gaps—then fixes them.

Illustrative Outputs

Example pages Raven can guide

Six demo pages showing different Raven-guided prompts. They are examples, not customer proof.

Legal

Harrison & Cole

Full-service litigation firm

Wedding

Elara & Co.

Luxury wedding planning

Food & Beverage

Ember & Grain

Specialty coffee roaster

SaaS

Flux

Real-time analytics platform

Fitness

FORGE

Performance training studio

Real Estate

Oleander Residence

Estate listing concept

Token Registry

Twelve design-system token sets, queryable

Ask for Apple HIG, Material, Stripe, Linear, Vercel, GitHub Primer, and more as W3C DTCG tokens or CSS variables.

Apple HIG

Platform

iOSmacOSpremium

Material Design 3

Platform

Androiddynamic-color

Stripe

Fintech

professionalclean

Linear

Productivity

darkminimal

Airbnb

Consumer

warmtrustworthy

Spotify

Consumer

darkvibrant

Vercel

Developer

monochromeminimal

GitHub Primer

Developer

enterpriseaccessible

Notion

Productivity

warmcontent-first

shadcn/ui

Component Library

tailwindradix

Tailwind CSS

Framework

utility-firstcomprehensive

Supabase

Developer

darkgreen-accent

The Story

Named for the creature that bridges worlds

Across Norse, Celtic, and Native American traditions, the raven carries knowledge from hidden places and brings it into the light.

Odin's ravens Huginn and Muninn—Thought and Memory—fly across all nine realms at dawn and return to whisper everything they've seen. The Morrígan takes raven form to decide fate. Yéil stole the sun from darkness and gave it to everyone.

Raven MCP: principles, tokens, audits, and taste rules exposed as tools your coding agent can call.

Norse

Huginn & Muninn

Thought & Memory—Odin's ravens that fly across all nine realms and return with knowledge

Celtic

The Morrígan

Sovereignty & Prophecy—the triple goddess who takes raven form to decide fate

Tlingit

Yéil the Transformer

Light from Darkness—Raven stole the sun, moon, and stars and gave them to everyone

Open Source

Free. All of it.

Every tool, token, and principle is included under the MIT license. No account, hosted plan, or usage meter.

70Tools

129Principles

9Knowledge Layers

22Patterns

Use Raven to audit AI-generated interfaces, fetch token systems, score design choices, and cite the rule behind each finding. Install in 30 seconds.

Need something custom?

Custom Design Systems

Get a Raven-compatible design system for your brand: tokens, principles, and evaluation rules matched to your product.

Get in touch →

Questions

Frequently asked questions

Everything you need to know about Raven, the design-intelligence MCP server.

What is RavenMCP?

RavenMCP (Raven) is an open-source Model Context Protocol (MCP) server. Add it to Claude or Cursor, and your agent can call 70 local tools for design principles, UI patterns, design-system tokens, content voice, research methods, service blueprints, multi-platform audits, and project-specific taste checks.

How do I install RavenMCP?

Install Raven in one command: claude mcp add raven -- npx -y raven-mcp. It runs through npx, so there's nothing to clone or build. Full setup instructions are in the documentation.

Is RavenMCP free?

Yes. RavenMCP is 100% free and open source under the MIT license. Every tool, token, and principle is included — no tiers, no usage limits, and no account required.

Which AI agents work with RavenMCP?

Raven works with any client that supports the Model Context Protocol — Claude (Claude Code and the Claude desktop app), Cursor, and any other MCP client. Once installed, the agent can call Raven's 70 tools directly during a conversation.

What platforms can RavenMCP audit?

Raven can audit web pages and layouts, iOS/SwiftUI screens, Android screens, and React Native interfaces — checking them against design principles and UI patterns, and flagging issues with contrast, tap targets, typography, and accessibility.

What design systems does RavenMCP support?

Raven includes tokens from 12 named systems in W3C DTCG format, including Apple HIG, Material, Stripe, Linear, Vercel, GitHub Primer, Tailwind, and shadcn/ui. It also exposes 129 design principles and 22 reusable UI patterns.

Get Started

Add design checks
to Claude

Open source. Zero runtime dependencies. One MCP install for Claude Code, Claude Desktop, Cursor, and compatible clients.

Install Raven

Pair-designwith your coding agent

Select an element. Edit its tokens and styles.

Without Raven, and with it.

Turn your taste into audit rules

A recipe that names its price

Nine layers, one MCP server

Principles

Patterns

Content Systems

Research & Data

Service Design

Brand & Visual

Business Strategy

Tokens

Render & Audit

Seventy tools, organized by job

No Figma file. No designer.

Build from a prompt, design-guided

Design system applied, not guessed

Real screens, audited live

Patterns with checklists

Accessibility checked after build

Evaluated against 73 principles

Example pages Raven can guide

Twelve design-system token sets, queryable

Named for the creature that bridges worlds

Huginn & Muninn

The Morrígan

Yéil the Transformer

Free. All of it.

Custom Design Systems

Frequently asked questions

What is RavenMCP?

How do I install RavenMCP?

Is RavenMCP free?

Which AI agents work with RavenMCP?

What platforms can RavenMCP audit?

What design systems does RavenMCP support?

Add design checksto Claude

Add design checks
to Claude