gemini-design-mcp 3.12.4 → 3.12.5

package/build/tools/create-frontend.js

@@ -9,15 +9,13 @@ export const createFrontendSchema = {
     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'"),
     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."),
+        "This contains ALL visual/design information: colors, typography, spacing, components styling, etc. " +
+        "Do NOT summarize - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Functional/business context for what you're creating. " +
+        "What is the PURPOSE of this page/component? What should it DO? " +
+        "Include: user flow, features needed, data it displays, actions it performs, " +
+        "how it fits in the app, business requirements. " +
+        "Do NOT include design/styling info here - that goes in designSystem."),
 };
 export async function createFrontend(params) {
     const { request, techStack, designSystem, context } = params;
@@ -31,7 +29,7 @@ ${designSystem}
 
 ---
 
-## PROJECT CONTEXT:
+## FUNCTIONAL CONTEXT (what it should DO):
 
 ${context}
 
@@ -42,7 +40,7 @@ TECH STACK: ${techStack}
 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.
+- Implement the functional requirements from the context above.
 
 Remember: Return a COMPLETE, functional file ready to use.`.trim();
 

package/build/tools/modify-frontend.js

@@ -11,15 +11,13 @@ export const modifyFrontendSchema = {
         "Pass only the relevant component/element that needs redesigning. " +
         "This helps Gemini focus on exactly what to change."),
     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."),
+        "This contains ALL visual/design information: colors, typography, spacing, components styling, etc. " +
+        "Do NOT summarize - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Functional context for the modification. " +
+        "WHY are you making this change? What is the PURPOSE? " +
+        "Include: what the component should do after modification, user flow changes, " +
+        "new features or behaviors expected, business requirements. " +
+        "Do NOT include design/styling info here - that goes in designSystem."),
 };
 export async function modifyFrontend(params) {
     const { modification, targetCode, designSystem, context } = params;
@@ -33,7 +31,7 @@ ${designSystem}
 
 ---
 
-## PROJECT CONTEXT:
+## FUNCTIONAL CONTEXT (why this modification):
 
 ${context}
 
@@ -49,7 +47,7 @@ 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.
+- Implement the functional requirements from the context above.
 
 Remember: Return ONLY the find/replace block. ONE modification, surgical precision.`.trim();
 

package/build/tools/snippet-frontend.js

@@ -11,15 +11,13 @@ export const snippetFrontendSchema = {
     techStack: z.string().describe("The tech stack being used. " +
         "Examples: 'React + TypeScript + Tailwind CSS', 'Vue 3 + Composition API'"),
     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."),
+        "This contains ALL visual/design information: colors, typography, spacing, components styling, etc. " +
+        "Do NOT summarize - paste the FULL file content as-is."),
+    context: z.string().describe("REQUIRED: Functional context for this snippet. " +
+        "What is the PURPOSE of this snippet? What should it DO? " +
+        "Include: its role in the app, what data it handles, what actions it performs, " +
+        "how it interacts with other parts of the app, business requirements. " +
+        "Do NOT include design/styling info here - that goes in designSystem."),
     insertionContext: z.string().describe("WHERE in the file this snippet will go. " +
         "Example: 'Inside the Dashboard component, after the header section.'"),
 };
@@ -35,7 +33,7 @@ ${designSystem}
 
 ---
 
-## PROJECT CONTEXT:
+## FUNCTIONAL CONTEXT (what this snippet should DO):
 
 ${context}
 
@@ -49,7 +47,7 @@ ${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.
+- Implement the functional requirements from the context above.
 
 Generate a snippet that will integrate smoothly at this location.`.trim();
 

package/package.json

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