gemini-design-mcp 3.8.0 → 3.10.0

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.8.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,94 +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.8.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 ", "");
 
-            if (!apiKey || !apiKey.startsWith("gd_")) {
+            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 gd_xxx",
+                    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.8.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.8.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/lib/gemini.js

@@ -2,71 +2,105 @@
 const PROXY_URL = "https://dashing-alpaca-785.convex.site/v1/generate";
 // Default model - Gemini 3 Flash Preview
 export const DEFAULT_MODEL = "gemini-3-flash-preview";
-// Get and validate API key
+// Import Google Generative AI SDK for BYOK (Bring Your Own Key)
+import { GoogleGenAI } from "@google/genai";
+// Get and validate API key - supports both platform keys (gd_) and Google API keys (AIza)
 function getApiKey() {
     const apiKey = process.env.API_KEY;
     if (!apiKey) {
         throw new Error("Missing API_KEY environment variable. " +
-            "Get your API key at https://gemini-design-mcp.com/dashboard/api-keys");
+            "Use either a platform key (gd_xxx) from https://gemini-design-mcp.com/dashboard/api-keys " +
+            "or a Google API key (AIza...) from https://aistudio.google.com/apikey");
     }
-    if (!apiKey.startsWith("gd_")) {
-        throw new Error("Invalid API key format. API keys must start with 'gd_'. " +
-            "Get your API key at https://gemini-design-mcp.com/dashboard/api-keys");
+    // Accept both platform keys (gd_) and Google API keys (AIza)
+    if (!apiKey.startsWith("gd_") && !apiKey.startsWith("AIza")) {
+        throw new Error("Invalid API key format. Use either:\n" +
+            "- Platform key starting with 'gd_' from https://gemini-design-mcp.com/dashboard/api-keys\n" +
+            "- Google API key starting with 'AIza' from https://aistudio.google.com/apikey");
     }
     return apiKey;
 }
+// Generate via platform proxy (for gd_ keys)
+async function generateViaProxy(apiKey, systemPrompt, userPrompt, model, thinkingMode, endpoint) {
+    const response = await fetch(PROXY_URL, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${apiKey}`,
+        },
+        body: JSON.stringify({
+            model,
+            endpoint,
+            contents: [
+                {
+                    role: "user",
+                    parts: [{ text: userPrompt }],
+                },
+            ],
+            systemInstruction: {
+                parts: [{ text: systemPrompt }],
+            },
+            generationConfig: {
+                temperature: 1,
+            },
+            // Pass thinking mode for billing/logging purposes
+            thinkingMode,
+        }),
+    });
+    const result = await response.json();
+    if (!response.ok) {
+        const errorMsg = result.error || `API error: ${response.status}`;
+        // Check for credit/quota related errors
+        if (errorMsg.toLowerCase().includes('credit') ||
+            errorMsg.toLowerCase().includes('quota') ||
+            errorMsg.toLowerCase().includes('insufficient') ||
+            errorMsg.toLowerCase().includes('limit') ||
+            response.status === 402 ||
+            response.status === 429) {
+            throw new Error(`${errorMsg}\n\n Top up your credits here: https://gemini-design-mcp.com/settings/billing`);
+        }
+        throw new Error(errorMsg);
+    }
+    // Extract text from Gemini response format
+    const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
+    if (!text) {
+        throw new Error("No content in response");
+    }
+    return text;
+}
+// Generate via direct Google API (for AIza keys - BYOK)
+async function generateViaDirect(apiKey, systemPrompt, userPrompt, model) {
+    const ai = new GoogleGenAI({ apiKey });
+    const response = await ai.models.generateContent({
+        model,
+        contents: userPrompt,
+        config: {
+            systemInstruction: systemPrompt,
+            temperature: 1,
+        },
+    });
+    const text = response.text;
+    if (!text) {
+        throw new Error("No content in response from Google API");
+    }
+    return text;
+}
 export async function generateWithGemini(systemPrompt, userPrompt, model = DEFAULT_MODEL, thinkingMode = "minimal", endpoint = "generate") {
     const apiKey = getApiKey();
+    const isGoogleKey = apiKey.startsWith("AIza");
     try {
-        const response = await fetch(PROXY_URL, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": `Bearer ${apiKey}`,
-            },
-            body: JSON.stringify({
-                model,
-                endpoint,
-                contents: [
-                    {
-                        role: "user",
-                        parts: [{ text: userPrompt }],
-                    },
-                ],
-                systemInstruction: {
-                    parts: [{ text: systemPrompt }],
-                },
-                generationConfig: {
-                    temperature: 1,
-                },
-                // Pass thinking mode for billing/logging purposes
-                thinkingMode,
-            }),
-        });
-        const result = await response.json();
-        if (!response.ok) {
-            const errorMsg = result.error || `API error: ${response.status}`;
-            // Check for credit/quota related errors
-            if (errorMsg.toLowerCase().includes('credit') ||
-                errorMsg.toLowerCase().includes('quota') ||
-                errorMsg.toLowerCase().includes('insufficient') ||
-                errorMsg.toLowerCase().includes('limit') ||
-                response.status === 402 ||
-                response.status === 429) {
-                throw new Error(`${errorMsg}\n\n💳 Top up your credits here: https://gemini-design-mcp.com/settings/billing`);
-            }
-            throw new Error(errorMsg);
-        }
-        // Extract text from Gemini response format
-        const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
-        if (!text) {
-            throw new Error("No content in response");
+        if (isGoogleKey) {
+            // BYOK: Direct call to Google API
+            return await generateViaDirect(apiKey, systemPrompt, userPrompt, model);
+        } else {
+            // Platform key: Use proxy
+            return await generateViaProxy(apiKey, systemPrompt, userPrompt, model, thinkingMode, endpoint);
         }
-        return text;
     }
     catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error";
-        console.error("Gemini Design API error:", errorMessage);
-        throw new Error(`Gemini Design API error: ${errorMessage}`);
+        const source = isGoogleKey ? "Google Gemini API" : "Gemini Design API";
+        console.error(`${source} error:`, errorMessage);
+        throw new Error(`${source} error: ${errorMessage}`);
     }
 }

package/build/prompts/system.js

@@ -2,66 +2,295 @@
 // 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)
+
+---
+
+## 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.8.0",
+  "version": "3.10.0",
   "description": "MCP server that uses Gemini 3 Pro for frontend/design code generation",
   "main": "build/index.js",
   "bin": {