WebMCP v1.0
Design Systems for AI Agents
The first agent-ready design toolkit. 16 MCP tools that generate complete brand systems from a single color. Built for Claude, GPT, and any MCP-compatible agent.
16
MCP Tools
11
Export Formats
0
API Keys Required
Live Demo: Real Tool Calls
This entire design system was generated by actual WebMCP tool calls. Not mocked. Not simulated.
Agent Workflow
Seed: #4A90D9 → Harmony: analogous → 5 tools → Complete system
1
harmony.generate
✓ 5 color scales
2
tempo.generate
✓ Type + spacing
3
chord.generate
✓ 6 shadow levels
4
riff.generate
✓ Motion tokens
5
cadence.generate
✓ Grid system
Generated Palette
55 color tokens across 5 scales, generated in OKLCH perceptual color space.
Primary
Secondary
Accent
Neutral
Generated Shadows
Elevation system derived from the palette's neutral scale.
Generated Motion
Easing curves and duration tokens. Click to preview.
Generated Grid
Responsive 12-column system with breakpoint-aware gutters.
12
Columns (lg)
1.5rem
Gutter (lg)
1280px
Max Width
CSS Output
The complete design tokens generated by WebMCP tools.
Loading generated CSS...
Ready to Build?
Point your agent at our WebMCP manifest and start generating design systems.