Case Study · Intent Studio

What if you could describe a design system and watch it build itself?

I designed and built an AI-powered Figma plugin that authors complete, production-ready design systems from natural language. Variables, tokens, components, and pages, all created directly on the canvas through conversation.

Founder · Product, Design & Engineering
Oct 2025 to Present
Figma Plugin API · Claude AI · WebSockets · Railway
Pre-launch (April 2026)
01 · The Problem

Design systems are the most valuable thing nobody has time to build.

If you've worked in product design for any length of time, you already know this: a proper design system with semantic tokens, multi-mode variables, and documented components is the foundation of scalable work. But building one from scratch in Figma takes 8 to 12 weeks with a two-person team. Getting it into production code? Closer to six months. For freelancers balancing multiple clients and small agencies running lean, that's time they rarely have.

So what ends up happening? Most designers either skip the system entirely (and pay for it later in inconsistency and mounting tech debt) or buy a premium UI kit that gets them maybe 60% of the way there, then spend days customizing it to match a client's brand. Neither option feels great.

8–12
weeks to build a V1 design system with a two-person team
84%
of teams use design tokens, but most manage them manually
#1
pain point: Figma variable aliases breaking during reorganization
61%
of small-company Figma users say AI is critical to staying competitive

Most designers live in an uncomfortable middle ground. They want to deliver custom systems that justify their rates, but need the speed of a UI kit to stay profitable. That tension is where this project started.

The core insight behind Intent Studio

02 · The Opportunity

An empty competitive niche, and a closing window to fill it.

I spent several weeks mapping every tool in the AI + Figma space, and what I found was a clear, open gap. Figma Make generates code-first prototypes (limited to 3 frames). Relume builds sitemaps and wireframes. Lovable and Bolt skip Figma entirely. Nobody was building conversational AI that writes native design system components directly to the Figma canvas.

Meanwhile, Figma's own data showed that 30% of their highest-value enterprise customers were already using AI-assisted design on a weekly basis. The demand was clearly there. The solution just didn't exist yet.

The addressable market

I ran a bottom-up analysis of Figma's 13M+ monthly active users, filtered for those actively seeking AI design tools within the plugin ecosystem, and validated the numbers against competitor traction data from Relume ($1.8M ARR, bootstrapped), Lovable ($200M ARR in 12 months), and Figma Make adoption rates.

$18–36M
Serviceable market (Figma plugin niche)
$390M+
Expanded SAM including adjacent users
Tool Design Systems Conversational Writes to Figma Native Components
Figma Make No No Yes Code-first
Relume No No Export No
Figr Identity Partial Click-based Export No
Lovable / Bolt / v0 No Yes No Code only
Intent Studio Yes Yes Yes Yes

03 · The Solution

Describe your intent. Watch it author.

Intent Studio is a Figma plugin with a conversational AI interface. You open it, describe what you need ("Build a fintech dashboard design system with accessible slate-neutral variables and a Tailwind-aligned spacing scale"), and the AI orchestrates the entire creation process in real time, writing directly to your Figma file.

No code generation. No HTML conversion. No exporting and importing. Real Figma variables, real components, real auto-layout. All authored through a steady, back-and-forth conversation.

The chat interface where designers describe their design system. The AI responds with an authoring plan, then executes it live on the Figma canvas.
📸 Screenshot: Authored variable collections (Primitives → Semantic → Component)
Three-tier token hierarchy: primitives (color scales), semantic (purpose-mapped), and component-level tokens.
📸 Screenshot: Authored components on the Figma canvas
Production-ready components with proper auto-layout, variants, and token bindings, all from a single conversation.

04 · Brand Identity & Visual Design

Naming a category, not a product.

Before building the marketing surface, I ran a full brand audit: competitive visual analysis, naming strategy, messaging framework, and three distinct visual directions with strategic rationale. The goal wasn't just picking a "look." It was finding a defensible position in a crowded space where every AI design tool looks identical.

