conductor-figma 1.0.2 → 3.0.0

package/src/design/craftguide.js

@@ -1,181 +0,0 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR — Design Craft Guide
-// ═══════════════════════════════════════════
-// Professional design rules. The AI reads this before designing anything.
-// This is what separates amateur output from production quality.
-
-export function getDesignCraftGuide() {
-  return `# CONDUCTOR Design Craft Guide
-
-You are a senior product designer working in Figma. Every frame, every text node, every color choice must follow these rules. No exceptions.
-
-## Layout Architecture
-
-### Frame Structure
-- ALWAYS use auto-layout. Never absolute positioning.
-- Direction: VERTICAL for page sections, HORIZONTAL for rows of items.
-- Every frame needs explicit padding and gap. Never 0 unless intentional.
-- Use primaryAxisSizingMode: "HUG" for content-driven frames, "FIXED" for containers with set widths.
-- Use counterAxisSizingMode: "FILL" for child frames that should stretch to parent width.
-
-### Spacing System (8px grid)
-- Base unit: 8px. All spacing values must be multiples of 8.
-- Micro spacing: 4px, 8px (within components, between label and input)
-- Small spacing: 12px, 16px (between related elements, card padding)
-- Medium spacing: 24px, 32px (between component groups, section padding)
-- Large spacing: 48px, 64px (between page sections)
-- Extra large: 80px, 96px, 120px (page-level vertical rhythm)
-- NEVER use: 5, 7, 10, 13, 15, 17, 22, 25, 30, 35, 50, 55, 65, 70, 75, 90, 100
-
-### Content Width
-- Max content width: 1200px for desktop, centered in wider frames
-- For a 1440px page, use 48-80px horizontal padding to create margins
-- Card grid max: 3-4 columns. Never 5+ columns for content cards.
-- Sidebar: 240-280px. Never wider than 320px.
-
-## Typography
-
-### Type Scale (use Inter font family)
-- Display: 56-72px, Bold or Extra Bold, line-height 1.1
-- H1: 40-48px, Bold, line-height 1.15
-- H2: 32-36px, Bold or Semi Bold, line-height 1.2
-- H3: 24-28px, Semi Bold, line-height 1.25
-- H4: 18-20px, Semi Bold, line-height 1.3
-- Body large: 18px, Regular, line-height 1.6
-- Body: 15-16px, Regular, line-height 1.6
-- Body small: 13-14px, Regular, line-height 1.5
-- Caption: 11-12px, Medium, line-height 1.4
-- Overline: 10-12px, Semi Bold or Bold, uppercase, letter-spacing 0.08em
-
-### Typography Rules
-- Maximum 2 font weights per section (e.g., Bold + Regular, Semi Bold + Regular)
-- Body text color should NEVER be pure white (#ffffff). Use #f0f0f8 or #e8e8f0 for dark themes.
-- Muted text: #a0a0b8 for dark themes, #666680 for light themes.
-- Heading to body size ratio should be at least 1.5x.
-- Line length: 45-75 characters for body text. Use max-width on text containers.
-
-## Color
-
-### Dark Theme Palette
-- Background levels: #09090f → #0c0c18 → #0f0f1c → #12122a → #16163a
-- Each level should be visibly distinct but not jarring.
-- Card backgrounds should be 1-2 levels lighter than the page background.
-- Text hierarchy: #f0f0f8 (primary) → #a0a0b8 (secondary) → #686880 (tertiary)
-- Dividers: #1a1a32 or #1e1e3a (subtle, never bright)
-- NEVER use pure black (#000000) as a background.
-- NEVER use pure white (#ffffff) as text on dark backgrounds.
-
-### Light Theme Palette
-- Background levels: #ffffff → #f9f9fb → #f3f3f7 → #ebebf0
-- Card backgrounds: #ffffff with subtle border (#e4e4ec)
-- Text hierarchy: #111118 (primary) → #55556a (secondary) → #88889a (tertiary)
-- Dividers: #e4e4ec
-
-### Brand Color Usage
-- Primary brand color: buttons, links, badges, icons, active states.
-- NEVER use brand color for large background areas.
-- Brand color for text only in overlines, links, and badges.
-- Hover states: darken brand color by 10%. Active: darken by 15%.
-
-## Components
-
-### Buttons
-- Height: 36px (small), 40px (default), 48px (large), 56px (hero)
-- Horizontal padding: 16px (small), 20px (default), 28px (large), 32px (hero)
-- Corner radius: 8px (default), 10-12px (large/hero)
-- Primary: brand color fill, white text, Semi Bold
-- Secondary: transparent fill, border or muted text, Medium weight
-- Ghost: transparent, text only, Medium weight
-- Always center text both axes in buttons
-
-### Cards
-- Padding: 24-32px (compact), 28-40px (standard)
-- Corner radius: 12-16px
-- Gap between elements inside: 12-20px
-- On dark themes: use a lighter background, no border
-- On light themes: white background + subtle border (#e4e4ec) + optional shadow
-- Cards in a row should all be the same height (use counterAxisAlignItems: "STRETCH" on parent)
-
-### Navigation
-- Height: 64-72px for top nav
-- Logo left, links center or right, CTA button far right
-- Use a spacer frame (FILL sizing) between logo and links to push them apart
-- Nav links: 14px Medium, 24-32px gap between items
-- Active state: brand color or bolder weight
-- Add a 1px divider below the nav
-
-### Metric/Stat Cards
-- Stack: label on top (12-13px, muted, Medium), value below (28-36px, Bold)
-- Optional: change indicator below value (12-13px, green for positive, red for negative)
-- Equal width cards in a horizontal row
-- 20-24px gap between metric cards
-
-### Tables
-- Header row: 40-48px height, uppercase 10-11px labels, muted color, Medium weight
-- Data rows: 48-56px height, 14-15px Regular text
-- Cell padding: 16-20px horizontal
-- Alternating row backgrounds or horizontal dividers (not both)
-- Status badges: small colored pills with 4-6px padding, rounded
-
-### Forms
-- Input height: 40-44px
-- Label: 13-14px, Medium weight, 4-8px gap below label
-- Input: 14-15px Regular, 12-16px horizontal padding
-- Corner radius: 8px
-- Border: 1px, muted color. Focus: brand color border
-- 20-24px gap between field groups
-
-## Section Patterns
-
-### Hero Section
-- Vertical padding: 80-120px
-- Content centered (both axes)
-- Overline badge → Heading (56-72px) → Subtitle (18-20px) → Button row → Social proof
-- Max heading width: ~600px
-- Subtitle max width: ~500px
-- 28-32px gap between heading and subtitle
-- 32-40px gap between subtitle and buttons
-
-### Feature Section
-- Heading + subtitle centered at top
-- 3 cards in a row (or 2 for detailed features)
-- Each card: icon/emoji → title → description → optional link
-- 48px gap between heading group and card row
-
-### Stats/Social Proof
-- Background color shift (one level different from surrounding sections)
-- 3-4 stats in a horizontal row, centered
-- Each stat centered: big number + label below
-
-### CTA Section
-- Often wrapped in a card or a background shift
-- Centered: heading → subtitle → button row
-- Generous padding: 64-96px vertical
-
-### Footer
-- Logo left, copyright right, spacer between
-- Or: multi-column with link groups
-- Divider line above
-- Muted text, smaller font sizes (13px)
-
-## Anti-Patterns (NEVER do these)
-- Never use absolute positioning. Always auto-layout.
-- Never use font sizes that aren't in the type scale.
-- Never use spacing values that aren't multiples of 4 or 8.
-- Never put more than 3-4 cards in a row.
-- Never use pure black or pure white on dark themes.
-- Never make buttons without sufficient padding (minimum 16px horizontal).
-- Never stack more than 4-5 levels of nesting without good reason.
-- Never use inconsistent corner radii on the same page.
-- Never use more than 2-3 distinct background colors per page.
-- Never center-align body paragraphs (center headings only).
-- Never use text smaller than 11px.
-- Never create frames without naming them descriptively.
-
-## Naming Convention
-- Pages: "Landing Page", "Pricing Page", "Dashboard"
-- Sections: "Hero Section", "Features Section", "CTA Section"
-- Components: "Nav CTA", "Feature Card", "Stat Card", "Price Tier"
-- Layout: "Card Row", "Button Row", "Nav Links"
-- Never use "Frame 1", "Rectangle 2", or auto-generated names.`;
-}

