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

Start designing with AI
in 3 steps

No complex setup, no API keys, no configuration files. Install two things, run one command — you're live.

Total setup time: ~3 minutes
Start Setup
PREREQUISITES

You'll need two things

Trio uses Claude AI to power its design engine. This requires a separate subscription from Anthropic — the company behind Claude.

1. A Claude subscription

Trio runs on Claude Code, Anthropic's official CLI tool. To use it, you need an active Claude Pro or Claude Team subscription.

  • Go to claude.ai
  • Sign up or log in
  • Subscribe to Claude Pro ($20/month)

This is a one-time purchase — not per-prompt, not per-token. Your Claude subscription gives you unlimited AI usage. Trio's plan limits only control how many prompts per day you can send, but the AI processing itself is fully covered.

2. Node.js 18 or higher

Trio's companion server runs on Node.js. Most developers already have this installed.

Check your version:

node --version

If you see v18.x.x or higher, you're good. If not, download it from nodejs.org.

Why Claude and not an API key?

Claude Code provides unlimited usage within your subscription — no surprise bills, no token counting, no cost anxiety. A complex design that needs 67 tool calls costs the same as a simple one-liner.

01

Install Claude Code

Claude Code is the AI engine that powers Trio. Install it globally and authenticate once — you won't need to do this again.

Open your terminal and run:

Terminal
npm install -g @anthropic-ai/claude-code

Then authenticate:

Terminal
claude

This opens a browser window. Log in with your Claude account and authorize the CLI. Once you see a confirmation message, you're done.

This is a one-time setup. Claude Code remembers your authentication. You won't be asked to log in again unless you explicitly sign out.

02

Install & Run Trio

Install Trio globally:

Terminal
npm install -g trio-ai2design

Start the server:

Terminal
trio

You should see output like:

Output
[Trio] Server running on ws://localhost:18920
[Trio] HTTP bridge on http://localhost:18921
[Trio] Waiting for Figma plugin connection...

That's it. The server is running. Keep this terminal window open — it needs to stay active while you design.

Port already in use? Trio automatically tries the next available port (18920–18929). You can also set a custom port: TRIO_PORT=18925 trio

03

Install the Figma Plugin

The Figma plugin is the interface where you type prompts and see results.

Install Trio Plugin from Figma Community
  1. 1Click the link above (or search “Trio - AI 2 Design” in Figma Community)
  2. 2Click “Install”
  3. 3Open any Figma file
  4. 4Go to Plugins → Trio - AI 2 Design (or use the keyboard shortcut to open recent plugins)

The plugin will automatically connect to your local Trio server. You'll see a green connection dot in the header when it's connected.

YOU'RE READY

Type your first prompt

With the server running and the plugin open, you're ready to design. Try one of these:

Simple start

“Create a mobile login screen with email input, password input, and a sign-in button”

With a design system

Select shadcn/ui in the plugin settings, then prompt:

“Create a dashboard with a sidebar navigation, header with user avatar, and a content area with 4 stat cards”

With icons

“Create a settings page with sections for Profile, Notifications, Privacy, and Help — each with an appropriate icon”

Every prompt generates real Figma layers — proper auto-layout, semantic naming, correct spacing, and editable components. Not screenshots, not images.

CHEAT SHEET

Quick Reference

WhatCommand
Install Claude Codenpm install -g @anthropic-ai/claude-code
Authenticate Claudeclaude
Install Trionpm install -g trio-ai2design
Start the servertrio
Custom portTRIO_PORT=18925 trio
Check Node versionnode --version

Create Your Trio Account

To track your usage and unlock paid features, create a free account inside the plugin:

  1. 1Open the Trio plugin in Figma
  2. 2Click “Sign Up”
  3. 3Enter your email and create a password (or use magic link / OTP)
  4. 4You're on the Free plan — 10 design prompts per day, shadcn/ui, Lucide icons, and 67 AI tools

No credit card required. Upgrade to Pro, Team, or Enterprise anytime.

View plans
TROUBLESHOOTING

Common issues
& fixes.

Running into problems? Check these common solutions before reaching out to support.

EXPLORE

What's Next?

Explore the three modes

Design Mode

Create and edit UI layouts with natural language

Prototype Mode

Wire interactions and transitions (Pro+)

Code Mode

Export production-ready code in 9 frameworks (Pro+)

Choose a design system

shadcn/ui

56 components, included free

AlignUI

49 components, available on Pro+

Read the full guide

Every tool, every prompt pattern, every feature explained

Usage Guide

Upgrade when you're ready

Free, Pro ($19/mo), Team ($49/user/mo), Enterprise

Compare plans