webMCP · v1.0
Design systems your agent can drive.
Nine MCP tools that generate a working brand system from a single color — built for Claude, GPT, and any MCP-compatible agent.
9MCP tools
1color in
0API 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 the webMCP manifest and start generating design systems.