package/src/design/exporter.js

@@ -1,72 +0,0 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR — Token Exporter
-// ═══════════════════════════════════════════
-
-export function exportCSS(tokens) {
-  let out = '/* Generated by CONDUCTOR */\n:root {\n';
-  if (tokens.colors) for (const [k, v] of Object.entries(tokens.colors)) out += `  --color-${k}: ${v};\n`;
-  if (tokens.spacing) tokens.spacing.forEach((v, i) => { out += `  --space-${i + 1}: ${v}px;\n`; });
-  if (tokens.fontSizes) {
-    const names = ['xs','sm','base','md','lg','xl','2xl','3xl','4xl','5xl','6xl'];
-    tokens.fontSizes.forEach((v, i) => { out += `  --text-${names[i] || i}: ${v.size || v}px;\n`; });
-  }
-  if (tokens.radii) tokens.radii.forEach(r => { out += `  --radius-${r.name}: ${r.value >= 9999 ? '9999px' : r.value + 'px'};\n`; });
-  if (tokens.shadows) tokens.shadows.forEach(s => { out += `  --shadow-${s.step}: ${s.css};\n`; });
-  out += '}\n';
-  return out;
-}
-
-export function exportTailwind(tokens) {
-  const config = { theme: { extend: {} } };
-  if (tokens.colors) config.theme.extend.colors = { ...tokens.colors };
-  if (tokens.spacing) {
-    config.theme.extend.spacing = {};
-    tokens.spacing.forEach((v, i) => { config.theme.extend.spacing[String(i + 1)] = `${v}px`; });
-  }
-  if (tokens.fontSizes) {
-    config.theme.extend.fontSize = {};
-    const names = ['xs','sm','base','md','lg','xl','2xl','3xl','4xl','5xl','6xl'];
-    tokens.fontSizes.forEach((v, i) => { config.theme.extend.fontSize[names[i] || i] = `${v.size || v}px`; });
-  }
-  if (tokens.radii) {
-    config.theme.extend.borderRadius = {};
-    tokens.radii.forEach(r => { config.theme.extend.borderRadius[r.name] = r.value >= 9999 ? '9999px' : `${r.value}px`; });
-  }
-  return `// tailwind.config.js — Generated by CONDUCTOR\nmodule.exports = ${JSON.stringify(config, null, 2)}\n`;
-}
-
-export function exportSCSS(tokens) {
-  let out = '// Generated by CONDUCTOR\n\n';
-  if (tokens.colors) for (const [k, v] of Object.entries(tokens.colors)) out += `$color-${k}: ${v};\n`;
-  if (tokens.spacing) { out += '\n'; tokens.spacing.forEach((v, i) => { out += `$space-${i + 1}: ${v}px;\n`; }); }
-  if (tokens.fontSizes) {
-    out += '\n';
-    const names = ['xs','sm','base','md','lg','xl','2xl','3xl','4xl','5xl','6xl'];
-    tokens.fontSizes.forEach((v, i) => { out += `$text-${names[i] || i}: ${v.size || v}px;\n`; });
-  }
-  return out;
-}
-
-export function exportJSON(tokens) {
-  return JSON.stringify(tokens, null, 2);
-}
-
-export function exportW3CTokens(tokens) {
-  const w3c = {};
-  if (tokens.colors) {
-    w3c.color = {};
-    for (const [k, v] of Object.entries(tokens.colors)) {
-      w3c.color[k] = { $value: v, $type: 'color' };
-    }
-  }
-  if (tokens.spacing) {
-    w3c.spacing = {};
-    tokens.spacing.forEach((v, i) => { w3c.spacing[`space-${i + 1}`] = { $value: `${v}px`, $type: 'dimension' }; });
-  }
-  if (tokens.fontSizes) {
-    w3c.fontSize = {};
-    const names = ['xs','sm','base','md','lg','xl','2xl','3xl','4xl','5xl','6xl'];
-    tokens.fontSizes.forEach((v, i) => { w3c.fontSize[names[i] || i] = { $value: `${v.size || v}px`, $type: 'dimension' }; });
-  }
-  return JSON.stringify(w3c, null, 2);
-}

