gemini-design-mcp 3.4.0 → 3.5.0

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

@@ -8,26 +8,31 @@ export declare const createFrontendSchema: {
         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[];
         };
     }>>;
@@ -41,6 +46,7 @@ export declare function createFrontend(params: {
         vibe: {
             name: string;
             description: string;
+            scale: "refined" | "balanced" | "zoomed";
             keywords: string[];
         };
     };

package/build/tools/create-frontend.js

@@ -16,10 +16,11 @@ 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)"),
             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. " +
-        "The calling agent generates 5 vibe options, user selects, then pass the selection here."),
+        "Call generate_vibes first, user selects, then pass the selection here."),
 };
 export async function createFrontend(params) {
     const { request, filePath, techStack, context, designSystem } = params;
@@ -27,19 +28,17 @@ export async function createFrontend(params) {
     let designSystemInstructions = '';
     if (designSystem?.vibe) {
         const { vibe } = designSystem;
+        const scale = vibe.scale || "balanced";
         designSystemInstructions = `
 MANDATORY DESIGN SYSTEM (User Selected Vibe):
 
 **Design Vibe: "${vibe.name}"**
 ${vibe.description}
 
-Keywords to embody: ${vibe.keywords.join(', ')}
+**Scale: ${scale}**
+Keywords: ${vibe.keywords.join(', ')}
 
-Interpret this vibe creatively:
-- Choose colors, gradients, and visual styling that embody this atmosphere
-- Select a font from Google Fonts that perfectly matches this vibe
-- Apply consistent visual language throughout the entire interface
-- You have freedom in the specific implementation, but the overall feel MUST match this vibe
+Interpret this vibe creatively — choose colors, typography, and styling that embody this atmosphere.
 `;
     }
     // Build context instructions (ignore empty strings and "null" strings)

package/build/tools/generate-vibes.js

@@ -14,6 +14,14 @@ 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.
 
@@ -22,6 +30,7 @@ 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"]
   }
 ]`;
@@ -58,7 +67,7 @@ export async function generateVibes(params) {
         const formattedVibes = vibes.map((vibe, index) => {
             return `${index + 1}. ${vibe.emoji} "${vibe.name}"
    ${vibe.description}
-   Keywords: ${vibe.keywords.join(", ")}`;
+   Scale: ${vibe.scale} | Keywords: ${vibe.keywords.join(", ")}`;
         }).join("\n\n");
         return {
             content: [

package/package.json

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