conductor-figma 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 0xDragoon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,193 @@
+# CONDUCTOR
+
+> Experimental software. DYOR. Use at your own risk.
+
+Design-intelligent MCP server for Figma. 61 tools across 10 categories. It doesn't place shapes — it designs. 8px grid, type scale ratios, auto-layout, component reuse, WCAG accessibility, and a self-auditing design score. Every decision follows the rules a senior designer applies instinctively.
+
+```
+npx conductor-figma
+```
+
+## What it does
+
+Other MCP servers translate your words into shapes. CONDUCTOR translates them into design decisions.
+
+Say "create a pricing page." A typical MCP creates rectangles with absolute positioning, random font sizes, and arbitrary spacing. CONDUCTOR creates a page with auto-layout frames, a type scale following a major third ratio (1.25), spacing on an 8px grid, and proper visual hierarchy — headings are dominant, body text recedes, CTAs are prominent.
+
+## Setup
+
+Install the CONDUCTOR plugin from the Figma Community. Then add to your editor:
+
+```json
+// ~/.cursor/mcp.json
+{
+  "mcpServers": {
+    "conductor": {
+      "command": "npx",
+      "args": ["-y", "conductor-figma"]
+    }
+  }
+}
+```
+
+Open your Figma file, run the plugin, then chat:
+
+```
+"Create a SaaS landing page with hero, features, and pricing"
+"Audit this frame — is my spacing consistent?"
+"Generate a dark mode variant of this page"
+"Convert these absolute-positioned layers to auto-layout"
+```
+
+## 61 Tools · 10 Categories
+
+### Create (8)
+| Tool | Description |
+|------|-------------|
+| `create_frame` | Auto-layout frame with grid-aligned spacing |
+| `create_page` | Full page from intent: landing, pricing, dashboard |
+| `create_section` | Hero, features, testimonials, FAQ, CTA — pattern-aware |
+| `create_card` | Card with proper padding, radius, shadow, hierarchy |
+| `create_form` | Form with labels, inputs, validation, submit flow |
+| `create_table` | Data table with header, rows, sorting, pagination |
+| `create_modal` | Modal with overlay, sizing, and action buttons |
+| `create_nav` | Topbar, sidebar, breadcrumbs, tabs — with states |
+
+### Layout (7)
+| Tool | Description |
+|------|-------------|
+| `layout_auto` | Convert any frame to auto-layout |
+| `layout_grid` | Apply column grid: 12-col, 8-col, custom |
+| `layout_stack` | Stack children with consistent spacing |
+| `layout_wrap` | Wrap-layout for tags, pills, flexible grids |
+| `layout_constrain` | Set fill, hug, fixed, min/max constraints |
+| `layout_align` | Align and distribute frames on the grid |
+| `layout_nest` | Restructure flat layers into auto-layout tree |
+
+### Typography (6)
+| Tool | Description |
+|------|-------------|
+| `type_scale` | Generate or detect type scale ratios |
+| `type_hierarchy` | Set heading levels with proper ratios |
+| `type_pair` | Font pairing suggestions |
+| `type_measure` | Check line length and readability |
+| `type_apply` | Bulk-apply text styles |
+| `type_audit` | Find off-scale sizes and inconsistencies |
+
+### Color & Style (7)
+| Tool | Description |
+|------|-------------|
+| `color_palette` | Generate 50-950 shades from one color |
+| `color_semantic` | Create semantic tokens |
+| `color_darkmode` | Generate dark mode with preserved contrast |
+| `color_contrast` | WCAG AA/AAA contrast checking |
+| `color_apply` | Apply colors by semantic role |
+| `style_shadow` | Generate elevation system |
+| `style_radius` | Generate radius scale |
+
+### Components (6)
+| Tool | Description |
+|------|-------------|
+| `component_list` | List components in file or library |
+| `component_use` | Instantiate with variant props |
+| `component_create` | Create component from frame |
+| `component_swap` | Swap instances across a frame |
+| `component_detach` | Detach instances to editable frames |
+| `component_audit` | Find missing/unused/detached components |
+
+### Spacing & Grid (6)
+| Tool | Description |
+|------|-------------|
+| `spacing_scale` | Generate spacing scale from base unit |
+| `spacing_fix` | Snap off-grid values to nearest grid |
+| `spacing_audit` | Report all spacing values, flag issues |
+| `spacing_rhythm` | Check vertical rhythm consistency |
+| `grid_apply` | Apply layout grid to a frame |
+| `grid_check` | Verify children align to grid |
+
+### Audit & Critique (6)
+| Tool | Description |
+|------|-------------|
+| `audit_full` | Full design audit across all categories |
+| `audit_hierarchy` | Check visual hierarchy |
+| `audit_consistency` | Find elements with inconsistent styles |
+| `audit_alignment` | Flag misaligned elements |
+| `audit_density` | Check information density |
+| `audit_score` | 0-100 design health score |
+
+### Accessibility (5)
+| Tool | Description |
+|------|-------------|
+| `a11y_contrast` | WCAG AA/AAA contrast checking |
+| `a11y_touch` | 44x44px touch target verification |
+| `a11y_focus` | Generate focus ring styles |
+| `a11y_labels` | Check for missing labels |
+| `a11y_fix` | Auto-fix: contrast, targets, focus |
+
+### Responsive (4)
+| Tool | Description |
+|------|-------------|
+| `responsive_variant` | Generate mobile/tablet/desktop variants |
+| `responsive_reflow` | Reflow desktop to mobile |
+| `responsive_breakpoints` | Set up breakpoint frames |
+| `responsive_check` | Verify overflow and targets |
+
+### Export & Handoff (6)
+| Tool | Description |
+|------|-------------|
+| `export_tokens_css` | CSS custom properties |
+| `export_tokens_tailwind` | Tailwind config extension |
+| `export_tokens_json` | W3C Design Tokens format |
+| `export_tokens_scss` | SCSS variables |
+| `export_spec` | Design spec with measurements |
+| `export_changelog` | Diff two frames |
+
+## Design Intelligence
+
+Every tool is backed by real design logic, not arbitrary values.
+
+**8px Grid**: All spacing values snap to the nearest multiple of 8. Padding, margins, gaps — no 13px, no 27px, no arbitrary numbers.
+
+**Type Scale Ratios**: Font sizes follow mathematical ratios. Minor third (1.2), major third (1.25), perfect fourth (1.333), golden ratio (1.618). Headings, body, captions all relate to each other.
+
+**Auto-Layout**: Every frame uses Figma auto-layout with proper direction, gap, padding, and alignment. Zero absolute positioning.
+
+**WCAG Accessibility**: Contrast checking against AA (4.5:1) and AAA (7:1). Touch target verification (44x44px minimum). Focus state generation.
+
+**Design Score**: 0-100 health score weighted across spacing (25%), typography (20%), color (15%), components (15%), accessibility (15%), hierarchy (10%).
+
+## Programmatic API
+
+```js
+import { generateTypeScale, checkContrast, auditSpacing, snapToGrid } from 'conductor-figma'
+
+const scale = generateTypeScale(16, 'major-third')
+// → { scale: 'Major Third', ratio: 1.25, sizes: [...] }
+
+const contrast = checkContrast('#333333', '#ffffff')
+// → { ratio: 12.63, aa: true, aaa: true }
+
+const audit = auditSpacing([8, 13, 16, 22, 32], 8)
+// → { adherence: 0.6, fixes: [{ from: 13, to: 16 }, { from: 22, to: 24 }] }
+```
+
+## CLI
+
+```bash
+conductor-figma --list        # List all 61 tools
+conductor-figma --categories  # Show categories
+conductor-figma --help        # Help
+conductor-figma               # Start MCP server (stdio)
+```
+
+## Zero Dependencies
+
+CONDUCTOR has no runtime dependencies. Pure JavaScript. The design intelligence engine runs locally — no API calls, no external services.
+
+## Disclaimer
+
+Experimental, open-source software. Provided as-is with no warranties. DYOR. Use at your own risk. The author assumes zero liability.
+
+## License
+
+MIT. Built by 0xDragoon.

