figma-console-mcp 1.13.1 → 1.15.0

package/README.md

@@ -8,7 +8,7 @@
 
 > **Your design system as an API.** Model Context Protocol server that bridges design and development—giving AI assistants complete access to Figma for **extraction**, **creation**, and **debugging**.
 
-> **🆕 Cloud Write Relay — Web AI Clients Can Now Design in Figma:** Claude.ai, v0, Replit, and Lovable can now create and modify Figma designs through a cloud relay. No Node.js required — just pair your Desktop Bridge plugin with a 6-character code and get 43 tools including full write access. [See changelog →](CHANGELOG.md)
+> **🆕 Import Once, Update Never — Plugin Bootloader Architecture:** The Desktop Bridge plugin now dynamically loads its UI from the MCP server on every launch. Import the manifest once from `~/.figma-console-mcp/plugin/manifest.json` and you're done forever — server updates, new tools, and bug fixes are delivered automatically. Plus: orphaned process cleanup, cross-file library components, and built-in housekeeping. [See changelog →](CHANGELOG.md)
 
 ## What is this?
 
@@ -49,9 +49,9 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 | Real-time monitoring (console, selection) | ✅ | ❌ | ❌ |
 | Desktop Bridge plugin | ✅ | ✅ | ❌ |
 | Requires Node.js | Yes | **No** | No |
-| **Total tools available** | **59+** | **43** | **22** |
+| **Total tools available** | **63+** | **43** | **22** |
 
-> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 59+ tools with real-time monitoring.
+> **Bottom line:** Remote SSE is **read-only** with ~38% of the tools. **Cloud Mode** unlocks write access from web AI clients without Node.js. NPX/Local Git gives the full 63+ tools with real-time monitoring.
 
 ---
 
@@ -59,7 +59,7 @@ Figma Console MCP connects AI assistants (like Claude) to Figma, enabling:
 
 **Best for:** Designers who want full AI-assisted design capabilities.
 
-**What you get:** All 59+ tools including design creation, variable management, and component instantiation.
+**What you get:** All 63+ tools including design creation, variable management, and component instantiation.
 
 #### Prerequisites
 
@@ -122,11 +122,10 @@ If you're not sure where to put the JSON configuration above, here's where each
 **Desktop Bridge Plugin:**
 1. Open Figma Desktop normally (no special flags needed)
 2. Go to **Plugins → Development → Import plugin from manifest...**
-3. Select `figma-desktop-bridge/manifest.json` from the figma-console-mcp directory
-   - **NPX users:** Run `npx figma-console-mcp@latest --print-path` to find the directory
-4. Run the plugin in your Figma file — it auto-connects via WebSocket (scans ports 9223–9232)
+3. Select `~/.figma-console-mcp/plugin/manifest.json` (stable path, auto-created by the MCP server)
+4. Run the plugin in your Figma file — the bootloader finds the MCP server and loads the latest UI automatically
 
-> One-time setup. The plugin persists in your Development plugins list across sessions.
+> One-time setup. The plugin uses a bootloader that dynamically loads fresh code from the MCP server — no need to re-import when the server updates.
 
 #### Step 4: Restart Your MCP Client
 
@@ -152,7 +151,7 @@ Create a simple frame with a blue background
 
 **Best for:** Developers who want to modify source code or contribute to the project.
 
-**What you get:** Same 59+ tools as NPX, plus full source code access.
+**What you get:** Same 63+ tools as NPX, plus full source code access.
 
 #### Quick Setup
 
