Skip to main content
Glama
leethoneid

Figma Spec Compressor

English | 简体中文

Figma Spec Compressor (Universal Agent-Ready AST Pruner & MCP Server)

Token-optimized AST pruning, live Figma API fetching, and genuine Model Context Protocol (MCP) server for Google Antigravity, Cursor Composer, Claude Code, Windsurf, Zed / ZCode, OpenAI Codex, and Trae.

License: PolyForm Noncommercial 1.0.0 Node: >=20 MCP: 2024-11-05 Build Status: Passing

IMPORTANT

Commercial Use Notice: This open-source edition is licensed for personal, non-commercial use only. Any use by a company, team, or for commercial purposes requires a commercial license. Unauthorized commercial use constitutes infringement.


Architecture Overview

flowchart TD
    A["Raw Figma Design URL / JSON AST<br/>(50,000 ~ 200,000+ Raw Tokens)"] --> B["Figma Spec Compressor AST Pruner"]
    
    subgraph "Compression & Translation Pipeline"
        B --> C1["Drop Invisible Nodes & Deep Redlines"]
        B --> C2["Auto-Layout to Idiomatic Tailwind v3/v4"]
        B --> C3["Vector Clumps to Semantic <icon> Tags<br/>(Source Node ID & Component ID Preserved)"]
        B --> C4["Color Hex / Opacity / Radius Normalization"]
    end

    C1 & C2 & C3 & C4 --> D["Clean Structured YAML / Markdown Spec<br/>(80%–95% Token Reduction, 21ms ~ 165ms)"]

    subgraph "Universal AI Editor Consumption"
        D --> E1["Google Antigravity (MCP)"]
        D --> E2["Cursor Composer (.cursor/mcp.json)"]
        D --> E3["Claude Code & Desktop (claude mcp add)"]
        D --> E4["Zed / ZCode (context_servers)"]
        D --> E5["Trae by ByteDance (Native MCP)"]
        D --> E6["OpenAI Codex / Copilot CLI (Stdio Pipe)"]
    end

Related MCP server: figma-to-markdown-mcp

Why This Exists

When connecting Cursor, Claude Code, or Windsurf to Figma, raw Figma REST API responses frequently balloon to 50,000–300,000+ tokens for modern SaaS dashboards and design system components.

This causes:

  1. Severe Context Exhaustion: A single design frame can swallow the entire context window.

  2. Model Hallucinations: Thousands of noisy SVG coordinate numbers, bounding boxes, and internal redlines distract LLMs from semantic styling and component hierarchy.

  3. High Latency & API Costs: Massive payloads dramatically slow down agent responses.

Figma Spec Compressor strips 80%–95% of the raw wire noise, maps Figma layout and style properties into idiomatic Tailwind CSS classes, converts complex vector clumps into semantic icon tags, and feeds LLMs clean, structured YAML or Markdown specs.


Verified Benchmark Results

Tested on minified wire JSON using exact BPE tokenization (gpt-tokenizer / cl100k_base):

Tier

Component Description

Raw AST Nodes

Clean Spec Nodes

Raw Wire BPE Tokens

Compressed Spec Tokens

BPE Token Reduction

Compression Latency

Tier 1

SaaS Pricing Card (saas-pricing-card.json)

23

21

3,010

642

79%

21.02 ms

Tier 2

Enterprise SaaS Analytics Dashboard (50k+ stress test)

646

327

189,485

10,384

95%

165.19 ms (~165 ms)

Benchmark Methodology Note: Tier 1 is measured on an actual SaaS pricing component fixture (fixtures/saas-pricing-card.json). Tier 2 is measured on a procedurally generated 646-node synthetic enterprise analytics dashboard fixture designed to rigorously benchmark AST pruning and vector collapsing under extreme noise.


Universal AI Editor & Agent Integrations

The compressor runs as a standard Model Context Protocol (MCP) stdio server or standalone CLI, making it universally plug-and-play across all leading global and domestic AI editors:

AI Editor / Environment

Supported Mode

Configuration Location / Method

Google Antigravity

MCP / Tool

Workspace MCP Settings (agy mcp add)

Cursor

Native MCP

.cursor/mcp.json

Claude Code & Desktop

Native MCP

claude mcp add / ~/.claude/mcp.json

Windsurf (Codeium)

Native MCP

~/.codeium/windsurf/mcp_config.json

Zed / ZCode

Context Server

settings.json -> context_servers

Trae (ByteDance)

Native MCP

IDE Settings -> MCP Servers

OpenAI Codex / Copilot / CLI

CLI Pipe

Direct stdout piping into prompts


1. Google Antigravity Configuration

Add to your project's Antigravity MCP configuration:

{
  "mcpServers": {
    "figma-spec": {
      "command": "npx",
      "args": ["-y", "github:leethoneid/figma-spec-compressor", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_personal_access_token_here"
      }
    }
  }
}

2. Cursor Integration (.cursor/mcp.json)

