gemini-design-mcp 2.1.0 → 3.0.1

package/build/index.js

@@ -1,90 +1,243 @@
 #!/usr/bin/env node
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { generateFrontendSchema, generateFrontend } from "./tools/generate-frontend.js";
+import { createFrontendSchema, createFrontend } from "./tools/create-frontend.js";
+import { modifyFrontendSchema, modifyFrontend } from "./tools/modify-frontend.js";
+import { snippetFrontendSchema, snippetFrontend } from "./tools/snippet-frontend.js";
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
-    version: "2.0.0",
+    version: "3.0.1",
 });
-// Tool: generate_frontend
-server.tool("generate_frontend", `Generate premium, production-ready frontend code with Gemini's 1M context window.
+// =============================================================================
+// TOOL 1: CREATE_FRONTEND
+// =============================================================================
+server.tool("create_frontend", `Create a NEW, complete frontend file with PREMIUM DESIGN quality.
 
-⚠️ CRITICAL: DO NOT call this tool immediately. Follow this flow STRICTLY:
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🎯 WHEN TO USE THIS TOOL
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+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
+
+❌ 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
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+STEP 1: CHECK PROJECT STATE
+─────────────────────────────
+A) EMPTY REPO (no package.json, no framework):
+   → DO NOT call any tool yet
+   → Ask user: "What tech stack do you want?"
+   → Help them initialize the project first
+
+B) PROJECT EXISTS but NO frontend files/design 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)
+
+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):
+
+   🏛️ "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
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📤 OUTPUT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Returns a COMPLETE file with:
+- 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", `Redesign or significantly improve the VISUAL DESIGN of an existing file.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+🎯 THIS TOOL IS FOR DESIGN CHANGES, NOT CODE LOGIC
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+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 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
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+💡 DECISION GUIDE: Should I use this tool?
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+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      |
+| "Center this div"                     | ❌ NO          | Just flex + items-center     |
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-STEP 1: CHECK PROJECT STATE (before ANY tool call)
+⚠️ REQUIRED BEFORE CALLING
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-A) EMPTY REPO (no package.json, no framework installed):
-   → DO NOT call this tool
-   → Ask user: "What tech stack do you want? (Next.js, React + Vite, Vue, etc.)"
-   → Wait for user to initialize the project first
-   → Only proceed after project is set up
+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"
 
-B) PROJECT INITIALIZED but NO existing pages/components/design:
-   → DO NOT call this tool yet
-   → MANDATORY: Run vibe selection questionnaire first (see Step 2)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📤 OUTPUT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-C) PROJECT WITH EXISTING CODE:
-   → First, analyze the codebase to understand:
-     • Tech stack (React? Vue? Next.js? Tailwind? CSS Modules?)
-     • Project structure (where to put pages/components)
-     • Existing design patterns (colors, spacing, component style)
-   → Then pass relevant files as context parameter
+Returns the COMPLETE modified file:
+- Ready to replace the original file
+- Design improvements applied
+- All functionality preserved`, modifyFrontendSchema, modifyFrontend);
+// =============================================================================
+// TOOL 3: SNIPPET_FRONTEND
+// =============================================================================
+server.tool("snippet_frontend", `Generate a NEW UI component/section to INSERT into an existing file.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-STEP 2: VIBE SELECTION (required for new designs)
+🎯 THIS TOOL IS FOR ADDING NEW DESIGNED UI ELEMENTS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-If the project has no existing design system, you MUST:
+Use this when you need to ADD a new UI element that requires design quality.
 
-1. Generate 5 vibe options with RICH, EVOCATIVE descriptions (2-3 sentences each).
-   Each vibe should paint a vivid picture of the aesthetic. Examples:
+✅ 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
 
-   • 🏛️ "Pristine Museum" - An ultra-clean, 'white-cube' aesthetic focused on
-     vast negative space and absolute stillness. The focus is entirely on the
-     content as if it were hanging in a modern gallery. Minimal chrome,
-     maximum breathing room.
+❌ 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
 
