gemini-design-mcp 3.10.1 → 3.12.0

package/build/index.js

@@ -17,7 +17,7 @@ import { generateVibesSchema, generateVibes } from "./tools/generate-vibes.js";
 function createMcpServer() {
     const server = new McpServer({
         name: "gemini-design-mcp",
-        version: "3.10.0",
+        version: "3.10.1",
     });
 
     // TOOL 1: CREATE_FRONTEND
@@ -222,25 +222,20 @@ Bad: "In the dashboard"
 📤 OUTPUT FORMAT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
+If external dependency required:
+// REQUIRED DEPENDENCY: <package-name> (<install command>)
+
 // NEW IMPORTS NEEDED:
-import { Search } from "lucide-react";
+<import statements>
 
 // SNIPPET:
-<div className="relative">
-  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" />
-  <input
-    value={searchQuery}
-    onChange={(e) => setSearchQuery(e.target.value)}
-    className="w-full pl-10 pr-4 py-2 bg-zinc-800 rounded-xl ..."
-  />
-  {showDropdown && (
-    <div className="absolute top-full mt-2 w-full bg-zinc-800 rounded-xl shadow-2xl ...">
-      {/* Premium designed dropdown content */}
-    </div>
-  )}
-</div>
+<functional, interactive code>
+
+⚠️ Gemini ALWAYS returns FUNCTIONAL code - never static mockups.
+If a component needs a library to work properly, Gemini specifies which one.
 
 YOU (the agent) are responsible for:
+- Installing any REQUIRED DEPENDENCY specified by Gemini
 - Adding the logic (useState, handlers) BEFORE calling this tool
 - Inserting the returned snippet into the correct location in the file`, snippetFrontendSchema, snippetFrontend);
 
@@ -312,7 +307,7 @@ async function main() {
             res.json({
                 status: "ok",
                 service: "gemini-design-mcp",
-                version: "3.10.0",
+                version: "3.10.1",
                 transport: "streamable-http",
                 timestamp: Date.now(),
             });
@@ -473,7 +468,7 @@ async function main() {
 
         const port = parseInt(process.env.PORT || "3000", 10);
         app.listen(port, "0.0.0.0", () => {
-            console.log(`gemini-design-mcp v3.10.0 running on Streamable HTTP transport`);
+            console.log(`gemini-design-mcp v3.10.1 running on Streamable HTTP transport`);
             console.log(`  MCP endpoint: http://0.0.0.0:${port}/mcp`);
             console.log(`  Legacy SSE: http://0.0.0.0:${port}/sse`);
             console.log(`  Health check: http://0.0.0.0:${port}/health`);
@@ -483,7 +478,7 @@ async function main() {
         const server = createMcpServer();
         const transport = new StdioServerTransport();
         await server.connect(transport);
-        console.error("gemini-design-mcp v3.10.0 running on stdio");
+        console.error("gemini-design-mcp v3.10.1 running on stdio");
     }
 }
 

package/build/lib/filesystem.js

@@ -1,5 +1,33 @@
 import fs from "fs";
 import path from "path";
