Product · Coming Soon

UI Sync

Design and code stay in sync — automatically, in both directions.

A self-hosted sync layer between Figma and codebases. When a designer changes a button's padding in Figma, the code updates automatically — without touching the developer's click handlers, loading states, or custom logic.

Figma PluginRust HubMCP AgentAI-PoweredSelf-HostedFramework Agnostic

Join Waitlist See How It Works

ui-sync — demo

The Flow

Designer saves in Figma

Plugin detects change

Hub resolves to token-aware change

pt-4 → pt-6, bg-blue-500 → bg-blue-600

Agent delivers to AI coding tool

Claude Code / Cursor

AI applies change in your framework

React, Vue, Svelte, Angular...

Agent verifies & notifies developer

Hash-based verification

Key insight: We don't generate code. We describe what changed. Your AI coding tool applies it in whatever framework you use.

The Problem

Lost in Slack

Designer messages about changes get buried. Developer finds out weeks later.

Silent drift

Developer modifies design-owned styles. Designer never knows code diverged.

Multi-repo chaos

Same component in three repos. Only one gets updated.

Sync overhead

5-10 hours/week per team on design-code handoff.

Today

Designer → Slack → Developer → PR → Review → Merge

With UI Sync

Designer → Code updated

What We Solve

Two directions. Both automatic.

Design → CodeDesigner saves in Figma → code updates

Code → DesignDeveloper changes design-owned styles → designer notified

Automatic Design → Code Sync

Designer saves in Figma. Code updates. No tickets, no Slack, no manual work.

Surgical Changes

We don't regenerate components. AI changes padding: 16px to 24px. Everything else untouched.

Developer logic preserved

Drift Detection

When a developer changes design-owned styles, we detect it and notify the designer.

No more silent divergence

Multi-Repo Coordination

One Figma component linked to three repos? All three update together.

Component Intelligence

Designers see what the component became in code — props, states, variants, dev additions.

Designer-Initiated Requests

Designer needs a loading state? Request it through the same sync channel.

Same channel, both directions

Surgical Changes in Action

Designer changes padding 16px → 24px

className={cn(
  "p-4 "p-6 bg-blue-600",           // ← Design owns this (CHANGED)
  isLoading && "opacity-50",   // ← Developer owns this (PRESERVED)
  className                     // ← User override (PRESERVED)
)}

We tell the AI: “Change padding from 16px to 24px. Only modify design-owned styles. Preserve all logic, conditionals, and user overrides.”

Token-Aware Translation

Raw Figma values are resolved to code tokens before they reach your AI tool. When a designer changes a button from #3B82F6 to #2563EB, your AI assistant sees bg-blue-500 → bg-blue-600 — not hex codes it has to guess.

4-Layer Resolution Cascade (L0 wins, L3 is last resort)

L0Figma Variables API0ms — bound to variable"Blue/600"

L1Built-in Tailwind map0ms — O(1) HashMap#3B82F6 → blue-500

L2Project CSS vars (from agent)0ms — O(1) HashMap#1A2B3C → var(--brand-primary)

L3LLM fallback (cached 30 days)~500ms first, 0ms after#custom → blue-600

242

Colors

Full Tailwind default palette

Spacing steps

0px → 384px

Font sizes

xs → 9xl

Border radii

0px → full

Verified end-to-end test output

Input (raw Figma values):
  backgroundColor: #3B82F6 → #2563EB
  paddingTop:      16px    → 24px
  fontSize:        14px    → 16px
  borderRadius:    4px     → 8px

Resolved by hub (before AI sees it):
  background:    blue-500 → blue-600   ← L1: builtin Tailwind map
  padding-top:   4        → 6          ← L1: builtin Tailwind map
  font-size:     sm       → base       ← L1: builtin Tailwind map
  border-radius: (default)→ lg         ← L1: builtin Tailwind map

AI coding tool instruction:
  "Change Button: bg-blue-500→bg-blue-600, pt-4→pt-6, text-sm→text-base, rounded→rounded-lg"

Token resolution rate: 4/4 (100%) for default Tailwind palette

Every resolved token is tagged with which layer produced it — full audit trail for debugging. 8 LLM providers supported for L3 (OpenAI, Anthropic, Gemini, DeepSeek, Groq, xAI, Cohere, + any OpenAI-compatible endpoint).

Confidence-Based Delivery

Simple changes are delivered automatically. Complex changes get the right amount of review.

HIGH CONFIDENCE

Simple property change

AI applies immediately. You're notified after.

MEDIUM CONFIDENCE

Multiple changes

AI assistant decides or asks you before applying.

LOW CONFIDENCE

Structural change

Human review required before anything touches code.

How We Compare

Figma MCP is read-only and one-directional. Claude can read Figma and write code. There is no path back — when a developer changes design-owned styles, the designer has no visibility unless someone tells them manually.

Capability

UI Sync

Figma MCP + Claude

Direction

Code → Designer visibility

Automatic change detection

Semantic / token-aware translation

Multi-repo sync

Drift detection

Designer workflow

History & rollback

Verification

Audit trail

Figma MCP + Claude

“Designer changes button. Developer notices eventually. Developer asks Claude. Claude updates code. Designer never knows if the developer changed something back.”

UI Sync

