Skip to content
helixui

Why we built helixui

May 25, 2026

In 2026, more lines of UI code are read by language models than by humans. That’s not a prediction — it’s already true in any team that runs Cursor, Claude Code, Copilot, or Windsurf full-time.

Yet most design systems still pretend it isn’t.

Their docs live on websites scraped by training crawls a year ago. Their tokens live in theme.ts files an LLM has to introspect at runtime. Their components ship without machine-readable contracts — just prop tables in markdown that the model has to parse out of HTML.

A model trying to use one of these systems in a fresh session is working from a stale, vague picture of a moving target. It guesses. It hallucinates props that look plausible. It invents tokens that don’t exist. It writes <Button variant="primary"> instead of tone="brand" because the docs page it remembers used a different naming convention.

We built helixui because we got tired of fixing those guesses.

What changes when AI is a first-class consumer

Three things.

Tokens are JSON, not code. Design tokens in helixui are W3C DTCG JSON — the closest thing to a standard the industry has. CSS variables, TypeScript types, the Figma library, the LLM manifest — all of those are build outputs from one source. An agent can answer “what’s color.bg.action.brand.hover?” by reading exactly one file, not by running a TypeScript compiler in its head.

Every component documents itself. Every component in @helixui/core owns a sibling spec.md. Frontmatter is machine-readable (props, slots, tokens used, accessibility). Body is human-readable (examples, caveats). The docs site, the LLM manifest (llms-full.txt), and our MCP server all read the same file. A new component is invisible to AI tools the day it lacks a spec — so specs stay current.

There’s an MCP server. @helixui/mcp is a dependency-free Model Context Protocol server. Agents can helixui.search for the right component, helixui.validate a generated JSX snippet before they write it to disk, helixui.express_dna to expand a theme shorthand into a DESIGN.md the project can commit. Queryable, validating, version-locked to whatever helixui you have installed.

What we kept that was already working

helixui isn’t an AI experiment dressed up as a design system. The fundamentals are conservative on purpose:

  • 80+ React components, accessible by default, keyboard-friendly, WCAG 2.1 AA out of the box.
  • CSS variables, not CSS-in-JS. Themes change without re-rendering.
  • MIT license.
  • One stylesheet to import. No special bundler config.
  • TypeScript strict throughout.

If you ignore the AI surface entirely, helixui is a competent design system. The AI surface is a force multiplier on top — not a tax.

What’s still rough

We’re shipping at 0.1.0. That means:

  • APIs will change before 1.0. We mark breaking changes as such in changesets; you’ll see them coming.
  • A few showcases (Figma sync, in particular) are mocks that document the intended API rather than fully working integrations.
  • The Figma library is small — we ship the tokens, not yet the components. Coming in 0.2.
  • No visual regression suite yet. Coming in 0.2.

The decisions you’ll find in MANIFESTO.md will not change. Everything else can.

How to try it

Bootstrap a fresh app:

Terminal window
npm create helixui-app my-app
cd my-app
npm run dev

Drop the AGENTS.md template into your repo. Open it in Cursor or Claude Code. Ask it to build something — anything. Watch it reach for the right helixui components on the first try.

That’s the bet.

Bugs? Open an issue. Disagreements? Open a discussion. Want to help? Look at GOOD_FIRST_ISSUES.md.

Thanks to everyone who reviewed early drafts and yelled at us about the parts we got wrong. You know who you are.