gemini-design-mcp 3.12.1 → 3.12.3

package/build/prompts/system.js

@@ -613,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.d.ts

@@ -2,7 +2,6 @@ import { z } from "zod";
 import { type Scale } from "../lib/scale.js";
 export declare const createFrontendSchema: {
     request: z.ZodString;
-    filePath: z.ZodString;
     techStack: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
     designSystem: z.ZodOptional<z.ZodObject<{
@@ -41,7 +40,6 @@ export declare const createFrontendSchema: {
 };
 export declare function createFrontend(params: {
     request: string;
-    filePath: string;
     techStack: string;
     context?: string;
     designSystem?: {

package/build/tools/create-frontend.js

@@ -1,14 +1,12 @@
 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. " +
         "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().optional().describe("CRITICAL FOR EXISTING PROJECTS: Pass the styling files (CSS, SCSS, theme config, etc.). " +
@@ -29,9 +27,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, 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 +57,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}
@@ -77,17 +96,16 @@ ${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}
 TECH STACK: ${techStack}
-FILE PATH: ${filePath}
 
-Remember: Return a COMPLETE file ready to save at ${filePath}`.trim();
+Remember: Return a COMPLETE, functional file ready to use.`.trim();
     }
     const rawResult = await generateWithGemini(systemPrompt, request, undefined, "high", "create_frontend");
     // Handle design system generation mode

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.d.ts

@@ -3,7 +3,6 @@ import { type Scale } from "../lib/scale.js";
 export declare const modifyFrontendSchema: {
     modification: z.ZodString;
     targetCode: z.ZodString;
-    filePath: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
     scale: z.ZodOptional<z.ZodEnum<["refined", "balanced", "zoomed"]>>;
     writeFile: z.ZodDefault<z.ZodBoolean>;
@@ -11,7 +10,6 @@ export declare const modifyFrontendSchema: {
 export declare function modifyFrontend(params: {
     modification: string;
     targetCode: string;
-    filePath: string;
     context?: string;
     scale?: Scale;
     writeFile?: boolean;

package/build/tools/modify-frontend.js

@@ -12,8 +12,6 @@ export const modifyFrontendSchema = {
     targetCode: z.string().describe("The specific code section to modify (NOT the full file). " +
         "Pass only the relevant component/element that needs redesigning. " +
         "This helps Gemini focus on exactly what to change."),
-    filePath: z.string().describe("The path of the file being modified. " +
-        "Example: 'src/components/Sidebar.tsx'"),
     context: z.string().optional().describe("CRITICAL: Pass the styling files (CSS, SCSS, theme config, etc.) with design tokens. " +
         "Include: variables, tokens, classes from your project. " +
         "Without this, Gemini may introduce styles that don't match your design system. " +
@@ -24,19 +22,25 @@ export const modifyFrontendSchema = {
         "If not provided, uses current working directory."),
 };
 export async function modifyFrontend(params) {
-    const { modification, targetCode, filePath, context, scale, projectRoot } = params;
+    const { modification, targetCode, context, scale, projectRoot } = params;
     // Auto-load design system if exists
     const autoDesignSystem = loadDesignSystemIfExists(projectRoot);
     // Build context instructions with design system merged
     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) {
@@ -53,8 +57,6 @@ ${context}
 ${designSystemRules}
 ${scaleInstructions}
 ${contextInstructions}
-FILE: ${filePath}
-
 CODE TO MODIFY:
 \`\`\`
 ${targetCode}

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

@@ -2,7 +2,6 @@ import { z } from "zod";
 import { type Scale } from "../lib/scale.js";
 export declare const snippetFrontendSchema: {
     request: z.ZodString;
-    targetFile: z.ZodString;
     techStack: z.ZodString;
     insertionContext: z.ZodString;
     context: z.ZodOptional<z.ZodString>;
@@ -13,7 +12,6 @@ export declare const snippetFrontendSchema: {
 };
 export declare function snippetFrontend(params: {
     request: string;
-    targetFile: string;
     techStack: string;
     insertionContext: string;
     context?: string;

package/build/tools/snippet-frontend.js

@@ -10,8 +10,6 @@ export const snippetFrontendSchema = {
         "'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 the design tokens to use. " +
@@ -27,19 +25,25 @@ export const snippetFrontendSchema = {
         "If not provided, uses current working directory."),
 };
 export async function snippetFrontend(params) {
-    const { request, targetFile, techStack, insertionContext, context, scale, projectRoot } = params;
+    const { request, 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 (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) {
@@ -57,7 +61,6 @@ ${designSystemRules}
 ${scaleInstructions}
 ${contextInstructions}
 TECH STACK: ${techStack}
-TARGET FILE: ${targetFile}
 
 INSERTION CONTEXT:
 ${insertionContext}

package/package.json

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