# Agentic Design System

An MCP server that renders web and SwiftUI evidence, runs visual checks, and ties UI decisions back to project files.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 6
- Author: aa-on-ai
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/aa-on-ai/agentic-design-system/tree/HEAD/packages/ads-mcp
- Updated: 2026-09-21
- HTML: https://affpapa.org/en/nevibecode/mcp/agentic-design-system

## What it does

Agentic Design System exposes three tools for coding agents. `ads_render` captures an allowed URL, a root-confined TSX component, or a SwiftUI target. `ads_evaluate` normalizes a run, can compare it with a baseline, and can call a configured visual judge. `ads_trace` checks final decisions against files recorded during rendering. Run data lives under `.ads/runs`, so it can be reopened by fresh client or server instances on the same project filesystem.

Start the local stdio server with `--root /absolute/path/to/project`. Before the first web capture, run `npx --yes ads-mcp@0.3.0 doctor` and then `npx --yes ads-mcp@0.3.0 setup` to prepare Chromium. An existing compatible executable can be selected with `PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH`.

Web runs can request several UI states and viewport sizes. The server applies gates for axe, overflow, landmarks, live regions, CLS, and touch targets; missing dependencies, timeouts, or failed gates produce a blocked run. SwiftUI uses an external snapshot adapter. The filesystem store fits one local project root, while hosted or replicated use needs shared durable storage and concurrency controls.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add ads-mcp -- npx -y ads-mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add ads-mcp -- npx -y ads-mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ads-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "ads-mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "ads-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "ads-mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add ads-mcp npx -y ads-mcp
```

## When to use it
- render several UI states at chosen viewport sizes
- check accessibility and visual gates on a web run
- compare a new render with a baseline
- trace a UI decision to source and artifact files
- inspect a SwiftUI screen through a snapshot adapter

## Example prompts
- Render `http://127.0.0.1:3000/orders` with `default`, `loading`, `empty`, and `error` states using `ads_render`.
- Evaluate `run_...` against a rubric for the orders workflow with `ads_evaluate`.
- After reading the run manifest, use `ads_trace` with `skills/design-review/SKILL.md`, `brief.md`, and `src/Orders.tsx` to verify the decision provenance.

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74569
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51104
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16073
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4406
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3851
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3451

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md