gemini-design-mcp 3.12.4 → 3.12.6

package/build/prompts/system.js

@@ -245,7 +245,7 @@ Gut-check questions to ensure you're not shipping mediocrity:
 
 **Code Quality**: Production-grade, functional, and clean. No placeholder content unless explicitly temporary.
 
-**Styling**: Use Tailwind CSS (with arbitrary values \`[]\` for precision) or custom CSS/SCSS as appropriate for the project.
+**Styling**: Use the styling approach specified in the tech stack or design system. Adapt to whatever CSS framework or methodology the project uses.
 
 **Responsiveness**: Design for all viewports. Mobile should feel intentional, not cramped.
 
@@ -605,8 +605,8 @@ UTILISER EXACTEMENT :
 // =============================================================================
 export const DESIGN_SYSTEM_USAGE_INSTRUCTIONS = `
 RÈGLE CRITIQUE - DESIGN SYSTEM OBLIGATOIRE:
-Si un design system est fourni dans le context, tu DOIS :
-- Copier EXACTEMENT les classes Tailwind spécifiées
+Si un design system est fourni, tu DOIS :
+- Copier EXACTEMENT les styles, classes, et patterns spécifiés
 - NE JAMAIS inventer de nouvelles couleurs, paddings, ou border-radius
 - Utiliser les composants définis (Button Primary, Input, Card, etc.)
 - Respecter les tailles définies (sm/md/lg) sans les modifier
@@ -650,7 +650,7 @@ RÈGLES CRITIQUES:
    (et ainsi de suite jusqu'à VIBE_5)
 
 2. CHAQUE section doit être COMPLÈTE et auto-suffisante:
-   - Tous les styles Tailwind inline
+   - Tous les styles inline (selon le tech stack)
    - Extractible telle quelle sans modification
    - Pas de dépendances sur d'autres sections
 
@@ -667,7 +667,7 @@ RÈGLES CRITIQUES:
    - Border-radius différent
    - Effets différents (shadows, gradients, etc.)
 
-5. Inclure TOUTES les classes Tailwind inline - AUCUNE variable externe, AUCUN CSS custom
+5. Inclure TOUS les styles inline - AUCUNE variable externe, AUCUN fichier CSS séparé
 
 OUTPUT: Une page React/HTML complète et fonctionnelle avec les 5 sections bien marquées. Le code doit être prêt à être sauvegardé et ouvert dans un navigateur.`;
 

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}
 
@@ -40,9 +38,9 @@ ${context}
 TECH STACK: ${techStack}
 
 CRITICAL RULES:
-- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- Copy EXACTLY the styles, classes, colors, spacing, patterns 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/generate-vibes.js

@@ -12,7 +12,7 @@ export const generateVibesSchema = {
         "Exemples: 'developers', 'enterprise clients', 'young consumers', 'creative professionals'"),
     techStack: z.string().optional().describe("Tech stack pour la page de vibes. " +
         "Default: 'React + TypeScript + Tailwind CSS'. " +
-        "Exemples: 'Next.js + Tailwind', 'Vue 3 + Tailwind', 'HTML + Tailwind'"),
+        "Exemples: 'Next.js', 'Vue 3', 'HTML + CSS', 'Svelte'"),
 };
 
 export async function generateVibes(params) {
@@ -73,7 +73,7 @@ FORMAT DU design-system.md:
 ## Instructions d'utilisation
 
 Pour tous les composants frontend:
-- Copier EXACTEMENT les classes Tailwind de ce code de référence
+- Copier EXACTEMENT les styles de ce code de référence
 - Utiliser les mêmes couleurs, spacing, border-radius
 - Maintenir la même direction esthétique
 \`\`\`

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}
 
@@ -47,9 +45,9 @@ ${targetCode}
 MODIFICATION REQUESTED: ${modification}
 
 CRITICAL RULES:
-- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- Copy EXACTLY the styles, classes, colors, spacing, patterns 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}
 
@@ -47,9 +45,9 @@ INSERTION CONTEXT:
 ${insertionContext}
 
 CRITICAL RULES:
-- Copy EXACTLY the Tailwind classes, colors, spacing, border-radius from the design system above.
+- Copy EXACTLY the styles, classes, colors, spacing, patterns 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.6",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {