gemini-design-mcp 3.12.0 → 3.12.2

package/build/prompts/system.js

@@ -373,7 +373,24 @@ IMPORTANT:
 // Injected when generateDesignSystem === true in create_frontend
 // =============================================================================
 export const DESIGN_SYSTEM_GENERATION_PROMPT = `
-## GÉNÉRATION DU DESIGN SYSTEM (MODE ACTIVÉ)
+#########################################
+# 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.
 
@@ -382,13 +399,8 @@ 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 -->
+### TEMPLATE DU DESIGN SYSTEM (entre les markers DESIGN_SYSTEM_START/END)
 
-<!-- DESIGN_SYSTEM_START -->
 # Design System - [Nom du Projet]
 
 ## Colors
@@ -601,6 +613,64 @@ Si un design system est fourni dans le context, tu DOIS :
 - Si un élément n'existe pas dans le design system, le créer en utilisant UNIQUEMENT les tokens définis
 `;
 
+// =============================================================================
+// GENERATE VIBES PAGE PROMPT
+// Generates a visual page with 5 sections for the user to see and select
+// =============================================================================
+export const GENERATE_VIBES_PAGE_PROMPT = `Tu génères une page React/HTML complète avec 5 sections visuelles pour permettre à l'utilisateur de choisir son design préféré.
+
+ÉTAPE 1: Analyse le projet et génère 5 VIBES UNIQUES adaptées
+- Chaque vibe doit avoir un nom créatif et une direction esthétique claire
+- Les 5 vibes doivent être TRÈS différentes les unes des autres
+- Adapte les vibes au type de projet et à l'audience
+- Exemples de directions: Luxe/Minimal, Brutalist/Raw, Playful/Colorful, Corporate/Trust, Dark/Techy, Editorial, Y2K Revival, etc.
+
+ÉTAPE 2: Génère une page avec 5 sections identiques (même structure) mais stylées différemment
+
+STRUCTURE DE CHAQUE SECTION (identique pour les 5):
+- Un label bien visible "Vibe #X: [Nom créatif de la vibe]" en haut
+- Hero heading: "Transform Your Workflow"
+- Subheading: "The modern platform for teams who want to move faster"
+- CTA button: "Get Started"
+- 3 feature cards en grille avec:
+  - Titre: "Lightning Fast" / "Secure by Design" / "Team Collaboration"
+  - Description courte pour chaque
+- Séparateur visuel clair entre sections (ligne, espace, ou changement de fond)
+
+RÈGLES CRITIQUES:
+1. Marquer CHAQUE section avec des commentaires HTML:
+   <!-- VIBE_1_START -->
+   ... tout le code de la section 1 ...
+   <!-- VIBE_1_END -->
+
+   <!-- VIBE_2_START -->
+   ... tout le code de la section 2 ...
+   <!-- VIBE_2_END -->
+
+   (et ainsi de suite jusqu'à VIBE_5)
+
+2. CHAQUE section doit être COMPLÈTE et auto-suffisante:
+   - Tous les styles Tailwind inline
+   - Extractible telle quelle sans modification
+   - Pas de dépendances sur d'autres sections
+
+3. Le MÊME contenu texte pour les 5 sections:
+   - "Transform Your Workflow"
+   - "The modern platform for teams who want to move faster"
+   - Mêmes titres de features
+   - SEUL LE STYLE CHANGE
+
+4. Styles TRÈS différents entre les sections:
+   - Couleurs de fond différentes
+   - Typographie différente (tailles, poids)
+   - Spacing différent
+   - Border-radius différent
+   - Effets différents (shadows, gradients, etc.)
+
+5. Inclure TOUTES les classes Tailwind inline - AUCUNE variable externe, AUCUN CSS custom
+
+OUTPUT: Une page React/HTML complète et fonctionnelle avec les 5 sections bien marquées. Le code doit être prêt à être sauvegardé et ouvert dans un navigateur.`;
+
 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, DESIGN_SYSTEM_GENERATION_PROMPT } from "../prompts/system.js";