-   • ⚡ "Technical Precision" - A layout-driven vibe that emphasizes the grid.
-     It feels intentional, structured, and slightly 'under construction' in a
-     cool, architectural way. Sharp edges, monospace accents, blueprint energy.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+💡 DECISION GUIDE: snippet_frontend vs modify_frontend
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-   • 🌊 "Fluid & Organic" - Soft curves, flowing gradients, and a sense of
-     natural movement. Like water or silk, everything feels smooth and
-     interconnected. Calming yet sophisticated.
+| 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   |
 
-   • 🔥 "Bold & Unapologetic" - High contrast, oversized typography, and
-     dramatic color blocks. It demands attention and makes a statement.
-     Not for the faint of heart.
+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)
 
-   • 🌙 "Dark Luxe" - Deep, rich darks with subtle metallic or jewel-tone
-     accents. Premium feel, like a high-end app at night. Sophisticated
-     shadows and glowing highlights.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+⚠️ REQUIRED: INSERTION CONTEXT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+The insertionContext parameter tells Gemini WHERE and HOW to match the design:
 
-2. Present the 5 vibes to the user and wait for their selection
+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."
 
-3. Only THEN call this tool with the designSystem.vibe parameter filled
-   (Gemini will choose the best font to match the vibe automatically)
+Bad example:
+"In the dashboard"
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-STEP 3: CALL THIS TOOL
+📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Only after completing the above steps:
-- New project: context=null, designSystem={vibe}, techStack specified
-- Existing project: context=<relevant files>, techStack from analysis
+Returns snippet with optional new imports:
+
+// NEW IMPORTS NEEDED:
+import { useState } from "react";
+
+// SNIPPET:
+<Sidebar className="...">
+  ...
+</Sidebar>
 
