figma-local 1.0.0

package/src/platform.js

@@ -0,0 +1,206 @@
+/**
+ * Platform-specific helpers.
+ * Only defines functions for the current platform — no Windows code loaded on Mac, etc.
+ */
+
+import { execSync, spawn } from 'child_process';
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+
+const PLATFORM = process.platform;
+
+// --- Null device ---
+export const nullDevice = PLATFORM === 'win32' ? 'NUL' : '/dev/null';
+
+// --- Port cleanup ---
+function killPortUnix(port) {
+  const portCheck = execSync(`lsof -ti:${port} 2>/dev/null || true`, { encoding: 'utf8', stdio: 'pipe' });
+  if (portCheck.trim()) {
+    try { execSync(`lsof -ti:${port} | xargs kill -9 2>/dev/null || true`, { stdio: 'pipe' }); } catch {}
+    try { execSync('sleep 0.3', { stdio: 'pipe' }); } catch {}
+  }
+}
+
+function killPortWindows(port) {
+  try {
+    const result = execSync(`netstat -ano | findstr :${port}`, { encoding: 'utf8', stdio: 'pipe' });
+    const lines = result.split('\n').filter(l => l.includes('LISTENING'));
+    for (const line of lines) {
+      const parts = line.trim().split(/\s+/);
+      const pid = parts[parts.length - 1];
+      if (pid && /^\d+$/.test(pid)) {
+        execSync(`taskkill /PID ${pid} /F 2>nul`, { stdio: 'pipe' });
+      }
+    }
+    try { execSync('ping -n 1 127.0.0.1 >nul', { stdio: 'pipe' }); } catch {}
+  } catch {}
+}
+
+export const killPort = PLATFORM === 'win32' ? killPortWindows : killPortUnix;
+
+// --- Get PID listening on port ---
+function getPortPidUnix(port) {
+  return execSync(`lsof -ti:${port} 2>/dev/null || true`, { encoding: 'utf8', stdio: 'pipe' }).trim() || null;
+}
+
+function getPortPidWindows(port) {
+  const result = execSync(`netstat -ano | findstr :${port}`, { encoding: 'utf8', stdio: 'pipe' });
+  const line = result.split('\n').find(l => l.includes('LISTENING'));
+  if (line) {
+    const parts = line.trim().split(/\s+/);
+    return parts[parts.length - 1] || null;
+  }
+  return null;
+}
+
+export const getPortPid = PLATFORM === 'win32' ? getPortPidWindows : getPortPidUnix;
+
+// --- Sleep after daemon stop ---
+export function sleepAfterStop() {
+  if (PLATFORM === 'win32') {
+    try { execSync('ping -n 2 127.0.0.1 >nul', { stdio: 'pipe' }); } catch {}
+  } else {
+    try { execSync('sleep 0.5', { stdio: 'pipe' }); } catch {}
+  }
+}
+
+// --- Start Figma ---
+export function startFigmaApp(figmaPath, port) {
+  if (PLATFORM === 'darwin') {
+    execSync(`open -a Figma --args --remote-debugging-port=${port}`, { stdio: 'pipe' });
+  } else {
+    spawn(figmaPath, [`--remote-debugging-port=${port}`], { detached: true, stdio: 'ignore' }).unref();
+  }
+}
+
+// --- Kill Figma ---
+export function killFigmaApp() {
+  try {
+    if (PLATFORM === 'darwin') {
+      execSync('pkill -x Figma 2>/dev/null || true', { stdio: 'pipe' });
+    } else if (PLATFORM === 'win32') {
+      execSync('taskkill /IM Figma.exe /F 2>nul', { stdio: 'pipe' });
+    } else {
+      execSync('pkill -x figma 2>/dev/null || true', { stdio: 'pipe' });
+    }
+  } catch {}
+}
+
+// --- Figma paths (asar, binary, command) ---
+
+// Windows-only helpers (only defined on Windows)
+let findWindowsFigmaPath, findWindowsFigmaExe;
+
+if (PLATFORM === 'win32') {
+  findWindowsFigmaPath = function() {
+    const localAppData = process.env.LOCALAPPDATA;
+    if (!localAppData) return null;
+
+    const figmaBase = join(localAppData, 'Figma');
+    if (!existsSync(figmaBase)) return null;
+
+    try {
+      const entries = readdirSync(figmaBase);
+      const appFolders = entries
+        .filter(e => e.startsWith('app-'))
+        .sort()
+        .reverse();
+
+      for (const folder of appFolders) {
+        const asarPath = join(figmaBase, folder, 'resources', 'app.asar');
+        if (existsSync(asarPath)) return asarPath;
+      }
+
+      const oldPath = join(figmaBase, 'resources', 'app.asar');
+      if (existsSync(oldPath)) return oldPath;
+    } catch {}
+
+    return null;
+  };
+
+  findWindowsFigmaExe = function() {
+    const localAppData = process.env.LOCALAPPDATA;
+    if (!localAppData) return null;
+
+    const figmaBase = join(localAppData, 'Figma');
+    const mainExe = join(figmaBase, 'Figma.exe');
+    if (existsSync(mainExe)) return mainExe;
+
+    try {
+      const entries = readdirSync(figmaBase);
+      const appFolders = entries
+        .filter(e => e.startsWith('app-'))
+        .sort()
+        .reverse();
+
+      for (const folder of appFolders) {
+        const exePath = join(figmaBase, folder, 'Figma.exe');
+        if (existsSync(exePath)) return exePath;
+      }
+    } catch {}
+
+    return null;
+  };
+}
+
+const ASAR_PATHS = {
+  darwin: '/Applications/Figma.app/Contents/Resources/app.asar',
+  linux: '/opt/figma/resources/app.asar'
+};
+
+export function getAsarPath() {
+  if (PLATFORM === 'win32') return findWindowsFigmaPath();
+  return ASAR_PATHS[PLATFORM] || null;
+}
+
+export function getFigmaBinaryPath() {
+  switch (PLATFORM) {
+    case 'darwin':
+      return '/Applications/Figma.app/Contents/MacOS/Figma';
+    case 'win32':
+      return findWindowsFigmaExe() || `${process.env.LOCALAPPDATA}\\Figma\\Figma.exe`;
+    case 'linux':
+      return '/usr/bin/figma';
+    default:
+      return null;
+  }
+}
+
+export function getFigmaCommand(port = 9222) {
+  switch (PLATFORM) {
+    case 'darwin':
+      return `open -a Figma --args --remote-debugging-port=${port}`;
+    case 'win32': {
+      const exePath = findWindowsFigmaExe();
+      if (exePath) return `"${exePath}" --remote-debugging-port=${port}`;
+      return `"%LOCALAPPDATA%\\Figma\\Figma.exe" --remote-debugging-port=${port}`;
+    }
+    case 'linux':
+      return `figma --remote-debugging-port=${port}`;
+    default:
+      return null;
+  }
+}
+
+// --- Doctor helpers ---
+export function getFigmaVersion() {
+  if (PLATFORM === 'darwin') {
+    return execSync('defaults read /Applications/Figma.app/Contents/Info.plist CFBundleShortVersionString 2>/dev/null', { encoding: 'utf8' }).trim();
+  } else if (PLATFORM === 'win32') {
+    return execSync('powershell -command "(Get-Item \\"$env:LOCALAPPDATA\\Figma\\Figma.exe\\").VersionInfo.ProductVersion" 2>nul', { encoding: 'utf8' }).trim() || 'unknown';
+  }
+  return 'unknown';
+}
+
+export function isFigmaRunning() {
+  if (PLATFORM === 'darwin' || PLATFORM === 'linux') {
+    const ps = execSync('pgrep -f Figma 2>/dev/null || true', { encoding: 'utf8' });
+    return ps.trim().length > 0;
+  } else if (PLATFORM === 'win32') {
+    const ps = execSync('tasklist /FI "IMAGENAME eq Figma.exe" 2>nul', { encoding: 'utf8' });
+    return ps.includes('Figma.exe');
+  }
+  return false;
+}
+
+export const platformName = { darwin: 'macOS', win32: 'Windows', linux: 'Linux' }[PLATFORM] || PLATFORM;

