Create UI: a hand-crafted Figma design system and an AI-native React library, in sync

Overview

Create UI is a design system in two parts: a Figma file and an installable React library built on Tailwind CSS and Radix UI. They share the same tokens, names and structure, and AI coding agents can read the library through an MCP server and an agent skill. [1]

It is my own product, not a client project. I designed the logo, the brand and every component, variant and token by hand in Figma. The code side was built AI-native: expert developers wrote the React library together with AI, so that coding agents can read it and use it correctly.

The challenge

Most teams have a design system twice: once in Figma and once in code, maintained by different people and slowly drifting apart. Now there is a third reader, the AI agent writing the UI, and it can't see either of them.

• Drift: a button in Figma and a button in code rarely have the same sizes, states and names.
• Guessing agents: without context, AI tools invent components instead of using the ones you have.
• Scale: a useful system needs every state, size, theme and screen size, which quickly runs into thousands of variants.
• Speed: as a product, it had to ship early and keep improving in public.

Goals

• One token foundation for Figma, code and agents.
• The same component names, props and variants on both sides.
• Responsive radius, spacing and typography, light and dark themes, built in rather than bolted on.
• Install in one command and let AI agents build with the real components.
• Ship small, release often, and grow from components to blocks and AI patterns.

Approach

1. Tokens first

Colour, type, spacing, radius and shadow were defined as variables before any component existed. Components only reference tokens, so a theme change reaches every screen in Figma and every component in code. [1]

2. One name for one thing

A component has the same name, variants and states in Figma and in React. Designers and developers talk about the same Button, and an agent reading the docs finds what the designer drew.

3. Hand-crafted design, AI-native code

The interface is drawn by hand, component by component; no screen in Create UI was generated. The code side was built by expert developers working together with AI, and every component is described for machines too: an MCP server and a skill file tell coding agents what exists and how to use it, so they compose with the system instead of guessing. [1]

4. Ship in public

Instead of waiting for a perfect 1.0, Create UI opened as a pre-sale with 40+ components and grew release by release, with a public changelog and roadmap. [2]

The solution

Logo and brand

I designed the Create UI logo, a selection frame with a cursor, the way a designer marks something on a canvas, and the brand around it: deep indigo gradients, a fine grid and the product's own components as illustration. The same pieces carry the website, social profiles and launch posts.

Figma design system

Auto-layout components with variables, every state and size as a variant, light and dark modes, a type scale and usage notes. The file now holds more than 18,500 components and variants and 950+ variables and styles, and every component ships with guidelines and an interactive example. [1]

Components

Buttons, form controls, badges, chips, toasts and file upload share one visual language: the same radius, focus ring and colour logic. Each one is designed by hand with its real states, from loading and error to disabled.

Navigation and data

Product screens need more than controls. Tables with selection, filters and bulk actions, sidebars and headers were built from the same parts, so a dashboard assembled from Create UI looks designed, not stitched together.

Responsive tokens and themes

Radius, spacing and typography are responsive: each has its own values for desktop, tablet and mobile on a 4 px grid, so the same component is tuned for every screen without a separate mobile version. Twenty-plus prebuilt themes and dark mode sit on the same tokens. [1]

Blocks

Version 1.5 added ready-made sections: 73 code blocks in seven categories and 58 Figma blocks, built only from the system's own components. [2]

React library, CLI and MCP

The code library is built on React, Tailwind CSS v4 and Radix UI and was written AI-native from the start by expert developers working together with AI. A CLI creates a new app or adds components to an existing one, writing the design tokens into the project's stylesheet. [3]

The same CLI installs an MCP server and an agent skill, so coding agents such as Claude build with the real components. AI components like chat, prompt input, markdown and chain of thought cover the screens AI products need most. [1] [2]

Results

• Four releases between June and September 2026: v0.5, v1.0, v1.1 and v1.5. [2]
• From 40+ components and 700+ tokens at pre-sale to 49 free and 35 Pro code components, 73 Pro blocks and 18,500+ variant combinations. [2]
• A free React library anyone can install, and a paid Pro tier for design, code or both. [1]
• Rated 5.0 on Product Hunt. [4]

Key takeaways

• Sync is a naming problem before it is a tooling problem.
• Hand-crafted design and AI-native code work together: people design the system, agents use it.
• Shipping early and in public beats polishing in private.