From 31dbe9690c8bb42c8eea1115ebbeb133eff878a4 Mon Sep 17 00:00:00 2001
From: Anton A S <eddclyde@yandex.ru>
Date: Tue, 10 Mar 2026 22:21:21 +0300
Subject: [PATCH] Add MCP codegen pipeline: tools, prompt, and plan

---
 docs/design-to-code-overview.md            | 244 +++++++++++
 docs/mcp-codegen-plan.md                   |  97 +++++
 lol.fig                                    | Bin 0 -> 24779 bytes
 packages/core/src/tools/codegen.ts         | 446 +++++++++++++++++++++
 packages/core/src/tools/prompts/codegen.md | 231 +++++++++++
 packages/core/src/tools/registry.ts        |   5 +
 packages/mcp/skills/open-pencil/SKILL.md   | 236 +++++++++++
 7 files changed, 1259 insertions(+)
 create mode 100644 docs/design-to-code-overview.md
 create mode 100644 docs/mcp-codegen-plan.md
 create mode 100644 lol.fig
 create mode 100644 packages/core/src/tools/codegen.ts
 create mode 100644 packages/core/src/tools/prompts/codegen.md
 create mode 100644 packages/mcp/skills/open-pencil/SKILL.md

diff --git a/docs/design-to-code-overview.md b/docs/design-to-code-overview.md
new file mode 100644
index 000000000..19c99e254
--- /dev/null
+++ b/docs/design-to-code-overview.md
@@ -0,0 +1,244 @@
+# Design → Code Pipeline: Overview
+
+## Goal
+
+Take a .fig design and produce production-ready code on the user's target stack (React, Vue, Svelte, etc. + Tailwind/CSS Modules/etc.) via AI-assisted code generation through the MCP server.
+
+## Current State
+
+### What exists (extraction layer)
+
+| Capability | Tool/Module | Output |
+|-----------|-------------|--------|
+| Read node tree | `get_page_tree`, `get_node`, `find_nodes`, `query_nodes` | JSON node properties |
+| Semantic analysis | `describe` | Role, layout, visual style, issues |
+| JSX representation | `get_jsx` | OpenPencil JSX (`<Frame flex="col" w={320}>`) |
+| Tailwind JSX | `export-jsx.ts` (tailwind format) | `<div className="flex flex-col w-80">` |
+| SVG export | `export_svg` | SVG markup string |
+| Image export | `export_image` | PNG/JPG/WEBP raster |
+| Components list | `get_components` | Component IDs, names, pages |
+| Design tokens | `list_variables`, `find_variables`, `list_collections` | Variable names, types, values, modes |
+| Color analysis | `analyze_colors` | Palette, frequencies, variable bindings, similar clusters |
+| Typography analysis | `analyze_typography` | Font families, sizes, weights, frequencies |
+| Spacing analysis | `analyze_spacing` | Gaps, paddings, grid compliance |
+| Pattern detection | `analyze_clusters` | Repeated structures → potential components |
+| Structural diff | `diff_jsx`, `diff_create` | Unified diff between two nodes |
+| XPath queries | `query_nodes` | `//FRAME[@width < 300]`, `//TEXT[contains(@text, 'Hello')]` |
+
+### What does NOT exist
+
+1. **System/instructions prompt for code generation** — no guidance for the AI on how to convert design → code
+2. **Component decomposition** — `analyze_clusters` finds repeated patterns, but doesn't determine component boundaries, props, variants, slots
+3. **Design token → CSS variable mapping** — `list_variables` returns raw Figma variables, but nothing maps them to `--color-primary`, `var(--spacing-4)`, etc.
+4. **Target stack awareness** — no concept of "this project uses Vue 3 + Tailwind" vs "React + CSS Modules"
+5. **Production JSX output** — `export-jsx.ts` tailwind format produces unstyled `<div>` soup without component structure, prop interfaces, or framework idioms
+6. **Verification** — no way to compare generated code output against the design visually
+
+---
+
+## Architecture
+
+```
+.fig design file
+      │
+      ▼
+┌──────────────────────────────────────────────────────────────┐
+│  PHASE 1: EXTRACTION  (tools exist)                          │
+│                                                              │
+│  get_page_tree → full structure                              │
+│  get_components → component inventory                        │
+│  list_variables → design tokens                              │
+│  analyze_colors/typography/spacing → design system snapshot   │
+│  analyze_clusters → repeated patterns                        │
+│  describe → semantic roles per node                          │
+│  get_jsx → structural JSX                                    │
+│  export_svg → vector assets                                  │
+│  export_image → screenshots for verification                 │
+└──────────────┬───────────────────────────────────────────────┘
+               │
+               ▼
+┌──────────────────────────────────────────────────────────────┐
+│  PHASE 2: DECOMPOSITION  (needs: prompt + possibly tools)    │
+│                                                              │
+│  Which nodes are screens vs components vs primitives?        │
+│  What props does each component accept?                      │
+│  Which components have variants (state, size, theme)?        │
+│  Which design variables map to which CSS tokens?             │
+│  What's the component hierarchy / dependency graph?          │
+└──────────────┬───────────────────────────────────────────────┘
+               │
+               ▼
+┌──────────────────────────────────────────────────────────────┐
+│  PHASE 3: CODE GENERATION  (needs: prompt)                   │
+│                                                              │
+│  Generate component files on target stack                    │
+│  Map design tokens → CSS/theme variables                     │
+│  Extract SVG assets for icons/illustrations                  │
+│  Wire up component hierarchy and props                       │
+│  Match typography, spacing, colors exactly                   │
+└──────────────┬───────────────────────────────────────────────┘
+               │
+               ▼
+┌──────────────────────────────────────────────────────────────┐
+│  PHASE 4: VERIFICATION  (needs: prompt guidance)             │
+│                                                              │
+│  Compare generated code visually against design              │
+│  Check token coverage, missing styles                        │
+│  Verify responsive behavior                                  │
+└──────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## What to Build
+
+### 1. MCP System Prompt for Code Generation
+
+A system prompt served when AI is asked to generate code from a design. Not the same as the design-chat prompt in `use-chat.ts`. This one instructs the AI to use extraction tools, decompose the design, and output production code.
+
+**Content outline:**
+
+```
+You are a frontend engineer generating production code from Figma designs.
+
+# Workflow
+
+1. UNDERSTAND the design
+   - get_page_tree → scan structure
+   - get_components → inventory reusable parts
+   - list_variables + list_collections → design tokens
+   - analyze_colors, analyze_typography, analyze_spacing → design system snapshot
+
+2. PLAN the component tree
+   - analyze_clusters → find repeated patterns
+   - describe on key nodes → semantic roles
+   - Determine: which frames are pages/screens, which are components, which are primitives
+   - Map Figma components → code components
+   - Identify props: text content, colors, sizes, visibility, children (slots)
+   - Identify variants: if component has states (hover, active, disabled), map to props
+
+3. EXTRACT design tokens
+   - list_variables → get all variables with values per mode (light/dark)
+   - Map to CSS custom properties or theme object
+   - Color variables → --color-{name}
+   - Number variables → --spacing-{name}, --radius-{name}, etc.
+   - Fonts → font-family definitions
+
+4. GENERATE code
+   - One component per file
+   - Use get_jsx on each component to read structure
+   - Use export_svg for vector icons/illustrations
+   - Apply design tokens as CSS variables / theme references
+   - Match pixel values exactly: font sizes, spacing, radii, colors
+   - Framework-specific:
+     - React: functional components, TypeScript props interface, named exports
+     - Vue: <script setup lang="ts">, defineProps, <template>
+     - Svelte: $props, <script lang="ts">
+   - Styling:
+     - Tailwind: utility classes, arbitrary values for exact matches
+     - CSS Modules: .module.css with variables
+     - Styled-components: tagged templates with theme
+
+5. VERIFY
+   - Re-read the design with describe
+   - Compare against generated code structure
+   - Check: all text content matches, all colors use tokens, spacing is correct
+   - List any deviations
+```
+
+### 2. Tool: `design_to_tokens`
+
+Automates Phase 2 token mapping. Could be a tool or a prompt-guided workflow.
+
+```typescript
+defineTool({
+  name: 'design_to_tokens',
+  description: 'Extract design tokens as CSS custom properties from Figma variables.',
+  params: {
+    format: { type: 'string', enum: ['css', 'tailwind', 'json'], description: 'Output format' }
+  },
+  execute: (figma, args) => {
+    const vars = figma.getLocalVariables()
+    const collections = figma.getLocalVariableCollections()
+    // Map variables to CSS custom properties
+    // Group by collection → mode → variable
+    // Output :root { --color-primary: #3b82f6; ... }
+    // Or tailwind.config.ts theme extension
+    // Or JSON token file
+  }
+})
+```
+
+### 3. Tool: `design_to_component_map`
+
+Automates Phase 2 decomposition. Analyzes the document and returns a structured component map.
+
+```typescript
+defineTool({
+  name: 'design_to_component_map',
+  description: 'Analyze document structure and return a component decomposition map.',
+  params: {
+    page: { type: 'string', description: 'Page name to analyze' },
+    depth: { type: 'number', description: 'Max nesting depth (default: 3)' }
+  },
+  execute: (figma, args) => {
+    // 1. Get all COMPONENT/COMPONENT_SET nodes
+    // 2. For each, analyze: name, variants, instance count, props (overridden fields)
+    // 3. Get all top-level frames that aren't components → these are screens/pages
+    // 4. For each screen, walk tree and record which components are used where
+    // Return:
+    // {
+    //   components: [{ id, name, variants, props, instanceCount, usedIn }],
+    //   screens: [{ id, name, components: [refs] }],
+    //   tokens: { colors: [...], typography: [...], spacing: [...] }
+    // }
+  }
+})
+```
+
+### 4. Enhanced `get_jsx` with Production Format
+
+Add a third format to `export-jsx.ts` that outputs framework-aware code:
+
+```typescript
+// format: 'react' | 'vue' | 'svelte'
+// Uses component names from Figma, maps design tokens, adds prop interfaces
+```
+
+Or this could be entirely prompt-driven, using existing `get_jsx` output as input and letting the AI transform it.
+
+### 5. MCP Prompt File Serving
+
+The MCP server needs a way to serve the code generation prompt. Options:
+
+**Option A: Bake into system prompt** — The MCP server's `createServer()` sets instructions in server metadata. External AI clients (Claude Code, Cursor, etc.) receive it automatically.
+
+**Option B: Dedicated tool** — `get_codegen_guidelines` tool that returns the prompt text. AI calls it when code generation is requested.
+
+**Option C: MCP Resource** — Serve as an MCP resource (`prompts/codegen`) that clients can read.
+
+Recommendation: **Option A** — system prompt in MCP server metadata + **Option B** as fallback for clients that don't read server instructions.
+
+---
+
+## What NOT to Build
+
+1. **Framework-specific design-generation prompts** — those are for generating designs, not code. We already have the design-chat prompt.
+
+2. **Batch operation DSL** — we have `render` with JSX + 88 atomic tools, no need for a custom batch language.
+
+3. **Hardcoded framework templates** — Don't bake React/Vue/Svelte templates into tools. Let the AI generate idiomatic code guided by the prompt. The prompt tells it the target stack; the AI writes the code.
+
+4. **Style guide / inspiration system** — That's for design generation, not code generation. Out of scope.
+
+---
+
+## Implementation Order
+
+1. **Write the system prompt** — the code generation instruction document. Test with MCP + Claude Code on a real .fig file.
+2. **Add `design_to_tokens` tool** — deterministic token extraction, CSS/Tailwind/JSON output.
+3. **Add `design_to_component_map` tool** — structural component decomposition.
+4. **Integrate prompt into MCP server** — serve via server instructions + tool fallback.
+5. **Test & iterate** — run on real designs, evaluate output quality.
+
+Step 1 is the highest leverage: a good prompt with existing tools will already produce usable code. Steps 2-3 improve quality by reducing AI guesswork.
diff --git a/docs/mcp-codegen-plan.md b/docs/mcp-codegen-plan.md
new file mode 100644
index 000000000..1f5043ca4
--- /dev/null
+++ b/docs/mcp-codegen-plan.md
@@ -0,0 +1,97 @@
+# MCP Codegen Pipeline — Implementation Plan
+
+## What's Done
+
+Branch `feat/mcp-codegen` (off `57eaf87`).
+
+### New Files
+
+- `packages/core/src/tools/codegen.ts` — 3 MCP tools:
+  - `design_to_tokens` — extracts Figma variables as CSS/Tailwind/JSON, resolves aliases, handles multi-mode
+  - `design_to_component_map` — analyzes document for screens, components (variants, props, instance counts), dependency overview
+  - `get_codegen_prompt` — returns the codegen system prompt (lazy `await import('node:fs/promises')` to avoid Vite browser externalization error)
+- `packages/core/src/tools/prompts/codegen.md` — 5-step workflow prompt (~8KB):
+  1. Survey (page tree, components, variables, colors, typography, spacing)
+  2. Decompose (clusters, describe, get_jsx → component map)
+  3. Extract tokens (stack-aware: Tailwind → only semantic color CSS vars; CSS → full vars)
+  4. Generate code (bottom-up, one file per component, interactive states)
+  5. Verify (re-check against design)
+- `packages/core/src/tools/registry.ts` — 3 tools registered in `ALL_TOOLS` (now 91 total)
+- `docs/design-to-code-overview.md` — architecture overview
+
+### Design Decisions
+
+- **No MCP server instructions** — prompt delivered via `get_codegen_prompt` tool only (no 8KB overhead per request)
+- **Lazy fs import** — `await import('node:fs/promises')` inside function body to avoid Vite `Module "node:fs" has been externalized` crash in browser bundle
+- **Tailwind token strategy** — CSS custom properties only for semantic colors; Tailwind utilities for spacing/font/radius (avoids `--font-bold`, `--text-sm` conflicts with Tailwind v4 internals)
+- **No modifications to existing tools** — `get_jsx`, `describe`, `analyze_*` used as-is
+
+### Tested
+
+- MCP HTTP server (`http://127.0.0.1:3100/mcp`) — all 3 new tools callable
+- End-to-end with `lol.fig` (Movie Card, 390×1823, Inter font, dark theme, 164 nodes):
+  - Full pipeline: survey → decompose → tokens → generate → verify
+  - Generated 10 Vue 3 + Tailwind components + semantic color tokens
+  - Visual test in just-bun dev server
+
+## What's Left
+
+### Phase 1 — Tailwind HTML Export (high value, low effort)
+
+Add `format` parameter to `get_jsx` tool:
+- `"openpencil"` (default) — current round-trip JSX
+- `"tailwind"` — HTML with Tailwind v4 utility classes
+
+The renderer already exists (`export-jsx.ts` → `collectTailwindClasses`), just not exposed through the tool params. One change in `read.ts`.
+
+This gives the LLM ready-to-use HTML with correct Tailwind classes directly from MCP — drastically reduces hallucination in generated code.
+
+### Phase 2 — Prompt Improvements
+
+- [ ] **Multi-file output format** — prompt should specify how to structure output when generating multiple files (fenced blocks with filenames)
+- [ ] **Framework adapters** — framework-specific sections in prompt (Vue `<script setup>` boilerplate, React hooks patterns, Svelte `$props()`)
+- [ ] **Image handling** — prompt guidance on when to use `export_svg` vs `export_png`, how to reference assets in generated code
+- [ ] **Responsive** — breakpoint detection from frame widths, responsive class generation
+
+### Phase 3 — Advanced Tools
+
+- [ ] **`design_to_html`** — full page HTML + Tailwind from a frame, using the existing tailwind renderer + semantic grouping. Essentially `get_jsx format=tailwind` but with smarter HTML tag selection (nav, header, main, section, article, button)
+- [ ] **`design_to_styles`** — extract complete stylesheet (CSS custom properties for all tokens, not just Figma variables but also inferred from analyze_colors/typography)
+- [ ] **`compare_design_code`** — given generated code and node ID, produce a diff of what's missing or wrong
+
+### Phase 4 — Integration
+
+- [ ] Pi skill for open-pencil MCP (`~/.pi/agent/skills/open-pencil/SKILL.md`) — DONE, needs testing with real workflow
+- [ ] VS Code extension integration — connect open-pencil MCP to the extension's AI chat
+- [ ] Batch mode — process multiple frames/pages in one go
+
+## Architecture
+
+```
+┌─────────────────────┐
+│   AI Agent (LLM)    │
+│                     │
+│  reads codegen.md   │
+│  calls MCP tools    │
+│  generates code     │
+└─────────┬───────────┘
+          │ MCP (HTTP SSE)
+┌─────────▼───────────┐
+│   MCP Server        │
+│   :3100/mcp         │
+├─────────────────────┤
+│ Survey tools        │  get_page_tree, get_components,
+│                     │  list_variables, list_collections,
+│                     │  analyze_colors, analyze_typography,
+│                     │  analyze_spacing
+├─────────────────────┤
+│ Decompose tools     │  analyze_clusters, describe, get_jsx,
+│                     │  design_to_component_map
+├─────────────────────┤
+│ Token tools         │  design_to_tokens, list_variables
+├─────────────────────┤
+│ Codegen tools       │  get_codegen_prompt, export_svg
+├─────────────────────┤
+│ Core                │  .fig parser, scene graph, renderers
+└─────────────────────┘
+```
diff --git a/lol.fig b/lol.fig
new file mode 100644
index 0000000000000000000000000000000000000000..fe134ee6923207209af5b1cd1f59a10f4ad49369
GIT binary patch
literal 24779
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
A4FCWD

