figma-optimizer-hook

A Claude Code hook that token-optimizes the official Figma MCP's get_design_context output — ~30% fewer tokens, no hallucinated UI, while keeping the official Figma plugin (and its auth) exactly as-is.

The official Figma Dev Mode MCP is great, but for design-to-code it burns a lot of tokens (verbose React+Tailwind, repeated class strings, un-deduplicated instances) and gives the model room to invent colors, component names and layout. This hook fixes both without replacing the Figma plugin: it runs as a PostToolUse hook that rewrites mcp__figma__get_design_context results into a compact, precision-annotated form before they reach the model.

• Keeps the official Figma plugin — it does all the connection, OAuth and fetching. No proxy, no second auth, no token, no desktop app.
• ~30% fewer tokens on a real dense screen (measured) — and lossless (every text string and design token preserved).
• Anti-hallucination flags the stock plugin doesn't provide (untokenizedValues, noAutoLayout, unresolvedInstances, …).
• Can never break the Figma tool. Any unexpected shape, parse failure, not-smaller result, or error → it emits nothing and the original output passes through untouched. It also never makes output larger.

Install

Quick (recommended)

npm i -g figma-optimizer-hook
figma-optimizer-hook install          # registers the hook in ./.claude/settings.json
#                       install -g     # …or in ~/.claude/settings.json (all projects)

Then restart Claude Code. That's it — get_design_context is now auto-optimized. (You must already have the official Figma MCP installed and authenticated.)

No install (npx)

npx figma-optimizer-hook install --npx   # registers a hook that runs via `npx -y figma-optimizer-hook`

Restart Claude Code. Zero global install; slightly slower per call (npx resolves the package each time).

Manual

Add this to .claude/settings.json (or ~/.claude/settings.json for all projects) and restart:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "mcp__figma__get_design_context",
        "hooks": [
          { "type": "command", "command": "npx -y figma-optimizer-hook" }
        ]
      }
    ]
  }
}

From source

git clone https://github.com/pavlealeksic/figma-optimizer-hook
cd figma-optimizer-hook
npm install && npm run build
node dist/hook.js install --local   # registers this checkout's path as the hook command

How it works

agent → mcp__figma__get_design_context → [Figma plugin: auth + fetch] → result
                                              │
                                   PostToolUse hook (this package)
                                   parse → dedup → precision-lint → serialize
                                              │
                                   updatedToolOutput (≈30% smaller) → agent

The output is a compact DSL (Format C by default): a @tokens table, a deduped $styles table, an indented node $tree, completeness @meta, and flags=…. Raw React/Tailwind is gone; the facts remain.

Configuration (env vars)

Set these in the hook's env in settings, or in your shell:

| Var | Default | Description | | --- | --- | --- | | FIGMA_OPTIMIZER_FORMAT | C | C (DSL tree + token table, recommended), A (min-token DSL), B (JSON, larger — opt-in). | | FIGMA_OPTIMIZER_DEBUG | — | Path to a log file; the hook appends one JSON line per call (tool, before/after tokens) for diagnostics. |

{ "type": "command", "command": "npx -y figma-optimizer-hook",
  "env": { "FIGMA_OPTIMIZER_FORMAT": "C", "FIGMA_OPTIMIZER_DEBUG": "/tmp/fig.log" } }

Output formats

A single normalized model is serialized three ways:

• C (default) — compact indented DSL tree + explicit @tokens table. Best precision-per-token.
• A — the DSL without the separate token table; smallest output.
• B — minified JSON. Zero parse risk but larger than the DSL — opt-in.

Safety

This hook is built so it can never harm the Figma tool. It only rewrites get_design_context results, mirrors the exact tool_response shape, and on any uncertainty (wrong tool, unknown shape, parse failure, not-smaller, error) emits nothing — the original output is used. Verified with a real-binary smoke test (empty/malformed/non-Figma inputs all pass through) and a unit-test suite.

Limitations

• Optimizes get_design_context only (the token sink). Other Figma tools pass through unchanged.
• It transforms what the plugin returns, so it can't add data the plugin omits (tokens are resolved from the inline var() names, not a separate get_variable_defs call).

Development

npm install
npm run build       # bundle dist/hook.js (tsup)
npm run typecheck   # tsc --noEmit
npm test            # vitest (parser, serializers, precision linter, compress, hook robustness)

License

MIT