The audit made something obvious: every competitor in the AI + Figma space (Relume, UX Pilot, Figr, Figma Make) lives in cold blues, purples, and neutral grays. The visual territory of warm, craft-forward aesthetics was completely unoccupied.

Intent

Purpose-first. Natural language. You communicate the goal, and the tool handles execution. Positions directly against code-first tools where you specify instructions, not outcomes. The word "intent" frames the product around what the designer cares about, not the mechanism underneath.

Studio

Professional craft environment. An atelier, not an app. A studio is where serious work happens. It signals permanence, craft, and expertise. Combined with "Intent," it says: this is a place where your creative direction becomes real.

We don't call it a "generator." That word implies randomness. You author systems. That's precise, intentional, and ownable. "Design system authoring" is the category. Everyone else generates, converts, or manages.

Key positioning decision from brand audit

The Atelier Direction

Three visual directions were explored: "The Atelier" (craft-forward, warm earth tones), "The Operator" (dark, precision engineering, terminal aesthetic), and "The Editorial" (typographic-led, black-and-white with amber accent). The Atelier won on competitive white space, audience alignment, and longevity.

Warm earth tones (parchment, walnut, amber, driftwood) occupy territory that no design tool competitor uses. The serif/sans typography pairing (Cormorant Garamond for display, DM Sans for body) signals "design intelligence" without the coldness of a pure tech brand. Think architect's studio or type foundry. Somewhere serious creative work happens.

Parchment
#F5EFE4
Walnut
#1A1410
Amber
#B8741A
Driftwood
#8A7B6E
Linen
#EDE4D5

✓ Lead with the output

Headlines describe what gets authored, not the mechanism. "Describe your design system. Watch it author itself." The AI is secondary to the craft.

✓ Use "authored," never "generated"

Authoring implies craft, intentionality, and ownership. Generating implies randomness and commodity. This single word choice positions Intent Studio as a premium creative tool.

✗ No blue or purple anywhere

The moment you use these colors, you look like every competitor. Warm earth tones are the visual moat. They signal a completely different kind of tool.

✗ Don't position against Figma Make in headlines

That anchors you as a plugin, not a category. Let the FAQ handle the comparison. The headline space is for establishing what Intent Studio is, not what it isn't.

📸 Screenshot: Final logo, wordmark, and landing page in the Atelier visual system
The Atelier brand system applied: Cormorant Garamond headlines, DM Sans body, parchment/walnut/amber palette, generous whitespace. Every element signals craft over commodity.

05 · Architecture & Technical Decisions

A 5-pass AI orchestration engine built for precision.

The core technical challenge here was reliability. Generative AI is inherently unpredictable, but design systems require deterministic precision. Every token needs to resolve, every alias needs to connect, every component needs proper structure. There's no room for "close enough."

I solved this by designing a structured command protocol: 45+ discrete JSON command types that the AI authors and the plugin executes, rather than letting the AI write arbitrary code. This keeps things predictable, secure, and consistent every time.

Pass 0

Planning

AI analyzes intent, selects industry aesthetics, maps token architecture

Pass 1

Foundation

Authors primitive tokens: colors, type scales, spacing, breakpoints

Pass 2

Atomic

Builds components: buttons, inputs, cards with token bindings

Pass 3

Sections

Composes section layouts from structural templates + design tokens

Pass 4

Assembly

Full page composition, responsive variants, documentation

Tiered AI Intelligence

Claude Opus handles complex planning and intent parsing. Haiku handles high-volume execution at 67% lower cost, which is what makes "unlimited authoring" pricing viable at $19/mo with 93% margins.

Structural Section Kits

Pre-built layout templates get hydrated with design tokens rather than authoring structure from scratch. This brought per-system costs down from $0.19 to $0.06, a 65–79% reduction.

Command Protocol

45+ structured JSON command types with batching. No arbitrary JS eval. Security-audited, Figma ToS compliant, and deterministic in execution.

Design Knowledge Base

An MCP-integrated vector store of design system best practices. The AI doesn't just author blindly. It reasons about typography scales, spacing relationships, and accessibility requirements.

