Agentic Design System — Claude Code MCP server
An MCP server that renders web and SwiftUI evidence, runs visual checks, and ties UI decisions back to project files.
claude mcp add ads-mcp -- npx -y ads-mcpWhat Agentic Design System 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 [email protected] doctor and then npx --yes [email protected] 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.
What it helps with
- 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 for the agent
- Render
http://127.0.0.1:3000/orderswithdefault,loading,empty, anderrorstates usingads_render. - Evaluate
run_...against a rubric for the orders workflow withads_evaluate. - After reading the run manifest, use
ads_tracewithskills/design-review/SKILL.md,brief.md, andsrc/Orders.tsxto verify the decision provenance.
How to install Agentic Design System
Platform CLI
claude mcp add ads-mcp -- npx -y ads-mcpPlatform CLI
codex mcp add ads-mcp -- npx -y ads-mcpConfig file
{
"mcpServers": {
"ads-mcp": {
"command": "npx",
"args": [
"-y",
"ads-mcp"
]
}
}
}Config file
{
"servers": {
"ads-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"ads-mcp"
]
}
}
}Platform CLI
gemini mcp add ads-mcp npx -y ads-mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about Agentic Design System
How do I install Agentic Design System in Claude Code?
Run claude mcp add ads-mcp -- npx -y ads-mcp.
What does Agentic Design System do?
It renders web, TSX, and SwiftUI targets, applies deterministic gates, evaluates captured runs, and connects decisions with project files.
What is required before a web render?
Chromium must be prepared before the first web capture. Run npx --yes [email protected] doctor, then npx --yes [email protected] setup; you can instead point PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH at a compatible executable.
