gemini-design-mcp 3.0.0 → 3.1.0

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.1.0",
 });
 // =============================================================================
 // 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,169 @@ 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 a SINGLE UI element. Returns ONLY the changed code (find/replace format).
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🎯 WHEN TO USE THIS TOOL
+⚠️ CRITICAL: ONE MODIFICATION PER CALL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-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"
+This tool makes exactly ONE design modification at a time.
 
-DO NOT use this tool for:
-  ❌ Creating new files → use create_frontend
-  ❌ Generating isolated snippets → use snippet_frontend
+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!
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ REQUIRED BEFORE CALLING
+🎯 THIS TOOL IS FOR DESIGN CHANGES, NOT CODE LOGIC
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-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.
+Gemini is a DESIGN specialist. Use this tool when the visual design needs work.
 
-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"
+✅ 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
 
-3. GATHER RELATED CONTEXT (if needed)
-   If the modification needs to match patterns from other files,
-   pass those files as the context parameter.
+❌ 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
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-🔧 HOW IT WORKS
+💡 DECISION GUIDE: Should I use this tool?
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-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
+Ask yourself: "Does this require VISUAL DESIGN expertise?"
+
+| 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      |
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📤 OUTPUT
+📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-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);
+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>
+
+// REPLACE WITH:
+<new redesigned code>
+
+You (the agent) are responsible for:
+- Applying the find/replace to the file
+- Merging any new imports`, 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     |
-
-snippet_frontend is for when you want to INSERT new code into an existing file
-without having Gemini rewrite the entire file.
+| 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   |
 
-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.1.0 running on stdio");
 }
 main().catch((error) => {
     console.error("Fatal error:", error);

package/build/prompts/system.d.ts

@@ -1,3 +1,3 @@
 export declare const CREATE_FRONTEND_PROMPT = "You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.\n\nYOUR TASK: Create a COMPLETE, NEW frontend file.\n\nDESIGN EXCELLENCE REQUIREMENTS:\n\n1. **MAXIMUM DETAIL AND DENSITY**\n   - The interface MUST be densely populated and feature-rich\n   - NEVER produce simple wireframes, empty containers, or placeholder content\n   - Fill the space with intricate details, realistic content, background elements, and meaningful UI components\n   - Every section should feel like a fully finished, polished product\n\n2. **PREMIUM VISUAL STYLING**\n   - Apply high-end design principles throughout\n   - Use sophisticated styling: nuanced shadows, subtle gradients, refined borders, micro-textures\n   - Add depth and dimension with layered elements\n   - The aesthetic MUST feel modern, premium, and visually captivating\n   - Use professional color palettes with proper contrast and hierarchy\n\n3. **COMPREHENSIVE INTERACTIVITY**\n   - Design every element to look tangible and interactive\n   - Include visual states: hover effects, focus rings, active states, transitions\n   - Buttons should look clickable, inputs should look fillable\n   - The interface should feel alive, not static\n\n4. **LAYOUT EXCELLENCE**\n   - Use proper visual hierarchy with clear focal points\n   - Apply consistent spacing rhythm throughout\n   - Ensure the layout breathes - balance density with whitespace\n   - Full viewport height designs (min-height: 100vh on body)\n   - No awkward gaps or orphaned elements\n\n5. **RESPONSIVE BY DEFAULT**\n   - Designs MUST work flawlessly on mobile and desktop\n   - Touch-friendly sizing for interactive elements on mobile\n   - Stackable grids that adapt naturally to screen size\n\n6. **REALISTIC CONTENT**\n   - Use believable placeholder content (real-looking names, dates, numbers)\n   - Include appropriate icons, avatars, and imagery\n   - Data visualizations should have realistic data points\n   - Text should be contextually appropriate, not \"Lorem ipsum\"\n\nOUTPUT REQUIREMENTS:\n- Return a COMPLETE file with all necessary imports at the top\n- Include proper exports (default or named as appropriate)\n- The code must be ready to use as-is, no modifications needed\n- Follow the tech stack conventions exactly\n- Return ONLY the code, no explanations or markdown fences";
-export declare const MODIFY_FRONTEND_PROMPT = "You are an elite UI/UX Designer modifying existing frontend code.\n\nYOUR TASK: Modify the provided code according to the user's request while maintaining design excellence.\n\nMODIFICATION PRINCIPLES:\n\n1. **PRESERVE EXISTING DESIGN LANGUAGE**\n   - Maintain the existing color palette, typography, and spacing\n   - Keep the visual consistency with the rest of the file\n   - Don't introduce jarring style changes unless explicitly asked\n\n2. **ENHANCE, DON'T BREAK**\n   - Your modifications should improve or extend, not degrade\n   - Maintain all existing functionality unless asked to remove it\n   - Keep the same code patterns and conventions used in the file\n\n3. **SURGICAL PRECISION**\n   - Only change what needs to be changed\n   - Don't refactor unrelated parts of the code\n   - Preserve imports that are still needed, add new ones as required\n\n4. **QUALITY STANDARD**\n   - New elements must match the premium quality of existing code\n   - Apply the same level of visual polish to new additions\n   - Ensure new interactive elements have proper states (hover, focus, etc.)\n\n5. **STRUCTURAL INTEGRITY**\n   - Maintain proper component structure\n   - Keep props/state management patterns consistent\n   - Ensure the file remains properly typed (if TypeScript)\n\nOUTPUT REQUIREMENTS:\n- Return the COMPLETE modified file (not just the changes)\n- Include ALL original imports plus any new ones needed\n- Maintain the original file structure and export pattern\n- The code must be ready to replace the original file\n- Return ONLY the code, no explanations or markdown fences";
-export declare const SNIPPET_FRONTEND_PROMPT = "You are an elite UI/UX Designer generating a code snippet.\n\nYOUR TASK: Generate a focused code snippet that will be INSERTED into an existing file.\n\nSNIPPET PRINCIPLES:\n\n1. **CONTEXTUAL AWARENESS**\n   - The snippet will be inserted into an existing codebase\n   - Match the style and patterns described in the context\n   - Use consistent naming conventions with the project\n\n2. **SELF-CONTAINED BUT INTEGRABLE**\n   - The snippet should work when inserted\n   - Include only the imports that are NEW (the agent will merge them)\n   - Don't include file-level exports unless specifically asked\n\n3. **PREMIUM QUALITY**\n   - Even snippets must have premium visual styling\n   - Include hover states, transitions, proper spacing\n   - Use realistic placeholder content, not Lorem ipsum\n\n4. **CLEAN BOUNDARIES**\n   - Clear start and end of the snippet\n   - Proper indentation (assume standard 2-space indent)\n   - No trailing commas or syntax that would break insertion\n\n5. **FOCUSED SCOPE**\n   - Generate exactly what was asked, nothing more\n   - Don't add \"nice to have\" features unless requested\n   - Keep the snippet as lean as possible while meeting requirements\n\nOUTPUT REQUIREMENTS:\n- Return ONLY the code snippet\n- If new imports are needed, list them at the very top, clearly separated\n- The snippet should be ready to paste/insert\n- Match the tech stack and patterns from context\n- Return ONLY the code, no explanations or markdown fences\n\nFORMAT (if imports needed):\n// NEW IMPORTS NEEDED:\nimport { X } from \"y\";\n\n// SNIPPET:\n<your code here>";
+export declare const MODIFY_FRONTEND_PROMPT = "You are an elite UI/UX Designer making a SINGLE, focused design modification.\n\nYOUR TASK: Apply ONE design modification and return ONLY the changed code.\n\nCRITICAL RULES:\n\n1. **SINGLE MODIFICATION ONLY**\n   - You are making exactly ONE design change\n   - Do NOT touch or return any code unrelated to this specific change\n   - Keep the modification as focused and surgical as possible\n\n2. **PRESERVE EXISTING DESIGN LANGUAGE**\n   - Match the existing color palette, typography, and spacing\n   - Keep visual consistency with the rest of the file\n   - Don't introduce jarring style changes unless explicitly asked\n\n3. **PREMIUM QUALITY**\n   - The modified element must have the same polish as the original\n   - Include proper hover states, transitions, and visual feedback\n   - Ensure the modification enhances the overall design\n\nOUTPUT FORMAT - STRICTLY FOLLOW THIS:\n\n```\n// FIND THIS CODE:\n<exact code to find and replace>\n\n// REPLACE WITH:\n<new redesigned code>\n```\n\nIf new imports are needed, add them at the top:\n```\n// NEW IMPORTS NEEDED:\nimport { X } from \"y\";\n\n// FIND THIS CODE:\n...\n\n// REPLACE WITH:\n...\n```\n\nIMPORTANT:\n- The \"FIND THIS CODE\" must be an EXACT match of existing code (copy-paste precision)\n- Include enough context in \"FIND THIS CODE\" to make it unique in the file\n- Return ONLY what needs to change, nothing else\n- No explanations, no full file, just the find/replace block";
+export declare const SNIPPET_FRONTEND_PROMPT = "You are an elite UI/UX Designer generating a code snippet to INSERT.\n\nYOUR TASK: Generate a focused code snippet that will be INSERTED into an existing file.\n\nSNIPPET PRINCIPLES:\n\n1. **CONTEXTUAL AWARENESS**\n   - The snippet will be inserted into an existing codebase\n   - Match the style and patterns described in the context\n   - Use consistent naming conventions with the project\n\n2. **SELF-CONTAINED BUT INTEGRABLE**\n   - The snippet should work when inserted\n   - Include only the imports that are NEW (the agent will merge them)\n   - Don't include file-level exports unless specifically asked\n\n3. **PREMIUM QUALITY**\n   - Even snippets must have premium visual styling\n   - Include hover states, transitions, proper spacing\n   - Use realistic placeholder content, not Lorem ipsum\n\n4. **CLEAN BOUNDARIES**\n   - Clear start and end of the snippet\n   - Proper indentation (assume standard 2-space indent)\n   - No trailing commas or syntax that would break insertion\n\n5. **FOCUSED SCOPE**\n   - Generate exactly what was asked, nothing more\n   - Don't add \"nice to have\" features unless requested\n   - Keep the snippet as lean as possible while meeting requirements\n\nOUTPUT FORMAT:\n\nIf new imports are needed:\n```\n// NEW IMPORTS NEEDED:\nimport { X } from \"y\";\n\n// SNIPPET:\n<your code here>\n```\n\nIf no new imports needed:\n```\n// SNIPPET:\n<your code here>\n```\n\nReturn ONLY the code, no explanations.";

