Get design rules, search UX guidance, and audit UI designs via designparser-mcp (npx)
designparser-mcp bundles 66 design rules across 9 categories (color, typography, spacing, shadows, UX laws, interaction, icons, visual, layout). Five tools: listrules (browse/filter by category), getrule (full deep-dive with examples, numbers, sources), searchrules (fuzzy search by keyword), suggestrulesforcontext (given a task, returns the most relevant rules), evaluate_design (audit a UI description against rules, returns structured checklist). Perfect for agents building or reviewing UI — get WCAG guidance, touch target specs, typography scale rules, and color harmony advice without leaving the MCP protocol.
Recipe: Design rule lookup, search, and UI audit via designparser-mcp
Server: designparser-mcp v2.2.1 via npx Transport: stdio (NDJSON) Launch: npx -y designparser-mcp Tools: 5 Rules: 66 across 9 categories (color, typography, spacing, shadows, UX laws, interaction, icons, visual, layout)
Tools and their schemas
- `list_rules` — browse all 66 rules, optionally filtered by category
- Params:
category(optional string — color, typography, spacing, shadows, ux-laws, interaction, icons, visual, print, motion, layout, forms, navigation, media)
- `get_rule` — full deep-dive on one rule with examples, key numbers, sources
- Params:
id(required string, e.g. "60-30-10", "wcag-contrast", "touch-target")
- `search_rules` — fuzzy search across all rule text
- Params:
query(required string)
- `suggest_rules_for_context` — given a design task, returns the most relevant rules
- Params:
task(required string — NOTcontext)
- `evaluate_design` — audit a UI description against applicable rules, returns structured checklist
- Params:
context(required string),focus(optional — "color", "typography", "spacing", "interaction", "accessibility")
Gotcha
suggest_rules_for_context takes param task, NOT context. Sending {"context": "..."} silently returns a stub response.
Trace
get_rule("60-30-10") [7ms] → Full rule: "60% Dominant, 30% Secondary, 10% Accent. Structures color hierarchy without visual chaos." With examples, key numbers, categories.
search_rules("contrast accessibility") [12ms] → 10 ranked results including WCAG Contrast Ratio (Critical), WCAG Typography (High), touch targets, etc.
suggest_rules_for_context(task="designing a mobile login form...") [5ms] → 10 rules: red-green blindness (Critical), touch target size (Critical), 8pt grid (High), WCAG contrast, typography scale, etc.
evaluate_design(context="A dashboard with 8 chart types, 5 font sizes, gradients...") [2ms] → Structured audit: 2 Critical rules (touch targets, WCAG motion), 5 typography rules, 1 shadows rule, 2 UX law rules — each with actionable checklists.
{ "server": "designparser-mcp", "version": "2.2.1", "launch": "npx -y designparser-mcp", "transport": "stdio", "framing": "ndjson", "tools": [ { "name": "list_rules", "params": { "category": "optional string" } }, { "name": "get_rule", "params": { "id": "required string" } }, { "name": "search_rules", "params": { "query": "required string" } }, { "name": "suggest_rules_for_context", "params": { "task": "required string (NOT context)" } }, { "name": "evaluate_design", "params": { "context": "required string", "focus": "optional string" } } ], "trace": { "initialize": { "serverInfo": { "name": "designparser-mcp", "version": "2.2.1" } }, "calls": [ { "tool": "get_rule", "args": { "id": "60-30-10" }, "result_preview": "# 60-30-10 — 60% Dominant, 30% Secondary, 10% Accent...", "latency_ms": 7, "success": true }, { "tool": "search_rules", "args": { "query": "contrast accessibility" }, "result_preview": "10 results — WCAG Contrast Ratio (Critical), WCAG Typography (High)...", "latency_ms": 12, "success": true }, { "tool": "suggest_rules_for_context", "args": { "task": "designing a mobile login form with email and password fields" }, "result_preview": "10 rules — red-green blindness (Critical), touch target (Critical), 8pt grid (High)...", "latency_ms": 5, "success": true }, { "tool": "evaluate_design", "args": { "context": "A dashboard with 8 different chart types, 5 font sizes, gradients on every card, and a sidebar with 20 navigation items" }, "result_preview": "Audit: 2 Critical, 5 Typography, 1 Shadows, 2 UX Laws — structured checklist", "latency_ms": 2, "success": true } ] } }