gemini-design-mcp

MCP server that uses Google Gemini 3 Pro for frontend/design code generation.

Why?

Gemini excels at UI/UX design and frontend code generation. This MCP lets any AI agent (Claude Code, Codex, etc.) delegate frontend tasks to Gemini.

Key principle: The calling agent manages context. No config files needed.

Installation

Add to your Claude Desktop config (~/.claude/claude_desktop_config.json):

{
  "mcpServers": {
    "gemini-design": {
      "command": "npx",
      "args": ["-y", "gemini-design-mcp"],
      "env": {
        "GEMINI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Get your Gemini API key at: https://aistudio.google.com/app/apikey

Tools

generate_frontend

Main tool for creating frontend code.

Parameters:

• request (required): What to create (e.g., "A hero section with gradient background")
• context (nullable): Existing code for style reference. Pass null for new projects.
• techStack (optional): Tech stack (e.g., "React + Tailwind", "Vue + CSS", "Next.js + shadcn")
• preferences (optional): Style preferences (e.g., "dark mode", "glassmorphism", "minimal")

improve_frontend

Improve existing frontend code.

Parameters:

• code (required): Current code to improve
• feedback (required): What to improve (e.g., "Make it more modern", "Add hover effects")
• context (optional): Additional context for consistency

suggest_design

Get design suggestions without generating code. Saves tokens.

Parameters:

• description (required): What you're designing
• currentApproach (optional): Current approach or constraints

How Context Works

The calling agent (Claude, Codex) is responsible for passing relevant context:

• New project: Pass context: null, Gemini creates from scratch
• Existing project: Agent reads relevant components and passes them as context

This ensures design consistency without requiring any user configuration.

Example Usage

Agent: "Create a pricing card component"

→ Calls generate_frontend({
    request: "A pricing card with 3 tiers, toggle for monthly/yearly",
    context: "<existing Button and Card components>",
    techStack: "React + Tailwind",
    preferences: "glassmorphism, dark mode"
  })

← Returns complete, production-ready component code

Development

# Clone and install
git clone <repo>
cd gemini-design-mcp
npm install

# Build
npm run build

# Test locally
GEMINI_API_KEY=your-key node build/index.js

License

MIT