Skip to content
helixui

The first design system AI agents actually understand

May 25, 2026

Search “AI-friendly design system” today and you’ll find a dozen projects whose AI strategy is “we host docs that AI can read.” Which is true — agents can read docs. But asking an agent to use a design system by reading its docs is like asking a developer to use a SDK by reading its blog. Sometimes it works. Often the developer hallucinates.

helixui’s bet is different: components, tokens, and validation are a service the agent can call, not a website it has to scrape.

What the agent gets

Drop @helixui/mcp into your project’s MCP config (see the per-tool integration guides) and the agent has:

helixui.search       — BM25 over every component spec.
helixui.validate     — parse a JSX snippet, report unknown components/props.
helixui.parse_dsl    — turn compact DSL into JSX.
helixui.emit_dsl     — turn JSX into compact DSL.
helixui.express_dna  — turn a DNA shorthand into a DESIGN.md.
helixui.parse_design — parse DESIGN.md into JSON.
helixui.list_presets — list the five built-in DNA presets.
helixui.derive_dna_from_image — infer the closest DNA from a screenshot.

Plus six static resources (helixui://components-manifest.json, helixui://tokens-manifest.json, etc.) for one-shot lookups.

Concrete example

Open a fresh Claude Code session in a project that has @helixui/mcp configured. Ask:

Build a settings page with email notifications toggle, two-factor auth section with a Configure button, and a danger zone with a Delete account button.

Without helixui’s MCP, what you’d see (we tested):

// Hallucinated, doesn't compile.
import { ToggleSwitch, DangerZone, SectionHeader } from '@helixui/ui';
<ToggleSwitch label="Email notifications" />
<DangerZone>
  <Button kind="destructive">Delete account</Button>
</DangerZone>

The model invented @helixui/ui (the package is @helixui/core), <ToggleSwitch> (it’s <Switch>), <DangerZone> (doesn’t exist — it’s a <Card> styled with tone="danger"), and kind="destructive" (it’s tone="danger").

With helixui’s MCP wired up, the same prompt produces:

import { Card, Stack, Switch, Text, Button, Field } from '@helixui/core';


<Stack gap={6}>
  <Field label="Email notifications">
    <Switch />
  </Field>


  <Card>
    <Stack direction="row" justify="between" align="center">
      <Stack gap={1}>
        <Text weight="semibold">Two-factor authentication</Text>
        <Text size="sm" tone="muted">Required for admin accounts.</Text>
      </Stack>
      <Button variant="outline">Configure</Button>
    </Stack>
  </Card>


  <Card variant="outlined" style={{ borderColor: 'var(--helixui-color-border-danger)' }}>
    <Stack gap={3}>
      <Text weight="semibold" tone="danger">Danger zone</Text>
      <Button tone="danger">Delete account</Button>
    </Stack>
  </Card>
</Stack>

The difference isn’t that the AI is smarter. It’s that it queried helixui instead of remembering helixui. Three of the four lookups it made (helixui.search "toggle", helixui.search "danger", helixui.validate <generated JSX>) happened transparently.

Why this works

Three forces compound:

  1. Specs live next to code. Every helixui component has a sibling spec.md. The spec’s frontmatter declares props, tokens, and accessibility constraints. When we ship a new component, that spec ships with it. The MCP server reads from the same files the docs site reads from — there’s no drift.
  2. Validation is a tool call, not a runtime crash. helixui.validate can be called on a generated snippet before it’s written. The agent sees its mistake instantly and self-corrects.
  3. The DSL collapses tokens. Our compact prompt DSL (see @helixui/prompt) gives the model a half-the-tokens shorthand round-tripping JSON to JSX, so longer contexts go further.

Benchmark — coming, not done

We’re building a reproducible benchmark suite that scores AI tools by “generations that compile + use correct helixui APIs on the first try.” The harness, the prompt set, and the per-version results will live in the public repo so anyone can re-run it.

We’re not publishing numbers before the suite is real. We’ve seen the qualitative shift on our own internal use — Cursor + helixui MCP behaves much more like a teammate who’s read the system, less like a hopeful guesser. But we’d rather show you the methodology than ask you to trust an unaudited figure.

If you want to help — open the benchmark issue on GitHub.

What this isn’t

  • Not a replacement for understanding. If you’re a designer or developer, you should still read the docs. helixui is a tool, not a substitute for reasoning.
  • Not free of hallucination. The model can still invent a token that doesn’t exist. helixui.validate catches the structural ones; the semantic ones are still up to you.
  • Not an excuse to skip review. Treat agent-generated PRs the same as any other PR.

Try it

Drop the Cursor integration template or the Claude Code template into your repo. Run it for a week. Open an issue if you hit anything weird; that’s how we close the gap.

If you’re working on another design system and want to add MCP support, the helixui MCP server is permissively licensed; the protocol is open. Don’t pay us — pay it forward.