Real-Time WebSocket Relay

Sub-200ms latency between the AI backend and the Figma plugin. Command batching sends 60+ variables in a single round trip. The live building experience feels nearly instantaneous.

State-Aware Editing

The AI reads your current file state before any modification, extending existing systems rather than overwriting. Multi-turn refinement like "make the primary blue warmer" works naturally.

Three-component architecture: Figma plugin client, WebSocket relay server (Railway), and platform AI backend with tiered model routing.

06 · Cost Engineering

Making "unlimited" actually work at $19/month.

The business model lives or dies on unit economics. "Unlimited design systems" is a great pitch, but only if each system authored doesn't cost more than the subscription brings in. I approached cost optimization as a product design problem, not something to figure out later.

$0.31
Original cost per authored system
$0.06
Optimized cost per authored system
79%
Cost reduction through structural kits + model routing
93%
Gross margin at $19/mo pricing

Three strategies compounded together to make this work: structural section kits (don't regenerate what you can hydrate), intelligent model routing (Opus for thinking, Haiku for doing), and output optimization (compressed command batching). The result is sustainable margins that make "unlimited" pricing honest and viable for a solo-founded business.


07 · Validation

317 component variants. One conversation.

Before investing in go-to-market, I ran extensive local testing through Figma's Desktop Bridge to answer the core question: can conversational AI produce design systems that a professional designer would actually trust and use in their work?

1000+

elements implemented on-canvas in a single session

In a single session. A full design system with buttons, inputs, cards, navigation, and more.

3 tiers

Complete variable architecture

Primitives → Semantic → Component tokens, with proper alias chains and multi-mode support.

< 5 min

First design system authored

From a blank file to a production-ready token hierarchy. What typically takes 8 to 12 weeks with a team.

WCAA native

Accessibility on all semantic colors, both light and dark mode

On full design system test runs, we have fully accessible pallets that remain AA compliant.

📸 Screenshot: Full authored design system with token-bound component library
A complete design system authored from conversation: color primitives, semantic tokens, responsive typography, spacing scales, and fully token-bound components.

08 · Go-to-Market Strategy

Product-led growth, seeded by community.

As a solo founder, the GTM strategy needed to be focused and realistic. I'm prioritizing channels that compound over time: Figma Community discovery (the primary surface where designers find new tools), build-in-public content showing real authoring sessions, and targeted outreach through 12+ years of agency relationships.

The launch plan sequences carefully: beta testing, then community launch, then Product Hunt. The broader business model follows a "land and expand" approach where the $19–29/mo design tool builds trust and familiarity, which eventually opens the door to a $79–149/mo CMS pipeline (Track 1) that turns design systems into live websites.

📸 Screenshot: Landing page / marketing site design
Conversion-focused landing page with live demo video and clear positioning against Figma Make.
📸 Screenshot: Figma Community plugin listing
Optimized Community listing as the primary discovery channel for Figma-native users.
200
Paid subscriber target (90 days)
$3K+
MRR target
15%
Trial-to-paid conversion target
4.5★
Figma Community rating target

09 · Reflections

What building this taught me.

Intent Studio is a bet on a simple principle: the most powerful design tools will be the ones that let you describe what you want, and then get out of the way. For a lot of execution tasks, the AI genuinely produces better, more consistent results when the human focuses on intent and direction rather than pixel-by-pixel construction.

The hardest problems weren't the AI itself. They were the systems thinking: designing a token architecture that scales gracefully, a command protocol that stays deterministic, and a cost model that makes "unlimited" an honest promise. Those are product design challenges as much as engineering ones, and they're the parts I'm most proud of working through.

Building a product solo forces a certain clarity about what matters. Every feature has to justify itself against one question: does this help someone reach their first "wow" moment faster? That discipline shaped everything from the 5-pass architecture to the decision to hold off on CMS features until the design tool has clearly found its footing.

The future of design tooling isn't "AI that replaces designers." It's AI that handles the steady, mechanical labor so designers can focus on what actually matters: intent, taste, and judgment.