gemini-design-mcp 3.12.7 → 3.12.8

package/build/index.js

@@ -41,27 +41,28 @@ This tool is for creating NEW files that need HIGH-QUALITY DESIGN.
   • Creating config files → You can do this yourself
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ CRITICAL: MANDATORY FLOW BEFORE CALLING
+⚠️ MANDATORY: CHECK FOR design-system.md FIRST
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-STEP 1: CHECK PROJECT STATE
-─────────────────────────────
-A) EMPTY REPO (no package.json):
-   → Ask user: "What tech stack do you want?"
-   → Help them initialize first
+BEFORE calling this tool, check if design-system.md exists at project root.
 
-B) PROJECT EXISTS but NO frontend files yet:
-   → Proceed to Step 2 (Vibe Selection) - MANDATORY
+IF IT DOES NOT EXIST:
+  1. Call generate_vibes first
+  2. Write the returned code to vibes-selection.tsx
+  3. Ask user to open the page and pick their favorite vibe
+  4. Extract THE ENTIRE CODE between <!-- VIBE_X_START --> and <!-- VIBE_X_END -->
+  5. Save it to design-system.md
+  6. THEN call this tool
 
-C) PROJECT EXISTS with existing frontend code:
-   → Analyze existing files, pass as context
-   → Skip vibe selection
-   → ⚠️ MUST pass CSS/globals file with design tokens in 'context' parameter
+IF IT EXISTS:
+  Read it and pass its ENTIRE content in the designSystem parameter.
 
-STEP 2: VIBE SELECTION (Required for new designs)
-──────────────────────────────────────────────────
-Call generate_vibes tool FIRST to get 5 creative vibes from Gemini.
-Present options to user, they select one, then pass it here via designSystem.vibe.
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+📋 PARAMETERS
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+• designSystem: Copy-paste the ENTIRE content of design-system.md (all the code)
+• context: Functional/business context only (what it does, features, requirements)
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
@@ -98,13 +99,11 @@ Use this to REDESIGN existing UI elements that need better design.
   • "Center this div" → Just add flex classes yourself
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ CRITICAL: PASS DESIGN TOKENS IN CONTEXT
+📋 PARAMETERS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Pass your styling files (CSS, SCSS, theme config) with design tokens in the 'context' parameter.
-Otherwise Gemini may introduce standalone styles that don't match your design system.
-
-Example: "Project uses: var(--font-heading), var(--bg-primary), .section-padding class"
+• designSystem: Copy-paste the ENTIRE content of design-system.md (all the code)
+• context: Functional/business context only (what the modification achieves)
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT FORMAT
@@ -192,31 +191,12 @@ Use this for ANY new UI component that needs visual design:
 | Loading spinner              | ❌ NO                | Too simple                 |
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ CRITICAL: DESIGN SYSTEM INTEGRATION
+📋 PARAMETERS
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-For EXISTING PROJECTS, you MUST pass the design tokens to avoid mismatched styles:
-
-1. Pass the CSS/globals file in the 'context' parameter
-2. Include CSS variables, classes, and color tokens in 'insertionContext'
-3. Gemini will then use YOUR design system instead of creating standalone styles
-
-Without this, the snippet will have:
-  ❌ Hardcoded px values instead of your spacing variables
-  ❌ Hardcoded colors instead of your color tokens
-  ❌ New fonts instead of your font definitions
-  ❌ Standalone styles that don't match your project
-
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-⚠️ REQUIRED: INSERTION CONTEXT
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-
-Tell Gemini WHERE and WHICH design tokens to use:
-
-Good: "After the header in Dashboard. Use project tokens:
-      var(--font-heading) for titles, var(--bg-primary), .section-padding class."
-
-Bad: "In the dashboard"
+• designSystem: Copy-paste the ENTIRE content of design-system.md (all the code)
+• context: Functional/business context only (what it does, features, requirements)
+• insertionContext: WHERE in the file this snippet will go (after header, inside main, etc.)
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT FORMAT
@@ -240,41 +220,36 @@ YOU (the agent) are responsible for:
 - Inserting the returned snippet into the correct location in the file`, snippetFrontendSchema, snippetFrontend);
 
     // TOOL 4: GENERATE_VIBES
-    server.tool("generate_vibes", `Generate 5 unique design vibes for a new project using Gemini AI.
+    server.tool("generate_vibes", `Generate a visual page with 5 unique design vibes for user selection.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 🎯 WHEN TO USE THIS TOOL
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Use this tool BEFORE calling create_frontend on a NEW project that has no existing design.
-
-This tool generates creative, unique design vibes tailored to the project context.
-The user then selects one, and you pass it to create_frontend.
+Use this tool when design-system.md DOES NOT EXIST at project root.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-📋 FLOW
+📋 COMPLETE FLOW
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-1. User asks to create frontend for a NEW project
-2. Call generate_vibes with project description
-3. Present the 5 vibes to the user
-4. User selects their preferred vibe
-5. Call create_frontend with the selected vibe in designSystem.vibe
+1. Call generate_vibes with projectDescription
+2. Write the returned code to vibes-selection.tsx (or .jsx)
+3. Ask user: "Can you open vibes-selection and pick your favorite vibe?"
+4. User opens the page, sees 5 distinct visual sections, picks one: "vibe 3"
+5. Extract THE ENTIRE CODE between <!-- VIBE_X_START --> and <!-- VIBE_X_END -->
+6. Save it to design-system.md
+7. Ask: "Delete vibes-selection.tsx?"
+8. Now you can call create_frontend, modify_frontend, snippet_frontend
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 📤 OUTPUT
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
-Returns 5 vibes, each with:
-- emoji: Visual identifier
-- name: Memorable vibe name
-- description: 2-3 evocative sentences
-- keywords: Style keywords for the designer
+Returns FULL CODE for a page with 5 visual sections (vibes).
+Each vibe is wrapped in <!-- VIBE_X_START --> and <!-- VIBE_X_END --> markers.
 
-Example vibe:
-🏛️ "Pristine Museum"
-An ultra-clean, 'white-cube' aesthetic focused on vast negative space.
-Keywords: minimal, whitespace, gallery, clean, sophisticated`, generateVibesSchema, generateVibes);
+The user opens this page in browser to visually compare all 5 vibes.
+They pick one, you extract that vibe's code and save it to design-system.md.`, generateVibesSchema, generateVibes);
 
     return server;
 }

package/package.json

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