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.
// 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.
Sync tokens
Pull design tokens from Figma Variables or JSON.
Define specs
Describe components, props, variants and a11y in MDX.
Preview in Storybook
Use Storybook as the canonical playground and documentation.
Generate code
Generate React, RN, SwiftUI, Flutter implementations.
Features
- MDX-based specs fully compatible with Storybook Docs.
- Token sync from Figma Variables, Tokens Studio or JSON.
- CLI for token pipelines, builds and CI automation.
- Optional AI-assisted generation for multiple platforms.
- Monorepo-friendly: works with pnpm or yarn workspaces.
- Enterprise-ready: scalable for design systems and white-labels.
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