conductor-figma 3.0.3 → 3.0.4

package/README.md

@@ -1,27 +1,32 @@
 # conductor-figma
 
-Design-intelligent MCP server for Figma. 201 tools across 17 categories. Every tool has built-in design intelligence — 8px grid, type scales, semantic colors, accessibility checks, component defaults. Not a shape proxy. A design engine.
+Design-intelligent MCP server for Figma. 201 tools across 17 categories. Every tool has built-in design intelligence — 8px grid, type scales, semantic colors, accessibility checks, component defaults. Works with Cursor and Claude Code.
 
 ```
 npx conductor-figma
 ```
 
-## What makes this different
+## How to use
 
+### 1. Clone the repo (for the Figma plugin)
 
-**Conductor** has 201 tools with design intelligence. You say "create a button" and it knows: 44px height (touch target), 20px horizontal padding (8px grid), 10px radius, 15px Semi Bold text. Every value is intentional.
+```bash
+git clone https://github.com/dragoon0x/conductor.git
+```
 
-## Setup
+### 2. Import the Figma plugin
 
-### 1. Figma Plugin
+Open Figma Desktop:
 
-```
-git clone https://github.com/dragoon0x/conductor.git
-```
+1. Go to **Plugins → Development → Import plugin from manifest**
+2. Navigate to `conductor/figma-plugin/manifest.json`
+3. Click **Open**
+
+The plugin is now installed. You only need to do this once.
 
-In Figma: **Plugins → Development → Import plugin from manifest** → select `conductor/figma-plugin/manifest.json`
+### 3. Add to Cursor
 
-### 2. Add to Cursor / Claude Code
+Open `~/.cursor/mcp.json` and add conductor:
 
 ```json
 {
@@ -34,55 +39,140 @@ In Figma: **Plugins → Development → Import plugin from manifest** → select
 }
 ```
 
