Initial commit

skills/mcp-figma-desktop/scripts/create_design_system_rules.js

@@ -0,0 +1,39 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: create_design_system_rules
+ *
+ * Provides a prompt to generate design system rules for this repo.
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('create_design_system_rules')
+  .description('Provides a prompt to generate design system rules for this repo.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'create_design_system_rules', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/get_design_context.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: get_design_context
+ *
+ * Generate UI code for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`.
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('get_design_context')
+  .description('Generate UI code for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`.')
+  .option('--nodeId <value>', 'The ID of the node in the Figma document, eg. \"123:456\" or \"123-456\". This should be a valid node ID in the Figma document.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .option('--forceCode', 'Whether code should always be returned, instead of returning just metadata if the output size is too large. Only set this when the user directly requests to force the code. ')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.nodeId !== undefined) {
+    args['nodeId'] = options.nodeId;
+  }
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+  if (options.forceCode) {
+    args['forceCode'] = true;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'get_design_context', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/get_figjam.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: get_figjam
+ *
+ * Generate UI code for a given FigJam node or the currently selected FigJam node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/board/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`. IMPORTANT: This tool only works for FigJam files, not other Figma files.
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('get_figjam')
+  .description('Generate UI code for a given FigJam node or the currently selected FigJam node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/board/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`. IMPORTANT: This tool only works for FigJam files, not other Figma files.')
+  .option('--nodeId <value>', 'The ID of the node in the Figma document, eg. \"123:456\" or \"123-456\". This should be a valid node ID in the Figma document.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .option('--includeImagesOfNodes', 'Whether to include images of nodes in the response')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.nodeId !== undefined) {
+    args['nodeId'] = options.nodeId;
+  }
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+  if (options.includeImagesOfNodes) {
+    args['includeImagesOfNodes'] = true;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'get_figjam', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/get_metadata.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: get_metadata
+ *
+ * IMPORTANT: Always prefer to use get_design_context tool. Get metadata for a node or page in the Figma desktop app in XML format. Useful only for getting an overview of the structure, it only includes node IDs, layer types, names, positions and sizes. You can call get_design_context on the node IDs contained in this response. Use the nodeId parameter to specify a node id, it can also be the page id (e.g. 0:1). If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`.
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('get_metadata')
+  .description('IMPORTANT: Always prefer to use get_design_context tool. Get metadata for a node or page in the Figma desktop app in XML format. Useful only for getting an overview of the structure, it only includes node IDs, layer types, names, positions and sizes. You can call get_design_context on the node IDs contained in this response. Use the nodeId parameter to specify a node id, it can also be the page id (e.g. 0:1). If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`.')
+  .option('--nodeId <value>', 'The ID of the node in the Figma document, eg. \"123:456\" or \"123-456\". This should be a valid node ID in the Figma document.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.nodeId !== undefined) {
+    args['nodeId'] = options.nodeId;
+  }
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'get_metadata', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/get_screenshot.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: get_screenshot
+ *
+ * Generate a screenshot for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('get_screenshot')
+  .description('Generate a screenshot for a given node or the currently selected node in the Figma desktop app. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`')
+  .option('--nodeId <value>', 'The ID of the node in the Figma document, eg. \"123:456\" or \"123-456\". This should be a valid node ID in the Figma document.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.nodeId !== undefined) {
+    args['nodeId'] = options.nodeId;
+  }
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'get_screenshot', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/get_variable_defs.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+/**
+ * MCP Server: figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ * Tool: get_variable_defs
+ *
+ * Get variable definitions for a given node id. E.g. {'icon/default/secondary': #949494}Variables are reusable values that can be applied to all kinds of design properties, such as fonts, colors, sizes and spacings. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`
+ */
+
+import { program } from 'commander';
+import { callTool } from './mcp_client.js';
+
+program
+  .name('get_variable_defs')
+  .description('Get variable definitions for a given node id. E.g. {\'icon/default/secondary\': #949494}Variables are reusable values that can be applied to all kinds of design properties, such as fonts, colors, sizes and spacings. Use the nodeId parameter to specify a node id. If no node id is provided, the currently selected node will be used. If a URL is provided, extract the node id from the URL, for example, if given the URL https://figma.com/design/:fileKey/:fileName?node-id=1-2, the extracted nodeId would be `1:2`')
+  .option('--nodeId <value>', 'The ID of the node in the Figma document, eg. \"123:456\" or \"123-456\". This should be a valid node ID in the Figma document.')
+  .option('--clientLanguages <value>', 'A comma separated list of programming languages used by the client in the current context in string form, e.g. `javascript`, `html,css,typescript`, etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which languages are being used. If you are unsure, it is better to list `unknown` than to make a guess.')
+  .option('--clientFrameworks <value>', 'A comma separated list of frameworks used by the client in the current context, e.g. `react`, `vue`, `django` etc. If you do not know, please list `unknown`. This is used for logging purposes to understand which frameworks are being used. If you are unsure, it is better to list `unknown` than to make a guess')
+  .parse();
+
+const options = program.opts();
+
+  // Build arguments object
+  const args = {};
+  if (options.nodeId !== undefined) {
+    args['nodeId'] = options.nodeId;
+  }
+  if (options.clientLanguages !== undefined) {
+    args['clientLanguages'] = options.clientLanguages;
+  }
+  if (options.clientFrameworks !== undefined) {
+    args['clientFrameworks'] = options.clientFrameworks;
+  }
+
+// Call the tool
+try {
+  const result = await callTool('figma-desktop', 'get_variable_defs', args);
+  console.log(result);
+} catch (error) {
+  console.error('Error:', error.message);
+  process.exit(1);
+}

skills/mcp-figma-desktop/scripts/mcp_client.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+/**
+ * MCP REST Client for figma-desktop
+ * Server Version: 1.0.0
+ * Generated: 2025-11-23
+ *
+ * Shared MCP REST client for tool scripts.
+ */
+
+import axios from 'axios';
+
+// MCP2REST endpoint (configurable via environment variable)
+const MCP_REST_URL = process.env.MCP_REST_URL || 'http://localhost:28888';
+
+/**
+ * Call an MCP tool via mcp2rest REST API.
+ *
+ * @param {string} server - Server name (e.g., "chrome-devtools")
+ * @param {string} tool - Tool name (e.g., "click")
+ * @param {object} args - Tool arguments as object
+ * @returns {Promise<string>} Tool result as formatted string
+ */
+export async function callTool(server, tool, args) {
+  const url = `${MCP_REST_URL}/call`;
+  const payload = {
+    server,
+    tool,
+    arguments: args || {},
+  };
+
+  try {
+    const response = await axios.post(url, payload, {
+      headers: { 'Content-Type': 'application/json' },
+      timeout: 30000,
+    });
+
+    const data = response.data;
+
+    if (data.success) {
+      // Extract and format result
+      const result = data.result || {};
+      const content = result.content || [];
+
+      // Format output nicely
+      const outputParts = [];
+      for (const item of content) {
+        if (item.type === 'text') {
+          outputParts.push(item.text || '');
+        } else if (item.type === 'image') {
+          // For images, just note their presence
+          const dataLen = (item.data || '').length;
+          outputParts.push(`[Image data: ${dataLen} bytes]`);
+        } else if (item.type === 'resource') {
+          outputParts.push(JSON.stringify(item.resource || {}, null, 2));
+        }
+      }
+
+      return outputParts.length > 0 ? outputParts.join('\n') : JSON.stringify(result, null, 2);
+    } else {
+      const error = data.error || {};
+      const errorMsg = error.message || 'Unknown error';
+      const errorCode = error.code || 'UNKNOWN';
+      console.error(`Error [${errorCode}]: ${errorMsg}`);
+      process.exit(1);
+    }
+  } catch (error) {
+    if (error.code === 'ECONNREFUSED' || error.code === 'ENOTFOUND') {
+      console.error(`Error: Cannot connect to mcp2rest at ${MCP_REST_URL}`);
+      console.error('Make sure mcp2rest is running.');
+    } else if (error.code === 'ETIMEDOUT' || error.code === 'ECONNABORTED') {
+      console.error('Error: Request timed out after 30 seconds');
+    } else if (error.response) {
+      console.error(`Error: HTTP ${error.response.status} - ${error.response.data}`);
+    } else {
+      console.error(`Error: ${error.message}`);
+    }
+    process.exit(1);
+  }
+}

skills/mcp-figma-desktop/scripts/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "mcp-figma-desktop-skill",
+  "version": "1.0.0",
+  "description": "Claude Code skill scripts for figma-desktop MCP server",
+  "type": "module",
+  "dependencies": {
+    "axios": "^1.6.2",
+    "commander": "^11.1.0"
+  },
+  "keywords": [
+    "mcp",
+    "claude-code",
+    "skill",
+    "figma-desktop"
+  ],
+  "author": "",
+  "license": "MIT"
+}