package/src/index.js

@@ -1,33 +0,0 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR — Public API
-// ═══════════════════════════════════════════
-
-export { startServer } from './server.js';
-export { Relay } from './relay.js';
-export { executeSequence } from './orchestrator.js';
-export { getBlueprint, buildLandingPage, buildPricingPage, buildDashboardPage, buildSection } from './blueprints.js';
-export { TOOLS, CATEGORIES, getToolByName, getToolsByCategory, getAllToolNames } from './tools/registry.js';
-export { handleTool } from './tools/handlers.js';
-
-export {
-  // Grid
-  snapToGrid, isOnGrid, generateSpacingScale, findNearestGridValue, auditSpacing,
-  // Type
-  TYPE_SCALES, generateTypeScale, detectTypeScale, getLineHeight, getFontWeight, checkMeasure,
-  // Color
-  hexToRgb, rgbToHex, hexToHsl, hslToHex, generatePalette, generateSemanticColors,
-  generateDarkMode, relativeLuminance, contrastRatio, checkContrast,
-  // Shadow & Radius
-  generateElevation, generateRadiusScale,
-  // Hierarchy
-  assessHierarchy,
-  // Accessibility
-  checkTouchTarget,
-  // Layout
-  inferLayoutDirection, inferGap, inferPadding, BREAKPOINTS, scaleForBreakpoint,
-  // Score
-  computeDesignScore,
-} from './design/intelligence.js';
-
-export { exportCSS, exportTailwind, exportSCSS, exportJSON, exportW3CTokens } from './design/exporter.js';
-export { getDesignCraftGuide } from './design/craftguide.js';