-### 3. Design
+Restart Cursor.
+
+### 4. Connect and design
+
+1. Open a Figma file
+2. Run the plugin: **Plugins → Development → Conductor**
+3. The plugin should show a green dot (Connected)
+4. In Cursor chat, type `@conductor` followed by any command
+
+### Example prompts
+
+```
+@conductor Create a dark hero section with a big heading and a purple CTA button
+
+@conductor Check contrast between #ffffff and #6366f1
+
+@conductor Create a dashboard layout with sidebar, KPI cards, and chart area
+
+@conductor Audit accessibility on my current selection
+
+@conductor Replace all #6366f1 with #3b82f6 across the file
+
+@conductor Export this frame as React + Tailwind code
+
+@conductor Scan my file and show me all off-grid spacing
+
+@conductor Generate a color palette from #6366f1
+```
+
+### Alternative: use local path (faster startup)
+
+Instead of `npx`, point directly to the cloned repo:
+
+```json
+{
+  "mcpServers": {
+    "conductor": {
+      "command": "node",
+      "args": ["/path/to/conductor/bin/conductor.js"]
+    }
+  }
+}
+```
+
+## How it works
+
+```
+You type in Cursor → MCP server (stdio) → WebSocket :3055 → Figma plugin → Canvas
+```
+
+Cursor starts the MCP server automatically. The server opens a WebSocket on port 3055. The Figma plugin connects to that WebSocket and executes commands on the canvas.
+
+## What makes this different
+
+Other MCP servers for Figma are API wrappers. You give exact pixel values, they obey — even when those values are wrong. Conductor applies design rules before anything touches the canvas.
+
+You say "create a button." A typical MCP makes a rectangle. Conductor makes a 44px-tall frame with 20px horizontal padding, 10px radius, 15px Semi Bold text — because that's what a button actually is.
+
+## 201 tools in 17 categories
+
+### Create & Layout (20)
+create_frame, create_text, create_rectangle, create_ellipse, create_line, create_svg_node, create_component, create_component_instance, create_component_set, create_smart_component, set_auto_layout, create_section, create_page, create_table_frame, create_form, create_nav_bar, create_card_grid, create_sidebar_layout, create_footer, create_header
+
+### Modify & Style (25)
+modify_node, set_fill, set_stroke, set_effects, set_image_fill, style_text_range, set_constraints, delete_node, move_to_parent, duplicate_node, group_nodes, ungroup_nodes, resize_node, align_nodes, set_corner_radius, set_opacity, set_blend_mode, set_clip_content, rename_node, lock_node, set_visibility, reorder_node, set_layout_sizing, flatten_node, set_rotation
+
+### Vector & Shape (8)
+create_vector, boolean_operation, create_polygon, create_star, offset_path, create_arrow, create_icon (35 built-in), create_divider
+
+### Read & Inspect (18)
+get_selection, get_page_structure, get_node_info, get_nodes_info, find_nodes, get_local_styles, get_local_variables, list_components, list_pages, get_document_info, set_selection, set_focus, get_annotations, set_annotation, list_available_fonts, read_node_css, get_selection_colors, measure_distance
+
+### Variables & Tokens (10)
+create_variable_collection, create_variable, bind_variable, get_variables, update_variable, delete_variable, create_design_tokens, import_tokens, export_tokens, swap_mode
+
+### Export & Code (12)
+export_as_svg, export_as_png, export_to_react, export_design_specs, export_assets, screenshot, copy_css, generate_stylesheet, export_color_palette, export_typography, export_component_inventory, export_spacing_tokens
+
+### Accessibility & Lint (12)
+audit_accessibility, check_contrast, fix_touch_targets, lint_design, fix_spacing, check_naming, suggest_improvements, validate_component, check_consistency, generate_a11y_report, color_blindness_check, responsive_check
+
+### Batch Operations (17)
+batch_rename, batch_style, batch_replace_text, batch_replace_color, batch_resize, batch_align, batch_delete, batch_duplicate, batch_set_visibility, batch_lock, select_all_by_type, clean_hidden_layers, batch_set_font, batch_round_values, batch_remove_strokes, batch_remove_effects, batch_set_corner_radius
+
+### Design System (10)
+scan_design_system, create_style_guide, detect_inconsistencies, normalize_design, extract_components, get_design_craft_guide, suggest_color_palette, suggest_type_scale, import_design_system, compare_to_system
+
+### Responsive (5)
+create_responsive_variant, set_breakpoint, convert_to_responsive, generate_mobile, stack_for_mobile
+
+### Typography (10)
+type_scale_apply, type_audit, type_set_hierarchy, type_check_measure, type_normalize, type_list_styles, type_pair_suggest, type_replace_font, set_text_content, type_create_style
+
+### Color (10)
+color_palette_generate, color_extract, color_harmonize, color_darkmode, color_lightmode, color_check_all, color_create_style, color_apply_style, color_replace_global, color_generate_semantic
 
-Open Figma → Run the Conductor plugin → Chat in Cursor:
+### Prototype & Interaction (10)
+create_prototype_link, create_scroll_behavior, set_overflow, create_overlay, set_fixed_position, create_hover_state, create_flow, list_flows, remove_prototype_link, set_transition
 
-> "Create a mobile login screen with email and password fields"
+### Page Management (8)
+create_new_page, switch_page, duplicate_page, delete_page, rename_page, sort_pages, merge_pages, page_overview
 
-> "Design a dashboard with sidebar, KPI cards, and chart area"
+### Library & Components (8)
+search_library, list_team_libraries, swap_component, detach_instance, reset_overrides, component_audit, batch_swap_component, publish_components
 
-> "Audit the accessibility of my current selection"
+### Annotation & Handoff (10)
+annotate_spacing, annotate_colors, annotate_typography, create_measurement, create_spec_sheet, annotate_grid, annotate_hierarchy, create_component_docs, annotate_responsive, create_changelog
 
-> "Export this frame as React + Tailwind code"
+### Effects & Styles (8)
+create_glassmorphism, create_neumorphism, create_noise_texture, set_gradient_fill, create_shadow_system, apply_backdrop_blur, create_border_gradient, remove_all_effects
 
-## 201 Tools in 17 Categories
+## Design intelligence engine
 
