Luma Design System

Teams are now designing and prototyping with AI tools. It just does not make sense to spend hours designing components in Figma when you can leverage AI to build components and prototypes. The challenge is how to give AI agents context about the brand and guidelines. How can we enable teams to build consistent, close-to-production designs and prototypes fast, which can be tested quickly with customers.

Without a shared system, every AI tool is working blind. It generates something that looks reasonable but does not follow the brand, uses hardcoded values instead of tokens, and breaks the moment someone else touches it. The drift compounds. The product starts to look like it was built by five different tools, because it was.

The other side of this is the designer's time. Designers have spent years building component libraries by hand. A Button with every variant, every state, every size, all documented manually in Figma. That time should be spent on product decisions, not production work that AI can now handle.

Luma is a design system built to give AI tools the context they need to generate consistent, on-brand, production-ready output. Every team member, whether a designer, developer, or AI tool, works from the same single source.

The CLAUDE.md file at the root of the project defines the token conventions, component patterns, and design rules. Any AI coding tool that reads it generates on-spec code without manual correction. A developer using Cursor or Claude Code does not need to know the design system by memory. They prompt, the tool reads the brief, and the output follows the system.

Design and code are connected in both directions through Figma MCP and Code Connect. A designer prompts Claude Code, which reads the system and generates components directly in Figma, already wired to the real codebase and following the token system. Changes in Figma reflect in code. When a designer selects a component in Dev Mode, they see the real import code, not a static spec. Designers no longer spend weeks building component libraries by hand.

Started with the full token infrastructure before writing a single component. Six token files covering colour, typography, spacing, radius, shadow, and motion. Two layers: primitive tokens hold the raw values, semantic aliases are what components reference. When any decision changes, it changes in one place and updates everywhere. Dark mode works out of the box across every component with no overrides needed.

Each component wraps a Radix UI primitive so keyboard navigation, ARIA roles, and focus management are included by default. Components live directly in the project, not inside a third-party package, so the team has full control and nothing breaks when libraries update upstream.

The library covers the full surface a product team needs, from atomic components like Button, Badge, and Input through complex ones like Dialog, Command, and Form with validation. Every component is documented in Storybook with stories covering real use cases across every state, not just the happy path.

43 components. 240+ Storybook stories. 1,500+ searchable icons. Zero hardcoded colour values anywhere in the component layer. Visual regression on every push via Chromatic.

Any team member can now install the package with one command and start building features that match the spec, whether they are writing code by hand, using Cursor, or prompting Claude. Designers can generate Figma components without building them manually. Developers get typed components with dark mode and accessibility included by default.

The system gives AI tools what they have always been missing: a clear brief. That is what makes the difference between AI that generates something generic and AI that builds exactly what the product needs.