package/src/orchestrator.js

@@ -1,100 +0,0 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR — Orchestrator
-// ═══════════════════════════════════════════
-// Takes a blueprint (sequence of commands) and executes them
-// through the relay one at a time. Each command can reference
-// results from previous commands via $ref tokens.
-//
-// Example: create a frame, then create text inside it.
-// The text command references the frame's ID via $ref.
-//
-// { type: 'create_frame', name: 'Hero', ... }          → returns { id: '5:2' }
-// { type: 'create_text', parentId: '$0.id', text: ... } → parentId resolved to '5:2'
-
-/**
- * Execute a sequence of Figma commands through the relay.
- * Supports $ref tokens: '$N.field' references result N's field.
- *
- * @param {Object} relay - The WebSocket relay instance
- * @param {Array} commands - Array of { type, data } command objects
- * @param {Function} onProgress - Optional callback(stepIndex, totalSteps, result)
- * @returns {Promise<{ results: Array, errors: Array, success: boolean }>}
- */
-export async function executeSequence(relay, commands, onProgress) {
-  var results = [];
-  var errors = [];
-
-  for (var i = 0; i < commands.length; i++) {
-    var cmd = commands[i];
-    var resolvedData = resolveRefs(cmd.data || {}, results);
-
-    try {
-      var result = await relay.sendToPlugin(cmd.type, resolvedData, 10000);
-
-      if (result && result.error) {
-        errors.push({ step: i, command: cmd.type, error: result.error });
-        results.push(result);
-        // Don't stop on error — skip and continue
-        process.stderr.write('CONDUCTOR orchestrator: step ' + i + ' (' + cmd.type + ') error: ' + result.error + '\n');
-      } else {
-        results.push(result || {});
-        if (onProgress) onProgress(i, commands.length, result);
-        process.stderr.write('CONDUCTOR orchestrator: step ' + (i + 1) + '/' + commands.length + ' ' + cmd.type + ' -> ' + (result && (result.id || result.name) || 'ok') + '\n');
-      }
-    } catch (err) {
-      errors.push({ step: i, command: cmd.type, error: String(err) });
-      results.push({ error: String(err) });
-      process.stderr.write('CONDUCTOR orchestrator: step ' + i + ' (' + cmd.type + ') threw: ' + String(err) + '\n');
-    }
-
-    // Small delay between commands to let Figma process
-    await sleep(50);
-  }
-
-  return {
-    results: results,
-    errors: errors,
-    success: errors.length === 0,
-    totalSteps: commands.length,
-    completedSteps: commands.length - errors.length,
-  };
-}
-
-/**
- * Resolve $ref tokens in command data.
- * '$0.id' → results[0].id
- * '$parent' → results[results.length-1].id (last result's id)
- * '$2.name' → results[2].name
- */
-function resolveRefs(data, results) {
-  if (typeof data === 'string') {
-    // Check for $ref pattern
-    return data.replace(/\$(\d+)\.(\w+)/g, function(match, idx, field) {
-      var r = results[parseInt(idx)];
-      return (r && r[field] !== undefined) ? r[field] : match;
-    }).replace(/\$parent/g, function() {
-      var last = results[results.length - 1];
-      return (last && last.id) ? last.id : '';
-    });
-  }
-
-  if (Array.isArray(data)) {
-    return data.map(function(item) { return resolveRefs(item, results); });
-  }
-
-  if (data && typeof data === 'object') {
-    var resolved = {};
-    for (var key in data) {
-      if (data.hasOwnProperty(key)) {
-        resolved[key] = resolveRefs(data[key], results);
-      }
-    }
-    return resolved;
-  }
-
-  return data;
-}
-
-function sleep(ms) {
-  return new Promise(function(resolve) { setTimeout(resolve, ms); });
-}