+/**
+ * Parse Gemini response that contains both code and design system
+ * when generateDesignSystem is enabled
+ */
+export function parseGeminiResponseWithDesignSystem(response) {
+    const codeMatch = response.match(/<!-- CODE_START -->([\s\S]*?)<!-- CODE_END -->/);
+    const dsMatch = response.match(/<!-- DESIGN_SYSTEM_START -->([\s\S]*?)<!-- DESIGN_SYSTEM_END -->/);
+    return {
+        code: codeMatch ? codeMatch[1].trim() : response, // fallback si pas de balises
+        designSystem: dsMatch ? dsMatch[1].trim() : null
+    };
+}
+/**
+ * Load design-system.md from project root if it exists
+ * Checks multiple possible file names
+ */
+export function loadDesignSystemIfExists(projectRoot) {
+    const possiblePaths = [
+        path.join(projectRoot || process.cwd(), 'design-system.md'),
+        path.join(projectRoot || process.cwd(), 'DESIGN-SYSTEM.md'),
+    ];
+    for (const p of possiblePaths) {
+        if (fs.existsSync(p)) {
+            return fs.readFileSync(p, 'utf-8');
+        }
+    }
+    return null;
+}
 /**
  * Strip markdown code fences from a string
  * Removes ```language and ``` from the beginning and end

package/build/prompts/system.js

@@ -282,6 +282,12 @@ When existing project context is provided, you MUST:
 - 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
+- If the component requires external dependencies, add at the TOP of the file:
+  // REQUIRED DEPENDENCIES:
+  // - <package-name> (<install command>)
+  // - <another-package> (<install command>)
+- ALWAYS return FUNCTIONAL, INTERACTIVE code - never static mockups or visual-only representations
+- NEVER fake interactivity with hardcoded positions or visual tricks
 
 ---
 
@@ -301,6 +307,11 @@ export const MODIFY_FRONTEND_PROMPT = `You are an elite UI/UX Designer making a
 
 YOUR TASK: Apply ONE design modification and return ONLY the changed code.
 
+CRITICAL RULE - FUNCTIONAL CODE ONLY:
+- You MUST return WORKING, FUNCTIONAL, INTERACTIVE code - NEVER static mockups
+- If the modification requires an external dependency, specify it: "// REQUIRED DEPENDENCY: <package-name> (<install command>)"
+- NEVER fake interactivity with hardcoded positions or visual tricks
+
 CRITICAL RULES:
 
 1. **SINGLE MODIFICATION ONLY**
@@ -333,8 +344,10 @@ OUTPUT FORMAT - STRICTLY FOLLOW THIS:
 <new redesigned code>
 \`\`\`
 
-If new imports are needed, add them at the top:
+If external dependency is required, add it at the top:
 \`\`\`
+// REQUIRED DEPENDENCY: <package-name> (<install command>)
+
 // NEW IMPORTS NEEDED:
 import { X } from "y";
 
@@ -349,15 +362,257 @@ 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`;
+- No explanations, no full file, just the find/replace block
+- The code you return MUST be functional and interactive - never static mockups`;
 // =============================================================================
 // SNIPPET_FRONTEND PROMPT
 // Used for generating code snippets to INSERT into existing files
 // =============================================================================
+// =============================================================================
+// DESIGN SYSTEM GENERATION PROMPT
+// Injected when generateDesignSystem === true in create_frontend
+// =============================================================================
+export const DESIGN_SYSTEM_GENERATION_PROMPT = `
+## GÉNÉRATION DU DESIGN SYSTEM (MODE ACTIVÉ)
+
+Tu dois générer un design system ULTRA COMPLET en plus du code.
+
+IMPORTANT : Ne te limite PAS aux composants présents dans cette page.
+Imagine que ce projet aura : dashboard, landing page, settings, formulaires,
+modals, tables, cards, sidebars, etc. Génère TOUS les tokens et composants
+qui pourraient être nécessaires.
+
+### FORMAT DE SORTIE
+
+<!-- CODE_START -->
+[Le code complet de la page ici]
+<!-- CODE_END -->
+
+<!-- DESIGN_SYSTEM_START -->
+# Design System - [Nom du Projet]
+
+## Colors
+- Background principal: #XXXXXX
+- Background secondaire: #XXXXXX
+- Background tertiaire: #XXXXXX
+- Border default: #XXXXXX
+- Border hover: #XXXXXX
+- Text primary: #XXXXXX
+- Text secondary: #XXXXXX
+- Text muted: #XXXXXX
+- Accent primary: #XXXXXX
+- Accent hover: #XXXXXX
+- Success: #XXXXXX
+- Warning: #XXXXXX
+- Error: #XXXXXX
+- Info: #XXXXXX
+
+## Typography
+### Headings
+- H1: \`className="..."\`
+- H2: \`className="..."\`
+- H3: \`className="..."\`
+- H4: \`className="..."\`
+
+### Body
+- Large: \`className="..."\`
+- Default: \`className="..."\`
+- Small: \`className="..."\`
+- Tiny: \`className="..."\`
+
+### Special
+- Label: \`className="..."\`
+- Monospace: \`className="..."\`
+- Link: \`className="..."\`
+
+## Spacing Scale
+- xs: Xpx
+- sm: Xpx
+- md: Xpx
+- lg: Xpx
+- xl: Xpx
+- 2xl: Xpx
+
+## Border Radius
+- none: 0
+- sm: Xpx
+- md: Xpx
+- lg: Xpx
+- full: 9999px
+
+## Shadows
+- sm: \`shadow-...\`
+- md: \`shadow-...\`
+- lg: \`shadow-...\`
+
+## Buttons
+### Primary
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Secondary
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Ghost
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Danger
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Sizes
+- sm: \`className="... px-3 py-1.5 text-xs ..."\`
+- md: \`className="... px-4 py-2 text-sm ..."\`
+- lg: \`className="... px-6 py-3 text-base ..."\`
+
+## Inputs
+### Text Input
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Textarea
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Select
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Checkbox/Radio
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Input Sizes
+- sm: \`className="... px-3 py-1.5 text-sm ..."\`
+- md: \`className="... px-4 py-2.5 text-sm ..."\`
+- lg: \`className="... px-4 py-3 text-base ..."\`
+
+## Cards
+### Default Card
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Elevated Card
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Interactive Card (hover)
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+## Modals
+### Overlay
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Modal Container
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+## Tables
+### Table Container
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Table Header
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Table Row
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Table Cell
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+## Navigation
+### Sidebar
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Nav Item (default)
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Nav Item (active)
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Topbar
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+## Badges/Tags
+### Default
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Success/Warning/Error/Info variants
+[Classes exactes pour chaque variante]
+
+## Alerts
+### Success/Warning/Error/Info
+[Classes exactes pour chaque type]
+
+## Dividers
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+## Avatar
+### Sizes (sm/md/lg)
+[Classes exactes pour chaque taille]
+
+## Dropdown Menu
+### Container
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+### Menu Item
+UTILISER EXACTEMENT :
+\`className="..."\`
+
+---
+
+## RÈGLES D'UTILISATION
+
+1. **COPIER EXACTEMENT** les classes spécifiées ci-dessus
+2. **NE JAMAIS** inventer de nouvelles valeurs de padding, margin, couleurs
+3. **NE JAMAIS** modifier les border-radius ou shadows définis
+4. **TOUJOURS** utiliser les tailles définies (sm/md/lg)
+5. Si un composant n'existe pas dans ce design system, le créer en respectant les tokens (colors, spacing, radius) définis
+
+<!-- DESIGN_SYSTEM_END -->
+`;
+
+// =============================================================================
+// DESIGN SYSTEM USAGE INSTRUCTIONS
+// Added to modify/snippet prompts when design system is loaded
+// =============================================================================
+export const DESIGN_SYSTEM_USAGE_INSTRUCTIONS = `
+RÈGLE CRITIQUE - DESIGN SYSTEM OBLIGATOIRE:
+Si un design system est fourni dans le context, tu DOIS :
+- Copier EXACTEMENT les classes Tailwind spécifiées
+- NE JAMAIS inventer de nouvelles couleurs, paddings, ou border-radius
+- Utiliser les composants définis (Button Primary, Input, Card, etc.)
+- Respecter les tailles définies (sm/md/lg) sans les modifier
+- Si un élément n'existe pas dans le design system, le créer en utilisant UNIQUEMENT les tokens définis
+`;
+
 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.
 
+CRITICAL RULE - FUNCTIONAL CODE ONLY:
+- You MUST return WORKING, FUNCTIONAL, INTERACTIVE code - NEVER static mockups or visual-only representations
+- If a component requires an external library/package/dependency to work properly (e.g., range sliders, date pickers, rich text editors, charts, maps, etc.), you MUST:
+  1. Specify the required dependency at the top: "// REQUIRED DEPENDENCY: <package-name> (<install command>)"
+  2. Generate code that USES that dependency
+- NEVER fake interactivity with hardcoded positions, static values, or visual tricks - the code must actually work
+- If you cannot provide functional code for a requested component, say so clearly and suggest alternatives
+
 SNIPPET PRINCIPLES:
 
 1. **DESIGN SYSTEM INTEGRATION (CRITICAL - READ THIS FIRST)**
@@ -398,19 +653,30 @@ SNIPPET PRINCIPLES:
 
 OUTPUT FORMAT:
 
-If new imports are needed:
+If the component requires an external dependency:
 \`\`\`
+// REQUIRED DEPENDENCY: <package-name> (<install command for the tech stack>)
+
 // NEW IMPORTS NEEDED:
-import { X } from "y";
+<import statements>
+
+// SNIPPET:
+<your functional code here>
+\`\`\`
+
+If new imports are needed (but no external dependency):
+\`\`\`
+// NEW IMPORTS NEEDED:
+<import statements>
 
 // SNIPPET:
-<your code here>
+<your functional code here>
 \`\`\`
 
 If no new imports needed:
 \`\`\`
 // SNIPPET:
-<your code here>
+<your functional code here>
 \`\`\`
 
-Return ONLY the code, no explanations.`;
+CRITICAL: The code you return MUST be functional and interactive. Never return static mockups or visual-only representations.`;

package/build/tools/create-frontend.js

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
-import { CREATE_FRONTEND_PROMPT } from "../prompts/system.js";
-import { stripCodeFences } from "../lib/filesystem.js";
+import { CREATE_FRONTEND_PROMPT, DESIGN_SYSTEM_GENERATION_PROMPT } from "../prompts/system.js";
+import { stripCodeFences, parseGeminiResponseWithDesignSystem } from "../lib/filesystem.js";
 import { scaleSchema, scaleDescriptions } from "../lib/scale.js";
 export const createFrontendSchema = {
     request: z.string().describe("What to create: describe the page, component, or section. " +
@@ -24,9 +24,14 @@ export const createFrontendSchema = {
         }).describe("The selected design vibe"),
     }).optional().describe("Design system with selected vibe. REQUIRED for new projects without existing design. " +
         "Call generate_vibes first, user selects, then pass the selection here."),
+    generateDesignSystem: z.boolean().optional().describe(
+        "Si true, Gemini génère aussi un design system complet en plus du code. " +
+        "Activer UNIQUEMENT pour la PREMIÈRE page du projet. " +
+        "Le design system sera retourné séparément pour être sauvegardé dans design-system.md"
+    ),
 };
 export async function createFrontend(params) {
-    const { request, filePath, techStack, context, designSystem } = params;
+    const { request, filePath, techStack, context, designSystem, generateDesignSystem } = params;
     // Build design system instructions if provided
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
@@ -61,14 +66,29 @@ IMPORTANT: Analyze the existing code carefully and match:
 - Import patterns and file structure
 `;
     }
+    // Add design system generation instructions if requested
+    let designSystemGenerationInstructions = '';
+    if (generateDesignSystem) {
+        designSystemGenerationInstructions = DESIGN_SYSTEM_GENERATION_PROMPT;
+    }
     const systemPrompt = `${CREATE_FRONTEND_PROMPT}
 ${designSystemInstructions}
 ${contextInstructions}
+${designSystemGenerationInstructions}
 TECH STACK: ${techStack}
 FILE PATH: ${filePath}
 
-Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
+Remember: Return a COMPLETE file ready to save at ${filePath}${generateDesignSystem ? '. IMPORTANT: Follow the exact output format with <!-- CODE_START/END --> and <!-- DESIGN_SYSTEM_START/END --> markers.' : ''}`.trim();
     const rawResult = await generateWithGemini(systemPrompt, request, undefined, "high", "create_frontend");
+    // Handle design system generation mode
+    if (generateDesignSystem) {
+        const parsed = parseGeminiResponseWithDesignSystem(rawResult);
+        const code = stripCodeFences(parsed.code);
+        return {
+            content: [{ type: "text", text: code }],
+            designSystem: parsed.designSystem,
+        };
+    }
     // Strip markdown code fences from the result
     const result = stripCodeFences(rawResult);
     // Return the code for the agent to write

package/build/tools/modify-frontend.js

@@ -1,7 +1,8 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
-import { MODIFY_FRONTEND_PROMPT } from "../prompts/system.js";
+import { MODIFY_FRONTEND_PROMPT, DESIGN_SYSTEM_USAGE_INSTRUCTIONS } from "../prompts/system.js";
 import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
+import { loadDesignSystemIfExists } from "../lib/filesystem.js";
 export const modifyFrontendSchema = {
     modification: z.string().describe("The SINGLE design modification to make. Be specific. " +
         "Examples: " +
@@ -19,20 +20,37 @@ export const modifyFrontendSchema = {
         "Example: 'Project uses: var(--font-heading), var(--bg-primary), .section-padding class'"),
     scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
         "Controls button sizes, typography, spacing, icons."),
+    projectRoot: z.string().optional().describe("Root directory of the project. Used to auto-load design-system.md if it exists. " +
+        "If not provided, uses current working directory."),
 };
 export async function modifyFrontend(params) {
-    const { modification, targetCode, filePath, context, scale } = params;
-    // Build context instructions
+    const { modification, targetCode, filePath, context, scale, projectRoot } = params;
+    // Auto-load design system if exists
+    const autoDesignSystem = loadDesignSystemIfExists(projectRoot);
+    // Build context instructions with design system merged
     let contextInstructions = '';
-    if (context) {
+    if (autoDesignSystem) {
         contextInstructions = `
+## Design System (OBLIGATOIRE - copier exactement les classes)
+
+${autoDesignSystem}
+
+---
+
+`;
+    }
+    if (context) {
+        contextInstructions += `
 DESIGN CONTEXT:
 ${context}
 `;
     }
     // Build scale instructions
     const scaleInstructions = getScaleInstructions(scale);
+    // Add design system usage instructions if design system was loaded
+    const designSystemRules = autoDesignSystem ? DESIGN_SYSTEM_USAGE_INSTRUCTIONS : '';
     const systemPrompt = `${MODIFY_FRONTEND_PROMPT}
+${designSystemRules}
 ${scaleInstructions}
 ${contextInstructions}
 FILE: ${filePath}
@@ -45,7 +63,7 @@ ${targetCode}
 MODIFICATION REQUESTED: ${modification}
 
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
-    const result = await generateWithGemini(systemPrompt, modification, undefined, "minimal", "modify_frontend");
+    const result = await generateWithGemini(systemPrompt, modification, undefined, "high", "modify_frontend");
     // Return the find/replace instructions for the agent to apply
     return {
         content: [{ type: "text", text: result }],

package/build/tools/snippet-frontend.js

@@ -1,7 +1,8 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
-import { SNIPPET_FRONTEND_PROMPT } from "../prompts/system.js";
+import { SNIPPET_FRONTEND_PROMPT, DESIGN_SYSTEM_USAGE_INSTRUCTIONS } from "../prompts/system.js";
 import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
+import { loadDesignSystemIfExists } from "../lib/filesystem.js";
 export const snippetFrontendSchema = {
     request: z.string().describe("What code snippet to generate. Be specific about what you need. " +
         "Examples: " +
@@ -22,20 +23,37 @@ export const snippetFrontendSchema = {
         "Without this, Gemini will create standalone styles that won't match your design system."),
     scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
         "Controls button sizes, typography, spacing, icons."),
+    projectRoot: z.string().optional().describe("Root directory of the project. Used to auto-load design-system.md if it exists. " +
+        "If not provided, uses current working directory."),
 };
 export async function snippetFrontend(params) {
-    const { request, targetFile, techStack, insertionContext, context, scale } = params;
-    // Build context instructions
+    const { request, targetFile, techStack, insertionContext, context, scale, projectRoot } = params;
+    // Auto-load design system if exists
+    const autoDesignSystem = loadDesignSystemIfExists(projectRoot);
+    // Build context instructions with design system merged
     let contextInstructions = '';
-    if (context) {
+    if (autoDesignSystem) {
         contextInstructions = `
+## Design System (OBLIGATOIRE - copier exactement les classes)
+
+${autoDesignSystem}
+
+---
+
+`;
+    }
+    if (context) {
+        contextInstructions += `
 PROJECT CONTEXT (match these patterns):
 ${context}
 `;
     }
     // Build scale instructions
     const scaleInstructions = getScaleInstructions(scale);
+    // Add design system usage instructions if design system was loaded
+    const designSystemRules = autoDesignSystem ? DESIGN_SYSTEM_USAGE_INSTRUCTIONS : '';
     const systemPrompt = `${SNIPPET_FRONTEND_PROMPT}
+${designSystemRules}
 ${scaleInstructions}
 ${contextInstructions}
 TECH STACK: ${techStack}
@@ -45,7 +63,7 @@ INSERTION CONTEXT:
 ${insertionContext}
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
-    const result = await generateWithGemini(systemPrompt, request, undefined, "minimal", "snippet_frontend");
+    const result = await generateWithGemini(systemPrompt, request, undefined, "high", "snippet_frontend");
     // Return the snippet for the agent to insert
     return {
         content: [{ type: "text", text: result }],

package/package.json

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