gemini-design-mcp 3.11.0 → 3.12.1

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

@@ -368,6 +368,251 @@ IMPORTANT:
 // 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 = `
+#########################################
+# MODE DESIGN SYSTEM ACTIVÉ
+#########################################
+
+CRITICAL: Tu DOIS retourner ta réponse dans ce format EXACT avec les markers HTML.
+NE RETOURNE JAMAIS juste du code. Tu DOIS inclure les DEUX sections.
+
+## FORMAT OBLIGATOIRE (à respecter à la lettre)
+
+<!-- CODE_START -->
+(le code complet de la page ici)
+<!-- CODE_END -->
+
+<!-- DESIGN_SYSTEM_START -->
+(le design system complet ici)
+<!-- DESIGN_SYSTEM_END -->
+
+#########################################
+
+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.
+
+### TEMPLATE DU DESIGN SYSTEM (entre les markers DESIGN_SYSTEM_START/END)
+
+# 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.

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,39 @@ IMPORTANT: Analyze the existing code carefully and match:
 - Import patterns and file structure
 `;
     }
-    const systemPrompt = `${CREATE_FRONTEND_PROMPT}
+    // Build the system prompt - design system generation instructions go FIRST if enabled
+    let systemPrompt;
+    if (generateDesignSystem) {
+        systemPrompt = `${DESIGN_SYSTEM_GENERATION_PROMPT}
+
+---
+
+${CREATE_FRONTEND_PROMPT}
+${designSystemInstructions}
+${contextInstructions}
+TECH STACK: ${techStack}
+FILE PATH: ${filePath}
+
+RAPPEL CRITIQUE: Tu DOIS utiliser le format avec les markers <!-- CODE_START/END --> et <!-- DESIGN_SYSTEM_START/END -->. Ne retourne JAMAIS juste le code.`.trim();
+    } else {
+        systemPrompt = `${CREATE_FRONTEND_PROMPT}
 ${designSystemInstructions}
 ${contextInstructions}
 TECH STACK: ${techStack}
 FILE PATH: ${filePath}
 
 Remember: Return a COMPLETE file ready to save at ${filePath}`.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}

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}

package/package.json

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