@@ -193,7 +192,7 @@ Then follow [NPX Steps 3-5](#step-3-connect-to-figma-desktop) above.
 
 **Best for:** Quickly evaluating the tool or read-only design data extraction.
 
-**What you get:** 22 read-only tools — view data, take screenshots, read logs, design-code parity. **Cannot create or modify designs.**
+**What you get:** 9 read-only tools — view data, take screenshots, read logs, design-code parity. **Cannot create or modify designs.**
 
 #### Claude Desktop (UI Method)
 
@@ -241,24 +240,34 @@ Ready for design creation? Follow the [NPX Setup](#-npx-setup-recommended) guide
 
 **Best for:** Using Claude.ai, v0, Replit, or Lovable to create and modify Figma designs — no Node.js required.
 
-**What you get:** 43 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
+**What you get:** 52 tools including full write access — design creation, variable management, component instantiation, and all REST API tools. Only real-time monitoring (console logs, selection tracking, document changes) requires Local Mode.
 
 #### Prerequisites
 
+- [ ] **Figma Personal Access Token** — [Create one here](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) (starts with `figd_`)
 - [ ] **Figma Desktop** with the Desktop Bridge plugin installed (see [Desktop Bridge setup](#step-3-connect-to-figma-desktop))
-- [ ] **A web AI client** connected to the remote MCP endpoint (see [Remote SSE setup](#-remote-sse-read-only-exploration))
+- [ ] **A web AI client** that supports MCP (Claude.ai, Lovable, v0, Replit, etc.)
+
+#### Step 1: Add the MCP Connector
+
+Add this endpoint to your AI platform's MCP settings:
 
-#### How to Connect
+**URL:** `https://figma-console-mcp.southleft.com/mcp`
+**Auth:** Your Figma PAT as Bearer token
 
-1. **Set up Remote SSE** if you haven't already — follow the [Remote SSE](#-remote-sse-read-only-exploration) steps above
-2. **Open the Desktop Bridge plugin** in Figma Desktop (Plugins → Development → Figma Desktop Bridge)
-3. **Tell your AI assistant:**
+In **Claude.ai**: Settings → Connectors → Add Custom Connector → paste the URL above.
+In **Lovable/v0/Replit**: Look for "Add MCP Server" or "Integrations" in settings → paste the URL and add your token.
+
+#### Step 2: Pair the Plugin
+
+1. **Open the Desktop Bridge plugin** in Figma Desktop (Plugins → Development → Figma Desktop Bridge)
+2. **Tell your AI assistant:**
    ```
    Connect to my Figma plugin
    ```
-4. **The AI gives you a 6-character pairing code** (expires in 5 minutes)
-5. **In the plugin:** Toggle "Cloud Mode" → enter the code → click Connect
-6. **You're paired!** Full write access is now available
+3. **The AI gives you a 6-character pairing code** (expires in 5 minutes)
+4. **In the plugin:** Toggle "Cloud Mode" → enter the code → click Connect
+5. **You're paired!** Full write access is now available
 
 #### What You Can Do
 
@@ -288,7 +297,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | Feature | NPX (Recommended) | Cloud Mode | Local Git | Remote SSE |
 |---------|-------------------|------------|-----------|------------|
 | **Setup time** | ~10 minutes | ~5 minutes | ~15 minutes | ~2 minutes |
-| **Total tools** | **59+** | **43** | **59+** | **22** (read-only) |
+| **Total tools** | **63+** | **43** | **63+** | **22** (read-only) |
 | **Design creation** | ✅ | ✅ | ✅ | ❌ |
 | **Variable management** | ✅ | ✅ | ✅ | ❌ |
 | **Component instantiation** | ✅ | ✅ | ✅ | ❌ |
@@ -302,7 +311,7 @@ AI Client → Cloud MCP Server → Durable Object Relay → Desktop Bridge Plugi
 | **Automatic updates** | ✅ (`@latest`) | ✅ | Manual (`git pull`) | ✅ |
 | **Source code access** | ❌ | ❌ | ✅ | ❌ |
 
-> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 59+ tools.
+> **Key insight:** Remote SSE is read-only. Cloud Mode adds write access for web AI clients without Node.js. NPX/Local Git give the full 63+ tools.
 
 **📖 [Complete Feature Comparison](docs/mode-comparison.md)**
 
@@ -587,7 +596,7 @@ The **Figma Desktop Bridge** plugin is the recommended way to connect Figma to t
 - The MCP server communicates via **WebSocket** through the Desktop Bridge plugin
 - The server tries port 9223 first, then automatically falls back through ports 9224–9232 if needed
 - The plugin scans all ports in the range and connects to every active server it finds
-- All 59+ tools work through the WebSocket transport
+- All 63+ tools work through the WebSocket transport
 
 **Multiple files:** The WebSocket server supports multiple simultaneous plugin connections — one per open Figma file. Each connection is tracked by file key with independent state (selection, document changes, console logs).
 
@@ -627,11 +636,11 @@ When two processes tried to start the MCP server (e.g., Claude Desktop's Chat ta
 
 ### Do I Need to Do Anything?
 
-**If you're running a single instance:** Nothing changes. You'll still use port 9223 as before.
-
-**If you want multi-instance:** Re-import the Desktop Bridge plugin in Figma (Plugins → Development → Import plugin from manifest). This updates the plugin to scan all ports and connect to every active server.
-
-> **Note:** The server-side update happens automatically when you update the npm package. Only the plugin needs a one-time re-import to enable multi-connection support.
+**Nothing.** Multi-instance support is fully automatic:
+- Each MCP server claims the next available port in the range
+- The bootloader plugin scans all ports and connects to every active server
+- Orphaned processes from closed tabs are automatically cleaned up on startup
+- No re-importing, no manual port management
 
 ---
 
@@ -723,7 +732,7 @@ The architecture supports adding new apps with minimal boilerplate — each app
 
 ## 🛤️ Roadmap
 
-**Current Status:** v1.12.0 (Stable) - Production-ready with Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 59+ tools, Comments API, and MCP Apps
+**Current Status:** v1.12.0 (Stable) - Production-ready with Cloud Write Relay, Design System Kit, WebSocket-only connectivity, smart multi-file tracking, 63+ tools, Comments API, and MCP Apps
 
 **Recent Releases:**
 - [x] **v1.12.0** - Cloud Write Relay: web AI clients (Claude.ai, v0, Replit, Lovable) can create and modify Figma designs via cloud relay pairing — no Node.js required

package/dist/cloudflare/core/cloud-websocket-connector.js

@@ -223,6 +223,27 @@ export class CloudWebSocketConnector {
         return this.sendCommand('SET_INSTANCE_PROPERTIES', { nodeId, properties });
     }
     // ============================================================================
+    // Image fill
+    // ============================================================================
+    async setImageFill(nodeIds, imageData, scaleMode = 'FILL') {
+        return this.sendCommand('SET_IMAGE_FILL', { nodeIds, imageData, scaleMode }, 60000);
+    }
+    // ============================================================================
+    // Design lint
+    // ============================================================================
+    async lintDesign(nodeId, rules, maxDepth, maxFindings) {
+        const params = {};
+        if (nodeId)
+            params.nodeId = nodeId;
+        if (rules)
+            params.rules = rules;
+        if (maxDepth !== undefined)
+            params.maxDepth = maxDepth;
+        if (maxFindings !== undefined)
+            params.maxFindings = maxFindings;
+        return this.sendCommand('LINT_DESIGN', params, 120000);
+    }
+    // ============================================================================
     // Cache management (no-op for cloud relay)
     // ============================================================================
     clearFrameCache() {

package/dist/cloudflare/core/figma-desktop-connector.js

@@ -1148,5 +1148,37 @@ export class FigmaDesktopConnector {
             throw error;
         }
     }
+    /**
+     * Set image fill on one or more nodes (decodes base64 in browser bridge, sends bytes to plugin)
+     */
+    async setImageFill(nodeIds, imageData, scaleMode = 'FILL') {
+        logger.info({ nodeIds, scaleMode, dataLength: imageData.length }, 'Setting image fill via plugin UI');
+        const frame = await this.findPluginUIFrame();
+        try {
+            const result = await frame.evaluate(`window.setImageFill(${JSON.stringify(nodeIds)}, ${JSON.stringify(imageData)}, ${JSON.stringify(scaleMode)})`);
+            logger.info({ success: result.success, imageHash: result.imageHash }, 'Image fill set');
+            return result;
+        }
+        catch (error) {
+            logger.error({ error, nodeIds }, 'Set image fill failed');
+            throw error;
+        }
+    }
+    /**
+     * Lint design for accessibility and quality issues via plugin UI
+     */
+    async lintDesign(nodeId, rules, maxDepth, maxFindings) {
+        logger.info({ nodeId, rules }, 'Linting design via plugin UI');
+        const frame = await this.findPluginUIFrame();
+        try {
+            const result = await frame.evaluate(`window.lintDesign(${JSON.stringify(nodeId || null)}, ${JSON.stringify(rules || null)}, ${JSON.stringify(maxDepth ?? null)}, ${JSON.stringify(maxFindings ?? null)})`);
+            logger.info({ success: result.success }, 'Design lint complete');
+            return result;
+        }
+        catch (error) {
+            logger.error({ error, nodeId }, 'Design lint failed');
+            throw error;
+        }
+    }
 }
 FigmaDesktopConnector.DEBUG = process.env.DEBUG === '1' || process.env.DEBUG === 'true';

package/dist/cloudflare/core/websocket-connector.js

@@ -227,6 +227,27 @@ export class WebSocketConnector {
         return this.wsServer.sendCommand('SET_INSTANCE_PROPERTIES', { nodeId, properties });
     }
     // ============================================================================
+    // Image fill
+    // ============================================================================
+    async setImageFill(nodeIds, imageData, scaleMode = 'FILL') {
+        return this.wsServer.sendCommand('SET_IMAGE_FILL', { nodeIds, imageData, scaleMode }, 60000);
+    }
+    // ============================================================================
+    // Design lint
+    // ============================================================================
+    async lintDesign(nodeId, rules, maxDepth, maxFindings) {
+        const params = {};
+        if (nodeId)
+            params.nodeId = nodeId;
+        if (rules)
+            params.rules = rules;
+        if (maxDepth !== undefined)
+            params.maxDepth = maxDepth;
+        if (maxFindings !== undefined)
+            params.maxFindings = maxFindings;
+        return this.wsServer.sendCommand('LINT_DESIGN', params, 120000);
+    }
+    // ============================================================================
     // Cache management (no-op for WebSocket — no frame cache)
     // ============================================================================
     clearFrameCache() {

package/dist/cloudflare/core/write-tools.js

@@ -1227,6 +1227,49 @@ After instantiating components, use figma_take_screenshot to verify the result l
             };
         }
     });
+    // Tool: Set Image Fill on nodes
+    server.tool("figma_set_image_fill", "Set an image fill on one or more Figma nodes. The imageData parameter accepts a base64-encoded " +
+        "image string (JPEG/PNG). The image is decoded in the browser bridge and passed " +
+        "as raw bytes to the Figma plugin. Requires Desktop Bridge plugin.", {
+        nodeIds: z.array(z.string()).describe("Array of node IDs to apply the image fill to"),
+        imageData: z.string().describe("Base64-encoded image data (JPEG/PNG)"),
+        scaleMode: z.enum(["FILL", "FIT", "CROP", "TILE"]).optional().describe("How the image fills the node (default: FILL)"),
+    }, async ({ nodeIds, imageData, scaleMode }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.setImageFill(nodeIds, imageData, scaleMode || "FILL");
+            if (!result.success) {
+                throw new Error(result.error || "Failed to set image fill");
+            }
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            success: true,
+                            message: `Image fill applied to ${result.updatedCount || 0} node(s)`,
+                            imageHash: result.imageHash,
+                            nodes: result.nodes,
+                        }),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "Failed to set image fill");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
     // Tool: Set Node Strokes
     server.tool("figma_set_strokes", "Set the stroke (border) on a node. Accepts hex color strings and optional stroke weight.", {
         nodeId: z.string().describe("The node ID to modify"),
@@ -2003,4 +2046,46 @@ return {
             };
         }
     });
+    // Tool: Lint Design for accessibility and quality issues
+    server.tool("figma_lint_design", "Run accessibility (WCAG) and design quality checks on the current page or a specific node tree. " +
+        "Checks color contrast ratios, text sizing, touch targets, hardcoded values, detached components, " +
+        "naming conventions, and layout quality. Returns categorized findings with severity levels. " +
+        "Use natural language like 'check my design for accessibility issues' or 'lint this page'. " +
+        "Requires Desktop Bridge plugin.", {
+        nodeId: z.string().optional().describe("Node ID to lint (defaults to current page)"),
+        rules: z.array(z.string()).optional().describe("Rule filter: ['all'] (default), ['wcag'], ['design-system'], ['layout'], or specific rule IDs like ['wcag-contrast', 'detached-component']"),
+        maxDepth: z.number().optional().describe("Maximum tree depth to traverse (default: 10)"),
+        maxFindings: z.number().optional().describe("Maximum findings before stopping (default: 100)"),
+    }, async ({ nodeId, rules, maxDepth, maxFindings }) => {
+        try {
+            const connector = await getDesktopConnector();
+            const result = await connector.lintDesign(nodeId, rules || ['all'], maxDepth || 10, maxFindings || 100);
+            if (!result.success) {
+                throw new Error(result.error || "Lint failed");
+            }
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify(result.data || result, null, 2),
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            logger.error({ error }, "Failed to lint design");
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: JSON.stringify({
+                            error: error instanceof Error ? error.message : String(error),
+                            hint: "Make sure the Desktop Bridge plugin is running in your Figma file.",
+                        }),
+                    },
+                ],
+                isError: true,
+            };
+        }
+    });
 }