-import { stripCodeFences, parseGeminiResponseWithDesignSystem } from "../lib/filesystem.js";
+import { CREATE_FRONTEND_PROMPT, DESIGN_SYSTEM_GENERATION_PROMPT, DESIGN_SYSTEM_USAGE_INSTRUCTIONS } from "../prompts/system.js";
+import { stripCodeFences, parseGeminiResponseWithDesignSystem, loadDesignSystemIfExists } 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. " +
@@ -29,9 +29,17 @@ export const createFrontendSchema = {
         "Activer UNIQUEMENT pour la PREMIÈRE page du projet. " +
         "Le design system sera retourné séparément pour être sauvegardé dans design-system.md"
     ),
+    projectRoot: z.string().optional().describe(
+        "Root directory du projet. Utilisé pour auto-charger design-system.md s'il existe. " +
+        "TOUJOURS passer ce paramètre pour que Gemini utilise le design system existant."
+    ),
 };
 export async function createFrontend(params) {
-    const { request, filePath, techStack, context, designSystem, generateDesignSystem } = params;
+    const { request, filePath, techStack, context, designSystem, generateDesignSystem, projectRoot } = params;
+
+    // Auto-load design system if exists
+    const autoDesignSystem = loadDesignSystemIfExists(projectRoot);
+
     // Build design system instructions if provided
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
@@ -51,9 +59,22 @@ Interpret this vibe creatively — choose colors, typography, and styling that e
 The scale above is MANDATORY and defines how large or small UI elements should be.
 `;
     }
-    // Build context instructions (ignore empty strings and "null" strings)
+    // Build context instructions - prioritize auto-loaded design system
     let contextInstructions = '';
-    if (context && context !== "null" && context.trim() !== "") {
+    let designSystemRules = '';
+
+    if (autoDesignSystem) {
+        contextInstructions = `
+## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - TOUT LE CODE):
+
+${autoDesignSystem}
+
+---
+RÈGLE CRITIQUE: Copier EXACTEMENT les classes Tailwind, couleurs, spacing, border-radius du code ci-dessus.
+NE JAMAIS inventer de nouvelles valeurs. Le nouveau composant doit ressembler EXACTEMENT au design system.
+`;
+        designSystemRules = DESIGN_SYSTEM_USAGE_INSTRUCTIONS;
+    } else if (context && context !== "null" && context.trim() !== "") {
         contextInstructions = `
 EXISTING PROJECT CONTEXT (match this design system):
 ${context}
@@ -66,19 +87,30 @@ IMPORTANT: Analyze the existing code carefully and match:
 - Import patterns and file structure
 `;
     }
-    // Add design system generation instructions if requested
-    let designSystemGenerationInstructions = '';
+    // Build the system prompt - design system generation instructions go FIRST if enabled
+    let systemPrompt;
     if (generateDesignSystem) {
-        designSystemGenerationInstructions = DESIGN_SYSTEM_GENERATION_PROMPT;
-    }
-    const systemPrompt = `${CREATE_FRONTEND_PROMPT}
+        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}
+${designSystemRules}
 ${designSystemInstructions}
 ${contextInstructions}
-${designSystemGenerationInstructions}
 TECH STACK: ${techStack}
 FILE PATH: ${filePath}
 
