gemini-design-mcp 3.12.2 → 3.12.4

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

@@ -1,58 +1,15 @@
 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<{
-        vibe: z.ZodObject<{
-            name: z.ZodString;
-            description: z.ZodString;
-            scale: z.ZodEnum<["refined", "balanced", "zoomed"]>;
-            keywords: z.ZodArray<z.ZodString, "many">;
-        }, "strip", z.ZodTypeAny, {
-            name: string;
-            description: string;
-            scale: "refined" | "balanced" | "zoomed";
-            keywords: string[];
-        }, {
-            name: string;
-            description: string;
-            scale: "refined" | "balanced" | "zoomed";
-            keywords: string[];
-        }>;
-    }, "strip", z.ZodTypeAny, {
-        vibe: {
-            name: string;
-            description: string;
-            scale: "refined" | "balanced" | "zoomed";
-            keywords: string[];
-        };
-    }, {
-        vibe: {
-            name: string;
-            description: string;
-            scale: "refined" | "balanced" | "zoomed";
-            keywords: string[];
-        };
-    }>>;
-    writeFile: z.ZodDefault<z.ZodBoolean>;
+    designSystem: z.ZodString;
+    context: z.ZodString;
 };
 export declare function createFrontend(params: {
     request: string;
-    filePath: string;
     techStack: string;
-    context?: string;
-    designSystem?: {
-        vibe: {
-            name: string;
-            description: string;
-            scale: Scale;
-            keywords: string[];
-        };
-    };
-    writeFile?: boolean;
+    designSystem: string;
+    context: string;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/create-frontend.js

@@ -1,129 +1,53 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.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";
+import { CREATE_FRONTEND_PROMPT, DESIGN_SYSTEM_USAGE_INSTRUCTIONS } from "../prompts/system.js";
+import { stripCodeFences } from "../lib/filesystem.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.). " +
-        "Include: variables, tokens, classes, and component patterns from your project. " +
-        "Without this, Gemini will create standalone styles that won't match your design system. " +
-        "Omit ONLY if this is the FIRST file in a new project."),
-    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 (2-3 sentences)"),
-            scale: scaleSchema.describe("Scale: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large elements)"),
-            keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'whitespace', 'gallery'])"),
-        }).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"
-    ),
-    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."
-    ),
+    designSystem: z.string().describe("REQUIRED: Copy-paste the ENTIRE content of design-system.md here. " +
+        "This must contain the complete design system code (colors, typography, components, spacing, etc.). " +
+        "Do NOT summarize or extract rules - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Provide MAXIMUM context about the project. Include: " +
+        "1) Existing components/pages code that are similar or related, " +
+        "2) Global styles, CSS files, theme config, " +
+        "3) Type definitions and interfaces, " +
+        "4) Any utilities, hooks, or helpers used in the project, " +
+        "5) Package.json dependencies if relevant. " +
+        "The MORE context you provide, the BETTER the result will match your project."),
 };
 export async function createFrontend(params) {
-    const { request, filePath, techStack, context, designSystem, generateDesignSystem, projectRoot } = params;
+    const { request, techStack, designSystem, context } = params;
 
-    // Auto-load design system if exists
-    const autoDesignSystem = loadDesignSystemIfExists(projectRoot);
+    const systemPrompt = `${CREATE_FRONTEND_PROMPT}
+${DESIGN_SYSTEM_USAGE_INSTRUCTIONS}
 
-    // Build design system instructions if provided
-    let designSystemInstructions = '';
-    if (designSystem?.vibe) {
-        const { vibe } = designSystem;
-        const scale = vibe.scale || "balanced";
-        designSystemInstructions = `
-MANDATORY DESIGN SYSTEM (User Selected Vibe):
+## DESIGN SYSTEM (COPY EXACTLY - ALL CODE):
 
-**Design Vibe: "${vibe.name}"**
-${vibe.description}
+${designSystem}
 
-${scaleDescriptions[scale] || scaleDescriptions.balanced}
-
-Keywords: ${vibe.keywords.join(', ')}
-
-Interpret this vibe creatively — choose colors, typography, and styling that embody this atmosphere.
-The scale above is MANDATORY and defines how large or small UI elements should be.
-`;
-    }
-    // Build context instructions - prioritize auto-loaded design system
-    let contextInstructions = '';
-    let designSystemRules = '';
-
-    if (autoDesignSystem) {
-        contextInstructions = `
-## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - TOUT LE CODE):
+---
 
-${autoDesignSystem}
+## PROJECT CONTEXT:
 
----
-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}
 
