Design intelligence for AI-generated UI — principles, patterns, content, brand, design tokens.
Design intelligence for AI-generated UI — principles, patterns, content, brand, design tokens.
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.
Compare MCP servers by category, or browse hosted MCP servers if you prefer an endpoint over a local process.
Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.
| Tool | What it does |
|---|---|
| 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 comp |
| 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; containerMaxWi |
| 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, th |
| audit_layout | Evaluate visual rhythm, alignment, and optical balance; detects orphan-stretch (a lonely last-row grid/flex card stretching far wider than siblings) |
{
"mcpServers": {
"raven": {
"command": "npx",
"args": ["-y", "raven-mcp"],
"env": {
"FIGMA_TOKEN": "your-value"
}
}
}
}Add to claude_desktop_config.json, then restart Claude Desktop.
| Variable | Description | Required |
|---|---|---|
| FIGMA_TOKEN | Credential the server authenticates with. | Yes |
Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.
Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.
Manages courses, assignments, enrollments, and grades within Canvas using the Canvas API.
Provides a unified TypeScript interface for LLMs to interact with various 3D software applications.
Generates Vue 3 components from Figma designs, adhering to Hostinger's design system.
Enables Cursor AI to interact with Figma, allowing programmatic design modification and data extraction.