gemini-design-mcp 3.0.0 → 3.0.1

package/build/index.js

@@ -7,26 +7,32 @@ import { snippetFrontendSchema, snippetFrontend } from "./tools/snippet-frontend
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
-    version: "3.0.0",
+    version: "3.0.1",
 });
 // =============================================================================
 // TOOL 1: CREATE_FRONTEND
 // =============================================================================
-server.tool("create_frontend", `Create a NEW, complete frontend file (page, component, layout, section).
+server.tool("create_frontend", `Create a NEW, complete frontend file with PREMIUM DESIGN quality.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 🎯 WHEN TO USE THIS TOOL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Use this tool when you need to create a NEW file that doesn't exist yet:
-  ✅ "Create a pricing page with 3 tiers"
-  ✅ "Create a new UserProfile component"
-  ✅ "Create the main dashboard layout"
-  ✅ "Create a settings page"
+This tool is for creating NEW files that need HIGH-QUALITY DESIGN.
+Gemini excels at visual design, layout, and premium UI aesthetics.
 
-DO NOT use this tool for:
-  ❌ Modifying existing files → use modify_frontend
-  ❌ Adding code to existing files → use snippet_frontend
+✅ 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
+
+❌ DO NOT USE THIS TOOL FOR:
+  • Creating utility functions → You can do this yourself
+  • Creating simple 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
@@ -34,13 +40,10 @@ DO NOT use this tool for:
 
 STEP 1: CHECK PROJECT STATE
 ─────────────────────────────
-Before calling this tool, you MUST check the project state:
-
 A) EMPTY REPO (no package.json, no framework):
    → DO NOT call any tool yet
-   → Ask user: "What tech stack do you want? (Next.js, React + Vite, Vue, etc.)"
+   → Ask user: "What tech stack do you want?"
    → Help them initialize the project first
-   → Only proceed after framework is installed
 
 B) PROJECT EXISTS but NO frontend files/design yet:
    → Proceed to Step 2 (Vibe Selection) - MANDATORY
@@ -48,18 +51,17 @@ B) PROJECT EXISTS but NO frontend files/design yet:
 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 system)
+   → Skip vibe selection (use existing design)
 
 STEP 2: VIBE SELECTION (Required for new designs)
 ──────────────────────────────────────────────────
 If the project has no existing design system, you MUST run vibe selection:
 
-1. Generate 5 vibe options with RICH, EVOCATIVE descriptions (2-3 sentences each).
-   Each vibe should paint a vivid picture of the aesthetic. Examples:
+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 is displayed like art in a modern gallery.
+   absolute stillness. Content displayed like art in a modern gallery.
    Minimal chrome, maximum breathing room, typography as sculpture.
 
    ⚡ "Technical Precision"
@@ -74,7 +76,7 @@ If the project has no existing design system, you MUST run vibe selection:
 
    🔥 "Bold & Unapologetic"
    High contrast, oversized typography, dramatic color blocks.
-   It demands attention and makes a statement. Not for the faint of heart.
+   Demands attention and makes a statement. Not for the faint of heart.
    Strong visual hierarchy, impactful first impressions.
 
    🌙 "Dark Luxe"
@@ -83,170 +85,159 @@ If the project has no existing design system, you MUST run vibe selection:
    glowing highlights, and refined micro-interactions.
 
 2. Present vibes to user, wait for selection
-
 3. Call this tool with designSystem.vibe filled
 