“Designer saves → code updated automatically. Developer changes it → designer is notified. Both sides stay in sync, or explicitly diverge.”

The fundamental constraint: Figma MCP has no write path and no event system. Code-to-designer communication is architecturally impossible with it — not just a missing feature. Think of it like Git is infrastructure around text editors: you could manually track changes, but Git automates detection, history, coordination, and rollback.

vs. Figma Dev Mode

Problem: Shows specs. Developers still manually implement them.

UI Sync: Changes flow directly to code. No manual implementation.

vs. Design-to-Code Tools

Problem: Generate entire components from scratch, wiping developer customizations.

UI Sync: Surgical changes. AI changes padding: 16px to 24px. Everything else untouched.

vs. Design Tokens

Problem: Sync global values (colors, spacing). Components still need manual updates.

UI Sync: Full component sync. The specific button's padding updates — not just the token.

vs. Manual Handoff

Problem: 5-10 hours/week per team. Changes lost in Slack.

UI Sync: Automatic sync. Designer pushes, code updates.

Three Components

Figma Plugin

Detects design changes and pushes to hub. TypeScript, Figma Plugin API.

Hub

Translates to semantic changes, coordinates multi-repo sync, tracks history. Rust, PostgreSQL, WebSocket.

Agent

Delivers changes to AI coding tools, verifies results, reports drift. Rust, libSQL, MCP.

UI Sync Architecture

Figma (Designer)

◄bidirectional sync►

Code (Developer)

UI Sync

→Change DetectionFigma plugin

→Semantic TranslationHub

→Multi-Repo CoordinationHub

→Change DeliveryAgent MCP

→VerificationAgent hashing

←Drift DetectionAgent → Designer

↔History / RollbackHub + Agent

↔Audit TrailHub

AI Coding Tool

Claude Code / Cursor — reads code, applies changes

Self-hosted. Your code never leaves your infrastructure.

Value by Role

For Developers

“Design changes appear in my AI assistant. I apply them conversationally. My logic is never touched.”

No more “can you update the padding?” messages
No fear of design changes breaking your code
Clear ownership of what's yours to modify
Rollback if something goes wrong

For Designers

“I push changes to code. I see when code diverges. I stay in sync.”

No more waiting for developers
Know immediately when code drifts
Rollback to any previous version
Confidence that what you designed shipped

For Teams

“Design and code are always in sync. Or explicitly not.”

5-10 hours/week saved on sync overhead
No more “does code match design?” audits
Clear history of what changed, when, by whom
Works across all repos

Who It's For

Ideal Customer

10+ person team with dedicated designer(s)
Any frontend framework (React, Vue, Svelte, Angular)
Multiple frontend repos or a design system
Feeling pain from design-code sync overhead

Not For

Solo developers (just talk to your designer directly)
Teams not using AI coding tools (requires Claude Code, Cursor, etc.)
One-time design implementations (use Figma MCP + Claude directly)

Pricing

Self-Hosted

FreeForever

Full functionality
You run the hub
Community support

Team

$499/month

Hosted hub
Up to 10 repos, 20 users
Email support

Business

$1,499/month

Unlimited repos and users
Audit logs
Priority support

Enterprise

Custom

On-prem / private cloud
SSO / SAML
SLA + dedicated support

The Bet

We describe what changed. AI applies it. We verify the result.

If this loop works reliably — across frameworks, across repos, without breaking developer logic — we have a product. The hard part isn't code generation. AI already does that well. The hard part is:

Detecting what changed in Figma (automatically)
Coordinating changes across repos
Verifying changes were applied correctly
Detecting when code drifts from design
Maintaining history and enabling rollback

That's what we build. The AI handles the code.

Benchmarks

Numbers from the actual implementation, not estimates.

Token Resolution

~300

Zero-cost lookups

L0–L2 combined

<1ms

L0–L2 latency

O(1) HashMap

~500ms

L3 first call

Cached 30 days → <1ms

LLM providers

OpenAI, Anthropic, Gemini…

30d

LLM cache TTL

Near-zero repeat cost

100%

Resolution rate

Default Tailwind palette

Hub Performance (cold start, measured)

hub startup

Hub process start           → 0ms
Database connected/migrated → 128ms
Semantic graph loaded       → 132ms
4 job workers started       → 132ms
Listening on :8080          → 133ms

End-to-End Proof

Real test run — one Figma change, four properties, all resolved to tokens:

POST /api/changes

{
  "figma_file_id": "test_file",
  "changes": [{
    "node_id": "10:42",
    "component_name": "Button",
    "change_type": "style",
    "properties": {
      "backgroundColor": { "from": "#3B82F6", "to": "#2563EB" },
      "paddingTop":      { "from": 16,        "to": 24        },
      "fontSize":        { "from": 14,        "to": 16        },
      "borderRadius":    { "from": 4,         "to": 8         }
    }
  }]
}

Result stored in DB:
  background:    blue-500 → blue-600   (L1: builtin)
  padding-top:   4        → 6          (L1: builtin)
  font-size:     sm       → base       (L1: builtin)
  border-radius: (default)→ lg         (L1: builtin)

  Token resolution rate: 4/4 (100%) for default Tailwind palette

Join the Waitlist

UI Sync is coming soon. Get early access and shape the product with your feedback.

No spam. We'll email you when it's ready.