gemini-design-mcp 1.0.5 → 2.1.0

package/build/index.js

@@ -2,47 +2,89 @@
 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 { improveFrontendSchema, improveFrontend } from "./tools/improve-frontend.js";
-import { suggestDesignSchema, suggestDesign } from "./tools/suggest-design.js";
-import { patchFrontendSchema, patchFrontend } from "./tools/patch-frontend.js";
 // Create MCP server
 const server = new McpServer({
     name: "gemini-design-mcp",
-    version: "1.0.0",
+    version: "2.0.0",
 });
-// Tool 1: generate_frontend
-server.tool("generate_frontend", `Generate frontend code (components, pages, sections) with Gemini 3 Pro.
-The calling agent MUST provide project context to ensure design consistency.
-If new project, pass context=null and Gemini will create a new design system.
-Gemini has 1M tokens of context - feel free to send multiple files.
-
-IMPORTANT: Do NOT include design/style preferences in the request (colors, fonts, effects, "modern", "sleek", etc.).
-Only describe WHAT to create functionally (e.g., "a login page with email/password fields and social login").
-Gemini has full creative freedom for all visual decisions.`, generateFrontendSchema, generateFrontend);
-// Tool 2: improve_frontend
-server.tool("improve_frontend", `Improve existing frontend code based on provided feedback.
-Use for design modifications, UX improvements, or visual refactoring.`, improveFrontendSchema, improveFrontend);
-// Tool 3: suggest_design
-server.tool("suggest_design", `Returns design suggestions without generating code.
-Useful for exploring directions before coding, saves tokens.`, suggestDesignSchema, suggestDesign);
-// Tool 4: patch_frontend
-server.tool("patch_frontend", `Apply targeted modifications to existing code using JSON patches.
-Returns ONLY patches, not full code - much more efficient for modifications.
-
-The calling agent should:
-1. Provide a file_structure summary (what's in the file, line ranges)
-2. Send ONLY the target_section that needs modification (not the entire file)
-3. List the modifications to apply
-
-This tool is language-agnostic and works with any programming language.
-Use the optional 'language' parameter to help Gemini understand syntax.
-
-Returns JSON patches with operations: insert_after, insert_before, replace, delete.`, patchFrontendSchema, patchFrontend);
+// Tool: generate_frontend
+server.tool("generate_frontend", `Generate premium, production-ready frontend code with Gemini's 1M context window.
+
+⚠️ CRITICAL: DO NOT call this tool immediately. Follow this flow STRICTLY:
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+STEP 1: CHECK PROJECT STATE (before ANY tool call)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+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
+
+B) PROJECT INITIALIZED but NO existing pages/components/design:
+   → DO NOT call this tool yet
+   → MANDATORY: Run vibe selection questionnaire first (see Step 2)
+
+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
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+STEP 2: VIBE SELECTION (required for new designs)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+If the project has no existing design system, you MUST:
+
+1. Generate 5 vibe options with RICH, EVOCATIVE descriptions (2-3 sentences each).
+   Each vibe should paint a vivid picture of the aesthetic. Examples:
+
+   • 🏛️ "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.
+
+   • ⚡ "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.
+
+   • 🌊 "Fluid & Organic" - Soft curves, flowing gradients, and a sense of
+     natural movement. Like water or silk, everything feels smooth and
+     interconnected. Calming yet sophisticated.
+
+   • 🔥 "Bold & Unapologetic" - High contrast, oversized typography, and
+     dramatic color blocks. It demands attention and makes a statement.
+     Not for the faint of heart.
+
+   • 🌙 "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.
+
+2. Present the 5 vibes to the user and wait for their selection
+
+3. Only THEN call this tool with the designSystem.vibe parameter filled
+   (Gemini will choose the best font to match the vibe automatically)
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+STEP 3: CALL THIS TOOL
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Only after completing the above steps:
+- New project: context=null, designSystem={vibe}, techStack specified
+- Existing project: context=<relevant files>, techStack from analysis
+
+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
 async function main() {
     const transport = new StdioServerTransport();
     await server.connect(transport);
-    console.error("gemini-design-mcp v1.0.0 running on stdio");
+    console.error("gemini-design-mcp v2.0.0 running on stdio");
 }
 main().catch((error) => {
     console.error("Fatal error:", error);

package/build/prompts/system.d.ts

@@ -1,4 +1 @@
-export declare const GENERATE_FRONTEND_PROMPT = "You are an expert UI/UX designer and frontend developer.\n\nRULES:\n1. COMPLETE and functional code - never use placeholders like \"// TODO\" or \"...\"\n2. If CONTEXT is provided, match the existing style\n3. If no context, you have full creative freedom\n4. Respect the requested tech stack/framework\n5. Return ONLY the code, no explanations";
-export declare const IMPROVE_FRONTEND_PROMPT = "You are an expert UI/UX designer and frontend developer.\nYou improve existing frontend code based on the feedback provided.\n\nRULES:\n1. Keep the general structure unless asked otherwise\n2. Only improve the aspects mentioned in the feedback\n3. Maintain consistency with the rest of the code\n4. Return the COMPLETE improved code, not just the changes\n5. No explanations, just the code";
-export declare const SUGGEST_DESIGN_PROMPT = "You are an expert UI/UX designer.\nYou provide concise and actionable design suggestions.\n\nRULES:\n1. Short and precise suggestions\n2. Focus on visual impact and UX\n3. Propose 3-5 ideas maximum\n4. Format: bullet points\n5. No code, just ideas";
-export declare const PATCH_FRONTEND_PROMPT = "You are an expert developer.\nYou return ONLY JSON patches to modify code. NEVER return full code.\n\nYou receive:\n- A file structure overview (to understand context)\n- A target section (the actual code to modify)\n- A list of modifications to apply\n\nOUTPUT FORMAT (strict JSON, no markdown fences):\n{\n  \"patches\": [\n    {\n      \"operation\": \"insert_after | insert_before | replace | delete\",\n      \"find\": \"exact unique text/code snippet to locate in target section\",\n      \"content\": \"new code to insert or replace with (omit for delete)\"\n    }\n  ]\n}\n\nRULES:\n1. NEVER return full code, ONLY the JSON patches object\n2. \"find\" MUST be an exact string that exists in the target section (copy-paste precision)\n3. \"find\" MUST be unique within the target section - use enough context to ensure uniqueness\n4. Keep patches minimal - only what's needed for each modification\n5. Preserve original indentation and code style\n6. For multi-line \"find\" or \"content\", use \\n for newlines in JSON\n7. Operations:\n   - \"insert_after\": insert content after the found text\n   - \"insert_before\": insert content before the found text\n   - \"replace\": replace the found text with content\n   - \"delete\": remove the found text (no content needed)\n8. Return ONLY valid JSON, no explanations, no markdown";
+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";

package/build/prompts/system.js

@@ -1,58 +1,47 @@
-export const GENERATE_FRONTEND_PROMPT = `You are an expert UI/UX designer and frontend developer.
-
-RULES:
-1. COMPLETE and functional code - never use placeholders like "// TODO" or "..."
-2. If CONTEXT is provided, match the existing style
-3. If no context, you have full creative freedom
-4. Respect the requested tech stack/framework
-5. Return ONLY the code, no explanations`;
-export const IMPROVE_FRONTEND_PROMPT = `You are an expert UI/UX designer and frontend developer.
-You improve existing frontend code based on the feedback provided.
-
-RULES:
-1. Keep the general structure unless asked otherwise
-2. Only improve the aspects mentioned in the feedback
-3. Maintain consistency with the rest of the code
-4. Return the COMPLETE improved code, not just the changes
-5. No explanations, just the code`;
-export const SUGGEST_DESIGN_PROMPT = `You are an expert UI/UX designer.
-You provide concise and actionable design suggestions.
-
-RULES:
-1. Short and precise suggestions
-2. Focus on visual impact and UX
-3. Propose 3-5 ideas maximum
-4. Format: bullet points
-5. No code, just ideas`;
-export const PATCH_FRONTEND_PROMPT = `You are an expert developer.
-You return ONLY JSON patches to modify code. NEVER return full code.
-
-You receive:
-- A file structure overview (to understand context)
-- A target section (the actual code to modify)
-- A list of modifications to apply
-
-OUTPUT FORMAT (strict JSON, no markdown fences):
-{
-  "patches": [
-    {
-      "operation": "insert_after | insert_before | replace | delete",
-      "find": "exact unique text/code snippet to locate in target section",
-      "content": "new code to insert or replace with (omit for delete)"
-    }
-  ]
-}
-
-RULES:
-1. NEVER return full code, ONLY the JSON patches object
-2. "find" MUST be an exact string that exists in the target section (copy-paste precision)
-3. "find" MUST be unique within the target section - use enough context to ensure uniqueness
-4. Keep patches minimal - only what's needed for each modification
-5. Preserve original indentation and code style
-6. For multi-line "find" or "content", use \\n for newlines in JSON
-7. Operations:
-   - "insert_after": insert content after the found text
-   - "insert_before": insert content before the found text
-   - "replace": replace the found text with content
-   - "delete": remove the found text (no content needed)
-8. Return ONLY valid JSON, no explanations, no markdown`;
+export const GENERATE_FRONTEND_PROMPT = `You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.
+
+DESIGN EXCELLENCE REQUIREMENTS:
+
+1. **MAXIMUM DETAIL AND DENSITY**
+   - The interface MUST be densely populated and feature-rich
+   - NEVER produce simple wireframes, empty containers, or placeholder content
+   - Fill the space with intricate details, realistic content, background elements, and meaningful UI components
+   - Every section should feel like a fully finished, polished product
+
+2. **PREMIUM VISUAL STYLING**
+   - Apply high-end design principles throughout
+   - Use sophisticated styling: nuanced shadows, subtle gradients, refined borders, micro-textures
+   - Add depth and dimension with layered elements
+   - The aesthetic MUST feel modern, premium, and visually captivating
+   - Use professional color palettes with proper contrast and hierarchy
+
+3. **COMPREHENSIVE INTERACTIVITY**
+   - Design every element to look tangible and interactive
+   - Include visual states: hover effects, focus rings, active states, transitions
+   - Buttons should look clickable, inputs should look fillable
+   - The interface should feel alive, not static
+
+4. **LAYOUT EXCELLENCE**
+   - Use proper visual hierarchy with clear focal points
+   - Apply consistent spacing rhythm throughout
+   - Ensure the layout breathes - balance density with whitespace
+   - Full viewport height designs (min-height: 100vh on body)
+   - No awkward gaps or orphaned elements
+
+5. **RESPONSIVE BY DEFAULT**
+   - Designs MUST work flawlessly on mobile and desktop
+   - Touch-friendly sizing for interactive elements on mobile
+   - Stackable grids that adapt naturally to screen size
+
+6. **REALISTIC CONTENT**
+   - Use believable placeholder content (real-looking names, dates, numbers)
+   - Include appropriate icons, avatars, and imagery
+   - 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
+- Return ONLY the code, no explanations or markdown fences`;

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

@@ -3,11 +3,45 @@ export declare const generateFrontendSchema: {
     request: z.ZodString;
     context: z.ZodNullable<z.ZodString>;
     techStack: z.ZodOptional<z.ZodString>;
+    designSystem: z.ZodOptional<z.ZodObject<{
+        vibe: z.ZodObject<{
+            name: z.ZodString;
+            description: z.ZodString;
+            keywords: z.ZodArray<z.ZodString, "many">;
+        }, "strip", z.ZodTypeAny, {
+            name: string;
+            description: string;
+            keywords: string[];
+        }, {
+            name: string;
+            description: string;
+            keywords: string[];
+        }>;
+    }, "strip", z.ZodTypeAny, {
+        vibe: {
+            name: string;
+            description: string;
+            keywords: string[];
+        };
+    }, {
+        vibe: {
+            name: string;
+            description: string;
+            keywords: string[];
+        };
+    }>>;
 };
 export declare function generateFrontend(params: {
     request: string;
     context: string | null;
     techStack?: string;
+    designSystem?: {
+        vibe: {
+            name: string;
+            description: string;
+            keywords: string[];
+        };
+    };
 }): Promise<{
     content: {
         type: "text";

package/build/tools/generate-frontend.js

@@ -8,11 +8,37 @@ export const generateFrontendSchema = {
         "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 } = params;
-    const systemPrompt = `${GENERATE_FRONTEND_PROMPT}
+    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):