package/dist/cloudflare/index.js

@@ -38,7 +38,7 @@ export class FigmaConsoleMCPv3 extends McpAgent {
         super(...arguments);
         this.server = new McpServer({
             name: "Figma Console MCP",
-            version: "1.12.0",
+            version: "1.13.0",
         });
         this.browserManager = null;
         this.consoleMonitor = null;
@@ -950,7 +950,7 @@ export default {
             });
             const statelessServer = new McpServer({
                 name: "Figma Console MCP",
-                version: "1.12.0",
+                version: "1.13.0",
             });
             // ================================================================
             // Cloud Write Relay — Pairing Tool (stateless /mcp path)
@@ -1005,19 +1005,40 @@ export default {
                 await connector.initialize();
                 return connector;
             };
+            // Build a getCurrentUrl that resolves from the relay DO's file info
+            const getCloudFileUrl = () => {
+                // This is synchronous — we cache the file URL after first relay status check
+                return cloudFileUrlCache;
+            };
+            let cloudFileUrlCache = null;
+            // Pre-fetch file info from relay if paired
+            try {
+                const relayDoId = await env.OAUTH_TOKENS.get(`relay:${bearerToken}`);
+                if (relayDoId) {
+                    const doId = env.PLUGIN_RELAY.idFromString(relayDoId);
+                    const stub = env.PLUGIN_RELAY.get(doId);
+                    const statusRes = await stub.fetch('https://relay/relay/status');
+                    const status = await statusRes.json();
+                    if (status.connected && status.fileInfo?.fileKey) {
+                        cloudFileUrlCache = `https://www.figma.com/design/${status.fileInfo.fileKey}`;
+                    }
+                }
+            }
+            catch {
+                // No relay session or not paired — cloudFileUrlCache stays null
+            }
             // Register all write/manipulation tools via shared function
             registerWriteTools(statelessServer, getCloudDesktopConnector);
             // Register REST API tools with the authenticated Figma API
