Gemini Visual Design

Generate, edit, analyze, and animate visual designs with Google Gemini — directly inside Claude Code.

Hero — generated SaaS dashboard mockup

Generated in one command: /design-mockup A dark analytics dashboard with sidebar nav, KPI cards, an area chart, and a transactions table

Every screenshot in this README is a real, unretouched output from the plugin's own MCP tools — no Photoshop, no mockup tool. The exact prompt used for each one is shown in its caption.

Why this plugin

Calling Gemini directly is easy. Calling it well — without burning quota on bad prompts, generic outputs, or one-off images that don't match your project — is the hard part.

This plugin wraps the Google GenAI SDK in a prompt enhancement pipeline (validation → templates → style-profile injection → API), a draft-first workflow (fast Gemini Flash for iteration, Imagen 4 for finals, Veo for video), an edit-over-regenerate philosophy via multi-turn image editing, and project-aware style profiles that auto-detect your Tailwind/CSS config so every generation inherits your colors, typography, and aesthetic. Plus the visual-enhancer agent that proactively suggests visual upgrades after Claude writes UI code.

Quick start (5 minutes)

# 1. Get a free API key at https://aistudio.google.com/apikey
export GEMINI_API_KEY="your-key-here"

# 2. Install
cd gemini-visual-design
pip install -e .

# 3. Restart Claude Code so it picks up the .mcp.json

Then, in any project, ask Claude:

/design-mockup A dark-themed analytics dashboard with sidebar navigation and KPI cards

You'll get a generated image at ~/.cache/gemini-visual-design/preview/ plus a tip on how to refine it with edit_image or save it into your project with save_asset.

Gallery

Icon set generation

/create-asset A clean grid of 6 minimal line icons in a 3x2 layout for a
project management app: dashboard (gauge), tasks (checklist), calendar
(calendar grid), team (people group), settings (gear), notifications (bell).
Consistent 2px stroke, rounded line caps, monochrome dark indigo.

Edit, don't regenerate

Before	After

edit_image
  image_path: docs/screenshots/edit-before.jpg
  instruction: Replace the beige background with a deep rich purple (#4c1d95),
               keep the sneaker exactly the same, add subtle film grain noise
               on the background only, preserve all lighting and shadows.

Multi-turn editing keeps the original intact and preserves the subject — every pixel of the sneaker above is unchanged. Each refinement is one API call instead of a full regeneration.

Design analysis with scored categories

/review-visuals docs/screenshots/hero-dashboard.jpg

Returns a structured JSON critique with scored categories and concrete edit instructions that can be piped straight into edit_image. Here's the actual output for the hero image above:

{
  "overall_score": 9.0,
  "categories": {
    "color":      { "score": 9.5, "summary": "Excellent dark theme palette..." },
    "layout":     { "score": 9.0, "summary": "Clean, grid-based layout..." },
    "typography": { "score": 9.5, "summary": "Clear, modern sans-serif..." },
    "usability":  { "score": 8.5, "summary": "Intuitive navigation..." }
  },
  "top_issues": [
    {
      "issue": "Missing 'Settings' menu item in main sidebar.",
      "severity": "medium",
      "edit_instruction": "Add a 'Settings' item with a gear icon to the main navigation menu, just below 'Reports'."
    },
    {
      "issue": "Search bar lacks explicit 'Search' button or visual action affordance.",
      "severity": "medium",
      "edit_instruction": "Add a search button with a magnifying glass icon to the right side of the search bar..."
    }
  ]
}

Each edit_instruction is shaped to feed directly into edit_image, closing the loop: analyze → fix → re-analyze. Full output: docs/screenshots/hero-dashboard.analysis.json.