webMCP · v1.0
Design systems your agent can drive.
Nine webMCP tools that generate a working brand system from a single color, right in the page — and a ten-tool MCP server for Claude, Cursor, and any MCP-compatible agent.
9webMCP 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
✓ 5 color scales
2
tempo
✓ Type + spacing
3
chord
✓ 6 shadow levels
4
riff
✓ Motion tokens
5
cadence
✓ 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
One tool, four names
The same tools reach you four ways. Here is what each one is called on each surface.
| Tool | What it does | In the browser | webMCP (in the page) | MCP server | API |
|---|---|---|---|---|---|
| Harmony | Color system from one color | /tools/harmony | harmony | harmony_generate_palette | /v2/tools/harmony |
| Duet | Font pairing and type scale | /tools/duet | duet | duet_pair_fonts | /v2/tools/duet |
| Tempo | Spacing system | /tools/tempo | tempo | tempo_generate_scale | /v2/tools/tempo |
| Chord | Shadow and elevation | /tools/chord | chord | chord_generate_shadows | /v2/tools/chord |
| Riff | Motion and easing | /tools/riff | riff | riff_generate_motion | /v2/tools/riff |
| Cadence | Responsive grid | /tools/cadence | cadence | cadence_generate_grid | /v2/tools/cadence |
| Bridge | Dark mode | /tools/bridge | bridge | bridge_generate_theme | /v2/tools/bridge |
| Compose | Export the design system | /tools/compose | compose | compose_export | /v2/tools/compose |
| Pitch | Contrast checking | /tools/contrast-checker | — | pitch_audit_contrasta11y_validate | /v2/tools/pitch |
| Motif | Component patterns | — | — | — | /v2/tools/motif |
| Score | Icon library recommendations | — | — | — | /v2/tools/score |
| Overture | Guided brand builder | /ensemble/brand | overture | — | /v2/design-system |
- In the browser, nine: the eight builders and the contrast checker. Free, no account.
- webMCP, nine: the eight builders and Overture, callable by an agent in the page.
- MCP server, ten: the eight builders, a palette contrast audit, and a free single-pair check.
- API, eleven: the eight builders, Pitch, Motif and Score.
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.