unityspec

Unity Spec · Automated Design-to-Code

From Figma to real code.
Automatically.

Unity Spec unifies design and engineering through automated, spec-driven code generation. Sync tokens from Figma, define components in MDX, preview in Storybook, and generate multiplatform code.
Inspired by advanced Design Ops workflows like Zé Delivery.

Get startedSee automationnpm i unityspec
Auto-generated React code
// Generated by Unity Spec pipeline
export function Button({ variant = "primary", size = "md" }) {
  const isPrimary = variant === "primary";
  const base = "inline-flex items-center justify-center rounded px-4 py-2 text-sm";
  const primary = "bg-[#2F6FED] text-white";
  const secondary = "border border-[#2F6FED] text-white";

  return (
    <button className={[base, isPrimary ? primary : secondary].join(' ')}>
      Checkout
    </button>
  );
}

Why Unity Spec

Teams usually bridge design and code manually using screenshots, annotations, documentation scattered across tools. Unity Spec replaces this noise with a unified spec layer that both humans and AI understand.

Unified spec layer

Tokens, props, variants and behavior described once in MDX.

Automated builds

Generate React, React Native, SwiftUI and more with one CLI command.

Storybook-native

Storybook becomes the single visual source of truth.

Automated Design → Code pipeline

Unity Spec integrates with Figma Variables, Tokens Studio and Storybook to create an automated pipeline. Similar to workflows used by Zé Delivery, changes flow from Design Ops → Specs → Code.

1

Sync tokens

Pull design tokens from Figma Variables or JSON.

2

Define specs

Describe components, props, variants and a11y in MDX.

3

Preview in Storybook

Use Storybook as the canonical playground and documentation.

4

Generate code

Generate React, RN, SwiftUI, Flutter implementations.

Features

Documentation

Explore the Unity Spec documentation to understand how tokens, specs, Storybook and the CLI work together.

Getting started

Overview of core concepts and installation.

Tokens

Sync design tokens from Figma Variables, Tokens Studio or JSON.

Specs

Define component behavior, props and variants in MDX.

CLI

Reference for Unity Spec commands and CI usage.

Storybook

Use Storybook as the visual hub for your components.

Examples

End-to-end examples of Design → Spec → Storybook → Code.

Install and CLI

Add Unity Spec to your workspace and start automating.

Install

# npm
npm i -D unityspec

# yarn
yarn add -D unityspec

# pnpm
pnpm add -D unityspec

Core CLI commands

unityspec tokens pull --config unityspec.config.json

unityspec ai build --target=react --input=specs/button.mdx --outdir=builds