literal 0
HcmV?d00001

diff --git a/packages/core/src/tools/codegen.ts b/packages/core/src/tools/codegen.ts
new file mode 100644
index 000000000..19a882339
--- /dev/null
+++ b/packages/core/src/tools/codegen.ts
@@ -0,0 +1,446 @@
+import { colorToHex } from '../color'
+
+import { defineTool } from './schema'
+
+import type { Color } from '../types'
+import type { FigmaAPI } from '../figma-api'
+import type { Variable, VariableCollection, VariableValue, SceneNode } from '../scene-graph'
+
+function slugify(name: string): string {
+  return name
+    .replace(/\//g, '-')
+    .replace(/\s+/g, '-')
+    .replace(/[^a-zA-Z0-9-]/g, '')
+    .replace(/-+/g, '-')
+    .replace(/^-|-$/g, '')
+    .toLowerCase()
+}
+
+function toCamelCase(name: string): string {
+  return slugify(name).replace(/-([a-z])/g, (_, c) => c.toUpperCase())
+}
+
+function isColor(value: VariableValue): value is Color {
+  return typeof value === 'object' && value !== null && 'r' in value && 'g' in value && 'b' in value
+}
+
+function isAlias(value: VariableValue): value is { aliasId: string } {
+  return typeof value === 'object' && value !== null && 'aliasId' in value
+}
+
+function resolveValue(
+  value: VariableValue,
+  variables: Map<string, Variable>,
+  visited = new Set<string>()
+): VariableValue {
+  if (!isAlias(value)) return value
+  if (visited.has(value.aliasId)) return value
+  visited.add(value.aliasId)
+  const target = variables.get(value.aliasId)
+  if (!target) return value
+  const modeId = Object.keys(target.valuesByMode)[0]
+  if (!modeId) return value
+  return resolveValue(target.valuesByMode[modeId], variables, visited)
+}
+
+function formatCSSValue(value: VariableValue, variables: Map<string, Variable>): string {
+  const resolved = resolveValue(value, variables)
+  if (isColor(resolved)) return colorToHex(resolved)
+  if (typeof resolved === 'number') return String(resolved)
+  if (typeof resolved === 'string') return resolved
+  if (typeof resolved === 'boolean') return resolved ? '1' : '0'
+  if (isAlias(resolved)) return `/* unresolved alias: ${resolved.aliasId} */`
+  return String(resolved)
+}
+
+interface TokenEntry {
+  name: string
+  cssVar: string
+  type: string
+  values: Record<string, string>
+}
+
+function buildTokens(
+  variables: Variable[],
+  collections: VariableCollection[],
+  allVars: Map<string, Variable>
+): { tokens: TokenEntry[]; modes: { id: string; name: string; collectionName: string }[] } {
+  const collectionMap = new Map<string, VariableCollection>()
+  for (const c of collections) collectionMap.set(c.id, c)
+
+  const modes: { id: string; name: string; collectionName: string }[] = []
+  const seenModes = new Set<string>()
+  for (const c of collections) {
+    for (const m of c.modes) {
+      if (!seenModes.has(m.modeId)) {
+        seenModes.add(m.modeId)
+        modes.push({ id: m.modeId, name: m.name, collectionName: c.name })
+      }
+    }
+  }
+
+  const tokens: TokenEntry[] = []
+  for (const v of variables) {
+    const col = collectionMap.get(v.collectionId)
+    const prefix = col ? slugify(col.name) : 'token'
+    const cssVar = `--${prefix}-${slugify(v.name)}`
+
+    const values: Record<string, string> = {}
+    for (const [modeId, val] of Object.entries(v.valuesByMode)) {
+      values[modeId] = formatCSSValue(val, allVars)
+    }
+
+    tokens.push({ name: v.name, cssVar, type: v.type, values })
+  }
+
+  return { tokens, modes }
+}
+
+function renderCSS(
+  tokens: TokenEntry[],
+  modes: { id: string; name: string; collectionName: string }[]
+): string {
+  if (tokens.length === 0) return '/* No design tokens found */\n'
+
+  const defaultModeId = modes[0]?.id
+  const lines: string[] = [':root {']
+
+  for (const t of tokens) {
+    const val = t.values[defaultModeId ?? ''] ?? Object.values(t.values)[0] ?? ''
+    lines.push(`  ${t.cssVar}: ${val};`)
+  }
+  lines.push('}')
+
+  for (const mode of modes.slice(1)) {
+    const className = slugify(mode.name)
+    lines.push('')
+    lines.push(`/* ${mode.collectionName} / ${mode.name} */`)
+    lines.push(`.${className} {`)
+    for (const t of tokens) {
+      const val = t.values[mode.id]
+      if (val !== undefined) lines.push(`  ${t.cssVar}: ${val};`)
+    }
+    lines.push('}')
+  }
+
+  return lines.join('\n') + '\n'
+}
+
+function renderTailwindTheme(
+  tokens: TokenEntry[],
+  modes: { id: string; name: string }[]
+): string {
+  const defaultModeId = modes[0]?.id
+  const colors: Record<string, string> = {}
+  const spacing: Record<string, string> = {}
+  const other: Record<string, string> = {}
+
+  for (const t of tokens) {
+    const key = toCamelCase(t.name)
+    const val = t.values[defaultModeId ?? ''] ?? Object.values(t.values)[0] ?? ''
+    if (t.type === 'COLOR') colors[key] = val
+    else if (t.type === 'FLOAT') spacing[key] = `${val}px`
+    else other[key] = val
+  }
+
+  const theme: Record<string, unknown> = {}
+  if (Object.keys(colors).length > 0) theme.colors = colors
+  if (Object.keys(spacing).length > 0) theme.spacing = spacing
+
+  return `// Auto-extracted from Figma design tokens
+export const designTokens = ${JSON.stringify(theme, null, 2)} as const
+`
+}
+
+function renderJSON(
+  tokens: TokenEntry[],
+  modes: { id: string; name: string }[]
+): string {
+  const result: Record<string, Record<string, string>> = {}
+
+  for (const mode of modes) {
+    const modeTokens: Record<string, string> = {}
+    for (const t of tokens) {
+      const val = t.values[mode.id]
+      if (val !== undefined) modeTokens[t.cssVar] = val
+    }
+    result[mode.name] = modeTokens
+  }
+
+  return JSON.stringify(result, null, 2)
+}
+
+export const designToTokens = defineTool({
+  name: 'design_to_tokens',
+  description:
+    'Extract design tokens from Figma variables as CSS custom properties, Tailwind theme config, or JSON. Resolves aliases, handles multiple modes (light/dark).',
+  params: {
+    format: {
+      type: 'string',
+      description: 'Output format',
+      enum: ['css', 'tailwind', 'json'],
+      default: 'css'
+    },
+    collection: {
+      type: 'string',
+      description: 'Filter by collection name (substring, case-insensitive)'
+    },
+    type: {
+      type: 'string',
+      description: 'Filter by variable type',
+      enum: ['COLOR', 'FLOAT', 'STRING', 'BOOLEAN']
+    }
+  },
+  execute: (figma, args) => {
+    const format = args.format ?? 'css'
+
+    let variables = figma.getLocalVariables()
+    const collections = figma.getLocalVariableCollections()
+    const allVars = new Map<string, Variable>()
+    for (const v of variables) allVars.set(v.id, v)
+
+    if (args.collection) {
+      const q = args.collection.toLowerCase()
+      const matchingIds = new Set(
+        collections.filter((c) => c.name.toLowerCase().includes(q)).map((c) => c.id)
+      )
+      variables = variables.filter((v) => matchingIds.has(v.collectionId))
+    }
+
+    if (args.type) {
+      variables = variables.filter((v) => v.type === args.type)
+    }
+
+    if (variables.length === 0) {
+      return { output: '/* No matching variables found */', tokenCount: 0 }
+    }
+
+    const { tokens, modes } = buildTokens(variables, collections, allVars)
+
+    let output: string
+    if (format === 'tailwind') output = renderTailwindTheme(tokens, modes)
+    else if (format === 'json') output = renderJSON(tokens, modes)
+    else output = renderCSS(tokens, modes)
+
+    return { output, tokenCount: tokens.length, modeCount: modes.length }
+  }
+})
+
+interface ComponentInfo {
+  id: string
+  name: string
+  type: string
+  width: number
+  height: number
+  variants: string[]
+  instanceCount: number
+  propCandidates: string[]
+  usedOnScreens: string[]
+}
+
+interface ScreenInfo {
+  id: string
+  name: string
+  width: number
+  height: number
+  componentRefs: { id: string; name: string; count: number }[]
+  topLevelSections: number
+}
+
+function collectInstanceCounts(
+  figma: FigmaAPI,
+  componentIds: Set<string>
+): Map<string, number> {
+  const counts = new Map<string, number>()
+  const page = figma.currentPage
+
+  page.findAll((node) => {
+    if (node.type !== 'INSTANCE') return false
+    const raw = figma.graph.getNode(node.id)
+    if (!raw?.componentId) return false
+    if (componentIds.has(raw.componentId)) {
+      counts.set(raw.componentId, (counts.get(raw.componentId) ?? 0) + 1)
+    }
+    return false
+  })
+
+  return counts
+}
+
+function detectPropCandidates(node: SceneNode, graph: import('../scene-graph').SceneGraph): string[] {
+  const props: string[] = []
+
+  for (const childId of node.childIds) {
+    const child = graph.getNode(childId)
+    if (!child) continue
+    if (child.type === 'TEXT' && child.text) {
+      props.push(`text:${child.name}`)
+    }
+    if (child.fills.some((f) => f.visible && f.type === 'SOLID')) {
+      const hasBoundVar = Object.keys(child.boundVariables).length > 0
+      if (hasBoundVar) props.push(`color:${child.name}`)
+    }
+    if (child.type === 'FRAME' || child.type === 'GROUP') {
+      props.push(`slot:${child.name}`)
+    }
+  }
+
+  return props
+}
+
+function detectVariants(
+  componentNode: SceneNode,
+  graph: import('../scene-graph').SceneGraph
+): string[] {
+  if (componentNode.type !== 'COMPONENT_SET') return []
+
+  const variants: string[] = []
+  for (const childId of componentNode.childIds) {
+    const child = graph.getNode(childId)
+    if (child?.type === 'COMPONENT') variants.push(child.name)
+  }
+  return variants
+}
+
+function buildScreenInfo(
+  figma: FigmaAPI,
+  frameNode: SceneNode,
+  componentIds: Set<string>
+): ScreenInfo {
+  const refs = new Map<string, { name: string; count: number }>()
+  let topLevelSections = 0
+
+  const walk = (nodeId: string) => {
+    const node = figma.graph.getNode(nodeId)
+    if (!node) return
+    if (node.type === 'SECTION') topLevelSections++
+    if (node.type === 'INSTANCE' && node.componentId && componentIds.has(node.componentId)) {
+      const entry = refs.get(node.componentId)
+      if (entry) entry.count++
+      else {
+        const comp = figma.graph.getNode(node.componentId)
+        refs.set(node.componentId, { name: comp?.name ?? node.componentId, count: 1 })
+      }
+    }
+    for (const childId of node.childIds) walk(childId)
+  }
+
+  for (const childId of frameNode.childIds) walk(childId)
+
+  return {
+    id: frameNode.id,
+    name: frameNode.name,
+    width: frameNode.width,
+    height: frameNode.height,
+    componentRefs: [...refs.entries()].map(([id, { name, count }]) => ({ id, name, count })),
+    topLevelSections
+  }
+}
+
+export const designToComponentMap = defineTool({
+  name: 'design_to_component_map',
+  description:
+    'Analyze the document and return a structured component decomposition: components (with variants, props, instance counts), screens, and a dependency overview.',
+  params: {
+    page: {
+      type: 'string',
+      description: 'Page name to analyze (default: current page)'
+    }
+  },
+  execute: (figma, args) => {
+    if (args.page) {
+      const target = figma.root.children.find((p) => p.name === args.page)
+      if (target) figma.currentPage = target
+      else return { error: `Page "${args.page}" not found` }
+    }
+
+    const page = figma.currentPage
+    const components: ComponentInfo[] = []
+    const componentIds = new Set<string>()
+
+    page.findAll((node) => {
+      if (node.type !== 'COMPONENT' && node.type !== 'COMPONENT_SET') return false
+      const raw = figma.graph.getNode(node.id)
+      if (!raw) return false
+
+      componentIds.add(raw.id)
+      components.push({
+        id: raw.id,
+        name: raw.name,
+        type: raw.type,
+        width: raw.width,
+        height: raw.height,
+        variants: detectVariants(raw, figma.graph),
+        instanceCount: 0,
+        propCandidates: detectPropCandidates(raw, figma.graph),
+        usedOnScreens: []
+      })
+      return false
+    })
+
+    const instanceCounts = collectInstanceCounts(figma, componentIds)
+    for (const comp of components) {
+      comp.instanceCount = instanceCounts.get(comp.id) ?? 0
+    }
+
+    const screens: ScreenInfo[] = []
+    const topFrames = page.children.filter((child) => {
+      const raw = figma.graph.getNode(child.id)
+      if (!raw) return false
+      if (raw.type === 'COMPONENT' || raw.type === 'COMPONENT_SET') return false
+      if (raw.type === 'SECTION') return false
+      return raw.width >= 200 && raw.height >= 200
+    })
+
+    for (const frame of topFrames) {
+      const raw = figma.graph.getNode(frame.id)
+      if (!raw) continue
+      const screen = buildScreenInfo(figma, raw, componentIds)
+      screens.push(screen)
+
+      for (const ref of screen.componentRefs) {
+        const comp = components.find((c) => c.id === ref.id)
+        if (comp) comp.usedOnScreens.push(screen.name)
+      }
+    }
+
+    const sections: { id: string; name: string; childCount: number }[] = []
+    for (const child of page.children) {
+      const raw = figma.graph.getNode(child.id)
+      if (raw?.type === 'SECTION') {
+        sections.push({ id: raw.id, name: raw.name, childCount: raw.childIds.length })
+      }
+    }
+
+    return {
+      componentCount: components.length,
+      screenCount: screens.length,
+      components: components.sort((a, b) => b.instanceCount - a.instanceCount),
+      screens,
+      sections
+    }
+  }
+})
+
+let _codegenPrompt: string | null = null
+
+export async function loadCodegenPrompt(): Promise<string> {
+  if (_codegenPrompt) return _codegenPrompt
+  const { readFile } = await import('node:fs/promises')
+  const { dirname, join } = await import('node:path')
+  const { fileURLToPath } = await import('node:url')
+  const __dirname = dirname(fileURLToPath(import.meta.url))
+  _codegenPrompt = await readFile(join(__dirname, 'prompts', 'codegen.md'), 'utf-8')
+  return _codegenPrompt
+}
+
+export const getCodegenPrompt = defineTool({
+  name: 'get_codegen_prompt',
+  description:
+    'Get the design-to-code generation guidelines. Call this before generating frontend code from a Figma design to understand the recommended workflow and patterns.',
+  params: {},
+  execute: async () => {
+    const prompt = await loadCodegenPrompt()
+    return { prompt }
+  }
+})
diff --git a/packages/core/src/tools/prompts/codegen.md b/packages/core/src/tools/prompts/codegen.md
new file mode 100644
index 000000000..fb2a4b2ae
--- /dev/null
+++ b/packages/core/src/tools/prompts/codegen.md
@@ -0,0 +1,231 @@
+# Design to Code
+
+You convert Figma designs into production frontend code. You have full access to the design document through tools. Never guess — always read the actual design data.
+
+## Workflow
+
+### Step 1 — Survey
+
+Understand the full picture before writing any code.
+
+```
+get_page_tree          → document structure, all top-level frames
+get_components         → reusable components defined by the designer
+list_variables         → design tokens (colors, numbers, strings, booleans)
+list_collections       → variable collections and modes (light/dark, density, etc.)
+analyze_colors         → color palette, frequencies, which colors use variables
+analyze_typography     → font stacks, sizes, weights in use
+analyze_spacing        → gap and padding values, grid compliance
+```
+
+After this step you should know:
+- How many screens/pages the design has
+- What components exist
+- What the token system looks like (or if there is none)
+- The typographic scale
+- The spacing system (4px grid? 8px grid? irregular?)
+
+### Step 2 — Decompose
+
+Identify the component architecture.
+
+```
+analyze_clusters       → find repeated visual patterns that should be components
+describe  (per node)   → semantic role, layout direction, visual properties, issues
+get_jsx   (per node)   → structural JSX to understand nesting and layout
+```
+
+Build a component map:
+- **Screens** — top-level frames that represent pages/views
+- **Components** — COMPONENT/COMPONENT_SET nodes or repeated patterns from analyze_clusters
+- **Primitives** — leaf elements (text, icons, dividers) that don't need their own component file
+
+For each component determine:
+- **Props** — what content varies between instances (text, color, icon, visibility)
+- **Variants** — if the component has multiple states (default/hover/active, small/medium/large)
+- **Slots** — where child content is injected
+
+### Step 3 — Extract tokens
+
+```
+list_variables         → all variables with values per mode
+list_collections       → collection structure and mode names
+```
+
+Map design variables to code tokens. The approach depends on the target stack:
+
+#### Tailwind projects
+
+Do NOT create CSS custom properties for font sizes, font weights, spacing, or border radius — Tailwind has its own system for these. Use Tailwind utility classes directly:
+- Font sizes → `text-[13px]`, `text-sm`, `text-base`, etc.
+- Font weights → `font-bold`, `font-medium`, `font-[600]`
+- Spacing → `gap-3`, `p-4`, `px-5`, `py-[14px]`, or arbitrary `gap-[12px]`
+- Border radius → `rounded-xl`, `rounded-[14px]`, `rounded-full`
+
+Only create CSS custom properties for **semantic colors** — these are the values that would change across themes. Name them to avoid conflicts with Tailwind's built-in variables (do NOT use names like `--font-bold`, `--text-sm`, `--radius-lg`):
+
+```css
+:root {
+  --movie-bg: #0F0F1A;
+  --movie-surface: #1A1A2E;
+  --movie-accent: #7C3AED;
+  --movie-text: #FFFFFF;
+  --movie-text-dim: #FFFFFF80;
+}
+```
+
+Reference in Tailwind classes: `bg-[var(--movie-bg)]`, `text-[var(--movie-text)]`
+
+#### CSS Modules / plain CSS projects
+
+Create CSS custom properties for all token categories (colors, spacing, typography, radius). Use a project-specific prefix to avoid collisions:
+
+```css
+:root {
+  --app-color-bg: #0F0F1A;
+  --app-space-sm: 4px;
+  --app-text-sm: 12px;
+  --app-radius-md: 8px;
+}
+```
+
+#### No design variables in the file
+
+If the design has no Figma variables, extract implicit tokens from `analyze_colors` and `analyze_typography` output — identify the de facto palette and type scale. For Tailwind projects, only extract semantic colors as CSS custom properties; use Tailwind utilities for everything else.
+
+#### Multi-mode collections (light/dark)
+
+- Generate token values for each mode
+- Use CSS custom properties with class-based switching (`.dark { ... }`)
+
+### Step 4 — Generate code
+
+For each component, bottom-up (primitives first, then composites, then screens):
+
+```
+get_jsx  id=<component_id>   → read structure
+describe id=<component_id>   → understand semantic role
+export_svg ids=[<icon_ids>]  → extract vector assets
+```
+
+**Rules:**
+- One component per file
+- Component name comes from the Figma node name, converted to PascalCase
+- Props interface reflects the variable content identified in Step 2
+- Use design tokens from Step 3 for semantic colors
+- For Tailwind: use utility classes directly for spacing, font sizes, weights, radius — do NOT wrap them in `var()` indirection
+- Match measurements exactly: font sizes, spacing, border radii, colors
+- Use auto-layout data to determine flex direction, gap, padding, alignment
+- Absolute positioning only when `layoutPositioning` is `ABSOLUTE` or layout mode is `NONE`
+- If a node has `clipsContent: true`, use `overflow: hidden`
+- Text nodes: preserve font family, size, weight, line height, letter spacing, alignment
+- Images/illustrations: use `export_svg` for vectors, placeholder `<img>` for raster
+
+**Interactive states:**
+
+Figma designs rarely include hover/active/focus states unless the component has explicit variants for them. Always add sensible interactive feedback to clickable elements:
+
+- **Buttons (primary):** `hover:brightness-110 active:brightness-90 transition-all`
+- **Buttons (secondary/ghost):** `hover:bg-white/[0.12] active:bg-white/[0.06] transition-colors`
+- **Icon buttons:** `hover:bg-white/[0.15] active:scale-95 transition-all`
+- **Cards/list items (if clickable):** `hover:bg-white/[0.04] transition-colors`
+- **Links/text buttons:** `hover:underline` or `hover:opacity-80`
+- **All interactive elements:** add `cursor-pointer` and `select-none`
+- **Focus visible:** add `focus-visible:ring-2 focus-visible:ring-offset-2` with accent color for accessibility
+
+If the design HAS explicit hover/active variants (COMPONENT_SET with state property), use those exact styles instead of defaults above.
+
+### Step 5 — Verify
+
+After generating code, verify against the design:
+
+```
+describe id=<root>     → re-check structure matches
+get_jsx  id=<root>     → compare JSX structure with generated component tree
+```
+
+Check:
+- All text content from the design appears in the code
+- All colors reference tokens or use correct hex/opacity values
+- Spacing values match the design
+- Component hierarchy matches the design's node tree
+- No nodes were skipped or merged incorrectly
+
+List any deviations with rationale.
+
+## Target stack
+
+The user specifies the target stack. Adapt code generation accordingly:
+
+**React + Tailwind** — functional components, TypeScript, utility classes, `className`
+**React + CSS Modules** — functional components, TypeScript, `.module.css` files, `styles.className`
+**Vue 3 + Tailwind** — `<script setup lang="ts">`, `defineProps`, `<template>`, Tailwind utility classes
+**Vue 3 + CSS** — `<script setup lang="ts">`, `defineProps`, `<template>`, scoped `<style>`
+**Svelte + Tailwind** — `<script lang="ts">`, `$props()`, Tailwind utility classes
+**HTML + CSS** — semantic HTML, BEM or utility classes, CSS custom properties
+
+If the user hasn't specified a stack, ask before generating code.
+
+## Component file structure
+
+```
+components/
+  Button.tsx          (or .vue, .svelte)
+  Card.tsx
+  Header.tsx
+  ...
+tokens.css              (semantic color tokens only, for Tailwind projects)
+pages/
+  HomePage.tsx        (or routes, views — depends on framework)
+assets/
+  icon-arrow.svg
+  icon-check.svg
+```
+
+## Common patterns
+
+**Auto-layout → Flexbox**
+- `layoutMode: HORIZONTAL` → `flex-direction: row`
+- `layoutMode: VERTICAL` → `flex-direction: column`
+- `itemSpacing` → `gap`
+- `paddingTop/Right/Bottom/Left` → `padding`
+- `primaryAxisAlign: CENTER` → `justify-content: center`
+- `counterAxisAlign: CENTER` → `align-items: center`
+- `layoutWrap: WRAP` → `flex-wrap: wrap`
+- `primaryAxisSizing: HUG` → no explicit size on primary axis (content-sized)
+- `primaryAxisSizing: FILL` → `flex: 1` or `width: 100%` depending on context
+- `counterAxisSizing: FILL` → `align-self: stretch` or explicit `width/height: 100%`
+
+**Grid layout**
+- `layoutMode: GRID` → `display: grid`
+- `gridTemplateColumns` → `grid-template-columns`
+- `gridTemplateRows` → `grid-template-rows`
+- `gridColumnGap/gridRowGap` → `column-gap/row-gap`
+
+**Sizing**
+- `layoutGrow > 0` → `flex-grow: 1`
+- `layoutAlignSelf: STRETCH` → cross-axis fill
+- Fixed width/height only when sizing mode is `FIXED`
+
+**Corner radius**
+- `independentCorners: true` → per-corner border-radius
+- `cornerRadius` → uniform border-radius
+
+**Effects**
+- `DROP_SHADOW` → `box-shadow`
+- `INNER_SHADOW` → `box-shadow: inset ...`
+- `LAYER_BLUR` → `filter: blur(...)`
+- `BACKGROUND_BLUR` → `backdrop-filter: blur(...)`
+
+**Text**
+- `fontFamily` → `font-family`
+- `fontSize` → `font-size`
+- `fontWeight` → `font-weight`
+- `lineHeight` → `line-height` (null = normal/auto)
+- `letterSpacing` → `letter-spacing`
+- `textAlignHorizontal` → `text-align`
+- `textAutoResize: WIDTH_AND_HEIGHT` → no explicit dimensions
+- `textAutoResize: HEIGHT` → fixed width, auto height
+- `textAutoResize: NONE` → fixed width and height
+- `textDecoration` → `text-decoration`
+- `textCase` → `text-transform`
diff --git a/packages/core/src/tools/registry.ts b/packages/core/src/tools/registry.ts
index d690553d9..7d0406c6f 100644
--- a/packages/core/src/tools/registry.ts
+++ b/packages/core/src/tools/registry.ts
@@ -36,6 +36,7 @@ import {
   diffCreate, diffShow, evalCode
 } from './analyze'
 import { describe } from './describe'
+import { designToTokens, designToComponentMap, getCodegenPrompt } from './codegen'
 
 export const ALL_TOOLS: ToolDef[] = [
   // Read
@@ -136,6 +137,10 @@ export const ALL_TOOLS: ToolDef[] = [
   diffCreate,
   diffShow,
   describe,
+  // Codegen
+  designToTokens,
+  designToComponentMap,
+  getCodegenPrompt,
   // Eval
   evalCode
 ]
diff --git a/packages/mcp/skills/open-pencil/SKILL.md b/packages/mcp/skills/open-pencil/SKILL.md
new file mode 100644
index 000000000..c7dd4f09b
--- /dev/null
+++ b/packages/mcp/skills/open-pencil/SKILL.md
@@ -0,0 +1,236 @@
+---
+name: open-pencil
+description: Design-to-code via OpenPencil MCP server. Opens .fig files, inspects design structure, extracts tokens, analyzes patterns, and generates frontend code (Vue/React/Svelte + Tailwind/CSS). Use when user asks to convert Figma designs to code, inspect .fig files, or extract design tokens.
+---
+
+# OpenPencil MCP — Design to Code
+
+## Prerequisites
+
+OpenPencil MCP server must be running:
+
+```bash
+cd /mnt/f/projects/openspec/dannote/open-pencil/packages/mcp
+bun src/http.ts &
+```
+
+Health check: `curl http://127.0.0.1:3100/health`
+
+## MCP Connection
+
+HTTP transport at `http://127.0.0.1:3100/mcp`. Session-based — initialize once, reuse session for all calls.
+
+```bash
+# Initialize
+curl -s -X POST http://127.0.0.1:3100/mcp \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json, text/event-stream" \
+  -D /tmp/mcp_headers.txt \
+  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2025-03-26","capabilities":{},"clientInfo":{"name":"pi","version":"1.0"}}}'
+
+# Extract session ID
+SESSION=$(grep -i 'mcp-session-id' /tmp/mcp_headers.txt | tr -d '\r' | awk '{print $2}')
+
+# Send initialized notification
+curl -s -X POST http://127.0.0.1:3100/mcp \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json, text/event-stream" \
+  -H "mcp-session-id: $SESSION" \
+  -d '{"jsonrpc":"2.0","method":"notifications/initialized"}'
+```
+
+### Calling Tools
+
+```bash
+curl -s -X POST http://127.0.0.1:3100/mcp \
+  -H "Content-Type: application/json" \
+  -H "Accept: application/json, text/event-stream" \
+  -H "mcp-session-id: $SESSION" \
+  -d '{"jsonrpc":"2.0","id":NNN,"method":"tools/call","params":{"name":"TOOL_NAME","arguments":{...}}}'
+```
+
+Response is SSE — parse with: `sed 's/^event: message$//' | sed 's/^data: //'`
+
+Result text is in: `result.content[0].text` (JSON string — parse twice for structured data).
+
+## Pipeline: Design → Code
+
+Follow these steps in order. Never guess — always read actual design data.
+
+### Step 1 — Open File & Survey
+
+```
+open_file        path=<.fig file>          → opens document, returns page list
+get_page_tree                               → full node hierarchy
+get_components                              → reusable Figma components
+design_to_tokens format="css"               → extract design variables
+analyze_colors   limit=20                   → color palette with frequencies
+analyze_typography                          → font stacks, sizes, weights
+analyze_spacing  grid=4                     → gap/padding values, grid compliance
+```
+
+After this step you know: screen count, component inventory, token system, type scale, spacing grid.
+
+### Step 2 — Decompose
+
+```
+analyze_clusters min_count=2                → repeated patterns → potential components
+describe         id=<node>                  → semantic role, layout, visual properties
+get_jsx          id=<node>                  → structural JSX (nesting, props, text content)
+design_to_component_map                     → screens, components, sections overview
+```
+
+Build component map: screens (top-level frames), components (repeated patterns or COMPONENT nodes), primitives (leaf text/icon nodes).
+
+### Step 3 — Extract Tokens
+
+For **Tailwind** stacks — only semantic colors as CSS custom properties:
+
+```css
+:root {
+  --app-bg: #0F0F1A;
+  --app-surface: #1A1A2E;
+  --app-accent: #7C3AED;
+  --app-text: #FFFFFF;
+  --app-text-dim: rgba(255, 255, 255, 0.5);
+}
+```
+
+Use Tailwind utilities directly for spacing (`gap-3`, `p-4`), font sizes (`text-[13px]`), weights (`font-bold`), radius (`rounded-xl`). Do NOT create CSS variables for these — they conflict with Tailwind v4 internals.
+
+For **CSS Modules / plain CSS** — variables for all categories with a project prefix.
+
+### Step 4 — Generate Code
+
+Bottom-up: primitives → components → screens. One file per component.
+
+For each node, call `get_jsx` and `describe` to read exact structure, then translate:
+
+| Figma concept | Code |
+|---|---|
+| `layoutMode: HORIZONTAL` | `flex flex-row` |
+| `layoutMode: VERTICAL` | `flex flex-col` |
+| `itemSpacing` | `gap-N` |
+| `paddingTop/Right/Bottom/Left` | `p-N` / `px-N py-N` / `pt-N pr-N ...` |
+| `primaryAxisAlign: CENTER` | `justify-center` |
+| `counterAxisAlign: CENTER` | `items-center` |
+| `layoutGrow > 0` | `flex-1` or `grow` |
+| `cornerRadius` | `rounded-N` |
+| `clipsContent: true` | `overflow-hidden` |
+| `opacity < 1` | `opacity-N` |
+| `layoutMode: NONE` | `relative` parent + `absolute` children |
+
+Interactive states (buttons, cards): always add `cursor-pointer`, `hover:`, `active:`, `transition-*` even if Figma has no hover variants.
+
+### Step 5 — Verify
+
+Re-check generated code against design: all text present, colors match, spacing correct, hierarchy preserved.
+
+## Tool Reference (91 tools)
+
+### File & Navigation
+| Tool | Params | Description |
+|---|---|---|
+| `open_file` | `path` | Open .fig/.figjam file |
+| `get_page_tree` | — | Node tree of current page |
+| `get_node` | `id` | Detailed node properties |
+| `find_nodes` | `name?, type?` | Find by name/type |
+| `get_selection` | — | Currently selected nodes |
+| `query` | `xpath` | XPath node query |
+
+### Read & Inspect
+| Tool | Params | Description |
+|---|---|---|
+| `get_jsx` | `id` | JSX representation of node tree |
+| `diff_jsx` | `from, to` | Structural diff between nodes |
+| `describe` | `id` | Semantic description: role, layout, issues |
+
+### Analysis
+| Tool | Params | Description |
+|---|---|---|
+| `analyze_colors` | `limit?` | Color palette with frequencies |
+| `analyze_typography` | — | Font families, sizes, weights |
+| `analyze_spacing` | `grid?` | Gaps, paddings, grid compliance |
+| `analyze_clusters` | `min_count?` | Repeated visual patterns |
+
+### Variables & Tokens
+| Tool | Params | Description |
+|---|---|---|
+| `list_variables` | `collection?` | All variables with values per mode |
+| `list_collections` | — | Variable collections and modes |
+| `get_components` | — | Component definitions |
+
+### Codegen Pipeline
+| Tool | Params | Description |
+|---|---|---|
+| `design_to_tokens` | `format` (css/tailwind/json) | Extract variables as code tokens |
+| `design_to_component_map` | — | Screens, components, sections overview |
+| `get_codegen_prompt` | — | Full codegen guidelines (6.7KB) |
+
+### Export
+| Tool | Params | Description |
+|---|---|---|
+| `export_svg` | `ids` | Export nodes as SVG |
+| `export_png` | `id, scale?` | Export node as PNG |
+
+### Create & Modify
+| Tool | Params | Description |
+|---|---|---|
+| `render_jsx` | `jsx, x?, y?` | Render JSX into scene graph |
+| `set_fill` | `id, color` | Set node fill |
+| `set_text` | `id, text` | Set text content |
+| `create_frame` | `width, height, ...` | Create frame node |
+
+(Full list: call `tools/list` on MCP endpoint)
+
+## Example Session
+
+```bash
+# 1. Open file
+open_file path="/path/to/design.fig"
+
+# 2. Survey
+get_page_tree
+analyze_colors limit=20
+analyze_typography
+analyze_spacing grid=4
+
+# 3. Inspect root frame
+get_jsx id="0:171"
+describe id="0:171"
+
+# 4. Inspect sections
+describe id="0:189"    # Content section
+get_jsx id="0:200"     # Stats component
+
+# 5. Find patterns
+analyze_clusters min_count=2
+
+# 6. Get codegen guidelines
+get_codegen_prompt
+
+# 7. Generate code based on collected data
+# → Write Vue/React components with Tailwind classes
+# → Create tokens.css with semantic color variables
+# → Match every measurement from the design exactly
+```
+
+## Stack-Specific Notes
+
+### Vue 3 + Tailwind
+- `<script setup lang="ts">`, `defineProps`, `<template>`
+- Tailwind utility classes, no scoped styles needed
+- CSS custom properties only for semantic colors in a global `tokens.css`
+- Reference: `bg-[var(--app-accent)]`, `text-[var(--app-text)]`
+
+### React + Tailwind
+- Functional components, TypeScript, `className`
+- Same token strategy as Vue
+
+### Vue 3 + CSS
+- `<script setup lang="ts">`, scoped `<style>`
+- CSS custom properties for all token categories
+
+### HTML + CSS
+- Semantic HTML, BEM classes
+- Full CSS custom property system