gemini-design-mcp 3.1.0 → 3.2.0

package/build/index.js

@@ -7,7 +7,7 @@ import { snippetFrontendSchema, snippetFrontend } from "./tools/snippet-frontend
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
-    version: "3.1.0",
+    version: "3.2.0",
 });
 // =============================================================================
 // TOOL 1: CREATE_FRONTEND
@@ -19,20 +19,17 @@ server.tool("create_frontend", `Create a NEW, complete frontend file with PREMIU
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 This tool is for creating NEW files that need HIGH-QUALITY DESIGN.
-Gemini excels at visual design, layout, and premium UI aesthetics.
 
 ✅ USE THIS TOOL FOR:
-  • "Create a pricing page with 3 tiers" → Complex layout + design decisions
-  • "Create a dashboard with charts and stats" → Premium UI needed
-  • "Create a landing page for a SaaS" → Visual impact matters
-  • "Create a settings page" → Full page design
-  • "Create a user profile component" → Polished UI component
+  • "Create a pricing page" → New file with designed UI
+  • "Create a dashboard" → New file with designed UI
+  • "Create a landing page" → New file with designed UI
+  • "Create a user profile component" → New file with designed UI
 
 ❌ DO NOT USE THIS TOOL FOR:
   • Creating utility functions → You can do this yourself
-  • Creating simple TypeScript types → You can do this yourself
+  • Creating TypeScript types → You can do this yourself
   • Creating config files → You can do this yourself
-  • Creating files that don't need design → You can do this yourself
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ⚠️ CRITICAL: MANDATORY FLOW BEFORE CALLING
@@ -40,62 +37,32 @@ Gemini excels at visual design, layout, and premium UI aesthetics.
 
 STEP 1: CHECK PROJECT STATE
 ─────────────────────────────
-A) EMPTY REPO (no package.json, no framework):
-   → DO NOT call any tool yet
+A) EMPTY REPO (no package.json):
    → Ask user: "What tech stack do you want?"
-   → Help them initialize the project first
+   → Help them initialize first
 
-B) PROJECT EXISTS but NO frontend files/design yet:
+B) PROJECT EXISTS but NO frontend files yet:
    → Proceed to Step 2 (Vibe Selection) - MANDATORY
 
 C) PROJECT EXISTS with existing frontend code:
-   → Analyze existing files to understand design system
-   → Pass relevant files as context parameter
-   → Skip vibe selection (use existing design)
+   → Analyze existing files, pass as context
+   → Skip vibe selection
 
 STEP 2: VIBE SELECTION (Required for new designs)
 ──────────────────────────────────────────────────
-If the project has no existing design system, you MUST run vibe selection:
+Generate 5 vibe options with RICH descriptions (2-3 sentences each):
 
-1. Generate 5 vibe options with RICH, EVOCATIVE descriptions (2-3 sentences each):
-
-   🏛️ "Pristine Museum"
-   An ultra-clean, 'white-cube' aesthetic focused on vast negative space and
-   absolute stillness. Content displayed like art in a modern gallery.
-   Minimal chrome, maximum breathing room, typography as sculpture.
-
-   ⚡ "Technical Precision"
-   A layout-driven vibe emphasizing the grid and intentional structure.
-   Sharp edges, monospace accents, blueprint energy. Feels slightly
-   'under construction' in a cool, architectural way.
-
-   🌊 "Fluid & Organic"
-   Soft curves, flowing gradients, and natural movement throughout.
-   Like water or silk, everything feels smooth and interconnected.
-   Calming yet sophisticated, with gentle animations.
-
-   🔥 "Bold & Unapologetic"
-   High contrast, oversized typography, dramatic color blocks.
-   Demands attention and makes a statement. Not for the faint of heart.
-   Strong visual hierarchy, impactful first impressions.
-
-   🌙 "Dark Luxe"
-   Deep, rich darks with subtle metallic or jewel-tone accents.
-   Premium feel, like a high-end app at night. Sophisticated shadows,
-   glowing highlights, and refined micro-interactions.
-
-2. Present vibes to user, wait for selection
-3. Call this tool with designSystem.vibe filled
+🏛️ "Pristine Museum" - Ultra-clean, white-cube aesthetic...
+⚡ "Technical Precision" - Grid-focused, architectural...
+🌊 "Fluid & Organic" - Soft curves, flowing gradients...
+🔥 "Bold & Unapologetic" - High contrast, oversized typography...
+🌙 "Dark Luxe" - Deep darks, metallic accents...
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns a COMPLETE file with:
-- All necessary imports
-- Premium, polished UI design
-- Proper exports
-- Ready to save directly to filePath`, createFrontendSchema, createFrontend);
+Returns a COMPLETE file ready to save.`, createFrontendSchema, createFrontend);
 // =============================================================================
 // TOOL 2: MODIFY_FRONTEND
 // =============================================================================
@@ -106,140 +73,147 @@ server.tool("modify_frontend", `Redesign a SINGLE UI element. Returns ONLY the c
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 This tool makes exactly ONE design modification at a time.
-
-If you need multiple design changes, call this tool MULTIPLE TIMES IN PARALLEL.
-
-Example - User: "Redesign the sidebar and the header"
-  → Call 1: modify_frontend (sidebar redesign)
-  → Call 2: modify_frontend (header redesign)
-  → Run both calls IN PARALLEL
-
-NEVER bundle multiple modifications into one call!
+If you need multiple changes, call this tool MULTIPLE TIMES IN PARALLEL.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 THIS TOOL IS FOR DESIGN CHANGES, NOT CODE LOGIC
+🎯 WHEN TO USE THIS TOOL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Gemini is a DESIGN specialist. Use this tool when the visual design needs work.
-
-✅ USE THIS TOOL FOR (design changes):
-  • "The sidebar looks ugly, redesign it" → Full visual redesign
-  • "Make this button look more premium" → Design quality upgrade
-  • "This card looks dated, refresh it" → Visual refresh
-  • "Redesign the header with better layout" → Layout + design
-
-❌ DO NOT USE THIS TOOL FOR (you can do these yourself):
-  • "Make the sidebar collapsible" → Logic change, just add useState
-  • "Change the background to blue" → Just change the class
-  • "Add a loading spinner" → Simple code addition
-  • "Add onClick handler" → Just code, no design
-  • "Center this div" → Just flex + items-center
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-💡 DECISION GUIDE: Should I use this tool?
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+Use this to REDESIGN existing UI elements that need better design.
 