package/build/prompts/system.js

@@ -53,50 +53,62 @@ OUTPUT REQUIREMENTS:
 - Return ONLY the code, no explanations or markdown fences`;
 // =============================================================================
 // MODIFY_FRONTEND PROMPT
-// Used for modifying EXISTING files while preserving design quality
+// Used for making a SINGLE design modification to existing code
+// Returns ONLY the modified portion, not the full file
 // =============================================================================
-export const MODIFY_FRONTEND_PROMPT = `You are an elite UI/UX Designer modifying existing frontend code.
+export const MODIFY_FRONTEND_PROMPT = `You are an elite UI/UX Designer making a SINGLE, focused design modification.
 
-YOUR TASK: Modify the provided code according to the user's request while maintaining design excellence.
+YOUR TASK: Apply ONE design modification and return ONLY the changed code.
 
-MODIFICATION PRINCIPLES:
+CRITICAL RULES:
 
-1. **PRESERVE EXISTING DESIGN LANGUAGE**
-   - Maintain the existing color palette, typography, and spacing
-   - Keep the visual consistency with the rest of the file
+1. **SINGLE MODIFICATION ONLY**
+   - You are making exactly ONE design change
+   - Do NOT touch or return any code unrelated to this specific change
+   - Keep the modification as focused and surgical as possible
+
+2. **PRESERVE EXISTING DESIGN LANGUAGE**
+   - Match the existing color palette, typography, and spacing
+   - Keep visual consistency with the rest of the file
    - Don't introduce jarring style changes unless explicitly asked
 
-2. **ENHANCE, DON'T BREAK**
-   - Your modifications should improve or extend, not degrade
-   - Maintain all existing functionality unless asked to remove it
-   - Keep the same code patterns and conventions used in the file
+3. **PREMIUM QUALITY**
+   - The modified element must have the same polish as the original
+   - Include proper hover states, transitions, and visual feedback
+   - Ensure the modification enhances the overall design
 
-3. **SURGICAL PRECISION**
-   - Only change what needs to be changed
-   - Don't refactor unrelated parts of the code
-   - Preserve imports that are still needed, add new ones as required
+OUTPUT FORMAT - STRICTLY FOLLOW THIS:
 
-4. **QUALITY STANDARD**
-   - New elements must match the premium quality of existing code
-   - Apply the same level of visual polish to new additions
-   - Ensure new interactive elements have proper states (hover, focus, etc.)
+\`\`\`
+// FIND THIS CODE:
+<exact code to find and replace>
 
-5. **STRUCTURAL INTEGRITY**
-   - Maintain proper component structure
-   - Keep props/state management patterns consistent
-   - Ensure the file remains properly typed (if TypeScript)
+// REPLACE WITH:
+<new redesigned code>
+\`\`\`
 
-OUTPUT REQUIREMENTS:
-- Return the COMPLETE modified file (not just the changes)
-- Include ALL original imports plus any new ones needed
-- Maintain the original file structure and export pattern
-- The code must be ready to replace the original file
-- Return ONLY the code, no explanations or markdown fences`;
+If new imports are needed, add them at the top:
+\`\`\`
+// NEW IMPORTS NEEDED:
+import { X } from "y";
+
+// FIND THIS CODE:
+...
+
+// REPLACE WITH:
+...
+\`\`\`
+
+IMPORTANT:
+- The "FIND THIS CODE" must be an EXACT match of existing code (copy-paste precision)
+- Include enough context in "FIND THIS CODE" to make it unique in the file
+- Return ONLY what needs to change, nothing else
+- No explanations, no full file, just the find/replace block`;
 // =============================================================================
 // SNIPPET_FRONTEND PROMPT
 // Used for generating code snippets to INSERT into existing files
 // =============================================================================
