UI Design MCP

AI-powered frontend design via MCP — generate premium UI components, pages, and design systems from natural language.

What it does

This MCP server turns natural language into production-grade frontend code:

• Complete pages (dashboards, landing pages, settings, etc.)
• UI components with premium design quality
• Design systems with consistent tokens
• Surgical modifications to existing components
• Code snippets that integrate into existing projects

Tools

| Tool | Description | |------|-------------| | generate_vibes | Generate 5 design vibe options for a new project | | create_frontend | Create a new page or component with premium design | | modify_frontend | Redesign a specific UI element (surgical find/replace) | | snippet_frontend | Generate a JSX/HTML snippet to insert into existing code |

Prerequisites

1. Node.js >= 18
2. DjioniDev API key

Installation

npm install -g @djionidev/ui-design-mcp

Configuration

Claude Code

claude mcp add ui-design -- npx -y @djionidev/ui-design-mcp

Claude Desktop / Cursor / Windsurf

{
  "mcpServers": {
    "ui-design": {
      "command": "npx",
      "args": ["-y", "@djionidev/ui-design-mcp"]
    }
  }
}

API Key

Your djd_live_ API key is passed per call as a tool parameter. Your AI assistant will ask for it the first time a tool is invoked in a conversation. The key is never stored in config files or environment variables — it lives only in the active conversation.

Usage

New project (recommended flow)

1. Ask: "Generate design vibes for my SaaS dashboard"
2. Pick your favorite vibe
3. Ask: "Create a pricing page with the selected vibe"
4. Receive complete, styled code

Existing project

Pass your CSS/theme files as context so generated code matches your design system:

"Create a settings page matching my existing design"

Design system

On the first page, set generateDesignSystem: true. The tool returns both the code AND a complete design system (colors, typography, spacing, buttons, inputs, cards). Save it as design-system.md at your project root — all subsequent pages will automatically match.

Billing

Each successful generation consumes 1 credit. Your monthly plan credits are used first, then any bonus credits from one-time top-ups. When you run out, the tool returns a clear upgrade link.

Environment Variables

The MCP server itself needs no secrets. The only optional env vars are non-sensitive overrides:

| Variable | Required | Description | |----------|----------|-------------| | LLM_MODEL | No | Override the underlying model | | DJIONI_LICENSE_API_URL | No | Override the license API URL (default: production) |

License

MIT