-Ask yourself: "Does this require VISUAL DESIGN expertise?"
+✅ USE THIS TOOL FOR:
+  • "The sidebar looks ugly, redesign it"
+  • "Make this card look more premium"
+  • "This header looks dated, refresh it"
+  • "The buttons look boring, make them better"
 
-| User says...                          | Use this tool? | Why                          |
-|---------------------------------------|----------------|------------------------------|
-| "Redesign the sidebar"                | ✅ YES         | Visual design needed         |
-| "Make it look more premium"           | ✅ YES         | Design quality improvement   |
-| "The UI looks bad, fix it"            | ✅ YES         | Design expertise needed      |
-| "Make the sidebar collapsible"        | ❌ NO          | Just logic (useState)        |
-| "Change background color"             | ❌ NO          | One class change             |
-| "Add a button"                        | ❌ NO          | Simple code addition         |
-| "Add hover effects"                   | ❌ NO          | Just add hover: classes      |
+❌ DO NOT USE THIS TOOL FOR:
+  • "Make the sidebar collapsible" → Just logic (useState), do it yourself
+  • "Change background to blue" → Just change the class yourself
+  • "Add onClick handler" → Just code, do it yourself
+  • "Center this div" → Just add flex classes yourself
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns a find/replace block (NOT the full file):
-
 // NEW IMPORTS NEEDED: (if any)
 import { X } from "y";
 
 // FIND THIS CODE:
-<exact existing code to find>
+<exact existing code>
 
 // REPLACE WITH:
-<new redesigned code>
-
-You (the agent) are responsible for:
-- Applying the find/replace to the file
-- Merging any new imports`, modifyFrontendSchema, modifyFrontend);
+<new redesigned code>`, modifyFrontendSchema, modifyFrontend);
 // =============================================================================
 // TOOL 3: SNIPPET_FRONTEND
 // =============================================================================