-STEP 3: GATHER CONTEXT
-───────────────────────
-If the project has existing code:
-- Read relevant files (components, styles, theme config)
-- Pass them as the context parameter
-- This ensures Gemini matches the existing design system
-
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Returns a COMPLETE file with:
-- All necessary imports at the top
-- Proper component/page structure
-- Exports (default or named)
+- All necessary imports
+- Premium, polished UI design
+- Proper exports
 - Ready to save directly to filePath`, createFrontendSchema, createFrontend);
 // =============================================================================
 // TOOL 2: MODIFY_FRONTEND
 // =============================================================================
-server.tool("modify_frontend", `Modify an EXISTING frontend file while maintaining design quality.
+server.tool("modify_frontend", `Redesign or significantly improve the VISUAL DESIGN of an existing file.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 WHEN TO USE THIS TOOL
+🎯 THIS TOOL IS FOR DESIGN CHANGES, NOT CODE LOGIC
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Use this tool when you need to CHANGE an existing file:
-  ✅ "Add a delete button to this card component"
-  ✅ "Change the color scheme from blue to purple"
-  ✅ "Add loading and error states"
-  ✅ "Make this sidebar collapsible"
-  ✅ "Add dark mode support to this component"
-  ✅ "Refactor this component to use a different state pattern"
+Gemini is a DESIGN specialist. Use this tool when the visual design needs work.
 
-DO NOT use this tool for:
-  ❌ Creating new files → use create_frontend
-  ❌ Generating isolated snippets → use snippet_frontend
+✅ USE THIS TOOL FOR (design changes):
+  • "The sidebar looks ugly, redesign it" → Full visual redesign
+  • "Make this page look more premium/modern" → Design quality upgrade
+  • "This component looks dated, refresh the design" → Visual refresh
+  • "Redesign the header with a better layout" → Layout + design
+  • "The cards look boring, make them more visually appealing" → Design improvement
+
+❌ DO NOT USE THIS TOOL FOR (you can do these yourself):
+  • "Make the sidebar collapsible" → Logic change, just add useState + animation
+  • "Change the background to blue" → Just change bg-zinc-900 to bg-blue-900
+  • "Add a loading spinner" → Simple code addition
+  • "Add onClick handler" → Just code, no design needed
+  • "Fix the TypeScript error" → Not a design task
+  • "Add dark mode toggle" → Logic, not design
+  • "Make it responsive" → You can add breakpoints yourself
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ REQUIRED BEFORE CALLING
+💡 DECISION GUIDE: Should I use this tool?
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-1. READ THE EXISTING FILE FIRST
-   You MUST read the file's current content before calling this tool.
-   Pass the complete file content as existingCode parameter.
-
-2. UNDERSTAND THE MODIFICATION
-   Be specific about what to change. Vague requests = vague results.
-   Good: "Add a red delete button in the top-right corner of each card"
-   Bad: "Make it better"
+Ask yourself: "Does this require VISUAL DESIGN expertise?"
 
-3. GATHER RELATED CONTEXT (if needed)
-   If the modification needs to match patterns from other files,
-   pass those files as the context parameter.
+| 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      |
+| "Center this div"                     | ❌ NO          | Just flex + items-center     |
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🔧 HOW IT WORKS
+⚠️ REQUIRED BEFORE CALLING
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Gemini will:
-- Analyze the existing code structure and patterns
-- Apply the requested modification surgically
-- Preserve the existing design language (colors, spacing, typography)
-- Maintain all unrelated functionality
-- Add new imports only if needed
-- Return the COMPLETE modified file
+1. READ THE EXISTING FILE FIRST
+   Pass the complete file content as existingCode parameter.
+
+2. BE SPECIFIC ABOUT THE DESIGN PROBLEM
+   Good: "The sidebar looks outdated, redesign with modern aesthetics, better spacing"
+   Bad: "Fix the sidebar"
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Returns the COMPLETE modified file:
-- Ready to replace the original file entirely
-- All imports preserved + new ones added
-- Same file structure and exports
-- Modification applied with premium quality`, modifyFrontendSchema, modifyFrontend);
+- Ready to replace the original file
+- Design improvements applied
+- All functionality preserved`, modifyFrontendSchema, modifyFrontend);
 // =============================================================================
 // TOOL 3: SNIPPET_FRONTEND
 // =============================================================================
-server.tool("snippet_frontend", `Generate a code SNIPPET to INSERT into an existing file.
+server.tool("snippet_frontend", `Generate a NEW UI component/section to INSERT into an existing file.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 WHEN TO USE THIS TOOL
+🎯 THIS TOOL IS FOR ADDING NEW DESIGNED UI ELEMENTS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Use this tool when you need to ADD something to an existing file:
-  ✅ "Add a sidebar to this dashboard" (snippet to insert)
-  ✅ "Generate a data table component to add here"
-  ✅ "Create a custom hook for API calls"
-  ✅ "Add a modal component inside this page"
-  ✅ "Generate a form section to add after the header"
+Use this when you need to ADD a new UI element that requires design quality.
+
+✅ 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
 
-DO NOT use this tool for:
-  ❌ Creating complete new files → use create_frontend
-  ❌ Modifying existing code → use modify_frontend
+❌ 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
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-💡 KEY DIFFERENCE FROM OTHER TOOLS
+💡 DECISION GUIDE: snippet_frontend vs modify_frontend
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-| Tool             | Input                    | Output                     |
-|------------------|--------------------------|----------------------------|
-| create_frontend  | What to create           | Complete new file          |
-| modify_frontend  | Existing code + changes  | Complete modified file     |
-| snippet_frontend | Insertion context        | Code snippet to insert     |
+| 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   |
 
-snippet_frontend is for when you want to INSERT new code into an existing file
-without having Gemini rewrite the entire file.
-
-Example flow:
-1. User: "Add a sidebar to my dashboard"
-2. You read Dashboard.tsx
-3. You call snippet_frontend with insertion context
-4. Gemini returns just the sidebar code
-5. You insert it at the right location in Dashboard.tsx
+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)
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ⚠️ REQUIRED: INSERTION CONTEXT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-The insertionContext parameter is CRITICAL. It tells Gemini:
-- WHERE the snippet will be inserted
-- WHAT code surrounds it
-- WHAT patterns to match
+The insertionContext parameter tells Gemini WHERE and HOW to match the design:
 
-Good insertionContext example:
-"Inside the Dashboard component's return statement, after the <Header />
-component. The file uses Tailwind CSS with a dark theme (zinc-900 background,
-zinc-100 text). State is managed with useState hooks. The existing components
-use rounded-xl borders and p-6 padding."
+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."
 
-Bad insertionContext example:
-"In the dashboard file"
+Bad example:
+"In the dashboard"
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns a snippet with this structure (if new imports needed):
+Returns snippet with optional new imports:
 
 // NEW IMPORTS NEEDED:
 import { useState } from "react";
-import { Dialog } from "@headlessui/react";
 
 // SNIPPET:
 <Sidebar className="...">
   ...
 </Sidebar>
 
-Or just the snippet if no new imports are needed.
-
-You (the agent) are responsible for:
-- Merging new imports with existing imports
-- Inserting the snippet at the correct location
-- Ensuring the file still compiles after insertion`, snippetFrontendSchema, snippetFrontend);
+You are responsible for:
+- Merging new imports with existing ones
+- Inserting the snippet at the correct location`, snippetFrontendSchema, snippetFrontend);
 // =============================================================================
 // START SERVER
 // =============================================================================
 async function main() {
     const transport = new StdioServerTransport();
     await server.connect(transport);
-    console.error("gemini-design-mcp v3.0.0 running on stdio");
+    console.error("gemini-design-mcp v3.0.1 running on stdio");
 }
 main().catch((error) => {
     console.error("Fatal error:", error);

package/package.json

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