A traditional design system lives where the AI cannot reach it: a Figma library, a Storybook, a Notion page of rules. Your AI coding tool sees none of it. So it reinvents your components every time, slightly differently.
An MCP design system flips that. MCP — the Model Context Protocol — is the open standard that lets a tool like Claude Code or Cursor call a server for structured context mid-task. A design system served over MCP is one the AI can actually read while it codes.
Six tools, one design language
Windcraft runs as an MCP server — windcraft mcp — exposing six tools the AI calls on demand:
- get_design_tokens — the atoms: color, spacing, type, radius, shadow, z-index, as values.
- get_component_contract — a component recipe: variants, sizes, slots, rules, examples.
- get_design_rules — the analyzer rules that define what "consistent" means here.
- validate_component_code — checks a snippet against the contracts and rules.
- get_platform_mirror — the matching token/theme for the other platform (web or React Native).
- get_page_pattern — a page recipe: layout regions, states, microcopy, motion.
Why a server beats a style guide
A style guide is read once and forgotten. A server is queried every generation. The AI does not have to remember your radius scale or your button variants — it asks, gets a structured answer, and writes against it. The same answer, for every developer, on every prompt.
Windcraft covers web (Next.js, React, Tailwind, shadcn) and mobile (React Native, Expo). The token decisions cascade across both, so a primary button on your marketing site and in your app are the same primary button.
A design system the AI cannot read is documentation. A design system it can query is infrastructure.