To enable Figma extraction tools directly in Cursor Composer or Chat, add to .cursor/mcp.json:

{
  "mcpServers": {
    "figma-spec": {
      "command": "npx",
      "args": ["-y", "github:leethoneid/figma-spec-compressor", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_personal_access_token_here"
      }
    }
  }
}

3. Claude Code & Claude Desktop Integration

Add figma-spec directly via the Claude Code CLI:

claude mcp add figma-spec npx -y github:leethoneid/figma-spec-compressor mcp -e FIGMA_ACCESS_TOKEN=figd_your_personal_access_token_here

Or configure in your global MCP settings file (~/.claude/mcp.json or claude_desktop_config.json):

{
  "mcpServers": {
    "figma-spec": {
      "command": "npx",
      "args": ["-y", "github:leethoneid/figma-spec-compressor", "mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_your_personal_access_token_here"
      }
    }
  }
}

4. Zed / ZCode Integration (settings.json)

In Zed / ZCode editor preferences:

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

5. Trae (字节跳动 AI IDE) & 国内主流 AI 编程环境

Trae 原生支持 MCP 协议。在 Trae 偏好设置中的 MCP Servers 中添加:

  • Name: figma-spec

  • Command: npx

  • Args: -y github:leethoneid/figma-spec-compressor mcp

  • Env: FIGMA_ACCESS_TOKEN=figd_xxx

对于通义灵码、豆包 MarsCode 等暂未开放 MCP 协议的编辑器,可直接通过 CLI 管道模式生成标准规范后供 AI 直接消费。

6. OpenAI Codex / Terminal AI CLI 管道模式

对于没有原生 GUI MCP 面板的环境,可使用标准 CLI 导出,直接无缝复制或管道重定向给 Codex/LLM:

# 提取并将极致压缩的 Tailwind 规范输出为 Markdown 提示词
npx -y github:leethoneid/figma-spec-compressor url "https://www.figma.com/design/:fileKey/:slug?node-id=:id" --markdown -o prompt.md

CLI Usage

1. Fetch & Compress Live Figma URLs

# Fetch and print compressed YAML spec with token reduction metrics
npx -y github:leethoneid/figma-spec-compressor url "https://www.figma.com/design/Vxyz123Abc/Dashboard?node-id=101-2034" --stats

# Pass access token explicitly
npx -y github:leethoneid/figma-spec-compressor url "https://www.figma.com/file/Vxyz123Abc" --token "figd_xxx" -o ./spec.yaml

# Generate full prompt markdown for agent consumption
npx -y github:leethoneid/figma-spec-compressor url "https://www.figma.com/design/Vxyz123Abc" -o ./prompt.md --markdown

2. Compress Local Figma JSON AST

# Compress local file and view reduction metrics
npx -y github:leethoneid/figma-spec-compressor compress ./fixtures/saas-pricing-card.json --stats

# Output directly to a file
npx -y github:leethoneid/figma-spec-compressor compress ./fixtures/saas-pricing-card.json -o ./spec.yaml

3. Run MCP Stdio Server

# Start standard input/output JSON-RPC MCP server
npx -y github:leethoneid/figma-spec-compressor mcp

HTTP Microservice Mode

You can also run Figma Spec Compressor as a standalone HTTP service:

npm run serve
# Listening on port 3001

API Endpoints

  • GET /health
    Returns { "status": "ok", "service": "figma-spec-compressor", "version": "1.1.0" }.

  • POST /api/compress
    Accepts raw Figma JSON payload (up to 20 MB UTF-8 safe chunk buffer) and returns compressed YAML, markdown, and token metrics.


Running Verification & Tests

# Run unit and scale integration test suite
npx tsx --test tests/mcp-and-scale.test.ts

# Run token reduction stress benchmark
npx tsx tests/benchmark.ts

# Verify TypeScript type checks
npx tsc --noEmit

Editions & Features

Capability

Community (Open Source)

Pro Lifetime ($29)

Agency & Team ($79)

Figma AST Node Pruning

✅ Yes

✅ Yes

✅ Yes

Auto-Layout to Tailwind v3/v4

✅ Basic

✅ Full Idiomatic

✅ Full Idiomatic

Vector Icon Collapsing

✅ Yes

✅ Advanced

✅ Advanced

Model Context Protocol (MCP)

✅ Stdio

✅ Stdio & HTTP

✅ Stdio & HTTP

All AI Editors (Antigravity/Cursor/Zed/Trae/Codex)

✅ Yes

✅ Yes

✅ Yes

Live Figma URL Direct Stream

Manual

✅ 1-Click Live Fetch

✅ 1-Click Live Fetch

Offline Activation & Hardware Lock

—

✅ 2 Devices

✅ 5+ Team Seats

Commercial Client Project Rights

—

✅ Full Rights

✅ Full Agency Rights

Self-Hosted HTTP Gateway Guide

—

—

✅ Included

👉 Get Pro Lifetime License on Gumroad ($29)


