Introducing Trio Companion Server — One command to start: npm install -g trio-ai2design && trio Get started
Design Mode

Turn prompts into
pixel-perfect
Figma designs

Describe any interface in natural language. Trio's AI agent uses 67 specialized tools to build real frames, auto-layout, components, icons, and design tokens — directly on your Figma canvas.

From prompt to
production design
in seconds

Five steps from natural language to a fully tokenized, editable Figma design. No manual work, no pseudo-layers.

How it works
Trio AI

0 / 10,000
01

Write your prompt

Describe what you need in natural language — "Design a mobile login page with email, password, and social auth buttons" — up to 10,000 characters.

67 specialized tools,
one intelligent agent

Design Mode doesn't generate images — it executes real Figma API commands through 67 purpose-built tools.

Frame Builder
Text Creator
Rectangle
Ellipse
Line Drawing
Polygon
SVG Import
Image Placement
Component Creator
67 tools across 8 categories

10 unbreakable rules that
guarantee quality

Every prompt runs under strict constraints. No floating elements. No unnamed layers. No shortcuts.

Real Figma objects, not code snippets
Every design starts with a proper frame
No floating or orphan elements
Auto-layout mandatory, no manual positioning
Semantic names like 'Header', not 'Frame 1'
Real Figma objects, not code snippets
Every design starts with a proper frame
No floating or orphan elements
Auto-layout mandatory, no manual positioning
Semantic names like 'Header', not 'Frame 1'
8pt spacing grid on every element
AI visually checks its own work
Components match your design system exactly
Real SVG icons from curated libraries
No half-finished results ever
8pt spacing grid on every element
AI visually checks its own work
Components match your design system exactly
Real SVG icons from curated libraries
No half-finished results ever
Clean layer hierarchy guaranteed
Responsive designs that behave like real products
Organized layer panel from day one
Consistent spacing across every element
Screenshot verification before completion
Clean layer hierarchy guaranteed
Responsive designs that behave like real products
Organized layer panel from day one
Consistent spacing across every element
Screenshot verification before completion

Your design system.
AI-native.

Pick shadcn/ui or AlignUI — Trio reads every token, every component spec, every variant before placing a single pixel. Colors auto-bind to Figma variables. Icons search by meaning. Dark mode works out of the box.

Context injection
1.

Token Injection

Your design system’s full token set — colors, typography, spacing, radius, shadows — gets injected into the AI’s context before it generates anything. Not a generic AI that guesses your styles. An agent that reads your spec sheet first.

core.json→Claude System Prompt
├──Semantic Colors (light + dark)
├──Full Palette (gray/50-950, blue/50-950…)
├──Typography Scale (h1, h2, p, sm…)
├──Spacing (4, 8, 12, 16, 24, 32, 48, 64)
└──Border Radius (sm, md, lg, full)
Automatic binding
2.

Color Auto-Binding

When the AI uses a color, it doesn’t just paint a static value — it scans every Figma COLOR variable, matches the RGB value (±0.005 tolerance), and binds it to the actual token. Toggle dark mode in Figma, and everything updates. No manual rebinding. Ever.

AI calls create_text(color="#09090b")
↓
Scans all COLOR variables (10s cache)
↓
RGB match → "foreground" variable
↓
Switch to Dark Mode → auto-updates ✓
Spec-driven
3.

Component Specs

Before building a component, the AI reads the exact spec: variants, sizes, anatomy, states, and Figma-specific rules. Every element is built to spec, not guesswork.

get_design_system_component("button")
{
"variants": ["default", "outlined", "ghost"],
"sizes": { "sm": 32, "md": 36, "lg": 40 },
"anatomy": ["icon-start", "label", "icon-end"],
"states": ["hover → 0.9", "focus → 2px ring", "disabled → 0.5"],
"figmaRules": ["Auto-layout horizontal", "Inter Medium 14px", "radius 8px"]
}
Native support
4.

Design Systems

Pick shadcn/ui or AlignUI — Trio reads the full component library, understands every variant, and builds with real instances. Not generic boxes. Actual design system components with correct props, slots, and constraints.

shadcn/ui
AlignUI
Button
Input
Badge
Card
AB
Avatar
Switch
47 components · 3 variants each

Is Trio Right For You?

60 seconds to know if we're a fit. Tick what's true:

0 — 2

Not Yet

You’re probably doing fine with manual Figma workflows. Bookmark us — when your team scales and screen count grows, the pain points above will surface. Trio will be here.

3 — 5

Good Fit

You’re feeling the friction. Trio’s free tier gives you 10 design prompts/day with shadcn/ui and 1,936 Lucide icons — enough to see if AI-assisted design fits your workflow. No credit card needed.

6 — 8

Perfect Match

Every checkbox you ticked is a problem Trio was built to solve. 67 tools, 105 component specs, auto-binding variables, enforced spacing grid, visual verification — this is your design workflow on autopilot. Your team will reclaim hours per week.

F.A.Q

Frequently Asked
Questions.

Get answers to commonly asked questions.