-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();
+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) {

package/build/tools/generate-vibes.js

@@ -1,42 +1,23 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
+import { GENERATE_VIBES_PAGE_PROMPT } from "../prompts/system.js";
+import { stripCodeFences } from "../lib/filesystem.js";
+
 export const generateVibesSchema = {
-    projectDescription: z.string().describe("Brief description of the project. " +
-        "Example: 'A SaaS dashboard for managing customer support tickets'"),
-    projectType: z.string().optional().describe("Type of project. " +
-        "Examples: 'landing page', 'dashboard', 'e-commerce', 'portfolio', 'blog', 'mobile app'"),
-    targetAudience: z.string().optional().describe("Who will use this app. " +
-        "Examples: 'developers', 'enterprise clients', 'young consumers', 'creative professionals'"),
+    projectDescription: z.string().describe("Description du projet. " +
+        "Exemple: 'Un dashboard SaaS pour gérer les tickets de support client'"),
+    projectType: z.string().optional().describe("Type de projet. " +
+        "Exemples: 'landing page', 'dashboard', 'e-commerce', 'portfolio', 'blog', 'mobile app'"),
+    targetAudience: z.string().optional().describe("Audience cible. " +
+        "Exemples: 'developers', 'enterprise clients', 'young consumers', 'creative professionals'"),
+    techStack: z.string().optional().describe("Tech stack pour la page de vibes. " +
+        "Default: 'React + TypeScript + Tailwind CSS'. " +
+        "Exemples: 'Next.js + Tailwind', 'Vue 3 + Tailwind', 'HTML + Tailwind'"),
 };
-const GENERATE_VIBES_PROMPT = `Generate 5 distinct mood/atmosphere options (VIBES) that match different interpretations of the project.
-
-Each vibe should represent a unique visual direction and feeling.
-Describe the mood, not specific colors - let the designer interpret creatively.
-Think: "Corporate & Trustworthy" vs "Playful & Vibrant" vs "Dark & Techy"
-
-IMPORTANT - Each vibe MUST include a SCALE recommendation:
-- "zoomed" = Large elements, big buttons, big text, full-width cards (e.g., kids apps, accessibility-focused)
-- "refined" = Subtle scale, smaller typography, contained elements, elegant proportions (e.g., luxury, Linear.app, Raycast)
-- "balanced" = Standard scale, middle ground
-
-The scale is NOT about density (dense vs sparse), it's about the SIZE of elements.
-A luxury watch e-commerce site has refined/small scale. A kids learning platform has zoomed/large scale.
-
-OUTPUT FORMAT (JSON):
-Return ONLY a valid JSON array with exactly 5 vibes. No markdown, no explanation.
-
-[
-  {
-    "emoji": "🏛️",
-    "name": "Vibe Name",
-    "description": "2-3 sentences describing the mood and atmosphere.",
-    "scale": "refined" | "balanced" | "zoomed",
-    "keywords": ["keyword1", "keyword2", "keyword3"]
-  }
-]`;
+
 export async function generateVibes(params) {
-    const { projectDescription, projectType, targetAudience } = params;
-    // Build context for Gemini
+    const { projectDescription, projectType, targetAudience, techStack } = params;
+
     let contextParts = [`Project: ${projectDescription}`];
     if (projectType) {
         contextParts.push(`Type: ${projectType}`);
@@ -44,57 +25,59 @@ export async function generateVibes(params) {
     if (targetAudience) {
         contextParts.push(`Target Audience: ${targetAudience}`);
     }
-    const userPrompt = contextParts.join("\n");
-    const result = await generateWithGemini(GENERATE_VIBES_PROMPT, userPrompt, undefined, // default model
-    "high", // high thinking for creative vibes
-    "generate_vibes");
-    // Parse the JSON response
-    try {
-        // Clean the response (remove potential markdown code blocks)
-        let cleanedResult = result.trim();
-        if (cleanedResult.startsWith("```json")) {
-            cleanedResult = cleanedResult.slice(7);
-        }
-        if (cleanedResult.startsWith("```")) {
-            cleanedResult = cleanedResult.slice(3);
-        }
-        if (cleanedResult.endsWith("```")) {
-            cleanedResult = cleanedResult.slice(0, -3);
-        }
-        cleanedResult = cleanedResult.trim();
-        const vibes = JSON.parse(cleanedResult);
-        // Format vibes for display
-        const scaleLabels = {
-            refined: "🔍 Refined (small, elegant)",
-            balanced: "⚖️ Balanced (standard)",
-            zoomed: "🔎 Zoomed (large elements)",
-        };
-        const formattedVibes = vibes.map((vibe, index) => {
-            const scaleDisplay = scaleLabels[vibe.scale] || vibe.scale;
-            return `${index + 1}. ${vibe.emoji} "${vibe.name}"
-   ${vibe.description}
-   ${scaleDisplay}`;
-        }).join("\n\n");
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: `Here are 5 design vibes for your project:\n\n${formattedVibes}\n\n---\n\nAsk the user to select one vibe. Pass the selection to create_frontend via designSystem.vibe with: name, description, scale, keywords.`,
-                },
-            ],
-            // Also return structured data for programmatic use
-            vibes,
-        };
-    }
-    catch {
-        // If parsing fails, return raw result
-        return {
-            content: [
-                {
-                    type: "text",
-                    text: `Generated vibes:\n\n${result}\n\n---\n\nNote: Could not parse as JSON. Please extract the vibes manually.`,
-                },
-            ],
-        };
-    }
+
+    const userPrompt = `${contextParts.join("\n")}
+Tech Stack: ${techStack || "React + TypeScript + Tailwind CSS"}
+
+Génère 5 vibes DIFFÉRENTES et ADAPTÉES à ce projet spécifique.
+Puis génère la page complète avec 5 sections, une pour chaque vibe.
+Chaque section doit montrer visuellement le style de la vibe.`;
+
+    const result = await generateWithGemini(
+        GENERATE_VIBES_PAGE_PROMPT,
+        userPrompt,
+        undefined,
+        "high",
+        "generate_vibes"
+    );
+
+    const code = stripCodeFences(result);
+
+    return {
+        content: [{
+            type: "text",
+            text: `VIBES_PAGE_CODE:
+
+${code}
+
+---
+
+INSTRUCTIONS POUR L'AGENT:
+1. Demande à l'utilisateur: "Tu n'as pas de design system. Je peux créer vibes-selection.tsx pour que tu choisisses visuellement ton style préféré?"
+2. Si oui → Écris ce code dans le fichier (vibes-selection.tsx ou vibes-selection.html selon le projet)
+3. Dis à l'utilisateur d'ouvrir la page et de choisir (ex: "vibe 3" ou "la deuxième")
+4. Quand l'utilisateur a choisi, extrais le code entre <!-- VIBE_X_START --> et <!-- VIBE_X_END -->
+5. Sauvegarde CE CODE ENTIER (pas un résumé) dans design-system.md à la racine du projet
+6. Demande si tu dois supprimer vibes-selection.tsx
+
+FORMAT DU design-system.md:
+\`\`\`markdown
+# Design System - [Nom du Projet]
+
+## Vibe Sélectionnée: [Nom de la vibe choisie]
+
+## Code de Référence (COPIER EXACTEMENT)
+
+[Coller ici TOUT le code extrait entre les markers VIBE_X_START et VIBE_X_END]
+
+## Instructions d'utilisation
+
+Pour tous les composants frontend:
+- Copier EXACTEMENT les classes Tailwind de ce code de référence
+- Utiliser les mêmes couleurs, spacing, border-radius
+- Maintenir la même direction esthétique
+\`\`\`
+`
+        }]
+    };
 }

