gemini-design-mcp 2.0.0 → 2.1.0

package/build/index.js

@@ -39,25 +39,41 @@ STEP 2: VIBE SELECTION (required for new designs)
 
 If the project has no existing design system, you MUST:
 
-1. Generate 5 vibe options based on the user's request, e.g.:
-   • 💼 "Corporate & Clean" - Professional, trustworthy, minimal
-   • 🎨 "Playful & Vibrant" - Fun, colorful, energetic
-   • 🌙 "Dark & Techy" - Dark mode, neon accents, developer aesthetic
-   • 🌿 "Calm & Minimal" - Zen, whitespace, soft tones
-   • 🚀 "Bold & Modern" - Gradients, geometric shapes, striking
+1. Generate 5 vibe options with RICH, EVOCATIVE descriptions (2-3 sentences each).
+   Each vibe should paint a vivid picture of the aesthetic. Examples:
 
-2. Generate 5 font suggestions (real Google Fonts names)
+   • 🏛️ "Pristine Museum" - An ultra-clean, 'white-cube' aesthetic focused on
+     vast negative space and absolute stillness. The focus is entirely on the
+     content as if it were hanging in a modern gallery. Minimal chrome,
+     maximum breathing room.
 
-3. Present options to user and wait for selection
+   • ⚡ "Technical Precision" - A layout-driven vibe that emphasizes the grid.
+     It feels intentional, structured, and slightly 'under construction' in a
+     cool, architectural way. Sharp edges, monospace accents, blueprint energy.
 
-4. Only THEN call this tool with the designSystem parameter filled
+   • 🌊 "Fluid & Organic" - Soft curves, flowing gradients, and a sense of
+     natural movement. Like water or silk, everything feels smooth and
+     interconnected. Calming yet sophisticated.
+
+   • 🔥 "Bold & Unapologetic" - High contrast, oversized typography, and
+     dramatic color blocks. It demands attention and makes a statement.
+     Not for the faint of heart.
+
+   • 🌙 "Dark Luxe" - Deep, rich darks with subtle metallic or jewel-tone
+     accents. Premium feel, like a high-end app at night. Sophisticated
+     shadows and glowing highlights.
+
+2. Present the 5 vibes to the user and wait for their selection
+
+3. Only THEN call this tool with the designSystem.vibe parameter filled
+   (Gemini will choose the best font to match the vibe automatically)
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 STEP 3: CALL THIS TOOL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Only after completing the above steps:
-- New project: context=null, designSystem={font, vibe}, techStack specified
+- New project: context=null, designSystem={vibe}, techStack specified
 - Existing project: context=<relevant files>, techStack from analysis
 
 CAPABILITIES:

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

@@ -4,8 +4,7 @@ export declare const generateFrontendSchema: {
     context: z.ZodNullable<z.ZodString>;
     techStack: z.ZodOptional<z.ZodString>;
     designSystem: z.ZodOptional<z.ZodObject<{
-        font: z.ZodOptional<z.ZodString>;
-        vibe: z.ZodOptional<z.ZodObject<{
+        vibe: z.ZodObject<{
             name: z.ZodString;
             description: z.ZodString;
             keywords: z.ZodArray<z.ZodString, "many">;
@@ -17,21 +16,19 @@ export declare const generateFrontendSchema: {
             name: string;
             description: string;
             keywords: string[];
-        }>>;
+        }>;
     }, "strip", z.ZodTypeAny, {
-        font?: string | undefined;
-        vibe?: {
+        vibe: {
             name: string;
             description: string;
             keywords: string[];
-        } | undefined;
+        };
     }, {
-        font?: string | undefined;
-        vibe?: {
+        vibe: {
             name: string;
             description: string;
             keywords: string[];
-        } | undefined;
+        };
     }>>;
 };
 export declare function generateFrontend(params: {
@@ -39,8 +36,7 @@ export declare function generateFrontend(params: {
     context: string | null;
     techStack?: string;
     designSystem?: {
-        font?: string;
-        vibe?: {
+        vibe: {
             name: string;
             description: string;
             keywords: string[];

package/build/tools/generate-frontend.js

@@ -9,37 +9,32 @@ export const generateFrontendSchema = {
     techStack: z.string().optional().describe("Tech stack (e.g., 'React + Tailwind', 'Vue + CSS', 'HTML/CSS vanilla', 'Next.js + shadcn'). " +
         "If not specified, Gemini will choose based on context."),
     designSystem: z.object({
-        font: z.string().optional().describe("Google Font name to use as primary font"),
         vibe: z.object({
-            name: z.string().describe("Vibe name (e.g., 'Corporate & Professional')"),
-            description: z.string().describe("Mood description (e.g., 'Clean lines, trustworthy feel')"),
-            keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'corporate'])"),
-        }).optional().describe("Selected design vibe"),
-    }).optional().describe("Design system selection. The calling agent generates vibe options, " +
-        "user selects, then pass the selection here for consistent styling."),
+            name: z.string().describe("Vibe name (e.g., 'Pristine Museum', 'Dark Luxe')"),
+            description: z.string().describe("Rich, evocative description of the mood and aesthetic (2-3 sentences)"),
+            keywords: z.array(z.string()).describe("Style keywords (e.g., ['minimal', 'whitespace', 'gallery'])"),
+        }).describe("Selected design vibe from the vibe selection step"),
+    }).optional().describe("Design system with selected vibe. The calling agent generates vibe options, " +
+        "user selects, then pass the selection here. Gemini chooses the best font automatically."),
 };
 export async function generateFrontend(params) {
     const { request, context, techStack, designSystem } = params;
     // Build design system instructions if provided
     let designSystemInstructions = '';
-    if (designSystem?.font || designSystem?.vibe) {
-        const { font, vibe } = designSystem;
-        const fontInstructions = font
-            ? `- **Font**: Use "${font}" from Google Fonts as the primary font family. Import it in the <head> or via CSS.`
-            : '';
-        const vibeInstructions = vibe
-            ? `- **Design Vibe** "${vibe.name}":
-  Mood: ${vibe.description}
-  Keywords: ${vibe.keywords.join(', ')}
-
-  Interpret this vibe creatively - choose colors, gradients, and visual styling that embody this atmosphere. You have freedom in the specific colors, but the overall feel must match this vibe.`
-            : '';
+    if (designSystem?.vibe) {
+        const { vibe } = designSystem;
         designSystemInstructions = `
-MANDATORY DESIGN SYSTEM (User Selected):
-${fontInstructions}
-${vibeInstructions}
+MANDATORY DESIGN SYSTEM (User Selected Vibe):
+
+**Design Vibe: "${vibe.name}"**
+${vibe.description}
+Keywords: ${vibe.keywords.join(', ')}
 
-Apply this design system consistently throughout the entire interface.
+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
 `;
     }
     const systemPrompt = `${GENERATE_FRONTEND_PROMPT}

package/package.json

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