Introduction

TypeUI is the design-system layer for AI-generated UI. Create or import a markdown design system, publish it to your workspace, and let Codex, Claude, Cursor, or another supported AI tool use it through TypeUI MCP.

Create a design system

Start from a TypeUI theme, upload markdown files, or use the Pro Figma import.

Choose a themeUse a TypeUI theme as your starting point.Import markdown filesBring existing design-system docs into TypeUI.Beta previewImport from FigmaGenerate markdown from a Figma file.

Integration guides

Choose the guide for the AI coding tool you use. Each integration guide shows how to connect TypeUI MCP, sign in with your TypeUI account, and start using your workspace design systems, UI prompts, and layout variations from inside that tool.

Codex

Connect Codex to TypeUI.

Claude

Connect Claude to TypeUI.

Cursor

Connect Cursor to TypeUI.

Grok

Add TypeUI MCP to Grok.

Mistral

Add TypeUI MCP to Mistral.

OpenCode

Connect OpenCode to TypeUI.

VS Code

Connect VS Code to TypeUI.

Antigravity

Connect Antigravity to TypeUI.

Windsurf

Connect Windsurf to TypeUI.

JetBrains

Connect JetBrains AI Assistant or Junie to TypeUI.

Zed

Add TypeUI MCP to Zed.

GitHub Copilot

Add TypeUI MCP to GitHub Copilot.

Cline

Add TypeUI MCP to Cline.

Qwen Code

Add TypeUI MCP to Qwen Code.

Amp

Add TypeUI MCP to Amp.

Goose

Add TypeUI MCP to Goose.

Lovable

Add TypeUI MCP to Lovable.

Replit

Add TypeUI MCP to Replit.

v0

Add TypeUI MCP to v0.

If you use another MCP-compatible tool, follow the Getting started guide to connect it to the TypeUI MCP server.

How TypeUI works

1. Create or import a design system from a TypeUI theme, markdown ZIP, or Figma.
2. Review and edit the generated markdown files.
3. Publish the design system so TypeUI MCP can serve it to connected AI tools.
4. Connect your AI tool to the TypeUI MCP server.
5. Start building UI with your selected design system, prompts, and layout variations.

Sources

Sources are places TypeUI can import design systems from. Start with Figma to create a design system from a Figma file and turn its styles, components, variants, typography, radii, shadows, fills, strokes, and layout details into editable markdown source files.

What to do next

1. Follow Getting started for the MCP setup flow.
2. Open the guide for your tool: Codex, Claude, Cursor, Grok, Mistral, OpenCode, VS Code, Antigravity, Windsurf, JetBrains, Zed, GitHub Copilot, Cline, Qwen Code, Amp, Goose, Lovable, Replit, or v0.
3. Learn the building blocks: Design systems, Workspaces, Variations, Figma imports, Design skills, and UI prompts.

How to use

After setup, tell your agent what to build with TypeUI MCP:

Build me a landing page.

Keep the workflow specific. TypeUI MCP supplies the design system and UI prompt context.

You can also ask for multiple layout options when you want to compare directions before choosing one:

Give me three variations for this pricing section.