package/package.json

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

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

@@ -1,16 +0,0 @@
-import { z } from "zod";
-export declare const improveFrontendSchema: {
-    code: z.ZodString;
-    feedback: z.ZodString;
-    context: z.ZodOptional<z.ZodString>;
-};
-export declare function improveFrontend(params: {
-    code: string;
-    feedback: string;
-    context?: string;
-}): Promise<{
-    content: {
-        type: "text";
-        text: string;
-    }[];
-}>;

package/build/tools/improve-frontend.js

@@ -1,21 +0,0 @@
-import { z } from "zod";
-import { generateWithGemini } from "../lib/gemini.js";
-import { IMPROVE_FRONTEND_PROMPT } from "../prompts/system.js";
-export const improveFrontendSchema = {
-    code: z.string().describe("Current frontend code to improve"),
-    feedback: z.string().describe("What to improve or change"),
-    context: z.string().optional().describe("Additional context (other components for consistency)"),
-};
-export async function improveFrontend(params) {
-    const { code, feedback, context } = params;
-    const userPrompt = `CURRENT CODE:
-${code}
-
-${context ? `CONTEXT:\n${context}\n` : ""}
-FEEDBACK / REQUESTED IMPROVEMENTS:
-${feedback}`;
-    const result = await generateWithGemini(IMPROVE_FRONTEND_PROMPT, userPrompt);
-    return {
-        content: [{ type: "text", text: result }],
-    };
-}

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

