gemini-design-mcp 3.12.8 → 3.12.9

package/build/prompts/system.js

@@ -260,18 +260,30 @@ Gut-check questions to ensure you're not shipping mediocrity:
 
 ---
 
-## DESIGN SYSTEM INTEGRATION (CRITICAL WHEN CONTEXT IS PROVIDED)
-
-When existing project context is provided, you MUST:
-- NEVER add inline <style> tags - use ONLY the styling approach from the context
+## DESIGN SYSTEM INTEGRATION (CRITICAL WHEN DESIGN SYSTEM IS PROVIDED)
+
+The design system is a STYLE REFERENCE, not content to copy literally.
+
+**EXTRACT THE STYLE (use these):**
+- Colors (backgrounds, text colors, accents, gradients)
+- Typography (fonts, sizes, weights)
+- Spacing scale (padding, margin, gaps)
+- Visual effects (shadows, borders, border-radius, glassmorphism, animations)
+- CSS classes and patterns
+- Component structure (layout, flex/grid patterns)
+
+**DO NOT COPY THE CONTENT (adapt to context):**
+- Specific icons (Cpu, ShieldCheck, etc.) → use icons APPROPRIATE to the functional context
+- Placeholder text ("Sarah System", "Task completed") → use RELEVANT content
+- Example data (numbers, stats, names) → adapt to the real context
+- Specific images or illustrations
+
+**TECHNICAL RULES:**
+- NEVER add inline <style> tags - use ONLY the styling approach from the design system
 - NEVER hardcode pixel values - use the project's existing variables, tokens, or classes
-- NEVER introduce new fonts - use the project's existing font definitions
-- NEVER hardcode colors - use the project's existing color tokens/variables/classes
-- Match the EXACT spacing scale, typography scale, and color palette
-- The new file must look like it belongs to the same project, not a "foreign" design
-- Reuse existing component patterns, class naming conventions, and styling architecture
-- Adapt to whatever styling system the project uses (analyze the context)
-- DONT use fake "SYSTEM STATUS : OPERATIONAL" or something like that
+- NEVER introduce new fonts - use the design system's font definitions
+- NEVER hardcode colors - use the design system's color tokens/variables/classes
+- The new file must LOOK like the design system but CONTAIN relevant content for the context
 
 ---
 
@@ -604,13 +616,26 @@ UTILISER EXACTEMENT :
 // Added to modify/snippet prompts when design system is loaded
 // =============================================================================
 export const DESIGN_SYSTEM_USAGE_INSTRUCTIONS = `
-RÈGLE CRITIQUE - DESIGN SYSTEM OBLIGATOIRE:
-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
-- Si un élément n'existe pas dans le design system, le créer en utilisant UNIQUEMENT les tokens définis
+RÈGLE CRITIQUE - DESIGN SYSTEM = RÉFÉRENCE DE STYLE (PAS DE CONTENU À COPIER)
+
+Le design system fourni est un EXEMPLE DE STYLE. Tu dois extraire et utiliser :
+
+✅ À UTILISER (le style) :
+- Les couleurs (backgrounds, text colors, accents, gradients)
+- La typographie (fonts, sizes, weights, line-heights)
+- Les espacements (padding, margin, gaps)
+- Les effets visuels (shadows, borders, border-radius, glassmorphism, animations)
+- Les classes CSS et patterns de styling
+- La structure des composants (layout, flex/grid patterns)
+
+❌ À NE PAS COPIER (le contenu d'exemple) :
+- Les icônes spécifiques (Cpu, ShieldCheck, etc.) → utilise des icônes APPROPRIÉES au contexte fonctionnel
+- Les textes placeholder ("Sarah System", "Task completed", etc.) → utilise du contenu PERTINENT
+- Les données d'exemple (nombres, stats, noms) → adapte au contexte réel
+- Les images ou illustrations spécifiques
+
+IMPORTANT : Le design system montre COMMENT styler, pas QUOI afficher.
+Adapte le CONTENU au contexte fonctionnel fourni, en gardant le STYLE du design system.
 `;
 
 // =============================================================================
@@ -685,15 +710,24 @@ CRITICAL RULE - FUNCTIONAL CODE ONLY:
 
 SNIPPET PRINCIPLES:
 
-1. **DESIGN SYSTEM INTEGRATION (CRITICAL - READ THIS FIRST)**
-   - NEVER add inline <style> tags or CSS-in-JS style objects - use ONLY the styling approach from the context
-   - NEVER hardcode pixel values (padding: 120px, font-size: 42px) - use the project's existing variables, tokens, or utility classes
-   - NEVER introduce new fonts - use the project's existing font definitions
-   - NEVER hardcode colors - use the project's existing color tokens/variables/classes
-   - If context includes design tokens, variables, or classes, you MUST use them exclusively
-   - The snippet must integrate SEAMLESSLY - it should look like it was always part of the codebase, not a "foreign block"
-   - Match the exact spacing scale, typography scale, and color palette of the existing project
-   - Adapt to whatever styling system the project uses (CSS modules, utility classes, SCSS, styled-components, etc.)
+1. **DESIGN SYSTEM = STYLE REFERENCE (NOT CONTENT TO COPY)**
+
+   The design system shows HOW to style, not WHAT to display.
+
+   **USE the style:**
+   - Colors, typography, spacing, effects, CSS classes, component structure
+
+   **DO NOT copy the content:**
+   - Specific icons (Cpu, ShieldCheck) → use icons APPROPRIATE to the functional context
+   - Placeholder text ("Sarah System") → use RELEVANT content from the context
+   - Example data → adapt to the real context
+
+   **TECHNICAL RULES:**
+   - NEVER add inline <style> tags - use ONLY the styling approach from the design system
+   - NEVER hardcode pixel values - use the project's existing variables, tokens, or utility classes
+   - NEVER introduce new fonts - use the design system's font definitions
+   - NEVER hardcode colors - use the design system's color tokens/variables/classes
+   - The snippet must integrate SEAMLESSLY with the design system's STYLE while having RELEVANT content
 
 2. **CONTEXTUAL AWARENESS**
    - The snippet will be inserted into an existing codebase

package/package.json

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