-| Category | Count | Highlights |
-|----------|-------|-----------|
-| Create & Layout | 20 | Frames, text, shapes, smart components (18 types), sections, pages, forms, tables, nav bars, cards, sidebars |
-| Modify & Style | 25 | Fills (solid + gradients), strokes, effects, image fills, text ranges, constraints, transforms |
-| Vector & Shape | 8 | Paths, booleans, polygons, stars, 35 built-in icons, arrows, dividers |
-| Read & Inspect | 18 | Selection, page tree, node info, search, CSS export, fonts, annotations, measurements |
-| Variables & Tokens | 10 | Collections, modes, binding, W3C import/export, full token system from brand color |
-| Export & Code | 12 | React + Tailwind, HTML, Vue, Svelte, SVG, PNG, design specs, stylesheets, palettes |
-| Accessibility & Lint | 12 | WCAG audit, contrast, touch targets, font sizes, color blindness, design lint, compliance reports |
-| Batch Operations | 17 | Rename patterns, bulk style, find/replace text/color, clean hidden layers, round values, set fonts |
-| Design System | 10 | Scan, extract, normalize, lint, style guide, palette, type scale, import/export |
-| Responsive | 5 | Mobile/tablet/desktop variants, breakpoints, stacking, responsive conversion |
-| Typography | 10 | Type scale, audit, hierarchy, measure, normalize, font replace, pairing, styles |
-| Color | 10 | Palette generation, harmonies, dark/light mode, contrast check, semantic systems |
-| Prototype | 10 | Links, transitions, overlays, scroll, hover states, flows, fixed position |
-| Page Management | 8 | Create, switch, duplicate, delete, rename, sort, merge, overview |
-| Library | 8 | Search, swap, detach, audit, batch swap, publish |
-| Annotation & Handoff | 10 | Spacing redlines, color swatches, typography specs, spec sheets, changelogs |
-| Effects & Styles | 8 | Glassmorphism, neumorphism, noise, gradients, shadow systems, border gradients |
+Every tool queries the intelligence engine before touching Figma:
 
-## Design Intelligence
+- **8px Grid** — All spacing values snapped. snap(13) = 16.
+- **Type Scale** — 7 ratio presets: Minor Second through Golden Ratio.
+- **Semantic Colors** — Full palette from one brand hex. Dark + light modes.
+- **Component Defaults** — 18 component types with size variants.
+- **Accessibility** — WCAG AA/AAA contrast, 44px touch targets, font minimums.
+- **Font Weights** — Auto-resolves "bold" → "Bold", "600" → "Semi Bold".
+- **Layout Intelligence** — 13 layout presets: row, column, center, spread, sidebar, grid, form.
 
-Every tool queries the intelligence engine:
+## Troubleshooting
 
-- **8px Grid**: All spacing values snapped to 8px grid
-- **Type Scale**: 7 mathematical ratios (Minor Second through Golden Ratio)
-- **Semantic Colors**: Full palette from one brand color (dark + light modes)
-- **Component Defaults**: 18 component types with size variants (button, input, card, avatar, badge, chip, switch, checkbox, radio, toast, tooltip, modal, dropdown, tabs, table, progress, skeleton, divider)
-- **Accessibility**: WCAG AA/AAA contrast, 44px touch targets, font minimums, color blindness
-- **Font Weights**: Auto-resolves "bold" → "Bold", "600" → "Semi Bold"
-- **Layout Intelligence**: 13 layout presets (row, column, center, spread, grid, sidebar, form)
+**Plugin says "Disconnected"**
+The MCP server isn't running. Make sure Cursor is open and conductor is configured in mcp.json. Try sending any @conductor message in Cursor chat — that triggers the server to start.
 
-## License
+**Port 3055 already in use**
+Kill the old process: `kill $(lsof -t -i :3055) 2>/dev/null` then restart Cursor.
 