License & Commercial Terms

Copyright (c) 2026 Solo Overseas. All rights reserved.

Available Tools

2 tools
compress_figma_jsonB

Compress raw Figma JSON AST into compact agent-ready YAML or Markdown specification with Tailwind classes and token metrics.

NameRequiredDescriptionDefault
formatNoOutput format: 'yaml' for structured spec, 'markdown' for full prompt instructionsyaml
rawJsonYesRaw Figma JSON AST string from Figma REST API or plugin

TDQS

B3.4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden; it does disclose the transformation (raw AST -> compact spec) and that the output carries Tailwind classes and token metrics. It omits behavior an agent would want: whether processing is local vs. networked, what happens on malformed JSON, size limits, and whether the result is written anywhere or just returned.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single front-loaded sentence with no filler, and the transformation and output shape come first. It is dense with terminology (AST, Tailwind, token metrics) but each noun contributes to identifying the tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter, locally-scoped transform with no output schema, the description should say enough about the returned artifact and failure modes; it characterizes the output loosely but says nothing about errors or limits. Adequate to select the tool, thin for predicting its result.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100% with an enum on 'format', so the schema already carries parameter meaning; baseline 3 applies. The description adds only that the output includes Tailwind classes and token metrics, not parameter-level guidance beyond what the schema states.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Names a specific verb (compress) and resource (raw Figma JSON AST) and states the output artifacts (compact YAML/Markdown spec with Tailwind classes and token metrics). It separates itself from the sibling only implicitly, via the 'JSON' input type rather than by naming compress_figma_url, so it stops short of a 5.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The input type ('raw Figma JSON AST') implies when to reach for this over compress_figma_url, but there is no explicit statement of when to use it, when not to, or prerequisites. Usage is inferred rather than guided.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

compress_figma_urlB

Fetch a live Figma file/node via REST API and compress it into compact agent-ready YAML or Markdown specification.

NameRequiredDescriptionDefault
urlYesFigma file/node URL (e.g. https://www.figma.com/design/:key/:title?node-id=...)
formatNoOutput format: 'yaml' or 'markdown'yaml
figmaTokenNoFigma Personal Access Token (optional if FIGMA_ACCESS_TOKEN env var is set)

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations, the description carries the full burden. It discloses that a network REST call is made against a live file, but says nothing about authentication failure behavior, rate limits, how large nodes are handled or truncated, or what happens when a node-id is absent from the URL. The auth requirement is only inferable from the token parameter in the schema, not the description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

A single sentence with no filler, front-loading the action (fetch via REST) before the outcome (compact agent-ready spec). Every clause earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a three-parameter tool with no annotations and no output schema, it does cover the essential shape: input is a Figma file/node URL, output is a compact YAML/Markdown spec. It omits error/rate-limit behavior and how much compression occurs, which an agent would want before relying on the result.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so all three parameters including the url format example, the yaml/markdown enum, and the token/env-var fallback are already documented. The description's mention of 'YAML or Markdown' echoes the format parameter without adding new semantics, so the baseline of 3 applies.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

Specific verb+resource: 'Fetch a live Figma file/node via REST API' and the transformation applied ('compress it into compact agent-ready YAML or Markdown'). It implicitly distinguishes itself from the sibling compress_figma_json by emphasizing a live REST fetch from a URL, but it never names that sibling or states the contrast outright.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Usage is implied rather than stated: 'live Figma file/node' suggests you use this when you have a URL instead of a pre-exported JSON payload, which is the natural split with compress_figma_json. There is no explicit when-to-use, when-not-to-use, or named alternative.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv0.1.0
    • First observedcompress_figma_json
    • First observedcompress_figma_url

TDQS

A3.6/5.0

Scored across 2 tools

Disambiguation4/5

Both tools perform the same core operation (compressing Figma data into a spec), so an agent must read descriptions to pick correctly. However, the split is clean and explicit: one takes raw JSON, the other takes a live Figma URL, which makes selection straightforward in practice.

Naming Consistency5/5

Both names follow the same verb_noun pattern with a shared prefix (compress_figma_json, compress_figma_url). The distinguishing suffix directly reflects the input source, which is exactly the right naming convention here.

Tool Count3/5

Two tools is thin for a server, though it matches the narrow purpose of compressing Figma input. Each tool earns its place by covering a distinct input source, but the surface is minimal enough to feel borderline.

Completeness4/5

The two main input paths (raw JSON and live URL) are covered, along with two output formats (YAML/Markdown). Minor gaps exist around batch processing, node selection options, or caching, but agents can work around these.

Maintenance

ActivityMaintained
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    D
    maintenance
    Enables interaction with Figma files through intelligent API access, providing navigation, asset extraction, and design token retrieval with 95% token-optimized compact tree output format.
    15
    1
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Transforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.
    836 npm
    7
    MIT
  • A
    license
    A
    quality
    D
    maintenance
    Converts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.
    1
    5 npm
    MIT