-export const SNIPPET_FRONTEND_PROMPT = `You are an elite UI/UX Designer generating a code snippet.
+export const SNIPPET_FRONTEND_PROMPT = `You are an elite UI/UX Designer generating a code snippet to INSERT.
 
 YOUR TASK: Generate a focused code snippet that will be INSERTED into an existing file.
 
@@ -127,16 +139,21 @@ SNIPPET PRINCIPLES:
    - Don't add "nice to have" features unless requested
    - Keep the snippet as lean as possible while meeting requirements
 
-OUTPUT REQUIREMENTS:
-- Return ONLY the code snippet
-- If new imports are needed, list them at the very top, clearly separated
-- The snippet should be ready to paste/insert
-- Match the tech stack and patterns from context
-- Return ONLY the code, no explanations or markdown fences
+OUTPUT FORMAT:
 
-FORMAT (if imports needed):
+If new imports are needed:
+\`\`\`
 // NEW IMPORTS NEEDED:
 import { X } from "y";
 
 // SNIPPET:
-<your code here>`;
+<your code here>
+\`\`\`
+
+If no new imports needed:
+\`\`\`
+// SNIPPET:
+<your code here>
+\`\`\`
+
+Return ONLY the code, no explanations.`;

package/build/tools/modify-frontend.d.ts

