Your Figma design system, ready for any AI tool.
The same design context that Figma MCP gives to AI agents — exported as a document you paste into Claude, Cursor, Lovable, or any tool. No MCP setup. No configuration. No IDE dependency.
Built for designers using Cursor, Claude Code, Claude Desktop, Lovable, ChatGPT, v0, Bolt, Replit and any LLM tool that accepts text.
AI coding tools don't know your design system.
Without context
Your AI invents colors, guesses at spacing, and generates components that look nothing like your design system. Every generation drifts further from your real design.
With Figma MCP
You install the desktop app, configure JSON in your IDE, authenticate with Figma, restart your client, and learn the tool-call workflow. Then it only works in IDEs that support MCP.
With DStoAI
Open the plugin, click Export, paste the document into your AI tool. Done. Your design system is in context.
Three steps. Thirty seconds.
Select your design system page
Navigate to any page in your Figma file. DStoAI reads what's there — components, variants, tokens, icons, screenshots.
Choose your mode
Build Task: paste into your AI and generate your component library in one shot. Context Rules: paste into Cursor rules or Claude project instructions for ongoing design system awareness.
Paste into your AI tool
Works in any LLM tool that accepts text. No MCP, no API keys, no setup.
Everything your AI needs to respect your design system.
Design tokens
Every local color, typography style, spacing value, radius, and effect. Real semantic names preserved verbatim from your Figma file.
Component inventory
Every component on the page with its full variant API. Property names, enum values, defaults — all the structure your AI needs to reference components correctly.
Icons as SVG
Every vector node extracted as clean SVG markup. Your AI can use them directly or convert them to React components.
Screenshots
Per-component visual references at 2x resolution. Your AI sees what the component should look like, not just how it's described.
Image assets (optional)
Toggle on to include raster images as base64. Off by default to keep exports lean.
Diagnostics
Honest reporting of anything the plugin couldn't extract, with Figma IDs preserved for forward compatibility.
Local variables and styles supported in v0.1. Library reference resolution coming in v0.2.
One export, two ways to use it.
Generate your component library in one paste.
Pick a Figma page. Export as Build Task. Paste into Claude, Cursor, or Lovable. Your AI generates your entire component library — tokens, components, variants, all of it — in a single turn.
Use case: Bootstrapping a new project. Building a component library for the first time. Migrating a design system into a new framework.
Make every AI generation respect your design system.
Export as Context Rules. Paste into Cursor rules, Claude project instructions, or Lovable's knowledge base. Every future generation in your project uses your real tokens, your real components, your real design system.
Use case: Active project work. Ongoing design system awareness. Reducing AI improvisation across many tasks.
When to use DStoAI vs. Figma MCP.
| Feature | DStoAI | Figma MCP |
|---|---|---|
| Setup time | 30 seconds | 10–30 minutes |
| Required tools | Figma (any plan) | Figma desktop app + Dev seat + IDE config |
| Works in Cursor | ||
| Works in Claude Code | ||
| Works in Claude Desktop chat | ||
| Works in Lovable | ||
| Works in ChatGPT | ||
| Works in v0, Bolt, Replit chat | ||
| Live design queries | ||
| Persistent context across projects | Per-project setup | |
| Shareable as a file | ||
| Library variable resolution | Coming in v0.2 |
Use Figma MCP if you're comfortable with IDE setup and want live agent queries. Use DStoAI if you want the same context in any tool, with no setup, as a portable document.
See what actually gets exported.
# Design System Export — Acme UI ## Exported by DStoAI v0.1 | Page: Foundations & Components --- ## Design Tokens ### Colors | Token | Value | Description | |-------|-------|-------------| | `color/primary/500` | `#2563EB` | Primary brand blue | | `color/primary/600` | `#1D4ED8` | Primary hover state | | `color/primary/100` | `#DBEAFE` | Primary background tint | | `color/neutral/900` | `#111827` | Body text | | `color/neutral/600` | `#4B5563` | Secondary text | | `color/neutral/200` | `#E5E7EB` | Border default | | `color/neutral/50` | `#F9FAFB` | Surface background | | `color/success/500` | `#22C55E` | Success state | | `color/error/500` | `#EF4444` | Error state | | `color/warning/500` | `#F59E0B` | Warning state | ### Typography | Style | Font | Weight | Size | Line Height | |-------|------|--------|------|-------------| | `heading/xl` | Inter | 700 | 36px | 40px | | `heading/lg` | Inter | 600 | 24px | 32px | | `heading/md` | Inter | 600 | 20px | 28px | | `body/md` | Inter | 400 | 16px | 24px | | `body/sm` | Inter | 400 | 14px | 20px | | `label/md` | Inter | 500 | 14px | 20px | | `caption` | Inter | 400 | 12px | 16px | ### Spacing | Token | Value | |-------|-------| | `spacing/xs` | 4px | | `spacing/sm` | 8px | | `spacing/md` | 12px | | `spacing/lg` | 16px | | `spacing/xl` | 24px | | `spacing/2xl` | 32px | | `spacing/3xl` | 48px | ### Border Radius | Token | Value | |-------|-------| | `radius/sm` | 4px | | `radius/md` | 8px | | `radius/lg` | 12px | | `radius/full` | 9999px | --- ## Component Inventory ### Button **Variants:** | Property | Type | Values | Default | |----------|------|--------|---------| | `variant` | enum | `primary`, `secondary`, `ghost`, `destructive` | `primary` | | `size` | enum | `sm`, `md`, `lg` | `md` | | `state` | enum | `default`, `hover`, `pressed`, `disabled` | `default` | | `iconLeft` | boolean | `true`, `false` | `false` | | `iconRight` | boolean | `true`, `false` | `false` | | `label` | text | — | "Button" | **Style mapping:** - primary: bg `color/primary/500`, text `white`, radius `radius/md` - secondary: bg `transparent`, border `color/neutral/200`, text `color/neutral/900` - Size sm: padding `spacing/sm spacing/md`, font `body/sm` - Size md: padding `spacing/md spacing/lg`, font `body/md` ### Input **Variants:** | Property | Type | Values | Default | |----------|------|--------|---------| | `state` | enum | `default`, `focus`, `error`, `disabled` | `default` | | `size` | enum | `sm`, `md` | `md` | | `hasLabel` | boolean | `true`, `false` | `true` | | `hasHelperText` | boolean | `true`, `false` | `false` | | `placeholder` | text | — | "Enter value..." | ### Card **Variants:** | Property | Type | Values | Default | |----------|------|--------|---------| | `variant` | enum | `elevated`, `outlined`, `filled` | `elevated` | | `hasImage` | boolean | `true`, `false` | `false` | | `hasActions` | boolean | `true`, `false` | `false` | ### Badge **Variants:** | Property | Type | Values | Default | |----------|------|--------|---------| | `variant` | enum | `neutral`, `primary`, `success`, `warning`, `error` | `neutral` | | `size` | enum | `sm`, `md` | `sm` | --- ## Icons (SVG) ### icon/chevron-right ```svg <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> ``` ### icon/check ```svg <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M3 8.5L6.5 12L13 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> ``` ### icon/close ```svg <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/> </svg> ``` --- ## Screenshots | Component | Screenshot | |-----------|-----------| | Button/primary/md | [2x screenshot attached — 340x88px] | | Button/secondary/md | [2x screenshot attached — 340x88px] | | Input/default/md | [2x screenshot attached — 640x120px] | | Card/elevated | [2x screenshot attached — 640x400px] | | Badge/primary/sm | [2x screenshot attached — 120x48px] | --- ## Diagnostics - Total components extracted: 12 - Total variants: 47 - Total tokens: 34 - Extraction warnings: 0 - Unresolved library references: 3 - `color/brand/accent` → refs library "Brand Colors" (ID: 42:891) - `icon/arrow-left` → refs library "Iconset" (ID: 108:23) - `spacing/page-margin` → refs library "Layout" (ID: 55:102) Library reference resolution will be available in v0.2.
This export is from a sample design system with 12 components and 47 tokens. Your exports will reflect your file's complexity.
What to expect (and what not to).
What works really well
Simple components — buttons, cards, inputs, badges, navigation elements — generate near-pixel-perfect code when pasted into Claude or Cursor. Token vocabulary, component APIs, and icons are extracted faithfully.
What works but needs review
Complex components and dense layouts get the structure right but may need manual cleanup on specific spacing, typography line-height, and shadow approximations. Same as any AI-generated code — the output is a strong starting point, not a finished library.
What's coming later
v0.1 supports local variables and styles only. Library reference resolution ships in v0.2. Multi-page export is on the roadmap based on user feedback.
DStoAI gives your AI tool dramatically more context than it has by default. It doesn't make your AI tool perfect — but it makes the gap between your design and the generated code much smaller.
Questions you might have.
Does this work with team libraries?
v0.1 supports local variables and styles. Library references are detected and reported, with their Figma IDs preserved for forward compatibility. Library resolution ships in v0.2.
Does this need a paid Figma plan?
No. DStoAI works on any Figma plan because it uses the Plugin API for local variables, which isn't gated behind paid tiers.
Does my design data leave Figma?
No. DStoAI runs entirely in your browser as a Figma plugin. No backend, no server, no telemetry, no network access. The exported document is generated locally and downloaded directly to your computer.
Which LLM tools does this work with?
Any tool that accepts text input. Tested in Claude Desktop, Claude Code, Cursor, Lovable, ChatGPT, v0, Bolt, and Replit. The plugin's output is just Markdown — if your tool can read text, it can use DStoAI.
How is this different from Figma's official MCP server?
Figma MCP provides live design context to AI agents through a server connection. DStoAI exports the same kind of context as a portable document you paste anywhere. Same job, different delivery — DStoAI works in tools that don't support MCP and requires no setup.
Can I export my whole design system at once?
v0.1 exports per page. You navigate to the page you want and click Export. Most design systems have logical pages (Foundations, Atoms, Components) that map cleanly to per-page exports. Multi-page export is on the v0.2 roadmap.
What does it cost?
Free during v0.1. Pricing for later versions to be announced.
How big are the exported files?
Typically 5–15MB depending on how many components are on the page. Most of the size is screenshots — the text content is small.
Your design system, ready for any AI tool. In 30 seconds.
Install DStoAI on Figma. Export your first design system. Paste into your AI tool. See what your AI can do when it actually understands your design.