-IMPORTANT: Analyze the existing code carefully and match:
-- Color palette and theme
-- Typography and font choices
-- Component patterns and naming conventions
-- Spacing and layout rhythms
-- Import patterns and file structure
-`;
-    }
-    // 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}
-${designSystemRules}
-${designSystemInstructions}
-${contextInstructions}
-TECH STACK: ${techStack}
-FILE PATH: ${filePath}
+CRITICAL RULES:
+- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- NEVER invent new values. The new component must look EXACTLY like the design system.
+- Match the patterns, naming conventions, and structure from the context.
+
+Remember: Return a COMPLETE, functional file ready to use.`.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) {
-        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
     return {
         content: [{ type: "text", text: result }],
     };

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

@@ -1,20 +1,15 @@
 import { z } from "zod";
-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>;
+    designSystem: z.ZodString;
+    context: z.ZodString;
 };
 export declare function modifyFrontend(params: {
     modification: string;
     targetCode: string;
-    filePath: string;
-    context?: string;
-    scale?: Scale;
-    writeFile?: boolean;
+    designSystem: string;
+    context: string;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/modify-frontend.js

@@ -1,8 +1,6 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.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: " +
@@ -12,54 +10,34 @@ 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. " +
-        "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."),
+    designSystem: z.string().describe("REQUIRED: Copy-paste the ENTIRE content of design-system.md here. " +
+        "This must contain the complete design system code (colors, typography, components, spacing, etc.). " +
+        "Do NOT summarize or extract rules - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Provide MAXIMUM context about the project. Include: " +
+        "1) The FULL file being modified (not just the target section), " +
+        "2) Related components that interact with this code, " +
+        "3) Global styles, CSS files, theme config, " +
+        "4) Type definitions and interfaces, " +
+        "5) Any utilities or helpers used. " +
+        "The MORE context you provide, the BETTER the modification will match your project."),
 };
 export async function modifyFrontend(params) {
-    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 (autoDesignSystem) {
-        contextInstructions = `
-## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - NE RIEN MODIFIER):
+    const { modification, targetCode, designSystem, context } = params;
 
-${autoDesignSystem}
+    const systemPrompt = `${MODIFY_FRONTEND_PROMPT}
+${DESIGN_SYSTEM_USAGE_INSTRUCTIONS}
+
+## DESIGN SYSTEM (COPY EXACTLY - ALL CODE):
+
+${designSystem}
 
 ---
 
-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
+## PROJECT CONTEXT:
 
-`;
-    }
-    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}
+
+---
 
 CODE TO MODIFY:
 \`\`\`
@@ -68,9 +46,14 @@ ${targetCode}
 
 MODIFICATION REQUESTED: ${modification}
 
+CRITICAL RULES:
+- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- NEVER invent new values. The modified code must look EXACTLY like the design system.
+- Match the patterns from the context.
+
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
+
     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.d.ts

@@ -1,26 +1,17 @@
 import { z } from "zod";
-import { type Scale } from "../lib/scale.js";
 export declare const snippetFrontendSchema: {
     request: z.ZodString;
-    targetFile: z.ZodString;
     techStack: z.ZodString;
+    designSystem: z.ZodString;
+    context: z.ZodString;
     insertionContext: z.ZodString;
-    context: z.ZodOptional<z.ZodString>;
-    scale: z.ZodOptional<z.ZodEnum<["refined", "balanced", "zoomed"]>>;
-    writeFile: z.ZodDefault<z.ZodBoolean>;
-    insertAtLine: z.ZodOptional<z.ZodNumber>;
-    insertAfterPattern: z.ZodOptional<z.ZodString>;
 };
 export declare function snippetFrontend(params: {
     request: string;
-    targetFile: string;
     techStack: string;
+    designSystem: string;
+    context: string;
     insertionContext: string;
-    context?: string;
-    scale?: Scale;
-    writeFile?: boolean;
-    insertAtLine?: number;
-    insertAfterPattern?: string;
 }): Promise<{
     content: {
         type: "text";

package/build/tools/snippet-frontend.js

@@ -1,8 +1,6 @@
 import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.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: " +
@@ -10,67 +8,52 @@ 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. " +
-        "MUST include: styling conventions (variables, classes, tokens) from the project. " +
-        "Example: 'Inside the Dashboard component, after the header. " +
-        "Use project tokens: var(--font-heading), var(--bg-primary), .section-padding class.'"),
-    context: z.string().optional().describe("CRITICAL FOR EXISTING PROJECTS: Pass the styling files (CSS, SCSS, theme config, etc.). " +
-        "Include: variables, tokens, classes, and component patterns from your project. " +
-        "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."),
+    designSystem: z.string().describe("REQUIRED: Copy-paste the ENTIRE content of design-system.md here. " +
+        "This must contain the complete design system code (colors, typography, components, spacing, etc.). " +
+        "Do NOT summarize or extract rules - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Provide MAXIMUM context about the project. Include: " +
+        "1) The file where this snippet will be inserted, " +
+        "2) Related components that will interact with this snippet, " +
+        "3) Global styles, CSS files, theme config, " +
+        "4) Type definitions and interfaces, " +
+        "5) Any utilities, hooks, or helpers used in the project. " +
+        "The MORE context you provide, the BETTER the snippet will integrate."),
+    insertionContext: z.string().describe("WHERE in the file this snippet will go. " +
+        "Example: 'Inside the Dashboard component, after the header section.'"),
 };
 export async function snippetFrontend(params) {
-    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 (autoDesignSystem) {
-        contextInstructions = `
-## DESIGN SYSTEM COMPLET (COPIER EXACTEMENT - NE RIEN MODIFIER):
+    const { request, techStack, designSystem, context, insertionContext } = params;
 
-${autoDesignSystem}
+    const systemPrompt = `${SNIPPET_FRONTEND_PROMPT}
+${DESIGN_SYSTEM_USAGE_INSTRUCTIONS}
+
+## DESIGN SYSTEM (COPY EXACTLY - ALL CODE):
+
+${designSystem}
 
 ---
 
-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
+## PROJECT CONTEXT:
 
-`;
-    }
-    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}
-TARGET FILE: ${targetFile}
 
 INSERTION CONTEXT:
 ${insertionContext}
 
+CRITICAL RULES:
+- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- NEVER invent new values. The snippet must look EXACTLY like the design system.
+- Match the patterns, naming conventions, and structure from the context.
+
 Generate a snippet that will integrate smoothly at this location.`.trim();
+
     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.12.2",
+  "version": "3.12.4",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {