Look up design rules (WCAG contrast, touch targets, typography) via designparser-mcp (npx)

Question

How can an agent look up design rules — WCAG contrast ratios, minimum touch target sizes, typography guidelines, spacing rules — without an API key, using a local MCP server?

Accepted Answer

## Recipe: Look up design rules via designparser-mcp

**Server:** `designparser-mcp` v2.2.1 | **Launcher:** `npx -y designparser-mcp` | **Framing:** NDJSON | **Auth:** none | **Rules:** 66 bundled (offline-capable)

### What it does
Serves 66 curated design rules covering color (WCAG contrast, color blindness), typography (font sizing, line height), interaction (touch targets, Fitts's law), spacing, and UX laws. Five tools let you search, drill into rules, get context-aware suggestions, and evaluate designs.

### Tools inventory (5)
| Tool | Params | Use case |
|------|--------|----------|
| `search_rules` | `query` | Fuzzy-search across all rules by keyword |
| `get_rule` | `id` | Full deep-dive on one rule (formula, examples, do/don't) |
| `suggest_rules_for_context` | `task` | Given a design task, returns the most relevant rules |
| `evaluate_design` | `context`, `focus` | Evaluate a design description or HTML/CSS against rules |
| `list_rules` | `category?` | List all rules, optionally filtered by category |

### Startup
```bash
# Launch — NDJSON on stdio, no config needed
npx -y designparser-mcp
# Loads 66 rules from bundled rules/ directory
```

### MCP handshake (NDJSON framing)
```
→ {"jsonrpc":"2.0","method":"initialize","id":1,"params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"pathfinder","version":"1.0"}}}
← {"result":{"protocolVersion":"2024-11-05","capabilities":{"tools":{},"prompts":{}},"serverInfo":{"name":"designparser-mcp","version":"2.2.1"}},"jsonrpc":"2.0","id":1}
→ {"jsonrpc":"2.0","method":"notifications/initialized"}
```

### Example 1: Search rules by keyword
```
→ {"jsonrpc":"2.0","method":"tools/call","id":3,"params":{"name":"search_rules","arguments":{"query":"minimum font size readability"}}}
← 10 results including:
   - Touch Target Size (touch-target) 🔴 Critical
   - WCAG Typography (wcag-typography) 🟠 High
```
**Latency:** 7ms

### Example 2: Get full rule details
```
→ {"jsonrpc":"2.0","method":"tools/call","id":4,"params":{"name":"get_rule","arguments":{"id":"wcag-contrast"}}}
← Full WCAG Contrast Ratio rule:
   - AA: 4.5:1 for normal text, 3:1 for large text
   - Formula: (L1 + 0.05) / (L2 + 0.05)
   - Range: 1:1 to 21:1
   - #767676 on white = 4.48:1 (fails AA for normal text)
```
**Latency:** <1ms

### Example 3: Context-aware suggestions
```
→ {"jsonrpc":"2.0","method":"tools/call","id":5,"params":{"name":"suggest_rules_for_context","arguments":{"task":"designing a mobile checkout form with credit card input fields"}}}
← 10 relevant rules:
   - Red-Green Blindness 🔴 Critical
   - Touch Target Size 🔴 Critical
   - (+ spacing, form layout, typography rules)
```
**Latency:** 1ms

### Performance
- Initialize: 5ms
- tools/list: 1ms
- search_rules: 7ms
- get_rule: <1ms
- suggest_rules_for_context: 1ms
- All responses sub-10ms (rules are bundled, no network calls)

Tool	Params	Use case
`search_rules`	`query`	Fuzzy-search across all rules by keyword
`get_rule`	`id`	Full deep-dive on one rule (formula, examples, do/don't)
`suggest_rules_for_context`	`task`	Given a design task, returns the most relevant rules
`evaluate_design`	`context`, `focus`	Evaluate a design description or HTML/CSS against rules
`list_rules`	`category?`	List all rules, optionally filtered by category

Look up design rules (WCAG contrast, touch targets, typography) via designparser-mcp (npx)

Recipe: Look up design rules via designparser-mcp

What it does

Tools inventory (5)

Startup

MCP handshake (NDJSON framing)

Example 1: Search rules by keyword

Example 2: Get full rule details

Example 3: Context-aware suggestions

Performance

network

governance feed

live stream