Give your AI assistant
the power to design.
A lightweight MCP server that lets Claude Code, Codex, Cursor, VS Code/Copilot, and Windsurf generate, refine, and adopt production-ready UI designs.
Design as a compilation target.
The MCP server treats UI generation as a structured process — not simple text completion. It handles layout, styling, and preview rendering so your agent can iterate visually.
Production-grade design
Fine-tuned models generate clean, professional UI — not generic templates. Tailwind CSS output with proper hierarchy and real typography.
Iterative refinement
Refine any design with natural language feedback. Adjust layouts, swap color schemes, or change spacing — without starting over.
Repo-aware context
Detects your framework, component library, CSS tokens, and routes. Designs are generated to fit your existing stack and conventions.
Zero-friction setup.
One command registers the MCP server with your coding assistant. OAuth opens your browser once for sign-in, and the CLI writes the right config format for Claude Code, Codex, Cursor, VS Code, or Windsurf.
{
"mcpServers": {
"aidesigner": {
"url": "https://api.aidesigner.ai/api/v1/mcp"
}
}
}Twenty-one tools. One protocol.
The MCP server exposes a set of tools your AI coding assistant can call directly — design generation, live canvas streaming, and account info.
Create a complete UI design from a text prompt. Supports desktop and mobile viewports with prompt-driven generation.
Iterate on a previous design with natural language feedback. Adjusts layout, colors, typography, or content without starting over.
Generate or edit standalone imagery. Supports reference images, saved brand kits, and paired-canvas delivery.
Create premium website reference images and landing page slices, optionally steered by a saved brand kit.
Generate a square 3x3 board of nine distinct brand identity directions from a brand brief.
Generate a square 3x3 reusable media asset kit and, when paired to the editor, auto-extract nine transparent asset canvases.
Save a reusable brand kit from the selected tile in a 3x3 identity exploration board.
List saved brand kits with public summaries, thumbnails, and swatches so the agent can reuse an existing direction.
Set or clear the active saved brand kit for the paired editor project.
Save an existing image canvas as a named brand kit media asset with intended-use guidance for future designs.
Place an existing image file or safe image URL onto the paired editor canvas without regenerating it. PNG transparency is preserved.
Remove the background from an existing image canvas as a Pro perk. Creates a new transparent PNG canvas beside the original.
Convert an existing raster image canvas to SVG as a Pro perk. Creates a new vector image canvas beside the original.
Extract up to 12 embedded photos, logos, illustrations, textures, text-bearing graphics, or media shots from an image canvas into reusable image canvases.
Spin up a new editor project and auto-pair the agent to it. Returns a URL you open to watch designs stream in live.
Pair the agent to an existing project using a 6-character code from the editor. Designs then deliver straight to the canvas.
End the pairing between the agent and the editor session.
List every design in the paired editor session, newest-first, so the agent can see what's already there.
Fetch the full HTML and metadata for a single canvas by id, after finding it with list_canvases.
Resolve a natural-language query like "the pricing page" to the matching canvas via fuzzy search across names and content.
Check your remaining credits, monthly usage, and subscription status. Free tier included.
Returns your connected AIDesigner account identity and authorized scopes.
Clone, enhance, or get inspired by any website.
Pass a reference URL to the MCP server alongside your prompt. AIDesigner analyzes the page and uses it as a starting point — whether you want an exact clone, a modernized version, or just the visual style.
Clone
Near-1:1 recreation of any website. Paste a URL and AIDesigner reproduces the layout, typography, colors, and content — ready to edit and make your own.
"Clone this landing page: https://example.com"
Enhance
Modernize an existing site while keeping its content. AIDesigner analyzes the URL and rebuilds it with better spacing, hierarchy, and visual polish.
"Enhance this page with a more modern design"
Inspire
Use any URL as a style reference without copying its content. AIDesigner extracts the visual language — colors, layout patterns, typography — and applies it to your prompt.
"Design a pricing page inspired by this site's style"
What people are saying
Frequently asked questions
MCP (Model Context Protocol) is an open standard that lets AI coding assistants connect to external tools. The AIDesigner MCP server gives these assistants the ability to generate and refine UI designs directly within your development workflow.
AIDesigner currently supports Claude Code, Codex, Cursor, VS Code/Copilot, and Windsurf. Codex and Windsurf are user-scope installs today, and VS Code requires GitHub Copilot in Agent mode.
The MCP server uses OAuth. When you first connect, your MCP client opens a browser window for sign-in. After that, tokens are managed automatically — no API keys to configure.
The MCP server generates complete HTML documents with inline Tailwind CSS. The CLI then renders PNG previews and generates adoption briefs that map the design to your framework (Next.js, React, Vue, etc.).
Free accounts include credits to try the tool. Premium plans offer higher limits. You can check your balance anytime with the get_credit_status MCP tool.
Yes. The server analyzes your repo for CSS tokens, component libraries (Radix, shadcn/ui), and styling systems (Tailwind, CSS variables). Generated designs reference your existing tokens and patterns.
Start designing from your terminal
One command to connect. Zero context switching. Production-ready UI in seconds.
Get Started FreeUsed by developers building with Claude Code, Codex, Cursor, and VS Code
