Figma Spec Compressor
Fetches live Figma design URLs or local Figma JSON AST data, prunes noisy nodes, converts layout and styles into Tailwind-oriented specs, collapses vector icons, and outputs compressed YAML or Markdown specifications with token reduction metrics.
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.
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)"]
endRelated 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:
Severe Context Exhaustion: A single design frame can swallow the entire context window.
Model Hallucinations: Thousands of noisy SVG coordinate numbers, bounding boxes, and internal redlines distract LLMs from semantic styling and component hierarchy.
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 ( | 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 ( |
Cursor | Native MCP |
|
Claude Code & Desktop | Native MCP |
|
Windsurf (Codeium) | Native MCP |
|
Zed / ZCode | Context Server |
|
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_hereOr 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-specCommand:
npxArgs:
-y github:leethoneid/figma-spec-compressor mcpEnv:
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.mdCLI 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 --markdown2. 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.yaml3. Run MCP Stdio Server
# Start standard input/output JSON-RPC MCP server
npx -y github:leethoneid/figma-spec-compressor mcpHTTP Microservice Mode
You can also run Figma Spec Compressor as a standalone HTTP service:
npm run serve
# Listening on port 3001API 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 --noEmitEditions & Features
Capability | Community (Open Source) | ||
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
Open-source core engine is licensed under the PolyForm Noncommercial License 1.0.0.
Pro Commercial distribution is licensed under the Commercial EULA.
Copyright (c) 2026 Solo Overseas. All rights reserved.
Available Tools
2 toolscompress_figma_jsonB
Compress raw Figma JSON AST into compact agent-ready YAML or Markdown specification with Tailwind classes and token metrics.
| Name | Required | Description | Default |
|---|---|---|---|
| format | No | Output format: 'yaml' for structured spec, 'markdown' for full prompt instructions | yaml |
| rawJson | Yes | Raw Figma JSON AST string from Figma REST API or plugin |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Figma file/node URL (e.g. https://www.figma.com/design/:key/:title?node-id=...) | |
| format | No | Output format: 'yaml' or 'markdown' | yaml |
| figmaToken | No | Figma Personal Access Token (optional if FIGMA_ACCESS_TOKEN env var is set) |
TDQS
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.
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.
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.
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.
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.
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.
2 tool updates
v0.1.0- First observed
compress_figma_json - First observed
compress_figma_url
TDQS
Scored across 2 tools
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.
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.
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.
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
Related MCP Connectors
On-demand drift checks: declared CSS color, radius, spacing & type vs your own tokens or a pack
Provides style context & tokens to design or restyle web UIs in any framework
Generate design systems: OKLCH colors, fluid type scales, spacing, shape, icon and motion tokens.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Related MCP Servers
- AlicenseAqualityDmaintenanceEnables interaction with Figma files through intelligent API access, providing navigation, asset extraction, and design token retrieval with 95% token-optimized compact tree output format.151MIT
- AlicenseBqualityCmaintenanceConverts Figma to Markdown. Strips out visual noise to drastically reduce LLM token consumption.16 npm2MIT
- AlicenseNot gradedqualityAmaintenanceTransforms Figma design data into a compact, LLM-friendly format for code generation, reducing size by 99.5% while preserving UI-critical information.836 npm7MIT
- AlicenseAqualityDmaintenanceConverts Figma designs into structured code context with token-aware styling, enabling AI agents to generate production-level frontend code.15 npmMIT