@@ -1,18 +0,0 @@
-import { z } from "zod";
-export declare const patchFrontendSchema: {
-    file_structure: z.ZodString;
-    target_section: z.ZodString;
-    modifications: z.ZodArray<z.ZodString, "many">;
-    language: z.ZodOptional<z.ZodString>;
-};
-export declare function patchFrontend(params: {
-    file_structure: string;
-    target_section: string;
-    modifications: string[];
-    language?: string;
-}): Promise<{
-    content: {
-        type: "text";
-        text: string;
-    }[];
-}>;

package/build/tools/patch-frontend.js

@@ -1,28 +0,0 @@
-import { z } from "zod";
-import { generateWithGemini } from "../lib/gemini.js";
-import { PATCH_FRONTEND_PROMPT } from "../prompts/system.js";
-export const patchFrontendSchema = {
-    file_structure: z.string().describe("Summary of the file structure (e.g., 'lines 1-50: imports, lines 51-100: Header component, lines 101-200: LoginForm')"),
-    target_section: z.string().describe("The specific section of code to modify (only the relevant part, not the entire file)"),
-    modifications: z.array(z.string()).describe("List of modifications to apply to the target section"),
-    language: z.string().optional().describe("Programming language or framework (e.g., 'typescript', 'python', 'c++', 'swift'). Helps Gemini understand syntax."),
-};
-export async function patchFrontend(params) {
-    const { file_structure, target_section, modifications, language } = params;
-    const langHint = language ? `\nLANGUAGE/FRAMEWORK: ${language}` : "";
-    const userPrompt = `FILE STRUCTURE OVERVIEW:
-${file_structure}
-${langHint}
-
-TARGET SECTION TO MODIFY:
-\`\`\`
-${target_section}
-\`\`\`
-
-MODIFICATIONS REQUESTED:
-${modifications.map((m, i) => `${i + 1}. ${m}`).join("\n")}`;
-    const result = await generateWithGemini(PATCH_FRONTEND_PROMPT, userPrompt);
-    return {
-        content: [{ type: "text", text: result }],
-    };
-}

