如何用 Figma Spec Compressor 為 Cursor、Claude Code 等 AI 編輯器減少 95% 的 Figma REST API tokens

Connecting AI coding tools like Cursor Composer, Claude Code, or Google Antigravity to Figma is the holy grail of frontend engineering. You paste a Figma URL, and your AI writes pixel-perfect Tailwind components.

Except in practice, there's a huge catch: Figma's raw REST API is absurdly noisy.

In this article, I'll break down why raw Figma payloads explode context windows, how AST pruning reduces token counts by 80%–95%, and how you can run this as a native Model Context Protocol (MCP) server.

The Problem: The 200,000-Token Wall

When you query Figma's /v1/files/:key/nodes endpoint for an enterprise SaaS dashboard, you don't just get colors and typography. You get:

Absolute bounding box coordinates down to 6 decimal places for every single node.
Matrix transforms and vector paths for every decorative vector.
Redundant redline metadata, default styling flags, and invisible layout envelopes.

On an enterprise analytics dashboard with 646 nodes:

Raw Wire Payload: ~4.8 MB of JSON
Token Count: 189,485 BPE tokens (cl100k_base)
API Cost: ~$0.38 per single prompt call on frontier models
Latency: 15–25 seconds just for the model to parse the input

A single design frame consumes almost the entire 200k context window of modern LLMs, causing severe layout hallucinations and broken CSS.

The Solution: Semantic AST Pruning

To fix this, I engineered Figma Spec Compressor (Open Source on GitHub).

Instead of blindly dumping JSON into an LLM, it executes a 4-stage optimization pipeline:

Raw Figma JSON (189k tokens)
   │
   ▼
[1] Node Pruner (Drops invisible nodes, masks & deep redlines)
   │
   ▼
[2] Auto-Layout Translator (Maps flexbox, padding & fills to Tailwind)
   │
   ▼
[3] Vector Collapser (Replaces 100+ SVG points with <icon> tags)
   │
   ▼
Clean YAML / Markdown Spec (9.8k tokens, < 55ms)

Verified Benchmark Results

Tested with OpenAI's gpt-tokenizer (cl100k_base):

Component Frame	Raw AST Nodes	Clean Nodes	Raw Tokens	Compressed Tokens	Reduction	Speed
SaaS Pricing Card	23	21	3,010	615	80%	25ms
Enterprise Dashboard	646	327	189,485	9,800	94.8%	54ms

Setting Up the MCP Server in 30 Seconds

Figma Spec Compressor implements the standard Model Context Protocol (MCP) over stdio, making it universally plug-and-play.

In Cursor (`.cursor/mcp.json`)

{
  "mcpServers": {
    "figma-spec": {
      "command": "npx",
      "args": ["-y", "--package=figma-spec-compressor", "figma-spec", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_figma_personal_access_token"
      }
    }
  }
}

In Claude Code CLI

claude mcp add figma-spec npx -y --package=figma-spec-compressor figma-spec mcp -e FIGMA_ACCESS_TOKEN=your_token

In Google Antigravity, Zed, or Trae

It supports any standard MCP configuration block or direct CLI terminal piping:

npx --package=figma-spec-compressor figma-spec url "https://figma.com/design/:key/:slug?node-id=..." --markdown -o spec.md

Try It Out

📦 Open Source Repository: github.com/leethoneid/figma-spec-compressor
⚡ Pro Lifetime License (Single-file binary & commercial rights): yeelix.gumroad.com/l/figma-spec-pro

Drop a comment below if you have questions about MCP integration or AST pruning techniques!