-CAPABILITIES:
-- Creates visually stunning, feature-rich interfaces (not wireframes)
-- Supports any tech stack: React, Vue, Svelte, HTML/CSS, Next.js, etc.
-- Maintains design consistency when given project context`, generateFrontendSchema, generateFrontend);
-// Start server
+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 v2.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/build/prompts/system.d.ts

@@ -1 +1,3 @@
-export declare const GENERATE_FRONTEND_PROMPT = "You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.\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\nTECHNICAL RULES:\n- Return COMPLETE, functional code - never use \"// TODO\", \"...\", or placeholders\n- If CONTEXT is provided, match its design language and component patterns\n- If no context, you have full creative freedom but MUST achieve premium quality\n- Respect the specified tech stack exactly\n- Return ONLY the code, no explanations or markdown fences";
+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>";

package/build/prompts/system.js

@@ -1,4 +1,10 @@
-export const GENERATE_FRONTEND_PROMPT = `You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.
+// =============================================================================
+// CREATE_FRONTEND PROMPT
+// Used for creating NEW complete files (pages, components, sections)
+// =============================================================================
+export const CREATE_FRONTEND_PROMPT = `You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.
+
+YOUR TASK: Create a COMPLETE, NEW frontend file.
 
 DESIGN EXCELLENCE REQUIREMENTS:
 
@@ -39,9 +45,98 @@ DESIGN EXCELLENCE REQUIREMENTS:
    - Data visualizations should have realistic data points
    - Text should be contextually appropriate, not "Lorem ipsum"
 
-TECHNICAL RULES:
-- Return COMPLETE, functional code - never use "// TODO", "...", or placeholders
-- If CONTEXT is provided, match its design language and component patterns
-- If no context, you have full creative freedom but MUST achieve premium quality
-- Respect the specified tech stack exactly
+OUTPUT REQUIREMENTS:
+- Return a COMPLETE file with all necessary imports at the top
+- Include proper exports (default or named as appropriate)
+- The code must be ready to use as-is, no modifications needed
+- Follow the tech stack conventions exactly
+- Return ONLY the code, no explanations or markdown fences`;
+// =============================================================================
+// MODIFY_FRONTEND PROMPT
+// Used for modifying EXISTING files while preserving design quality
+// =============================================================================
+export const MODIFY_FRONTEND_PROMPT = `You are an elite UI/UX Designer modifying existing frontend code.
+
+YOUR TASK: Modify the provided code according to the user's request while maintaining design excellence.
+
+MODIFICATION PRINCIPLES:
+
+1. **PRESERVE EXISTING DESIGN LANGUAGE**
+   - Maintain the existing color palette, typography, and spacing
+   - Keep the 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. **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
+
+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.)
+
+5. **STRUCTURAL INTEGRITY**
+   - Maintain proper component structure
+   - Keep props/state management patterns consistent
+   - Ensure the file remains properly typed (if TypeScript)
+
+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`;
+// =============================================================================
+// 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.
+
+YOUR TASK: Generate a focused code snippet that will be INSERTED into an existing file.
+
+SNIPPET PRINCIPLES:
+
+1. **CONTEXTUAL AWARENESS**
+   - The snippet will be inserted into an existing codebase
+   - Match the style and patterns described in the context
+   - Use consistent naming conventions with the project
+
+2. **SELF-CONTAINED BUT INTEGRABLE**
+   - The snippet should work when inserted
+   - Include only the imports that are NEW (the agent will merge them)
+   - Don't include file-level exports unless specifically asked
+
+3. **PREMIUM QUALITY**
+   - Even snippets must have premium visual styling
+   - Include hover states, transitions, proper spacing
+   - Use realistic placeholder content, not Lorem ipsum
+
+4. **CLEAN BOUNDARIES**
+   - Clear start and end of the snippet
+   - Proper indentation (assume standard 2-space indent)
+   - No trailing commas or syntax that would break insertion
+
+5. **FOCUSED SCOPE**
+   - Generate exactly what was asked, nothing more
+   - 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
+
+FORMAT (if imports needed):
+// NEW IMPORTS NEEDED:
+import { X } from "y";
+
+// SNIPPET:
+<your code here>`;

package/build/tools/{generate-frontend.d.ts → create-frontend.d.ts}

@@ -1,8 +1,9 @@
 import { z } from "zod";
-export declare const generateFrontendSchema: {
+export declare const createFrontendSchema: {
     request: z.ZodString;
+    filePath: z.ZodString;
+    techStack: z.ZodString;
     context: z.ZodNullable<z.ZodString>;
-    techStack: z.ZodOptional<z.ZodString>;
     designSystem: z.ZodOptional<z.ZodObject<{
         vibe: z.ZodObject<{
             name: z.ZodString;
@@ -31,10 +32,11 @@ export declare const generateFrontendSchema: {
         };
     }>>;
 };
-export declare function generateFrontend(params: {
+export declare function createFrontend(params: {
     request: string;
+    filePath: string;
+    techStack: string;
     context: string | null;
-    techStack?: string;
     designSystem?: {
         vibe: {
             name: string;

package/build/tools/create-frontend.js

@@ -0,0 +1,71 @@
+import { z } from "zod";
+import { generateWithGemini } from "../lib/gemini.js";
+import { CREATE_FRONTEND_PROMPT } from "../prompts/system.js";
+export const createFrontendSchema = {
+    request: z.string().describe("What to create: describe the page, component, or section. " +
+        "Be specific about functionality and content. " +
+        "Example: 'A pricing page with 3 tiers (Basic, Pro, Enterprise) with feature comparison table'"),
+    filePath: z.string().describe("The path where this file will be created. " +
+        "Example: 'src/components/PricingPage.tsx' or 'app/dashboard/page.tsx'"),
+    techStack: z.string().describe("The tech stack to use. Be specific. " +
+        "Examples: 'React + TypeScript + Tailwind CSS', 'Next.js 14 App Router + shadcn/ui', 'Vue 3 + Composition API + CSS Modules'"),
+    context: z.string().nullable().describe("Existing project code for design consistency. " +
+        "Pass relevant files (components, styles, theme config) so Gemini matches your design system. " +
+        "Null only if this is the FIRST file in a new project."),
+    designSystem: z.object({
+        vibe: z.object({
+            name: z.string().describe("Vibe name (e.g., 'Pristine Museum', 'Dark Luxe')"),
+            description: z.string().describe("Rich, evocative description of the mood (2-3 sentences)"),
+            keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'whitespace', 'gallery'])"),
+        }).describe("The selected design vibe"),
+    }).optional().describe("Design system with selected vibe. REQUIRED for new projects without existing design. " +
+        "The calling agent generates 5 vibe options, user selects, then pass the selection here."),
+};
+export async function createFrontend(params) {
+    const { request, filePath, techStack, context, designSystem } = params;
+    // Build design system instructions if provided
+    let designSystemInstructions = '';
+    if (designSystem?.vibe) {
+        const { vibe } = designSystem;
+        designSystemInstructions = `
+MANDATORY DESIGN SYSTEM (User Selected Vibe):
+
+**Design Vibe: "${vibe.name}"**
+${vibe.description}
+
+Keywords to embody: ${vibe.keywords.join(', ')}
+
+Interpret this vibe creatively:
+- Choose colors, gradients, and visual styling that embody this atmosphere
+- Select a font from Google Fonts that perfectly matches this vibe
+- Apply consistent visual language throughout the entire interface
+- You have freedom in the specific implementation, but the overall feel MUST match this vibe
+`;
+    }
+    // Build context instructions
+    let contextInstructions = '';
+    if (context) {
+        contextInstructions = `
+EXISTING PROJECT CONTEXT (match this design system):
+${context}
+
+IMPORTANT: Analyze the existing code carefully and match:
+- Color palette and theme
+- Typography and font choices
+- Component patterns and naming conventions
+- Spacing and layout rhythms
+- Import patterns and file structure
+`;
+    }
+    const systemPrompt = `${CREATE_FRONTEND_PROMPT}
+${designSystemInstructions}
+${contextInstructions}
+TECH STACK: ${techStack}
+FILE PATH: ${filePath}
+
+Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
+    const result = await generateWithGemini(systemPrompt, request);
+    return {
+        content: [{ type: "text", text: result }],
+    };
+}

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

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