package/build/tools/modify-frontend.js

@@ -31,12 +31,18 @@ export async function modifyFrontend(params) {
     let contextInstructions = '';
     if (autoDesignSystem) {
         contextInstructions = `
-## Design System (OBLIGATOIRE - copier exactement les classes)
+## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - NE RIEN MODIFIER):
 
 ${autoDesignSystem}
 
 ---
 
+RÈGLES CRITIQUES:
+- Copier EXACTEMENT les classes Tailwind du design system ci-dessus
+- NE JAMAIS inventer de nouvelles couleurs, paddings, ou border-radius
+- Utiliser les mêmes patterns visuels (shadows, transitions, etc.)
+- Le code modifié doit être INDISTINGUABLE du reste du projet
+
 `;
     }
     if (context) {

package/build/tools/snippet-frontend.js

@@ -34,12 +34,18 @@ export async function snippetFrontend(params) {
     let contextInstructions = '';
     if (autoDesignSystem) {
         contextInstructions = `
-## Design System (OBLIGATOIRE - copier exactement les classes)
+## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - NE RIEN MODIFIER):
 
 ${autoDesignSystem}
 
 ---
 
+RÈGLES CRITIQUES:
+- Copier EXACTEMENT les classes Tailwind du design system ci-dessus
+- NE JAMAIS inventer de nouvelles couleurs, paddings, ou border-radius
+- Utiliser les mêmes patterns visuels (shadows, transitions, etc.)
+- Le snippet doit être INDISTINGUABLE du reste du projet
+
 `;
     }
     if (context) {

package/package.json

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