gemini-design-mcp 3.9.0 → 3.10.1

package/build/index.js

@@ -1,22 +1,27 @@
 #!/usr/bin/env node
 import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { SSEServerTransport } from "@modelcontextprotocol/sdk/server/sse.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import { isInitializeRequest } from "@modelcontextprotocol/sdk/types.js";
 import express from "express";
 import cors from "cors";
+import { randomUUID } from "crypto";
 import { createFrontendSchema, createFrontend } from "./tools/create-frontend.js";
 import { modifyFrontendSchema, modifyFrontend } from "./tools/modify-frontend.js";
 import { snippetFrontendSchema, snippetFrontend } from "./tools/snippet-frontend.js";
 import { generateVibesSchema, generateVibes } from "./tools/generate-vibes.js";
-// Create MCP server
-const server = new McpServer({
-    name: "gemini-design-mcp",
-    version: "3.9.0",
-});
+
 // =============================================================================
-// TOOL 1: CREATE_FRONTEND
+// HELPER: Create and configure MCP server with all tools
 // =============================================================================
-server.tool("create_frontend", `Create a NEW, complete frontend file with PREMIUM DESIGN quality.
+function createMcpServer() {
+    const server = new McpServer({
+        name: "gemini-design-mcp",
+        version: "3.10.0",
+    });
+
+    // TOOL 1: CREATE_FRONTEND
+    server.tool("create_frontend", `Create a NEW, complete frontend file with PREMIUM DESIGN quality.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 🎯 WHEN TO USE THIS TOOL
@@ -63,10 +68,9 @@ Present options to user, they select one, then pass it here via designSystem.vib
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
 Returns the complete code. YOU (the agent) are responsible for writing it to disk.`, createFrontendSchema, createFrontend);
-// =============================================================================
-// TOOL 2: MODIFY_FRONTEND
-// =============================================================================
-server.tool("modify_frontend", `Redesign a SINGLE UI element. Returns ONLY the changed code (find/replace format).
+
+    // TOOL 2: MODIFY_FRONTEND
+    server.tool("modify_frontend", `Redesign a SINGLE UI element. Returns ONLY the changed code (find/replace format).
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ⚠️ CRITICAL: ONE MODIFICATION PER CALL
@@ -116,10 +120,9 @@ import { X } from "y";
 <new redesigned code>
 
 YOU (the agent) are responsible for applying this find/replace to the file.`, modifyFrontendSchema, modifyFrontend);
-// =============================================================================
-// TOOL 3: SNIPPET_FRONTEND
-// =============================================================================
-server.tool("snippet_frontend", `Generate the JSX/HTML for a NEW UI component to INSERT into an existing file.
+
+    // TOOL 3: SNIPPET_FRONTEND
+    server.tool("snippet_frontend", `Generate the JSX/HTML for a NEW UI component to INSERT into an existing file.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 ⚠️ CRITICAL: SEPARATION OF CONCERNS
@@ -240,10 +243,9 @@ import { Search } from "lucide-react";
 YOU (the agent) are responsible for:
 - Adding the logic (useState, handlers) BEFORE calling this tool
 - 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.
+
+    // TOOL 4: GENERATE_VIBES
+    server.tool("generate_vibes", `Generate 5 unique design vibes for a new project using Gemini AI.
 
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 🎯 WHEN TO USE THIS TOOL
@@ -278,97 +280,213 @@ Example vibe:
 🏛️ "Pristine Museum"
 An ultra-clean, 'white-cube' aesthetic focused on vast negative space.
 Keywords: minimal, whitespace, gallery, clean, sophisticated`, generateVibesSchema, generateVibes);
+
+    return server;
+}
+
 // =============================================================================
 // START SERVER
 // =============================================================================
 async function main() {
     const transportType = process.env.TRANSPORT || "stdio";
 
-    if (transportType === "sse") {
-        // SSE/HTTP mode for remote connections
+    if (transportType === "http" || transportType === "streamable-http") {
+        // Streamable HTTP mode (NEW - recommended for remote connections)
         const app = express();
 
         app.use(cors({
             origin: "*",
-            methods: ["GET", "POST", "OPTIONS"],
+            methods: ["GET", "POST", "DELETE", "OPTIONS"],
             allowedHeaders: ["Content-Type", "Authorization", "mcp-session-id"],
+            exposedHeaders: ["mcp-session-id"],
             credentials: true,
         }));
         app.use(express.json());
 
-        // Store active transports by session
+        // Store active transports and servers by session
         const transports = new Map();
+        const servers = new Map();
 
         // Health check endpoint
         app.get("/health", (req, res) => {
             res.json({
                 status: "ok",
                 service: "gemini-design-mcp",
-                version: "3.9.0",
-                transport: "sse",
+                version: "3.10.0",
+                transport: "streamable-http",
                 timestamp: Date.now(),
             });
         });
 
-        // SSE endpoint - establishes connection
+        // Main MCP endpoint - handles all communication
+        app.post("/mcp", async (req, res) => {
+            const sessionId = req.headers["mcp-session-id"];
+            let transport = sessionId ? transports.get(sessionId) : undefined;
+
+            if (transport) {
+                // Existing session - reuse transport
+                console.log(`[MCP] Reusing session: ${sessionId}`);
+                await transport.handleRequest(req, res, req.body);
+            } else if (!sessionId && isInitializeRequest(req.body)) {
+                // New session - create transport and server
+                console.log("[MCP] New session initialization");
+
+                // Extract API key from Authorization header
+                const authHeader = req.headers.authorization;
+                const apiKey = authHeader?.replace("Bearer ", "");
+
+                if (apiKey && (apiKey.startsWith("gd_") || apiKey.startsWith("AIza"))) {
+                    process.env.API_KEY = apiKey;
+                }
+
+                const newTransport = new StreamableHTTPServerTransport({
+                    sessionIdGenerator: () => randomUUID(),
+                    onsessioninitialized: (sid) => {
+                        transports.set(sid, newTransport);
+                        console.log(`[MCP] Session initialized: ${sid}`);
+                    },
+                });
+
+                // Clean up on close
+                newTransport.onclose = () => {
+                    if (newTransport.sessionId) {
+                        console.log(`[MCP] Session closed: ${newTransport.sessionId}`);
+                        transports.delete(newTransport.sessionId);
+                        servers.delete(newTransport.sessionId);
+                    }
+                };
+
+                // Create new server instance for this session
+                const server = createMcpServer();
+                servers.set(newTransport.sessionId, server);
+
+                // Connect server to transport
+                await server.connect(newTransport);
+
+                // Handle the initialization request
+                await newTransport.handleRequest(req, res, req.body);
+            } else {
+                // Invalid request
+                console.warn("[MCP] Bad request - no session ID or not an init request");
+                res.status(400).json({
+                    error: "Bad Request: No valid session ID provided and not an initialization request",
+                });
+            }
+        });
+
+        // GET for server-to-client streaming (optional, for long-running operations)
+        app.get("/mcp", async (req, res) => {
+            const sessionId = req.headers["mcp-session-id"];
+            const transport = sessionId ? transports.get(sessionId) : undefined;
+
+            if (!transport) {
+                return res.status(404).json({ error: "Session not found" });
+            }
+
+            await transport.handleRequest(req, res);
+        });
+
+        // DELETE for explicit session termination
+        app.delete("/mcp", async (req, res) => {
+            const sessionId = req.headers["mcp-session-id"];
+            const transport = sessionId ? transports.get(sessionId) : undefined;
+
+            if (!transport) {
+                return res.status(404).json({ error: "Session not found" });
+            }
+
+            await transport.handleRequest(req, res);
+        });
+
+        // =========================================================================
+        // LEGACY SSE ENDPOINTS (for backwards compatibility with mcp-remote)
+        // =========================================================================
+        // Keep SSE support for clients that haven't migrated yet
+        const { SSEServerTransport } = await import("@modelcontextprotocol/sdk/server/sse.js");
+        const sseTransports = new Map();
+
         app.get("/sse", async (req, res) => {
             const authHeader = req.headers.authorization;
             const apiKey = authHeader?.replace("Bearer ", "");
 
-            // Accept both platform keys (gd_) and Google API keys (AIza)
             const isValidKey = apiKey && (apiKey.startsWith("gd_") || apiKey.startsWith("AIza"));
             if (!isValidKey) {
                 return res.status(401).json({
-                    error: "Missing or invalid API key. Use Authorization: Bearer <key>. " +
-                           "Accepted formats: gd_xxx (platform) or AIza... (Google API key)",
+                    error: "Missing or invalid API key. Use Authorization: Bearer <key>",
                 });
             }
 
-            // Set API_KEY env var for this request (tools read from process.env)
             process.env.API_KEY = apiKey;
 
-            // Create SSE transport
             const transport = new SSEServerTransport("/messages", res);
-            const sessionId = `sess_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-            transports.set(sessionId, transport);
+            const sessionId = transport.sessionId;
+            sseTransports.set(sessionId, transport);
 
-            // Send session ID to client
             res.setHeader("mcp-session-id", sessionId);
 
-            // Clean up on disconnect
             res.on("close", () => {
-                transports.delete(sessionId);
+                console.log("[SSE] Connection closed for session:", sessionId);
+                sseTransports.delete(sessionId);
             });
 
+            const server = createMcpServer();
             await server.connect(transport);
+
+            // Keepalive every 5s
+            const keepAlive = setInterval(() => {
+                try {
+                    res.write(":keepalive\n\n");
+                } catch {
+                    // Ignore errors
+                }
+            }, 5000);
+            res.on("close", () => clearInterval(keepAlive));
         });
 
-        // Messages endpoint - receives JSON-RPC from client
         app.post("/messages", async (req, res) => {
-            const sessionId = req.query.sessionId || req.headers["mcp-session-id"];
-            const transport = transports.get(sessionId);
+            const headerSession = req.headers["mcp-session-id"];
+            const headerSessionId = Array.isArray(headerSession) ? headerSession[0] : headerSession;
+            let sessionId = req.query.sessionId || headerSessionId;
+            let transport = sessionId ? sseTransports.get(sessionId) : undefined;
+
+            if (!transport && !sessionId && sseTransports.size === 1) {
+                const onlyEntry = sseTransports.entries().next().value;
+                if (onlyEntry) {
+                    sessionId = onlyEntry[0];
+                    transport = onlyEntry[1];
+                }
+            }
 
             if (!transport) {
                 return res.status(400).json({ error: "Invalid or expired session" });
             }
 
-            await transport.handlePostMessage(req, res);
+            try {
+                await transport.handlePostMessage(req, res, req.body);
+            } catch (error) {
+                console.error("[SSE] Error handling message:", error);
+                if (!res.headersSent) {
+                    res.status(400).json({ error: "Invalid message" });
+                }
+            }
         });
 
         const port = parseInt(process.env.PORT || "3000", 10);
         app.listen(port, "0.0.0.0", () => {
-            console.log(`gemini-design-mcp v3.9.0 running on SSE transport`);
-            console.log(`  SSE endpoint: http://0.0.0.0:${port}/sse`);
-            console.log(`  Messages endpoint: http://0.0.0.0:${port}/messages`);
+            console.log(`gemini-design-mcp v3.10.0 running on Streamable HTTP transport`);
+            console.log(`  MCP endpoint: http://0.0.0.0:${port}/mcp`);
+            console.log(`  Legacy SSE: http://0.0.0.0:${port}/sse`);
             console.log(`  Health check: http://0.0.0.0:${port}/health`);
         });
     } else {
         // Stdio mode (default, for local IDE usage)
+        const server = createMcpServer();
         const transport = new StdioServerTransport();
         await server.connect(transport);
-        console.error("gemini-design-mcp v3.9.0 running on stdio");
+        console.error("gemini-design-mcp v3.10.0 running on stdio");
     }
 }
+
 main().catch((error) => {
     console.error("Fatal error:", error);
     process.exit(1);

package/build/prompts/system.js

@@ -2,66 +2,296 @@
 // CREATE_FRONTEND PROMPT
 // Used for creating NEW complete files (pages, components, sections)
 // =============================================================================
-export const CREATE_FRONTEND_PROMPT = `You are an elite UI/UX Designer creating production-ready, visually stunning interfaces.
-
-YOUR TASK: Create a COMPLETE, NEW frontend file.
-
-DESIGN EXCELLENCE REQUIREMENTS:
-
-1. **MAXIMUM DETAIL AND DENSITY**
-   - The interface MUST be densely populated and feature-rich
-   - NEVER produce simple wireframes, empty containers, or placeholder content
-   - Fill the space with intricate details, realistic content, background elements, and meaningful UI components
-   - Every section should feel like a fully finished, polished product
-
-2. **PREMIUM VISUAL STYLING**
-   - Apply high-end design principles throughout
-   - Use sophisticated styling: nuanced shadows, subtle gradients, refined borders, micro-textures
-   - Add depth and dimension with layered elements
-   - The aesthetic MUST feel modern, premium, and visually captivating
-   - Use professional color palettes with proper contrast and hierarchy
-
-3. **COMPREHENSIVE INTERACTIVITY**
-   - Design every element to look tangible and interactive
-   - Include visual states: hover effects, focus rings, active states, transitions
-   - Buttons should look clickable, inputs should look fillable
-   - The interface should feel alive, not static
-
-4. **LAYOUT EXCELLENCE**
-   - Use proper visual hierarchy with clear focal points
-   - Apply consistent spacing rhythm throughout
-   - Ensure the layout breathes - balance density with whitespace
-   - Full viewport height designs (min-height: 100vh on body)
-   - No awkward gaps or orphaned elements
-
-5. **RESPONSIVE BY DEFAULT**
-   - Designs MUST work flawlessly on mobile and desktop
-   - Touch-friendly sizing for interactive elements on mobile
-   - Stackable grids that adapt naturally to screen size
-
-6. **REALISTIC CONTENT**
-   - Use believable placeholder content (real-looking names, dates, numbers)
-   - Include appropriate icons, avatars, and imagery
-   - Data visualizations should have realistic data points
-   - Text should be contextually appropriate, not "Lorem ipsum"
-
-7. **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
-   - 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)
+export const CREATE_FRONTEND_PROMPT = `# Frontend Design Skill - Enhanced Prompt
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+---
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+**Purpose & Context**: What problem does this interface solve? Who uses it? Adapt the "volume" of creativity to the intent.
+
+- **Trust Tier** (Banks, SaaS, Enterprise): Innovation lies in subtlety—perfect typography, "glass" materials, and silky smooth interactions.
+- **Disrupt Tier** (Fashion, Portfolio, Event): Innovation lies in shock—brutalism, WebGL distortion, and aggressive layouts.
+
+**Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian.
+
+**Differentiation**: What makes this UNFORGETTABLE? Is it a physics-based interaction? A seamless video background? A shader effect?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality.
+
+---
+
+## Aesthetic References (Non-Exhaustive Inspiration)
+
+Sites to study for different vibes—don't copy, extract the *principle* that makes them work:
+
+| Vibe | References |
+|------|------------|
+| **Liquid/Organic** | Linear.app, Stripe.com, Raycast.com |
+| **Brutalist/Raw** | Balenciaga, Bloomberg Businessweek |
+| **Editorial/Magazine** | Pudding.cool, The Outline (RIP), NYT Interactive |
+| **3D/Immersive** | Apple product pages, Porsche.com, Rivian.com |
+| **Retro-Web/Y2K** | Poolsuite.net, Superbad.com |
+| **Neo-Corporate** | Vercel, Supabase, Planetscale, Railway.app |
+| **Luxury/Fashion** | Bottega Veneta, Acne Studios, SSENSE |
+| **Experimental** | Awwwards winners, Hoverstat.es, Brutalist Websites |
+
+---
+
+## Frontend Aesthetics Guidelines
+
+### 1. Visual Fidelity & Alchemy
+
+Go beyond standard CSS. Layer lighting, depth, and texture to create objects that feel tactile.
+
+**The "Hyper-Border"**: Instead of simple borders, consider mask-composite or pseudo-elements with conic-gradients to create flowing light. Use \`box-shadow: inset\` for inner glows that create depth (e.g., buttons that feel carved into the screen).
+
+**Backgrounds & Atmosphere**: Create atmosphere rather than solid colors. Use gradient meshes, noise textures to prevent banding, geometric patterns, or layered transparencies.
+
+**Cinematic Materials**: Treat video as a texture. Don't just embed a player; blend video footage using \`mix-blend-mode\`, mask it inside typography, or use it as a blurred atmospheric layer.
+
+### 2. Motion & Physics
+
+Motion should feel alive, not just "animated."
+
+**Tools**: Prioritize CSS-only solutions for simple movement. For complex interactions, feel free to use libraries like Framer Motion, GSAP (ScrollTrigger), or Lenis (for smooth scrolling).
+
+**Interaction**: Use magnetic buttons that track the cursor, scroll-linked animations (scrubbing), or parallax effects.
+
+**The "Woah" Moment**: Focus on one high-impact centerpiece. A well-orchestrated hero section with staggered reveals is better than chaotic noise.
+
+### 3. Advanced Tech (Optional)
+
+If the aesthetic demands "God-tier" visuals (and performance permits), do not hesitate to suggest or implement:
+
+- **WebGL / Shaders**: Use Three.js / React Three Fiber for liquid distortions, particle systems, or 3D displacement maps.
+- **Canvas**: For fluid simulations or interactive grain.
+
+### 4. Typography & Layout
+
+**Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts (Arial, Inter). Pair a distinctive display font with a refined body font.
+
+**Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+
+---
+
+## Details That Elevate
+
+Small touches that separate good from unforgettable:
+
+- Custom cursor that reacts to context (pointer changes near interactive elements, grows on hover)
+- Text that reveals on scroll with \`clip-path\` or mask
+- Hover states that feel physical (\`scale(0.98)\` + shadow reduction = "pressed")
+- Loading states that are actually delightful (skeleton with shimmer, not spinner)
+- Scroll progress indicators (subtle bar, dot navigation, or percentage)
+- Easter eggs (Konami code, hidden interactions, developer console messages)
+- Sound design (subtle click/hover sounds for immersive experiences)
+- View Transitions API for seamless page changes
+- Staggered animations with variable delays (not uniform timing)
+- "Breathing" elements (subtle scale oscillation on idle states)
+- Focus states that are beautiful, not just functional
+- Selection highlight with custom \`::selection\` colors
+- Smooth scroll behavior with momentum
+- Magnetic snap points on scroll
+- Cursor trails or custom pointer effects
+
+---
+
+## Creative Moves Toolkit
+
+A palette of techniques to draw from—mix and match based on your aesthetic direction:
+
+### Typography Moves
+
+- Massive display type (200px+) cropped by viewport edge
+- Mixed weights in same headline ("Build **FAST**")
+- Vertical text for navigation or accents
+- Variable fonts animated on scroll/hover (weight, width, slant)
+- Text stroke / outline only (no fill)
+- Kinetic typography (letters that move independently)
+- Highlighted text with custom underlines or background marks
+- Rotated or angled headlines
+- Text masks revealing images or video
+- Stacked/layered text shadows for depth
+- Justified text with careful hyphenation
+- Pull quotes that break the grid
+
+### Layout Moves
+
+- Bento grid (varied cell sizes like Apple)
+- Overlap everything (z-index chaos, controlled)
+- Sticky elements that transform as you scroll
+- Split screen with independent scroll speeds
+- Cards that "fan out" or "stack" on hover
+- Masonry that reflows dynamically
+- Off-canvas elements peeking in
+- Full-bleed sections alternating with contained
+- Diagonal dividers between sections
+- Floating elements that respond to scroll/cursor
+- Horizontal scroll sections within vertical page
+- Asymmetric hero with off-center focal point
+
+### Color Moves
+
+- Monochrome + ONE violent accent color
+- Dark mode with glowing/neon edges
+- Gradient text (\`background-clip: text\`)
+- Color that shifts with scroll position
+- Inverted sections (dark/light alternating dramatically)
+- Duotone images (two-color treatment)
+- Color theming that changes per section
+- Complementary color clashes (intentional tension)
+- Single hue with many tints/shades
+- Black & white with selective color pops
+- Iridescent/holographic effects
+- Color that responds to time of day
+
+### Texture Moves
+
+- Grain overlay (SVG noise filter or CSS)
+- Glassmorphism done right (\`backdrop-blur\` + subtle border glow)
+- Halftone patterns for retro feel
+- Scan lines (CRT/retro screen effect)
+- Paper texture for editorial authenticity
+- Metallic/chrome reflections (\`conic-gradient\`)
+- Mesh gradients for organic depth
+- Dot patterns or grids as backgrounds
+- Frosted glass panels
+- Subtle shadows with colored tints
+- Glow effects (outer and inner)
+- Noise dithering on gradients
+
+---
+
+## Proven Aesthetic Combos
+
+Pre-validated combinations that work—use as starting points, then make them your own:
+
+| Vibe | Typography | Colors | Motion | Layout |
+|------|-----------|--------|--------|--------|
+| **Luxury Tech** | Thin serif + monospace | Black + gold/cream accent | Slow, smooth reveals | Generous whitespace |
+| **Y2K Revival** | Bubble/rounded + pixel fonts | Chrome + hot pink/lime | Bouncy, elastic easing | Chaotic overlap |
+| **Editorial** | High-contrast serif (Playfair, etc.) | B&W + single red accent | Subtle, purposeful fades | Grid with intentional breaks |
+| **Neo-Brutalist** | Heavy grotesque (bold sans) | Primary colors + pure black | Instant, no easing (steps) | Rigid grid, raw borders |
+| **Organic/Calm** | Rounded sans + hand-drawn elements | Earth tones + warm cream | Gentle, breathing motion | Flowing, asymmetric curves |
+| **Cyberpunk** | Condensed industrial + glitch | Neon on dark, high contrast | Flicker, glitch effects | Dense, information-heavy |
+| **Minimal Luxury** | Ultra-thin sans + elegant serif | Muted neutrals, subtle warmth | Almost invisible, precise | Extreme whitespace |
+| **Playful/Toy** | Rounded, chunky, friendly | Bright primaries, pastels | Bouncy, squash & stretch | Loose, scattered, fun |
+| **Art Deco** | Geometric display, gold accents | Black + gold + cream | Elegant reveals, symmetric | Strong geometry, patterns |
+| **Swiss/International** | Helvetica-adjacent, grid-locked | Limited palette, functional | Minimal, functional only | Strict grid system |
+
+---
+
+## The "AI Slop" Detector
+
+You've made AI slop if you see any of these patterns. Stop immediately and pick a weirder direction:
+
+### Visual Red Flags
+- Purple-to-blue gradient on white background
+- Generic 3D blob/abstract illustrations
+- Card grid with identical border-radius and shadows
+- Perfectly centered everything with no tension
+- Stock photos of people smiling at laptops
+- Gradient orbs floating in the background
+- The same "glass card" component everywhere
+
+### Typography Red Flags
+- Inter, Roboto, Poppins, or system fonts as primary
+- Generic font pairing with no character
+- All text perfectly aligned and safe
+- No hierarchy risks taken
+
+### Layout Red Flags
+- "Hero section with headline, subtext, two buttons" (the holy trinity of boring)
+- Three-column feature grid
+- Testimonial carousel
+- "Clean and modern" as the only design rationale
+- Footer with 4 equal columns of links
+
+### Motion Red Flags
+- \`transition: all 0.3s ease\` on everything
+- Fade-in-up on scroll for every element
+- No motion at all (static = forgettable)
+- Overused bounce effects
+
+**If you catch yourself here**: STOP. Go back to the aesthetic combos. Pick something with actual personality. Ask "what would make someone screenshot this?"
+
+---
+
+## Before You Ship, Ask Yourself
+
+Gut-check questions to ensure you're not shipping mediocrity:
+
+1. **Would this make someone stop scrolling?**
+2. **If I remove the logo, is this still recognizable as this brand/product?**
+3. **What's the ONE thing people will screenshot or share?**
+4. **Does this feel like a human made it, or an algorithm?**
+5. **Is there any moment of genuine surprise or delight?**
+6. **Would I put this in my portfolio?**
+7. **Can I describe the aesthetic in one evocative phrase?** (If you can only say "clean and modern," try again)
+8. **Did I take at least ONE real risk?**
+9. **Is the typography doing heavy lifting or just existing?**
+10. **Will this be remembered tomorrow?**
+
+---
+
+## Implementation Rules
+
+**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.
+
+**Responsiveness**: Design for all viewports. Mobile should feel intentional, not cramped.
+
+**Performance**: Don't sacrifice loading speed for aesthetics. Lazy load heavy assets. Optimize images.
+
+**Accessibility**: Beautiful AND usable. Proper contrast, focus states, semantic HTML, ARIA where needed.
+
+**Match Complexity to Vision**:
+- Maximalist designs need elaborate code with extensive animations and effects
+- Minimalist designs need restraint, precision, and obsessive attention to spacing, typography, and subtle details
+- Elegance comes from executing the vision well, not from adding more
+
+---
+
+## 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
+- 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
+
+---
+
+## OUTPUT REQUIREMENTS
 
-OUTPUT REQUIREMENTS:
 - Return a COMPLETE file with all necessary imports at the top
 - Include proper exports (default or named as appropriate)
 - The code must be ready to use as-is, no modifications needed
 - Follow the tech stack conventions exactly
-- Return ONLY the code, no explanations or markdown fences`;
+- Return ONLY the code, no explanations or markdown fences
+
+---
+
+## Remember
+
+You are capable of extraordinary creative work. Every interface is an opportunity to create something memorable. Don't default to safe choices—commit fully to a distinctive vision and execute it with precision.
+
+The difference between forgettable and iconic is intentionality. Make every decision on purpose. Surprise yourself.
+
+**Now go build something unforgettable.**`;
 // =============================================================================
 // MODIFY_FRONTEND PROMPT
 // Used for making a SINGLE design modification to existing code

package/package.json

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