v0.1.0 — now available on npm

Give your AI assistant the power to design.

A lightweight MCP server that lets Claude Code generate, refine, and adopt production-ready UI designs — without leaving your terminal.

Read the Docs
Built for
Claude Code
+ any MCP-compatible client

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 Claude Code. OAuth authentication opens your browser once for sign-in — no API keys to manage, no config files to edit manually.

Read the setup guide →
.claude/settings.json
{
  "mcpServers": {
    "aidesigner": {
      "type": "url",
      "url": "https://..."
    }
  }
}

Four tools. One protocol.

The MCP server exposes four tools that your AI coding assistant can call directly.

generate_design

Create a complete UI design from a text prompt. Supports desktop and mobile viewports with clone, inspire, and enhance modes.

refine_design

Iterate on a previous design with natural language feedback. Adjusts layout, colors, typography, or content without starting over.

get_credit_status

Check your remaining credits, monthly usage, and subscription status. Free tier included.

whoami

Returns your connected AIDesigner account identity and authorized scopes.

Learn more

Best MCP Servers for Claude Code, Cursor & WindsurfBest AI UI Design ToolsWhat Is Vibe Coding?
AI UI Designer

Generate UI designs from text prompts in the browser

AI Prototype Generator

Create interactive prototypes with AI

Website Cloner

Clone any website's design with one click

Our Community Loves Us

What people are saying

the-it-guy-og
the-it-guy-ogu/the-it-guy-og

The outputs from the AI directly fix my problem with how non creative AI is. You didn't just make a tool that offers a different style. You made a tool that takes a statistical and pattern observing llm and enables it to be creative. I honestly think the potential of your app is great. The results for me are good that I am actually taking the outputs and handing it over to figma to create the code based off the design to avoid the AI look and feel. I honestly think this is a job well done

Latter-Park-4413
Latter-Park-4413u/Latter-Park-4413

Tried it out very quickly, and the design looked quite good. I must say that the quality of the test I did was very good.

fractalechos
fractalechosu/fractalechos

Gave this a try and am genuinely impressed. The aesthetic output is truly the standout. A breath of fresh air compared to other tools. Great stuff, I’m excited to see where you take this!

Talha Ashraf Khawaja
Talha Ashraf Khawaja@TalhaAKhawaja

I just tried it. Wanted to give you some feedback based on the blog I'm starting soon. I loved it, I had ideas in my mind for how I wanted it to look, it executed brilliantly.

yidakee
yidakeeu/yidakee

WOW !!! I am seriously impressed !! UI is my weakness and I've just received super powers. You're gonna crush it with this!!!

ziurnauj
ziurnauju/ziurnauj

wait this is very good lol

the-it-guy-og
the-it-guy-ogu/the-it-guy-og

The outputs from the AI directly fix my problem with how non creative AI is. You didn't just make a tool that offers a different style. You made a tool that takes a statistical and pattern observing llm and enables it to be creative. I honestly think the potential of your app is great. The results for me are good that I am actually taking the outputs and handing it over to figma to create the code based off the design to avoid the AI look and feel. I honestly think this is a job well done

Latter-Park-4413
Latter-Park-4413u/Latter-Park-4413

Tried it out very quickly, and the design looked quite good. I must say that the quality of the test I did was very good.

fractalechos
fractalechosu/fractalechos

Gave this a try and am genuinely impressed. The aesthetic output is truly the standout. A breath of fresh air compared to other tools. Great stuff, I’m excited to see where you take this!

Talha Ashraf Khawaja
Talha Ashraf Khawaja@TalhaAKhawaja

I just tried it. Wanted to give you some feedback based on the blog I'm starting soon. I loved it, I had ideas in my mind for how I wanted it to look, it executed brilliantly.

yidakee
yidakeeu/yidakee

WOW !!! I am seriously impressed !! UI is my weakness and I've just received super powers. You're gonna crush it with this!!!

ziurnauj
ziurnauju/ziurnauj

wait this is very good lol

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 is built and optimized for Claude Code. It also works with any MCP-compatible client that supports the streamable HTTP transport and OAuth authentication.

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 Free

Used by developers building with Claude Code

AI UI Design MCP Server | AIDesigner | AI Designer