Your Figma copilot for design, prototype & code.
npm install -g trio-ai2design && trioFree tier: 10 prompts/day. No credit card required. Also available on Figma Community.
Welcome Back
Please enter your details to sign in.
Don't have an account? Register
Design Mode
Generate pixel-perfect Figma frames from plain text. 67 AI tools handle auto-layout, spacing, color tokens, and component instances. Supports shadcn/ui and AlignUI with automatic variable binding.
Explore Design ModePrototype Mode
Describe flows in plain English — Trio wires interactions automatically. 8 trigger types (click, hover, drag, timeout), 8 transitions (Smart Animate, Dissolve, Push), and full easing control. No manual wiring needed.
Explore Prototype ModeCode Mode
Select any frame and export production-ready code. React, Next.js, Vue, React Native, SwiftUI, Flutter — 9 frameworks supported. Figma auto-layout maps directly to Flexbox. Real components, not pseudo-code.
Explore Code ModeDesigned to create.
Built to ship.
AI-powered tools
Icons ready to use
Frameworks supported
Token-bound design
2 built-in design systems with 105 component specs. Colors auto-bind to Figma variables — switch from light to dark mode instantly.
Real Figma layers
Not screenshots. Every frame uses auto-layout, proper spacing, and semantic naming. Edit anything after generation — it's your design.
Prompt to production
Describe a screen in plain text, get a Figma design. Select it, export React, Next.js, Vue, SwiftUI, or Flutter code. One plugin, full pipeline.
Turn any Figma frame into
production-ready code
Select a frame, pick your framework, and get pixel-perfect components with proper layout mapping — auto-layout becomes Flexbox, fills become Tailwind classes, vectors become inline SVGs. No manual translation needed.
React, Next.js, Vue, React Native, SwiftUI, Flutter, HTML+Tailwind, HTML+CSS, CSS Modules
Extracts the Figma node tree up to 10 levels deep, including full CSS properties
Auto-layout direction, gap, padding, and alignment automatically map to flex/grid
Vector and boolean nodes are converted to inline SVGs via export_svg_string
2+ instances or 3+ similar nodes are automatically split into separate components
fills→background, strokes→border, effects→box-shadow, cornerRadius→border-radius
Code mode never creates or modifies anything in Figma — it only reads and generates code
Code chunks are streamed in real-time, no waiting even for large components
// LoginCard.tsx — Generated from Figma frameexport function LoginCard() { return ( <div className="flex flex-col gap-6 p-8 bg-white rounded-2xl shadow-lg w-[400px]"> <h2 className="text-2xl font-semibold text-gray-900"> Welcome back </h2> <input type="email" placeholder="Email" className="px-4 py-3 border border-gray-200 rounded-xl text-sm" /> <input type="password" placeholder="Password" className="px-4 py-3 border border-gray-200 rounded-xl text-sm" /> <button className="px-6 py-3 bg-indigo-600 text-white rounded-xl font-medium"> Sign In </button> </div> );}Design Tree API
extract_design_tree pulls a full CSS-enriched tree for up to 500 nodes
Framework Presets
9 optimized code templates — each framework in its own idiom
NPM Package
npm install -g trio-ai2design && trio, automatic WebSocket bridge
Flexible pricing
Start designing with AI for free. Unlock Prototype,
Code modes and premium design systems as you scale.
Free Plan
Start building with AI-powered design. No card, no commitment.
Pro
Full creative power for designers and developers. All 3 modes unlocked.
Team
Most popularFor design teams scaling fast. Shared workspace, premium everything.
Enterprise
Unlimited everything. Dedicated support. Built for agencies and large teams.
Frequently Asked
Questions.
Get answers to commonly asked questions.