-server.tool("snippet_frontend", `Generate a NEW UI component/section to INSERT into an existing file.
+server.tool("snippet_frontend", `Generate the JSX/HTML for a NEW UI component to INSERT into an existing file.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 THIS TOOL IS FOR ADDING NEW DESIGNED UI ELEMENTS
+⚠️ CRITICAL: SEPARATION OF CONCERNS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Use this when you need to ADD a new UI element that requires design quality.
+When adding a new UI feature:
+  • YOU (Claude) handle the LOGIC: useState, handlers, data, conditions
+  • GEMINI handles the JSX/HTML: the actual UI component with premium design
+
+EXAMPLE - User: "Add a search dropdown with results"
 
-✅ USE THIS TOOL FOR (new designed UI to insert):
-  • "Add a sidebar to this dashboard" → New designed component to insert
-  • "Add a stats section with charts" → Complex UI element
-  • "Add a pricing table" → Designed component
-  • "Add a testimonials carousel" → Needs visual design
-  • "Add a feature comparison grid" → Complex layout + design
+  YOU do this yourself:
+    const [searchQuery, setSearchQuery] = useState('');
+    const [showDropdown, setShowDropdown] = useState(false);
+    const filteredResults = data.filter(...)
 
-❌ DO NOT USE THIS TOOL FOR (you can do these yourself):
-  • "Add a button" → Too simple, just write the button
-  • "Add a loading spinner" → Simple, do it yourself
-  • "Add an onClick handler" → Just code, no design
-  • "Add a useState hook" → Logic, not design
-  • "Add an import statement" → Just code
+  GEMINI does this (via snippet_frontend):
+    <div className="relative">
+      <input className="..." />
+      {showDropdown && (
+        <div className="absolute ..."> // Premium designed dropdown
+          {filteredResults.map(item => (
+            <div className="..."> // Beautiful result items
+              <Icon />
+              <span>{item.title}</span>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-💡 DECISION GUIDE: snippet_frontend vs modify_frontend
+🎯 WHEN TO USE THIS TOOL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-| Situation                                    | Tool              |
-|----------------------------------------------|-------------------|
-| Adding NEW UI element to a file              | snippet_frontend  |
-| Redesigning EXISTING UI in a file            | modify_frontend   |
-| Creating a NEW file entirely                 | create_frontend   |
+Use this for ANY new UI component that needs visual design:
 
-Example:
-- Dashboard.tsx exists with header + main content
-- User: "Add a sidebar" → snippet_frontend (adding NEW element)
-- User: "Redesign the header" → modify_frontend (changing EXISTING element)
+✅ USE THIS TOOL FOR (Gemini designs the JSX):
+  • "Add a sidebar" → You add state, Gemini designs the sidebar JSX
+  • "Add a search dropdown" → You add useState/filtering, Gemini designs the dropdown JSX
+  • "Add a modal" → You add open/close state, Gemini designs the modal JSX
+  • "Add a notification toast" → You add state, Gemini designs the toast JSX
+  • "Add a stats section" → You add data, Gemini designs the stats cards JSX
+  • "Add a navigation menu" → You add routing logic, Gemini designs the menu JSX
+  • "Add a user avatar dropdown" → You add state, Gemini designs the dropdown JSX
+  • "Add a data table" → You add sorting/filtering, Gemini designs the table JSX
+
+❌ DO NOT USE THIS TOOL FOR (too simple, do it yourself):
+  • "Add a single button" → Just write <button>
+  • "Add an input field" → Just write <input>
+  • "Add a simple link" → Just write <a> or <Link>
+  • "Add a loading spinner" → Just a simple div with animation
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+💡 THE RULE: If it has multiple elements + needs to look good → snippet_frontend
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+| Component                    | Use snippet_frontend? | Why                        |
+|------------------------------|----------------------|----------------------------|
+| Search dropdown with results | ✅ YES               | Multiple elements, design  |
+| Sidebar with nav items       | ✅ YES               | Multiple elements, design  |
+| Modal with form              | ✅ YES               | Multiple elements, design  |
+| Card grid                    | ✅ YES               | Multiple elements, design  |
+| Data table                   | ✅ YES               | Multiple elements, design  |
+| Single button                | ❌ NO                | Too simple                 |
+| Single input                 | ❌ NO                | Too simple                 |
+| Loading spinner              | ❌ NO                | Too simple                 |
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ⚠️ REQUIRED: INSERTION CONTEXT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-The insertionContext parameter tells Gemini WHERE and HOW to match the design:
+Tell Gemini WHERE and HOW to match the design:
 
-Good example:
-"Inside Dashboard component's return, after <Header />.
-Uses Tailwind with dark theme (bg-zinc-900, text-zinc-100).
-Existing components use rounded-xl, p-6 padding, shadow-lg.
-State managed with useState."
+Good: "After the header in Dashboard. Dark theme (bg-zinc-900),
+      rounded-xl corners, p-6 padding. The dropdown should show
+      search results with icons and subtitles."
 
-Bad example:
-"In the dashboard"
+Bad: "In the dashboard"
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns snippet with optional new imports:
-
 // NEW IMPORTS NEEDED:
-import { useState } from "react";
+import { Search } from "lucide-react";
 
 // SNIPPET:
-<Sidebar className="...">
-  ...
-</Sidebar>
-
-You are responsible for:
-- Merging new imports with existing ones
+<div className="relative">
+  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
+  <input
+    value={searchQuery}
+    onChange={(e) => setSearchQuery(e.target.value)}
+    className="w-full pl-10 pr-4 py-2 bg-zinc-800 rounded-xl ..."
+  />
+  {showDropdown && (
+    <div className="absolute top-full mt-2 w-full bg-zinc-800 rounded-xl shadow-2xl ...">
+      {/* Premium designed dropdown content */}
+    </div>
+  )}
+</div>
+
+You (Claude) are responsible for:
+- Adding the logic (useState, handlers) BEFORE calling this tool
+- Merging new imports
 - Inserting the snippet at the correct location`, snippetFrontendSchema, snippetFrontend);
 // =============================================================================
 // START SERVER
@@ -247,7 +221,7 @@ You are responsible for:
 async function main() {
     const transport = new StdioServerTransport();
     await server.connect(transport);
-    console.error("gemini-design-mcp v3.1.0 running on stdio");
+    console.error("gemini-design-mcp v3.2.0 running on stdio");
 }
 main().catch((error) => {
     console.error("Fatal error:", error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gemini-design-mcp",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {