⚡ OTTER OS V1.0 IS NOW LIVE FOR FIGMA ATOMIC DSL ENGINE

Designers. Developers.
Builders.

The AI product design agent that operates inside Figma. Describe a screen in natural language — Otter OS inspects your file, builds a plan, emits native editable content, critiques its output, and supports conversational iteration.

DESIGNERS
DEVELOPERS
PRODUCT MANAGERS
STUDIOS

See Otter OS in Action

Experience how Otter OS parses prompts, plans component structure, executes atomic Design DSL ops, and self-repairs WCAG contrast.

Otter OS Agent
v0.1.0
⚡ Metric Card 👤 User Profile 💳 Pricing Tier
[1/5] Inspecting Figma selection & local variables...
[2/5] LLM Reasoner: generating structured layout plan...
[3/5] Emitting Design DSL ops & validating schema...
[4/5] Executing atomic node batch (1 FRAME, 4 TEXT, 1 INSTANCE)...
[5/5] Structural Critic: WCAG contrast 7.2:1 passed. Zero text clipping.
Canvas Preview — Figma Sandbox Runtime
Auto-Layout: ON 100% Zoom
Metric Card #01
Monthly Recurring Revenue +24.8%
$128,450.00

The Architecture That Matters

The model never runs code against your document directly. It emits a JSON Design DSL validated by a sandbox runtime before deterministic execution.

Prompt
User Intent
Context
Sandbox Inspection
Plan
LLM Reasoner
Design DSL
JSON Contract
Validator
Schema Gate
Executor
Deterministic Nodes
Critic
WCAG & Repair
🛡️

Atomic Execution

Roots are built detached and attached only once the entire batch survives validation. A failure anywhere removes everything created — no half-built frames.

🏷️

Traceable Nodes

Every single node carries its DSL op_id and gen_id in plugin data. The critic and subsequent edits target exact nodes instead of guessing names.

Reversible History

Every generation records its node IDs and before-snapshots of any mutated property. Undo is always a clean, single-action rollback.

🔍

Structural Critic

Checks WCAG contrast ratios (4.5:1 minimum), text clipping, overlapping absolute siblings, and auto-layout crowding. Emits deterministic fixes automatically.

Design DSL Contract

Inspect the contract between reasoning and execution. It describes design intent, auto-layout modes, variable tokens, and component instances.

dsl_schema_v1.json
{
  "op": "createFrame",
  "id": "metric-card-1",
  "name": "MRR Analytics Card",
  "layout": { "mode": "VERTICAL", "gap": 16, "padding": 24 },
  "fill": { "token": "surface/raised", "hex": "#18181b" },
  "cornerRadius": { "token": "radius/lg", "value": 16 },
  "children": [
    {
      "op": "createFrame",
      "id": "header-row",
      "layout": { "mode": "HORIZONTAL", "primaryAlign": "SPACE_BETWEEN" },
      "children": [
        { "op": "text", "id": "lbl-mrr", "value": "Monthly Recurring Revenue", "style": "label/sm" },
        { "op": "instance", "id": "badge-delta", "component": "Badge/Positive", "overrides": { "Label": "+24.8%" } }
      ]
    },
    { "op": "text", "id": "val-mrr", "value": "$128,450.00", "style": "display/lg" }
  ]
}

Three Connection Modes

Run completely offline with deterministic fixtures, connect directly to LLM providers, or integrate your enterprise API backend.

DEFAULT

Offline Mode

Zero network calls. A deterministic reference agent runs the full plan → generate → critique loop using pre-built golden fixtures.

DIRECT

Direct API Key

Connect directly to Anthropic, OpenAI, or Gemini. API keys are stored securely in figma.clientStorage and never saved in document files.

ENTERPRISE

Backend Gateway

Route requests through your custom API layer for team authentication, rate limiting, centralized token keys, and telemetry logging.

JD
MK
SL
AR

DON'T TAKE OUR WORD FOR IT.
TAKE THEIRS. IT'S PRETTY OK.

"Otter OS changed how our team creates complex Figma UI specs. Emitting native auto-layout frames with token resolution saves us hours every week."

Marcus Vance — Head of Design Systems at CloudScale

Join for Free. Go Further When Ready.

Transparent plans designed for solo designers, agency freelancers, and enterprise design engineering teams.

Community / Free
$0 / forever

Perfect for solo designers exploring AI workflows in Figma.

  • Offline & Reference Agent
  • 100% Atomic Batch Execution
  • Direct API Key Support
  • Single Frame Generation
Get Started Free
RECOMMENDED
Pro Designer
$19 / month

For professional designers building production Figma systems.

  • Everything in Free
  • Automated Structural & WCAG Critic
  • Figma Token & Variable Auto-Binding
  • Multi-node Conversational Iteration
Start 14-Day Trial
ENTERPRISE
Studio & Team
$49 / seat / mo

For design studios requiring backend security & custom rules.

  • Everything in Pro
  • Backend API Proxy Integration
  • Team Component Library Sync
  • Custom Enterprise Model Prompts
Contact Sales

Here Are the Basics.

Otter OS uses an atomic batch executor. All generated nodes are built detached from the active document tree. If any schema validation or execution error occurs during the batch, the entire generation is discarded and zero half-built frames are left on your canvas.
Before planning, Otter OS's context inspector scans your document's local variables, styles, and published component libraries. Token references in the Design DSL (e.g. surface/raised or radius/lg) automatically resolve to your native Figma variables with hex fallbacks.
In Offline mode, zero data leaves your local machine. In Direct or Backend mode, only a budgeted summary of your current selection and component token names are transmitted to produce the design plan.
Yes! Otter OS tags every node with generation ID metadata and records property snapshots. Reverting an AI generation is a single atomic undo operation in Figma.