Skip to content
Try free
New — SuperDuperUI AI Studio

Your Design System,
Ready for AI.

Paste a Figma URL or any website. AI Studio extracts your design tokens and compiles them into a context bundle that makes Claude, Cursor, and Codex generate on-brand UI every time.

Try AI Studio FreeHow AI + SuperDuperUI Works

Works with Claude Code, Cursor, GitHub Copilot, Windsurf, and OpenAI Codex

From Design System to AI Context in Minutes

Four steps. No manual token extraction. No copy-pasting.

01

Paste a URL

Drop in a Figma file URL or any live website. AI Studio supports both — no plugins or browser extensions needed.

02

AI Extracts Your Design System

The extractor pulls colour tokens, typography, spacing, and component patterns. A DESIGN.md is synthesised from the raw data using Claude.

03

Export Your AI Kit

Download a ZIP containing DESIGN.md, CLAUDE.md, AGENTS.md, tokens.css, tokens.json, and tailwind.config.js — ready to drop into any project.

04

Push to Figma

AI agents push generated components back to Figma as editable frames using your design system tokens. Designers review, iterate, and the loop continues.

Figma
AI Studio
DESIGN.md

Extract from Figma in Seconds

Paste your Figma file URL and AI Studio calls the Figma API to pull every colour style, text style, effect style, and component. No plugin install. No Figma plugin permissions.

  • All colour and text styles extracted automatically
  • Component inventory with usage counts
  • Works with any Figma plan
Try with Your Figma File
stripe.com

Extract from Any Live Website

No Figma file? No problem. Paste a URL and the website extractor uses Playwright to scrape computed CSS — pulling fonts, colours, spacing, and component patterns from the live DOM.

  • Works on any public website or web app
  • Captures computed styles, not just authored CSS
  • Ideal for cloning competitor design systems
Try with a Website URL
AI Agent
Figma

Push to Figma

AI agents design directly in Figma using your extracted design system tokens. Bidirectional sync means code and Figma stay in lock-step. Works with Figma's free MCP server via OAuth — no plugins needed.

  • Natural language design prompts
  • Multi-viewport support
  • Designer review loop
Learn about Figma MCP

Everything in the Export Bundle

One ZIP. Every format your AI coding tool needs.

Files in your AI kit

DESIGN.mdAlways included

Full design system reference — tokens, components, anti-patterns, Quick Reference

CLAUDE.md

Drop-in section for your project's CLAUDE.md — persistent context for Claude Code

AGENTS.md

Context for OpenAI Codex, Google Jules, Factory, and Amp (agents.md standard)

.cursor/rules/

Cursor MDC rules — scoped to *.tsx and *.css files automatically

tokens.css

CSS custom properties for every extracted token — import in globals.css

tokens.json

W3C DTCG-compatible token file for Style Dictionary, Theo, and other pipelines

tailwind.config.js

Tailwind theme extension pre-loaded with extracted token values

AI tool compatibility

Claude CodeCLAUDE.md
Cursor.cursor/rules/
GitHub Copilot.github/copilot-instructions.md
Windsurf.windsurfrules
OpenAI CodexAGENTS.md
Any AI tooltokens.css

Quick Reference

Section 0 of DESIGN.md is a 50–75 line summary designed to paste into any context window without blowing your token budget.

Extract Your Design System Today

Open source CLI + MCP server. Free forever with your own API key. Or hosted Pro from £29/month.

Open AI Studio

Free to try. No account required to extract.

SuperDuperUI

Sign up for SuperDuperUI Newsletter

Get offers and updates when we add or update a product

We usually send emails every few weeks. You can unsubscribe at any time.