package/src/prompt-templates.js

@@ -0,0 +1,289 @@
+/**
+ * prompt-templates.js — Per-tool structured prompt generators
+ *
+ * Each tool has different expectations: vocabulary, detail level,
+ * session context format, and token budgets.
+ * We generate lean, tool-calibrated prompts instead of generic dumps.
+ */
+
+/**
+ * Generate a ready-to-paste prompt for the given target tool.
+ *
+ * @param {string} target   - 'figma-make' | 'lovable' | 'pencil' | 'paper' | 'stitch'
+ * @param {object} design   - { frameName, page, size, structure, tokens, interactions }
+ * @param {object} options  - { platform, stack, goal, guardrails }
+ */
+export function generatePrompt(target, design, options = {}) {
+  const { frameName, page, size, structure, tokens, interactions } = design;
+  const { platform = 'desktop', stack = 'React + Tailwind', goal = '', guardrails = '' } = options;
+
+  // Build shared token block (used by all tools)
+  const tokenBlock = buildTokenBlock(tokens);
+
+  switch (target) {
+    case 'figma-make': return figmaMakePrompt(design, options, tokenBlock);
+    case 'lovable':    return lovablePrompt(design, options, tokenBlock);
+    case 'pencil':     return pencilPrompt(design, options, tokenBlock);
+    case 'paper':      return paperPrompt(design, options, tokenBlock);
+    case 'stitch':     return stitchPrompt(design, options, tokenBlock);
+    default:
+      throw new Error(`Unknown target: ${target}. Use: figma-make, lovable, pencil, paper, stitch`);
+  }
+}
+
+function buildTokenBlock(tokens) {
+  if (!tokens || Object.keys(tokens).length === 0) return '';
+  const lines = Object.entries(tokens)
+    .slice(0, 20) // cap at 20 tokens max
+    .map(([k, v]) => `  ${k}: ${v}`);
+  return `Design tokens:\n${lines.join('\n')}`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Figma Make — Interactive HTML prototype
+// Key rules: use MCP text context block (NOT frame attachment),
+// one screen at a time, action words: change / set / on click
+// ─────────────────────────────────────────────────────────────
+function figmaMakePrompt(design, options, tokenBlock) {
+  const { frameName, size, structure, interactions = [] } = design;
+  const { platform = 'desktop', goal = '', guardrails = '' } = options;
+
+  const sessionCtx = [
+    `Screen: ${frameName}`,
+    `Size: ${size}`,
+    `Platform: ${platform}`,
+    tokenBlock,
+  ].filter(Boolean).join('\n');
+
+  const interactionList = interactions.length > 0
+    ? interactions.map(i => `- ${i}`).join('\n')
+    : '- (No interactions specified)';
+
+  const structureBlock = structure ? `\nStructure:\n${structure}` : '';
+
+  const screenPrompt = [
+    `Build a ${platform} UI screen called "${frameName}".`,
+    goal ? `Goal: ${goal}` : '',
+    '',
+    structureBlock,
+    '',
+    'Interactions:',
+    interactionList,
+    guardrails ? `\nDo not: ${guardrails}` : '',
+  ].filter(s => s !== undefined).join('\n').trim();
+
+  const full = `${sessionCtx}\n\n${screenPrompt}`;
+  const tokenEst = Math.round(full.length / 4);
+
+  return `## Figma Make Prompt — ${frameName}
+
+### Session context (paste once at session start):
+${sessionCtx}
+
+### Screen prompt:
+${screenPrompt}
+
+### Follow-ups:
+1. Adjust spacing and typography to match the design tokens exactly.
+2. Add hover and active states to all interactive elements.
+
+---
+💰 Token estimate: ~${tokenEst} tokens
+⚡ Use this text block instead of attaching the Figma frame — saves 300–500 hidden tokens.`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Lovable — Full-stack React app
+// Key rules: specify stack, real component names, action verbs,
+// one screen per prompt, mention shadcn if using it
+// ─────────────────────────────────────────────────────────────
+function lovablePrompt(design, options, tokenBlock) {
+  const { frameName, size, structure, interactions = [] } = design;
+  const { platform = 'desktop', stack = 'React + shadcn/ui + Tailwind', goal = '', guardrails = '' } = options;
+
+  const sessionCtx = [
+    `App: ${frameName}`,
+    `Stack: ${stack}`,
+    `Platform: ${platform}`,
+    tokenBlock,
+  ].filter(Boolean).join('\n');
+
+  const interactionList = interactions.length > 0
+    ? interactions.map(i => `- ${i}`).join('\n')
+    : '- Static layout, no interactions specified';
+
+  const structureBlock = structure ? `\nComponent structure:\n${structure}` : '';
+
+  const screenPrompt = [
+    `Create a ${platform} React page for "${frameName}".`,
+    `Stack: ${stack}.`,
+    goal ? `User goal: ${goal}` : '',
+    structureBlock,
+    '',
+    'Interactions:',
+    interactionList,
+    guardrails ? `\nConstraints: ${guardrails}` : '',
+    '\nUse exact hex values from design tokens. Match spacing and layout precisely.',
+  ].filter(s => s !== undefined).join('\n').trim();
+
+  const full = `${sessionCtx}\n\n${screenPrompt}`;
+  const tokenEst = Math.round(full.length / 4);
+
+  return `## Lovable Prompt — ${frameName}
+
+### Session context (paste once at session start):
+${sessionCtx}
+
+### Screen prompt:
+${screenPrompt}
+
+### Follow-ups:
+1. Wire up form validation and error states.
+2. Make layout fully responsive for mobile.
+
+---
+💰 Token estimate: ~${tokenEst} tokens
+⚡ Lovable charges per message — keep follow-ups focused on one change each.`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Pencil.dev — Production React components
+// Key rules: component-first vocabulary, prop/variant naming,
+// storybook-compatible output
+// ─────────────────────────────────────────────────────────────
+function pencilPrompt(design, options, tokenBlock) {
+  const { frameName, size, structure, interactions = [] } = design;
+  const { stack = 'React + TypeScript + Tailwind', goal = '', guardrails = '' } = options;
+
+  const sessionCtx = [
+    `Component: ${frameName}`,
+    `Stack: ${stack}`,
+    tokenBlock,
+  ].filter(Boolean).join('\n');
+
+  const structureBlock = structure ? `\nStructure:\n${structure}` : '';
+
+  const screenPrompt = [
+    `Generate a production-ready React component for "${frameName}".`,
+    `Stack: ${stack}.`,
+    goal ? `Purpose: ${goal}` : '',
+    structureBlock,
+    '',
+    'States and variants:',
+    ...(interactions.length > 0 ? interactions.map(i => `- ${i}`) : ['- default']),
+    guardrails ? `\nDo not: ${guardrails}` : '',
+    '\nExport as named export. Include prop types. Match design token values exactly.',
+  ].filter(s => s !== undefined).join('\n').trim();
+
+  const full = `${sessionCtx}\n\n${screenPrompt}`;
+  const tokenEst = Math.round(full.length / 4);
+
+  return `## Pencil.dev Prompt — ${frameName}
+
+### Session context:
+${sessionCtx}
+
+### Component prompt:
+${screenPrompt}
+
+### Follow-ups:
+1. Add Storybook story with all variant combinations.
+2. Add unit tests for interaction states.
+
+---
+💰 Token estimate: ~${tokenEst} tokens`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Paper.design — HTML/CSS canvas
+// Key rules: structural, semantic HTML, CSS custom properties
+// ─────────────────────────────────────────────────────────────
+function paperPrompt(design, options, tokenBlock) {
+  const { frameName, size, structure, interactions = [] } = design;
+  const { goal = '', guardrails = '' } = options;
+
+  const sessionCtx = [
+    `Screen: ${frameName} (${size})`,
+    tokenBlock,
+  ].filter(Boolean).join('\n');
+
+  const structureBlock = structure ? `\nLayout structure:\n${structure}` : '';
+
+  const screenPrompt = [
+    `Build an HTML/CSS layout for "${frameName}" (${size}).`,
+    goal ? `Purpose: ${goal}` : '',
+    structureBlock,
+    '',
+    'Use CSS custom properties for all colors and spacing from design tokens.',
+    'Semantic HTML5 elements only.',
+    guardrails ? `\nDo not: ${guardrails}` : '',
+  ].filter(s => s !== undefined).join('\n').trim();
+
+  const full = `${sessionCtx}\n\n${screenPrompt}`;
+  const tokenEst = Math.round(full.length / 4);
+
+  return `## Paper.design Prompt — ${frameName}
+
+### Session context:
+${sessionCtx}
+
+### Layout prompt:
+${screenPrompt}
+
+### Follow-ups:
+1. Add responsive breakpoints at 768px and 1024px.
+2. Export final CSS as a separate file.
+
+---
+💰 Token estimate: ~${tokenEst} tokens`;
+}
+
+// ─────────────────────────────────────────────────────────────
+// Google Stitch — Gemini 2.5, responsive UI
+// Key rules: explicit responsiveness, Gemini vocabulary,
+// limited monthly generations so keep prompts tight
+// ─────────────────────────────────────────────────────────────
+function stitchPrompt(design, options, tokenBlock) {
+  const { frameName, size, structure, interactions = [] } = design;
+  const { platform = 'responsive', goal = '', guardrails = '' } = options;
+
+  const sessionCtx = [
+    `UI: ${frameName}`,
+    `Platform: ${platform}`,
+    tokenBlock,
+  ].filter(Boolean).join('\n');
+
+  const structureBlock = structure ? `\nVisual structure:\n${structure}` : '';
+
+  const screenPrompt = [
+    `Design a ${platform} UI layout for "${frameName}".`,
+    goal ? `Goal: ${goal}` : '',
+    structureBlock,
+    '',
+    'Requirements:',
+    '- Responsive: mobile (375px), tablet (768px), desktop (1280px)',
+    '- Use exact color values from design tokens',
+    '- Match component hierarchy from structure above',
+    ...(interactions.map(i => `- ${i}`)),
+    guardrails ? `\nAvoid: ${guardrails}` : '',
+  ].filter(s => s !== undefined).join('\n').trim();
+
+  const full = `${sessionCtx}\n\n${screenPrompt}`;
+  const tokenEst = Math.round(full.length / 4);
+
+  return `## Google Stitch Prompt — ${frameName}
+
+### Session context:
+${sessionCtx}
+
+### UI prompt:
+${screenPrompt}
+
+### Follow-ups:
+1. Adjust grid columns for tablet breakpoint.
+2. Refine color contrast for accessibility.
+
+---
+💰 Token estimate: ~${tokenEst} tokens
+⚡ Stitch has limited monthly generations — scope each prompt to one screen.`;
+}