package/src/relay.js

@@ -1,176 +0,0 @@
-// ═══════════════════════════════════════════
-// CONDUCTOR — WebSocket Relay
-// ═══════════════════════════════════════════
-// Bridges MCP stdio (from Cursor) to WebSocket (to Figma plugin).
-//
-// Flow:
-//   Cursor → MCP stdio → CONDUCTOR → design logic (local)
-//                                   → figma commands (WebSocket) → Plugin → Figma API
-//                                   ← results ← WebSocket ←
-//         ← MCP stdio ← CONDUCTOR ←
-
-import { createServer } from 'node:http';
-
-// Tools that need Figma (sent over WebSocket to plugin)
-const FIGMA_COMMANDS = new Set([
-  // Create
-  'create_frame', 'create_text', 'create_rect', 'create_section', 'create_component',
-  'create_ellipse', 'create_svg_node',
-  // Layout
-  'set_auto_layout', 'set_constraints', 'apply_grid', 'align_nodes',
-  // Style
-  'set_fills', 'set_strokes', 'set_effects', 'set_corner_radius', 'set_opacity',
-  // Typography
-  'set_text_props', 'load_font', 'style_text_range',
-  // Read
-  'get_selection', 'get_page_info', 'get_styles', 'get_components',
-  'read_node', 'read_tree', 'read_spacing', 'read_colors', 'read_typography',
-  'find_nodes',
-  // Edit
-  'rename_node', 'move_node', 'resize_node', 'delete_node',
-  'clone_node', 'group_nodes', 'ungroup_node', 'reorder_node',
-  // Export
-  'export_png', 'export_svg',
-  // Viewport
-  'zoom_to', 'scroll_to',
-  // Meta
-  'ping',
-]);
-
-export class Relay {
-  constructor(port) {
-    this.port = port || 9800;
-    this.pluginSocket = null;
-    this.pendingCallbacks = new Map();
-    this.cmdId = 0;
-    this.server = null;
-    this.wss = null;
-  }
-
-  async start() {
-    // Dynamic import ws (may not be installed — we bundle our own minimal WS)
-    let WebSocketServer;
-    try {
-      const ws = await import('ws');
-      WebSocketServer = ws.WebSocketServer || ws.default.WebSocketServer;
-    } catch (e) {
-      process.stderr.write('CONDUCTOR relay: "ws" package not found. Install with: npm install ws\n');
-      process.stderr.write('Falling back to MCP-only mode (no Figma bridge).\n');
-      return false;
-    }
-
-    this.server = createServer();
-    this.wss = new WebSocketServer({ server: this.server });
-
-    this.wss.on('connection', (socket) => {
-      this.pluginSocket = socket;
-      process.stderr.write('CONDUCTOR relay: Figma plugin connected\n');
-
-      socket.on('message', (data) => {
-        try {
-          const msg = JSON.parse(data.toString());
-          this.handlePluginMessage(msg);
-        } catch (e) {
-          // ignore
-        }
-      });
-
-      socket.on('close', () => {
-        this.pluginSocket = null;
-        process.stderr.write('CONDUCTOR relay: Figma plugin disconnected\n');
-      });
-
-      socket.on('error', () => {
-        this.pluginSocket = null;
-      });
-    });
-
-    return new Promise((resolve) => {
-      this.server.listen(this.port, () => {
-        process.stderr.write(`CONDUCTOR relay: WebSocket listening on ws://localhost:${this.port}\n`);
-        resolve(true);
-      });
-    });
-  }
-
-  handlePluginMessage(msg) {
-    if (msg.type === 'plugin_ready') {
-      process.stderr.write(`CONDUCTOR relay: Plugin ready (v${msg.version || '?'})\n`);
-      return;
-    }
-
-    if (msg.type === 'result' && msg.id !== undefined) {
-      const callback = this.pendingCallbacks.get(msg.id);
-      if (callback) {
-        this.pendingCallbacks.delete(msg.id);
-        callback(msg.data || {});
-      }
-      return;
-    }
-  }
-
-  isConnected() {
-    return this.pluginSocket !== null && this.pluginSocket.readyState === 1; // WebSocket.OPEN
-  }
-
-  /**
-   * Send a command to the Figma plugin and wait for result.
-   * Returns a Promise that resolves with the plugin's response.
-   */
-  sendToPlugin(commandType, commandData, timeout) {
-    timeout = timeout || 15000;
-
-    return new Promise((resolve, reject) => {
-      if (!this.isConnected()) {
-        resolve({ error: 'Figma plugin not connected. Open the CONDUCTOR plugin in Figma and click Connect.' });
-        return;
-      }
-
-      var id = ++this.cmdId;
-      var timer = setTimeout(function() {
-        this.pendingCallbacks.delete(id);
-        resolve({ error: 'Timeout waiting for Figma plugin response' });
-      }.bind(this), timeout);
-
-      this.pendingCallbacks.set(id, function(result) {
-        clearTimeout(timer);
-        resolve(result);
-      });
-
-      this.pluginSocket.send(JSON.stringify({
-        type: 'command',
-        id: id,
-        command: { type: commandType, data: commandData || {} },
-      }));
-    });
-  }
-
-  /**
-   * Check if a tool name maps to a Figma command.
-   */
-  isFigmaCommand(toolName) {
-    return FIGMA_COMMANDS.has(toolName);
-  }
-
-  /**
-   * Map a high-level tool call to one or more Figma commands.
-   * Some tools (like create_page) produce multiple Figma commands.
-   * Some tools (like color_palette) are pure design logic — no Figma needed.
-   */
-  getFigmaCommand(toolName, toolArgs) {
-    // Direct mappings — tool name IS the Figma command
-    if (FIGMA_COMMANDS.has(toolName)) {
-      return { command: toolName, data: toolArgs };
-    }
-
-    // Tools that generate Figma commands from design logic output
-    // The handler produces a JSON response with an "action" field
-    // that maps to a Figma command
-    return null;
-  }
-
-  stop() {
-    if (this.wss) this.wss.close();
-    if (this.server) this.server.close();
-  }
-}