package/build/tools/modify-frontend.js

@@ -0,0 +1,46 @@
+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. " +
+        "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'"),
+    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."),
+};
+export async function modifyFrontend(params) {
+    const { request, filePath, existingCode, context } = params;
+    // Build context instructions
+    let contextInstructions = '';
+    if (context) {
+        contextInstructions = `
+ADDITIONAL PROJECT CONTEXT (for reference):
+${context}
+`;
+    }
+    const systemPrompt = `${MODIFY_FRONTEND_PROMPT}
+${contextInstructions}
+FILE BEING MODIFIED: ${filePath}
+
+EXISTING CODE TO MODIFY:
+\`\`\`
+${existingCode}
+\`\`\`
+
+MODIFICATION REQUESTED: ${request}
+
+Remember: Return the COMPLETE modified file, ready to replace the original.`.trim();
+    const result = await generateWithGemini(systemPrompt, request);
+    return {
+        content: [{ type: "text", text: result }],
+    };
+}

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

@@ -0,0 +1,20 @@
+import { z } from "zod";
+export declare const snippetFrontendSchema: {
+    request: z.ZodString;
+    targetFile: z.ZodString;
+    techStack: z.ZodString;
+    insertionContext: z.ZodString;
+    context: z.ZodOptional<z.ZodString>;
+};
+export declare function snippetFrontend(params: {
+    request: string;
+    targetFile: string;
+    techStack: string;
+    insertionContext: string;
+    context?: string;
+}): Promise<{
+    content: {
+        type: "text";
+        text: string;
+    }[];
+}>;

package/build/tools/snippet-frontend.js

