Skip to main content
Figma sync is live

The design system your AI agent actually uses.

Connect Figma and GitHub. Vois syncs your tokens automatically — and exposes them to Claude, Cursor, and your whole team via MCP. Ship UI that looks right on the first prompt.

Sign up freeSee how it works

Works with everything you already use

Figma
GitHub
Tailwind CSS
Claude
Cursor

Figma → GitHub → Code. Zero copy-paste.

Define tokens in Figma. Vois writes them to your repo and generates production-ready config files — automatically.

Figma Variables
color/primary/500
color/gray/100
spacing/4
.vois/system.json
{
  "global": {
    "color": {
      "primary-500": "hsl(220 90% 56%)",
      "gray-100": "hsl(220 14% 96%)"
    },
    "spacing": { "4": "16px" }
  }
}
tailwind.config.ts
@theme {
  --color-primary: hsl(220 90% 56%);
  --spacing-4: 16px;
}
Live sync active — Figma changes auto-create a pull request

See it in action

A visual editor for your design tokens. Automated audit tools for your code. Built for the way modern teams work.

Token editor

Your entire design system, in one place

Browse, search, and edit every token across your project. Global values, semantic mappings, and auto-generated CSS variables — visible and editable without touching code.

  • Color swatches with live hex preview
  • Semantic token mappings
  • Light and dark mode in sync
vois.app/tokens
Colors
Typography
Spacing

Global

color/primary/500
hsl(220 90% 56%)
#2563EB
color/gray/100
hsl(220 14% 96%)
#F9FAFB
color/gray/900
hsl(222 47% 11%)
#111827
color/error/500
hsl(0 84% 60%)
#EF4444
vois.app/audit
Codebase Audit3 violations
Button.tsx:23
- background: #2563EB+ var(--color-primary-500)
Card.tsx:45
- padding: 16px+ var(--spacing-4)
Nav.tsx:12
- font-size: 14px+ var(--type-sm)
Codebase audit

Stop hardcoding. Start catching.

Scan any file for hardcoded colors, spacing, and font sizes. Vois matches them to your token system and generates the exact fix — one click to apply, or batch-fix the whole codebase.

  • Detects hardcoded colors, sizes, and spacing
  • Shows the exact token substitution
  • One-click or batch fix across files

Everything your design system needs

From Figma sync to AI-ready tokens — Vois handles the whole pipeline.

Figma ↔ GitHub, always in sync

Import Variables directly from Figma. Push changes back. Designer updates auto-create pull requests for your team to review.

Your AI agent reads your tokens

Connect Vois to Claude Code, Cursor, or Claude Desktop via MCP. Your AI tool knows every color, spacing, and type token — and uses them.

One command to sync

Run npx vois sync to pull the latest tokens and regenerate your Tailwind v4 config, CSS variables, and TypeScript types.

Catch hardcoded values instantly

Scan any file for hardcoded colors, spacing, or font sizes. Get token suggestions and one-click fixes.

Preview components with real tokens

Drag components into a live workbench and see how they render with your actual design tokens — light and dark mode included.

Semantic typography tokens

Define font size, weight, and line-height as one semantic token. Use var(--type-body) instead of five separate variables.

Up and running in minutes

No config sprawl. No copy-paste. Connect once, sync forever.

Step 1

Connect Figma

OAuth in one click. Choose your file and Variable collection. Tokens import in seconds.

Step 2

Connect GitHub

Point Vois at your repo. It creates .vois/system.json and generates your Tailwind config automatically.

Step 3

Vibe code

Your AI reads tokens via MCP. Engineers run npx vois sync. Designers update in Figma or the web UI. Everyone ships faster.

Ship UI that looks right, every time.

Free to start. No credit card. Takes 2 minutes to connect Figma and GitHub.

Sign up free