package/bin/conductor.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+
+import { startServer } from '../src/server.js';
+import { TOOLS, CATEGORIES } from '../src/tools/registry.js';
+
+const args = process.argv.slice(2);
+
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(`
+  ⊞ CONDUCTOR — Design-intelligent MCP server for Figma
+
+  Usage:
+    conductor-figma              Start MCP server (stdio)
+    conductor-figma --list       List all ${TOOLS.length} tools
+    conductor-figma --categories Show tool categories
+    conductor-figma --help       Show this help
+
+  MCP Setup (Cursor):
+    Add to ~/.cursor/mcp.json:
+
+    {
+      "mcpServers": {
+        "conductor": {
+          "command": "npx",
+          "args": ["-y", "conductor-figma"]
+        }
+      }
+    }
+
+  ${TOOLS.length} tools · ${Object.keys(CATEGORIES).length} categories · Zero dependencies
+  Built by 0xDragoon · MIT License
+`);
+  process.exit(0);
+}
+
+if (args.includes('--list')) {
+  for (const [catKey, cat] of Object.entries(CATEGORIES)) {
+    const tools = TOOLS.filter(t => t.category === catKey);
+    console.log(`\n  ${cat.icon} ${cat.label} (${tools.length})`);
+    for (const t of tools) {
+      console.log(`    ${t.name.padEnd(28)} ${t.description.slice(0, 70)}`);
+    }
+  }
+  console.log(`\n  ${TOOLS.length} tools total\n`);
+  process.exit(0);
+}
+
+if (args.includes('--categories')) {
+  for (const [key, cat] of Object.entries(CATEGORIES)) {
+    const tools = TOOLS.filter(t => t.category === key);
+    console.log(`  ${cat.icon} ${cat.label.padEnd(18)} ${tools.length} tools`);
+  }
+  console.log(`\n  ${TOOLS.length} tools total`);
+  process.exit(0);
+}
+
+// Default: start MCP server
+startServer();

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "conductor-figma",
+  "version": "0.1.0",
+  "description": "Design-intelligent MCP server for Figma. 61 tools across 10 categories. 8px grid, type scale ratios, auto-layout, component reuse, accessibility — real design intelligence, not shape proxying.",
+  "author": "0xDragoon",
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.js",
+  "bin": {
+    "conductor-figma": "./bin/conductor.js"
+  },
+  "files": [
+    "bin",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "start": "node bin/conductor.js",
+    "test": "node test/run.js"
+  },
+  "keywords": [
+    "mcp", "figma", "design", "ai", "cursor", "claude-code",
+    "auto-layout", "design-system", "tokens", "components",
+    "accessibility", "wcag", "type-scale", "spacing", "grid",
+    "model-context-protocol", "copilot", "devtools"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dragoon0x/conductor"
+  },
+  "homepage": "https://dragoon0x.github.io/conductor/",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "dependencies": {}
+}

package/src/design/exporter.js

@@ -0,0 +1,72 @@
+// ═══════════════════════════════════════════
+// 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);
+}