-MIT. Built by [0xDragoon](https://github.com/dragoon0x).
+**Cursor shows "Loading tools" forever**
+Make sure you have the latest version. Run: `npx conductor-figma@latest`
+Or use the local path method for faster startup.
 
 ## Disclaimer
 
@@ -96,4 +186,4 @@ MIT. Built by [0xDragoon](https://github.com/dragoon0x).
 - Users are solely responsible for ensuring their use of this software complies with all applicable laws, regulations, terms of service, and licensing agreements — including Figma's Terms of Service and API usage policies.
 - **Use at your own risk.** Always back up your Figma files before running any automated operations. The author is not responsible for any unintended modifications, deletions, or corruption of design files.
 
-MIT License · Copyright © 2025 0xDragoon
+MIT License · Copyright 2025 0xDragoon

package/figma-plugin/code.js

@@ -281,8 +281,8 @@ async function executeCommand(cmd, data) {
         const s = data.shadow
         effects.push({
           type: 'DROP_SHADOW', visible: true,
-          color: { ...hexToRGB(s.color || '#00000040'), a: 0.25 },
-          offset: { x: s.offsetX || s.offset?.x || 0, y: s.offsetY || s.offset?.y || 4 },
+          color: (function(){ var c = hexToRGB(s.color || "#00000040"); return {r:c.r,g:c.g,b:c.b,a:0.25}; })(),
+          offset: { x: s.offsetX || (s.offset && s.offset.x) || 0, y: s.offsetY || (s.offset && s.offset.y) || 4 },
           radius: s.blur || 8, spread: s.spread || 0,
         })
       }
@@ -427,7 +427,7 @@ async function executeCommand(cmd, data) {
       const node = getNode(data.nodeId)
       if (!node || node.type !== 'GROUP') throw new Error('Not a group')
       const parent = node.parent
-      const children = [...node.children]
+      const children = Array.prototype.slice.call(node.children)
       for (const child of children) parent.appendChild(child)
       node.remove()
       return { ungrouped: children.length }
@@ -521,7 +521,7 @@ async function executeCommand(cmd, data) {
 
     case 'list_available_fonts': {
       const fonts = await figma.listAvailableFontsAsync()
-      const families = [...new Set(fonts.map(f => f.fontName.family))].sort()
+      const families = Array.from(new Set(fonts.map(f => f.fontName.family))).sort()
       return { count: families.length, families: families.slice(0, 100) }
     }
 
@@ -532,7 +532,7 @@ async function executeCommand(cmd, data) {
           node.fills.forEach(f => { if (f.type === 'SOLID') colors.add(rgbToHex(f.color)) })
         }
       }
-      return [...colors]
+      return Array.from(colors)
     }
 
     case 'measure_distance': {
@@ -660,7 +660,7 @@ async function executeCommand(cmd, data) {
           const newFills = n.fills.map(f => {
             if (f.type === 'SOLID' && Math.abs(f.color.r - findRgb.r) < 0.02 && Math.abs(f.color.g - findRgb.g) < 0.02 && Math.abs(f.color.b - findRgb.b) < 0.02) {
               count++
-              return { ...f, color: hexToRGB(data.replace) }
+              var nf = {type:f.type,color:hexToRGB(data.replace),opacity:f.opacity}; return nf
             }
             return f
           })
@@ -717,10 +717,10 @@ async function executeCommand(cmd, data) {
         return false
       })
       return {
-        colors: [...colors].sort(),
-        fonts: [...fonts].sort(),
-        radii: [...radii].sort((a,b) => a-b),
-        spacings: [...spacings].sort((a,b) => a-b),
+        colors: Array.from(colors).sort(),
+        fonts: Array.from(fonts).sort(),
+        radii: Array.from(radii).sort(function(a,b){return a-b}),
+        spacings: Array.from(spacings).sort(function(a,b){return a-b}),
       }
     }
 

package/figma-plugin/manifest.json

@@ -8,7 +8,7 @@
   "enableProposedApi": false,
   "editorType": ["figma"],
   "networkAccess": {
-    "allowedDomains": ["*"],
-    "reasoning": "Connects to local MCP WebSocket server"
+    "allowedDomains": ["none"],
+    "reasoning": "Conductor connects to a local WebSocket server only"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "conductor-figma",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "Design-intelligent MCP server for Figma. 201 design-intelligent tools for Figma. Every tool knows typography, spacing, color, accessibility. Not a shape proxy — a design engine.",
   "author": "0xDragoon",
   "license": "MIT",

package/src/server.js

@@ -1,12 +1,8 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR v3 — MCP Server (stdio)
-// ═══════════════════════════════════════════
-
 import { TOOL_LIST, TOOL_COUNT, getTool, CATEGORIES } from './tools/registry.js'
 import { handleTool } from './tools/handlers.js'
 import { createBridge } from './bridge.js'
 
-var VERSION = '3.0.2'
+var VERSION = '3.0.4'
 var bridge = null
 var bridgeStarted = false
 
@@ -21,34 +17,44 @@ function ensureBridge() {
   return bridge
 }
 
-// ─── JSON-RPC over stdio ───
-var buffer = ''
+if (process.stdout._handle && process.stdout._handle.setBlocking) {
+  process.stdout._handle.setBlocking(true)
+}
 
+var buffer = ''
 process.stdin.setEncoding('utf8')
 process.stdin.on('data', function(chunk) {
   buffer += chunk
+  processBuffer()
+})
+
+function processBuffer() {
   while (true) {
-    var headerEnd = buffer.indexOf('\r\n\r\n')
-    if (headerEnd === -1) break
-    var header = buffer.slice(0, headerEnd)
-    var match = header.match(/Content-Length:\s*(\d+)/i)
-    if (!match) { buffer = buffer.slice(headerEnd + 4); continue }
-    var len = parseInt(match[1])
-    var bodyStart = headerEnd + 4
-    if (buffer.length < bodyStart + len) break
-    var body = buffer.slice(bodyStart, bodyStart + len)
-    buffer = buffer.slice(bodyStart + len)
-    try {
-      var msg = JSON.parse(body)
-      handleMessage(msg)
-    } catch (e) { log('Parse error:', e.message) }
+    var nlIdx = buffer.indexOf('\n')
+    if (nlIdx === -1) {
+      if (buffer.length > 0 && buffer[0] === '{') {
+        try { JSON.parse(buffer) } catch(e) { break }
+        tryParse(buffer)
+        buffer = ''
+      }
+      break
+    }
+    var line = buffer.slice(0, nlIdx).trim()
+    buffer = buffer.slice(nlIdx + 1)
+    if (line.length === 0) continue
+    if (line[0] === '{') tryParse(line)
   }
-})
+}
+
+function tryParse(str) {
+  try {
+    var msg = JSON.parse(str)
+    handleMessage(msg)
+  } catch (e) { log('Parse error:', e.message) }
+}
 
 function send(msg) {
-  var json = JSON.stringify(msg)
-  var out = 'Content-Length: ' + Buffer.byteLength(json) + '\r\n\r\n' + json
-  process.stdout.write(out)
+  process.stdout.write(JSON.stringify(msg) + '\n')
 }
 
 function respond(id, result) { send({ jsonrpc: '2.0', id: id, result: result }) }
@@ -57,21 +63,23 @@ function respondError(id, code, message) { send({ jsonrpc: '2.0', id: id, error:
 function handleMessage(msg) {
   var id = msg.id
   var method = msg.method
-  var params = msg.params
+  var params = msg.params || {}
+
+  log('<- ' + method + (id !== undefined ? ' #' + id : ''))
 
   switch (method) {
     case 'initialize':
-      // Start bridge in background, respond immediately
       ensureBridge()
       log('Conductor v' + VERSION + ' ready — ' + TOOL_COUNT + ' tools')
       respond(id, {
-        protocolVersion: '2024-11-05',
+        protocolVersion: params.protocolVersion || '2024-11-05',
         capabilities: { tools: { listChanged: false } },
         serverInfo: { name: 'conductor-figma', version: VERSION },
       })
       return
 
     case 'notifications/initialized':
+    case 'notifications/cancelled':
       return
 
     case 'tools/list':
@@ -107,7 +115,7 @@ function handleMessage(msg) {
       return
 
     default:
-      if (id) respondError(id, -32601, 'Unknown method: ' + method)
+      if (id !== undefined) respondError(id, -32601, 'Unknown method: ' + method)
   }
 }