gemini-design-mcp 3.6.5 → 3.6.6

package/build/lib/filesystem.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Strip markdown code fences from a string
+ * Removes ```language and ``` from the beginning and end
+ */
+export declare function stripCodeFences(code: string): string;
 /**
  * Write a file, creating parent directories if they don't exist
  */

package/build/lib/filesystem.js

@@ -1,5 +1,17 @@
 import fs from "fs";
 import path from "path";
+/**
+ * Strip markdown code fences from a string
+ * Removes ```language and ``` from the beginning and end
+ */
+export function stripCodeFences(code) {
+    let result = code.trim();
+    // Remove opening fence: ```tsx, ```jsx, ```typescript, ```javascript, ```html, etc.
+    result = result.replace(/^```[\w]*\s*\n?/i, '');
+    // Remove closing fence: ```
+    result = result.replace(/\n?```\s*$/i, '');
+    return result.trim();
+}
 /**
  * Write a file, creating parent directories if they don't exist
  */
@@ -47,9 +59,9 @@ export function parseFindReplace(geminiOutput) {
         if (!replaceMatch)
             return null;
         return {
-            imports: imports || undefined,
-            find: findMatch[1].trim(),
-            replace: replaceMatch[1].trim(),
+            imports: imports ? stripCodeFences(imports) : undefined,
+            find: stripCodeFences(findMatch[1]),
+            replace: stripCodeFences(replaceMatch[1]),
         };
     }
     catch {
@@ -72,11 +84,11 @@ export function parseSnippet(geminiOutput) {
         const snippetMatch = geminiOutput.match(/\/\/ SNIPPET:\s*([\s\S]*?)$/);
         if (!snippetMatch) {
             // If no SNIPPET marker, assume the whole thing (minus imports) is the snippet
-            return { imports, snippet: geminiOutput.trim() };
+            return { imports: imports ? stripCodeFences(imports) : undefined, snippet: stripCodeFences(geminiOutput) };
         }
         return {
-            imports: imports || undefined,
-            snippet: snippetMatch[1].trim(),
+            imports: imports ? stripCodeFences(imports) : undefined,
+            snippet: stripCodeFences(snippetMatch[1]),
         };
     }
     catch {

package/build/lib/scale.d.ts

@@ -0,0 +1,10 @@
+import { z } from "zod";
+export declare const scaleSchema: z.ZodEnum<["refined", "balanced", "zoomed"]>;
+export type Scale = z.infer<typeof scaleSchema>;
+export declare const scaleDescriptions: Record<Scale, string>;
+/**
+ * Generate scale instructions for prompts
+ * @param scale The scale to use (defaults to "balanced")
+ * @returns Formatted scale instructions string
+ */
+export declare function getScaleInstructions(scale?: Scale): string;

package/build/lib/scale.js

@@ -0,0 +1,41 @@
+import { z } from "zod";
+// Scale schema for validation
+export const scaleSchema = z.enum(["refined", "balanced", "zoomed"]).describe("Scale: 'refined' (small, elegant elements), 'balanced' (standard sizing), 'zoomed' (large elements)");
+// Conceptual scale descriptions - let Gemini decide exact values
+export const scaleDescriptions = {
+    refined: `**SCALE: REFINED**
+This is about ELEMENT SIZE, not density. Refined means:
+- Smaller, more elegant typography — avoid oversized headlines
+- Compact, contained buttons — not chunky or oversized
+- Cards and containers with constrained widths — not full-width sprawling layouts
+- Tighter, purposeful spacing between elements
+- Smaller icons that complement rather than dominate
+
+Reference: Linear.app, Raycast, Notion — these apps feel sophisticated because their elements are proportionally small and refined, never billboard-sized or bloated.
+
+The interface should feel like a premium Swiss watch: precise, elegant, where every element is intentionally sized smaller than the default.`,
+    balanced: `**SCALE: BALANCED**
+Standard, conventional sizing. Use typical defaults — nothing particularly large or small. A middle-ground that works for most general-purpose applications.`,
+    zoomed: `**SCALE: ZOOMED**
+This is about ELEMENT SIZE, not density. Zoomed means:
+- Large, prominent typography — bold headlines that command attention
+- Big, chunky buttons — easy to see and click/tap
+- Wide cards and containers — full-width or near full-width layouts
+- Generous spacing and padding throughout
+- Large icons that stand out
+
+Reference: Kids apps, accessibility-focused interfaces, bold marketing sites — elements are intentionally oversized for impact and ease of use.`
+};
+/**
+ * Generate scale instructions for prompts
+ * @param scale The scale to use (defaults to "balanced")
+ * @returns Formatted scale instructions string
+ */
+export function getScaleInstructions(scale) {
+    const effectiveScale = scale || "balanced";
+    return `
+${scaleDescriptions[effectiveScale]}
+
+The scale above is MANDATORY and defines how large or small UI elements should be.
+`;
+}

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

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import { type Scale } from "../lib/scale.js";
 export declare const createFrontendSchema: {
     request: z.ZodString;
     filePath: z.ZodString;
@@ -47,7 +48,7 @@ export declare function createFrontend(params: {
         vibe: {
             name: string;
             description: string;
-            scale: "refined" | "balanced" | "zoomed";
+            scale: Scale;
             keywords: string[];
         };
     };

package/build/tools/create-frontend.js

@@ -2,6 +2,7 @@ import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { CREATE_FRONTEND_PROMPT } from "../prompts/system.js";
 import { writeFileWithDirs, getFileSize } 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. " +
@@ -17,7 +18,7 @@ export const createFrontendSchema = {
         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: z.enum(["refined", "balanced", "zoomed"]).describe("Scale: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large elements)"),
+            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. " +
@@ -32,31 +33,6 @@ export async function createFrontend(params) {
     if (designSystem?.vibe) {
         const { vibe } = designSystem;
         const scale = vibe.scale || "balanced";
-        // Conceptual scale descriptions - let Gemini decide exact values
-        const scaleDescriptions = {
-            refined: `**SCALE: REFINED**
-This is about ELEMENT SIZE, not density. Refined means:
-- Smaller, more elegant typography — avoid oversized headlines
-- Compact, contained buttons — not chunky or oversized
-- Cards and containers with constrained widths — not full-width sprawling layouts
-- Tighter, purposeful spacing between elements
-- Smaller icons that complement rather than dominate
-
-Reference: Linear.app, Raycast, Notion — these apps feel sophisticated because their elements are proportionally small and refined, never billboard-sized or bloated.
-
-The interface should feel like a premium Swiss watch: precise, elegant, where every element is intentionally sized smaller than the default.`,
-            balanced: `**SCALE: BALANCED**
-Standard, conventional sizing. Use typical defaults — nothing particularly large or small. A middle-ground that works for most general-purpose applications.`,
-            zoomed: `**SCALE: ZOOMED**
-This is about ELEMENT SIZE, not density. Zoomed means:
-- Large, prominent typography — bold headlines that command attention
-- Big, chunky buttons — easy to see and click/tap
-- Wide cards and containers — full-width or near full-width layouts
-- Generous spacing and padding throughout
-- Large icons that stand out
-
-Reference: Kids apps, accessibility-focused interfaces, bold marketing sites — elements are intentionally oversized for impact and ease of use.`
-        };
         designSystemInstructions = `
 MANDATORY DESIGN SYSTEM (User Selected Vibe):
 

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

@@ -1,9 +1,11 @@
 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.ZodOptional<z.ZodBoolean>;
 };
 export declare function modifyFrontend(params: {
@@ -11,6 +13,7 @@ export declare function modifyFrontend(params: {
     targetCode: string;
     filePath: string;
     context?: string;
+    scale?: Scale;
     writeFile?: boolean;
 }): Promise<{
     content: {

package/build/tools/modify-frontend.js

@@ -2,6 +2,7 @@ import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { MODIFY_FRONTEND_PROMPT } from "../prompts/system.js";
 import { readFileIfExists, writeFileWithDirs, parseFindReplace, applyFindReplace, mergeImports, } from "../lib/filesystem.js";
+import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
 export const modifyFrontendSchema = {
     modification: z.string().describe("The SINGLE design modification to make. Be specific. " +
         "Examples: " +
@@ -15,12 +16,14 @@ export const modifyFrontendSchema = {
         "Example: 'src/components/Sidebar.tsx'"),
     context: z.string().optional().describe("Additional context about the file's design system. " +
         "Example: 'Uses Tailwind, dark theme with zinc colors, rounded-xl borders'"),
+    scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
+        "Controls button sizes, typography, spacing, icons."),
     writeFile: z.boolean().optional().describe("If true, apply the modification directly to the file on disk. " +
         "Reads the file, applies find/replace, and writes back. " +
         "Returns a confirmation instead of the find/replace instructions."),
 };
 export async function modifyFrontend(params) {
-    const { modification, targetCode, filePath, context, writeFile } = params;
+    const { modification, targetCode, filePath, context, scale, writeFile } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -29,7 +32,10 @@ DESIGN CONTEXT:
 ${context}
 `;
     }
+    // Build scale instructions
+    const scaleInstructions = getScaleInstructions(scale);
     const systemPrompt = `${MODIFY_FRONTEND_PROMPT}
+${scaleInstructions}
 ${contextInstructions}
 FILE: ${filePath}
 

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

@@ -1,10 +1,12 @@
 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>;
+    scale: z.ZodOptional<z.ZodEnum<["refined", "balanced", "zoomed"]>>;
     writeFile: z.ZodOptional<z.ZodBoolean>;
     insertAtLine: z.ZodOptional<z.ZodNumber>;
     insertAfterPattern: z.ZodOptional<z.ZodString>;
@@ -15,6 +17,7 @@ export declare function snippetFrontend(params: {
     techStack: string;
     insertionContext: string;
     context?: string;
+    scale?: Scale;
     writeFile?: boolean;
     insertAtLine?: number;
     insertAfterPattern?: string;

package/build/tools/snippet-frontend.js

@@ -2,6 +2,7 @@ import { z } from "zod";
 import { generateWithGemini } from "../lib/gemini.js";
 import { SNIPPET_FRONTEND_PROMPT } from "../prompts/system.js";
 import { readFileIfExists, writeFileWithDirs, parseSnippet, mergeImports, insertAfterLine, insertAfterPattern, } from "../lib/filesystem.js";
+import { scaleSchema, getScaleInstructions } from "../lib/scale.js";
 export const snippetFrontendSchema = {
     request: z.string().describe("What code snippet to generate. Be specific about what you need. " +
         "Examples: " +
@@ -20,6 +21,8 @@ export const snippetFrontendSchema = {
     context: z.string().optional().describe("Additional project files for design/pattern reference. " +
         "Pass components, styles, or utilities that the snippet should match. " +
         "Optional but recommended for consistency."),
+    scale: scaleSchema.optional().describe("Element sizing: 'refined' (small, elegant), 'balanced' (standard), 'zoomed' (large). " +
+        "Controls button sizes, typography, spacing, icons."),
     writeFile: z.boolean().optional().describe("If true, insert the snippet directly into the file on disk. " +
         "Requires insertAtLine OR insertAfterPattern to know where to insert."),
     insertAtLine: z.number().optional().describe("Line number (1-indexed) where to insert the snippet. " +
@@ -30,7 +33,7 @@ export const snippetFrontendSchema = {
         "Required if writeFile is true and insertAtLine is not provided."),
 };
 export async function snippetFrontend(params) {
-    const { request, targetFile, techStack, insertionContext, context, writeFile, insertAtLine: lineNumber, insertAfterPattern: pattern, } = params;
+    const { request, targetFile, techStack, insertionContext, context, scale, writeFile, insertAtLine: lineNumber, insertAfterPattern: pattern, } = params;
     // Build context instructions
     let contextInstructions = '';
     if (context) {
@@ -39,7 +42,10 @@ PROJECT CONTEXT (match these patterns):
 ${context}
 `;
     }
+    // Build scale instructions
+    const scaleInstructions = getScaleInstructions(scale);
     const systemPrompt = `${SNIPPET_FRONTEND_PROMPT}
+${scaleInstructions}
 ${contextInstructions}
 TECH STACK: ${techStack}
 TARGET FILE: ${targetFile}

package/package.json

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