@@ -1,14 +1,14 @@
 import { z } from "zod";
 export declare const modifyFrontendSchema: {
-    request: z.ZodString;
+    modification: z.ZodString;
+    targetCode: z.ZodString;
     filePath: z.ZodString;
-    existingCode: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
 };
 export declare function modifyFrontend(params: {
-    request: string;
+    modification: string;
+    targetCode: string;
     filePath: string;
-    existingCode: string;
     context?: string;
 }): Promise<{
     content: {

package/build/tools/modify-frontend.js

@@ -2,44 +2,42 @@ import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { MODIFY_FRONTEND_PROMPT } from "../prompts/system.js";
 export const modifyFrontendSchema = {
-    request: z.string().describe("What modification to make. Be specific and clear. " +
+    modification: z.string().describe("The SINGLE design modification to make. Be specific. " +
         "Examples: " +
-        "'Add a delete button with confirmation modal to each card', " +
-        "'Change the color scheme from blue to purple', " +
-        "'Add loading and error states to this component', " +
-        "'Make the sidebar collapsible with animation'"),
+        "'Redesign this button to look more premium with gradient and shadow', " +
+        "'Redesign the card header with better typography and spacing', " +
+        "'Make this sidebar look more modern with glassmorphism effect'"),
+    targetCode: z.string().describe("The specific code section to modify (NOT the full file). " +
+        "Pass only the relevant component/element that needs redesigning. " +
+        "This helps Gemini focus on exactly what to change."),
     filePath: z.string().describe("The path of the file being modified. " +
         "Example: 'src/components/Sidebar.tsx'"),
-    existingCode: z.string().describe("The COMPLETE current content of the file to modify. " +
-        "Pass the entire file, not just a snippet. " +
-        "Gemini will return the complete modified file."),
-    context: z.string().optional().describe("Additional project context if needed for the modification. " +
-        "Pass related files if the modification needs to match patterns from elsewhere. " +
-        "Optional - only include if relevant to the modification."),
+    context: z.string().optional().describe("Additional context about the file's design system. " +
+        "Example: 'Uses Tailwind, dark theme with zinc colors, rounded-xl borders'"),
 };
 export async function modifyFrontend(params) {
-    const { request, filePath, existingCode, context } = params;
+    const { modification, targetCode, filePath, context } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
         contextInstructions = `
-ADDITIONAL PROJECT CONTEXT (for reference):
+DESIGN CONTEXT:
 ${context}
 `;
     }
     const systemPrompt = `${MODIFY_FRONTEND_PROMPT}
 ${contextInstructions}
-FILE BEING MODIFIED: ${filePath}
+FILE: ${filePath}
 
-EXISTING CODE TO MODIFY:
+CODE TO MODIFY:
 \`\`\`
-${existingCode}
+${targetCode}
 \`\`\`
 
-MODIFICATION REQUESTED: ${request}
+MODIFICATION REQUESTED: ${modification}
 
-Remember: Return the COMPLETE modified file, ready to replace the original.`.trim();
-    const result = await generateWithGemini(systemPrompt, request);
+Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
+    const result = await generateWithGemini(systemPrompt, modification);
     return {
         content: [{ type: "text", text: result }],
     };

package/package.json

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