package/build/tools/suggest-design.d.ts

@@ -1,14 +0,0 @@
-import { z } from "zod";
-export declare const suggestDesignSchema: {
-    description: z.ZodString;
-    currentApproach: z.ZodOptional<z.ZodString>;
-};
-export declare function suggestDesign(params: {
-    description: string;
-    currentApproach?: string;
-}): Promise<{
-    content: {
-        type: "text";
-        text: string;
-    }[];
-}>;

package/build/tools/suggest-design.js

@@ -1,17 +0,0 @@
-import { z } from "zod";
-import { generateWithGemini } from "../lib/gemini.js";
-import { SUGGEST_DESIGN_PROMPT } from "../prompts/system.js";
-export const suggestDesignSchema = {
-    description: z.string().describe("Description of the component/page you want suggestions for"),
-    currentApproach: z.string().optional().describe("Current approach or constraints to consider"),
-};
-export async function suggestDesign(params) {
-    const { description, currentApproach } = params;
-    const userPrompt = currentApproach
-        ? `DESCRIPTION: ${description}\n\nCURRENT APPROACH: ${currentApproach}`
-        : description;
-    const result = await generateWithGemini(SUGGEST_DESIGN_PROMPT, userPrompt);
-    return {
-        content: [{ type: "text", text: result }],
-    };
-}