@@ -0,0 +1,46 @@
+import { z } from "zod";
+import { generateWithGemini } from "../lib/gemini.js";
+import { SNIPPET_FRONTEND_PROMPT } from "../prompts/system.js";
+export const snippetFrontendSchema = {
+    request: z.string().describe("What code snippet to generate. Be specific about what you need. " +
+        "Examples: " +
+        "'A sidebar component with navigation links and user profile section', " +
+        "'A data table with sorting, filtering, and pagination', " +
+        "'A form validation function for email and password', " +
+        "'A custom hook for handling API requests with loading/error states'"),
+    targetFile: z.string().describe("The file where this snippet will be inserted. " +
+        "Example: 'src/components/Dashboard.tsx' - helps Gemini match the file's patterns"),
+    techStack: z.string().describe("The tech stack being used. " +
+        "Examples: 'React + TypeScript + Tailwind CSS', 'Vue 3 + Composition API'"),
+    insertionContext: z.string().describe("WHERE in the file this snippet will go and surrounding code context. " +
+        "This helps Gemini generate code that integrates smoothly. " +
+        "Example: 'Inside the Dashboard component, after the header section. " +
+        "The file uses useState for state and has a dark theme with zinc colors.'"),
+    context: z.string().optional().describe("Additional project files for design/pattern reference. " +
+        "Pass components, styles, or utilities that the snippet should match. " +
+        "Optional but recommended for consistency."),
+};
+export async function snippetFrontend(params) {
+    const { request, targetFile, techStack, insertionContext, context } = params;
+    // Build context instructions
+    let contextInstructions = '';
+    if (context) {
+        contextInstructions = `
+PROJECT CONTEXT (match these patterns):
+${context}
+`;
+    }
+    const systemPrompt = `${SNIPPET_FRONTEND_PROMPT}
+${contextInstructions}
+TECH STACK: ${techStack}
+TARGET FILE: ${targetFile}
+
+INSERTION CONTEXT:
+${insertionContext}
+
+Generate a snippet that will integrate smoothly at this location.`.trim();
+    const result = await generateWithGemini(systemPrompt, request);
+    return {
+        content: [{ type: "text", text: result }],
+    };
+}

package/package.json

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

package/build/tools/generate-frontend.js

@@ -1,56 +0,0 @@
-import { z } from "zod";
-import { generateWithGemini } from "../lib/gemini.js";
-import { GENERATE_FRONTEND_PROMPT } from "../prompts/system.js";
-export const generateFrontendSchema = {
-    request: z.string().describe("Description of what to create (component, page, section, etc.)"),
-    context: z.string().nullable().describe("Existing project code for reference (components, styles, config). " +
-        "Send relevant files to ensure design consistency. " +
-        "Null if new project."),
-    techStack: z.string().optional().describe("Tech stack (e.g., 'React + Tailwind', 'Vue + CSS', 'HTML/CSS vanilla', 'Next.js + shadcn'). " +
-        "If not specified, Gemini will choose based on context."),
-    designSystem: z.object({
-        vibe: z.object({
-            name: z.string().describe("Vibe name (e.g., 'Pristine Museum', 'Dark Luxe')"),
-            description: z.string().describe("Rich, evocative description of the mood and aesthetic (2-3 sentences)"),
-            keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'whitespace', 'gallery'])"),
-        }).describe("Selected design vibe from the vibe selection step"),
-    }).optional().describe("Design system with selected vibe. The calling agent generates vibe options, " +
-        "user selects, then pass the selection here. Gemini chooses the best font automatically."),
-};
-export async function generateFrontend(params) {
-    const { request, context, techStack, designSystem } = params;
-    // Build design system instructions if provided
-    let designSystemInstructions = '';
-    if (designSystem?.vibe) {
-        const { vibe } = designSystem;
-        designSystemInstructions = `
-MANDATORY DESIGN SYSTEM (User Selected Vibe):
-
-**Design Vibe: "${vibe.name}"**
-${vibe.description}
-Keywords: ${vibe.keywords.join(', ')}
-
-Interpret this vibe creatively:
-- Choose colors, gradients, and visual styling that embody this atmosphere
-- Select a font from Google Fonts that perfectly matches this vibe
-- Apply consistent visual language throughout the entire interface
-- You have freedom in the specific implementation, but the overall feel MUST match this vibe
-`;
-    }
-    const systemPrompt = `${GENERATE_FRONTEND_PROMPT}
-${designSystemInstructions}
-${techStack ? `TECH STACK: ${techStack}` : ""}`.trim();
-    const userPrompt = context
-        ? `PROJECT CONTEXT (match this style):
-${context}
-
----
-
-REQUEST:
-${request}`
-        : request;
-    const result = await generateWithGemini(systemPrompt, userPrompt);
-    return {
-        content: [{ type: "text", text: result }],
-    };
-}