-            registerFigmaAPITools(statelessServer, async () => statelessApi, () => null, // No browser URL in stateless mode
-            () => null, // No console monitor
+            registerFigmaAPITools(statelessServer, async () => statelessApi, getCloudFileUrl, () => null, // No console monitor
             () => null, // No browser manager
             undefined, // No ensureInitialized
             new Map(), // Fresh variables cache per request
             { isRemoteMode: true }, getCloudDesktopConnector);
-            registerDesignCodeTools(statelessServer, async () => statelessApi, () => null, new Map(), // Fresh variables cache per request
+            registerDesignCodeTools(statelessServer, async () => statelessApi, getCloudFileUrl, new Map(), // Fresh variables cache per request
             { isRemoteMode: true }, getCloudDesktopConnector);
-            registerCommentTools(statelessServer, async () => statelessApi, () => null);
-            registerDesignSystemTools(statelessServer, async () => statelessApi, () => null, new Map(), // Fresh variables cache per request
+            registerCommentTools(statelessServer, async () => statelessApi, getCloudFileUrl);
+            registerDesignSystemTools(statelessServer, async () => statelessApi, getCloudFileUrl, new Map(), // Fresh variables cache per request
             { isRemoteMode: true });
             await statelessServer.connect(transport);
             const response = await transport.handleRequest(request);
@@ -1038,7 +1059,7 @@ export default {
             const metadata = {
                 resource: url.origin,
                 authorization_servers: [`${url.origin}/`],
-                scopes_supported: ["file_content:read", "library_content:read", "file_variables:read"],
+                scopes_supported: ["file_content:read", "file_variables:read", "library_content:read"],
                 bearer_methods_supported: ["header"],
                 resource_signing_alg_values_supported: ["RS256"]
             };
@@ -1057,7 +1078,7 @@ export default {
                 authorization_endpoint: `${url.origin}/authorize`,
                 token_endpoint: `${url.origin}/token`,
                 registration_endpoint: `${url.origin}/oauth/register`,
-                scopes_supported: ["file_content:read", "library_content:read", "file_variables:read"],
+                scopes_supported: ["file_content:read", "file_variables:read", "library_content:read"],
                 response_types_supported: ["code"],
                 grant_types_supported: ["authorization_code", "refresh_token"],
                 token_endpoint_auth_methods_supported: ["client_secret_basic", "client_secret_post"],
@@ -1120,7 +1141,7 @@ export default {
             const figmaAuthUrl = new URL("https://www.figma.com/oauth");
             figmaAuthUrl.searchParams.set("client_id", env.FIGMA_OAUTH_CLIENT_ID);
             figmaAuthUrl.searchParams.set("redirect_uri", `${oauthOrigin}/oauth/callback`);
-            figmaAuthUrl.searchParams.set("scope", "file_content:read,library_content:read,file_variables:read");
+            figmaAuthUrl.searchParams.set("scope", "file_content:read,file_variables:read,library_content:read");
             figmaAuthUrl.searchParams.set("state", stateToken);
             figmaAuthUrl.searchParams.set("response_type", "code");
             return Response.redirect(figmaAuthUrl.toString(), 302);
@@ -1161,7 +1182,7 @@ export default {
                         token_type: "Bearer",
                         expires_in: Math.max(0, Math.floor((tokenData.expiresAt - Date.now()) / 1000)),
                         refresh_token: tokenData.refreshToken,
-                        scope: "file_content:read library_content:read file_variables:read"
+                        scope: "file_content:read file_variables:read library_content:read"
                     }), {
                         headers: {
                             "Content-Type": "application/json",
@@ -1238,7 +1259,7 @@ export default {
                     token_type: "Bearer",
                     expires_in: tokenData.expires_in,
                     refresh_token: tokenData.refresh_token || refreshToken,
-                    scope: "file_content:read library_content:read file_variables:read"
+                    scope: "file_content:read file_variables:read library_content:read"
                 }), {
                     headers: {
                         "Content-Type": "application/json",
@@ -1310,7 +1331,7 @@ export default {
             const figmaAuthUrl = new URL("https://www.figma.com/oauth");
             figmaAuthUrl.searchParams.set("client_id", env.FIGMA_OAUTH_CLIENT_ID);
             figmaAuthUrl.searchParams.set("redirect_uri", redirectUri);
-            figmaAuthUrl.searchParams.set("scope", "file_content:read,library_content:read,file_variables:read");
+            figmaAuthUrl.searchParams.set("scope", "file_content:read,file_variables:read,library_content:read");
             figmaAuthUrl.searchParams.set("state", stateToken);
             figmaAuthUrl.searchParams.set("response_type", "code");
             return Response.redirect(figmaAuthUrl.toString(), 302);
@@ -1558,7 +1579,7 @@ export default {
             return new Response(JSON.stringify({
                 status: "healthy",
                 service: "Figma Console MCP",
-                version: "1.12.0",
+                version: "1.13.0",
                 endpoints: {
                     mcp: ["/sse", "/mcp"],
                     oauth_mcp_spec: ["/.well-known/oauth-authorization-server", "/authorize", "/token", "/oauth/register"],
@@ -1604,13 +1625,13 @@ export default {
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Figma Console MCP - The Most Comprehensive MCP Server for Figma</title>
 	<link rel="icon" type="image/svg+xml" href="https://docs.figma-console-mcp.southleft.com/favicon.svg">
-	<meta name="description" content="Turn your Figma design system into a living API. 57+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
+	<meta name="description" content="Turn your Figma design system into a living API. 59+ tools give AI assistants deep access to design tokens, component specs, variables, and programmatic design creation.">
 
 	<!-- Open Graph -->
 	<meta property="og:type" content="website">
 	<meta property="og:url" content="https://figma-console-mcp.southleft.com">
 	<meta property="og:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta property="og:description" content="The most comprehensive MCP server for Figma. 57+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta property="og:description" content="The most comprehensive MCP server for Figma. 59+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta property="og:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 	<meta property="og:image:width" content="1200">
 	<meta property="og:image:height" content="630">
@@ -1618,7 +1639,7 @@ export default {
 	<!-- Twitter -->
 	<meta name="twitter:card" content="summary_large_image">
 	<meta name="twitter:title" content="Figma Console MCP - Turn Your Design System Into a Living API">
-	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 57+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
+	<meta name="twitter:description" content="The most comprehensive MCP server for Figma. 59+ tools give AI assistants deep access to design tokens, components, variables, and programmatic design creation.">
 	<meta name="twitter:image" content="https://docs.figma-console-mcp.southleft.com/images/og-image.jpg">
 
 	<meta name="theme-color" content="#0D9488">
@@ -2502,7 +2523,7 @@ export default {
 			<div class="grid-cell showcase-cell rule-left">
 				<div class="showcase-label">What AI Can Access</div>
 				<div class="showcase-stat">
-					<span class="number">56+</span>
+					<span class="number">59+</span>
 					<span class="label">MCP tools for Figma</span>
 				</div>
 				<div class="capability-list">
@@ -2519,8 +2540,16 @@ export default {
 						<span>Programmatic design creation</span>
 					</div>
 					<div class="capability-item">
-						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
-						<span>Real-time plugin debugging</span>
+						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
+						<span>WCAG accessibility linting</span>
+					</div>
+					<div class="capability-item">
+						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/></svg>
+						<span>Cloud relay for web AI clients</span>
+					</div>
+					<div class="capability-item">
+						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+						<span>Visual debugging and screenshots</span>
 					</div>
 				</div>
 			</div>
@@ -2568,8 +2597,8 @@ export default {
 				<div class="capability-icon">
 					<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
 				</div>
-				<h3>Plugin Debugging</h3>
-				<p>Capture real-time console logs from Figma plugins. Let AI analyze errors and suggest fixes without context switching.</p>
+				<h3>Visual Debugging</h3>
+				<p>Capture screenshots, inspect node properties, and track selection changes. Let AI analyze your designs and suggest improvements.</p>
 			</div>
 		</div>
 
@@ -2599,7 +2628,11 @@ export default {
 					</div>
 					<div class="prompt-item">
 						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-						<span>"Why is my plugin throwing this error?"</span>
+						<span>"Check my design for accessibility issues"</span>
+					</div>
+					<div class="prompt-item">
+						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
+						<span>"Connect to my Figma plugin and create a card component"</span>
 					</div>
 				</div>
 			</div>
@@ -2623,7 +2656,7 @@ export default {
 					</li>
 					<li>
 						<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7"/></svg>
-						<span>Debug Figma plugins without leaving your workflow</span>
+						<span>Lint designs for accessibility and quality issues</span>
 					</li>
 				</ul>
 			</div>
@@ -2684,7 +2717,7 @@ export default {
 			<div class="grid-cell getting-started-cell">
 				<div class="getting-started-content">
 					<h3>Ready to get started?</h3>
-					<p>Setup varies based on your needs: remote mode for quick API access, or local mode for full plugin debugging. Our docs will guide you through the right path.</p>
+					<p>Three ways to connect: local mode for full capabilities, cloud mode for web AI clients like Claude.ai and v0, or remote mode for quick read-only access. Our docs will guide you through the right path.</p>
 				</div>
 				<div class="getting-started-actions">
 					<a href="https://docs.figma-console-mcp.southleft.com/setup" class="btn btn-primary">