Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add punkadillo/figma-code-composer --skill figma-extract-tokensgit clone --depth 1 https://github.com/punkadillo/figma-code-composerWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/punkadillo/figma-code-composer/figma-extract-tokens)<a href="https://agentmods.dev/skills/punkadillo/figma-code-composer/figma-extract-tokens"><img src="https://agentmods.dev/badge/skills/punkadillo/figma-code-composer/figma-extract-tokens/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/punkadillo/figma-code-composer/figma-extract-tokens"><img src="https://agentmods.dev/badge/skills/punkadillo/figma-code-composer/figma-extract-tokens.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00024 | $0.01386 |
| Opus 5 | $0.00012 | $0.00693 |
| Sonnet 5 | $0.00005 | $0.00277 |
| Haiku 4.5 | $0.00002 | $0.00139 |
Grade A, and why
figma-extract-tokens scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 212 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Extract Design Tokens from Figma
Name
figma:figma-extract-tokens - Extract design tokens and variables from Figma files
Synopsis
Extract design tokens (colors, spacing, typography, etc.) from Figma files and generate token files in various formats (CSS Custom Properties, TypeScript, JSON, Style Dictionary, Tailwind config).
Description
You are tasked with extracting design tokens and variables from a Figma file using the Figma MCP server. This command analyzes Figma variables and variable collections to generate structured token files for your design system.
Implementation
Connects to the Figma Desktop MCP server to access Figma variables API. Extracts all variable types (colors, numbers, strings, booleans) and organizes them into primitive and semantic token hierarchies. Supports multiple output formats and theming variations.
Your Task
-
Access the Figma File:
- Use Figma MCP tools to access the current file
- If no file is open, ask the user to open one in Figma or provide a URL
-
Extract Variables:
- Get all color variables and their values
- Get spacing/sizing variables
- Get typography variables (font families, sizes, weights, line heights)
- Get any other variables (border radius, shadows, etc.)
- Organize by variable collections if they exist
-
Analyze Token Structure:
- Identify semantic tokens (primary, secondary, etc.)
- Note primitive tokens (specific values)
- Detect theming variations (light/dark modes)
- Check for token hierarchies and references
-
Generate Token Files:
- Ask the user what format they prefer:
- CSS Custom Properties
- JavaScript/TypeScript objects
- JSON
- Sass/SCSS variables
- Tailwind config
- Style Dictionary format
- Generate properly structured token files
- Include comments with Figma references
- Ask the user what format they prefer:
-
Provide Documentation:
- Create a mapping of token names to Figma variables
- Note any missing tokens that should be added
- Suggest token naming conventions if inconsistent
- Document how to use tokens in code
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 212 lines · 24 tokens per session scan A 613588ae4d59
figma-extract-tokens is a skill published in the GitHub repository punkadillo/figma-code-composer (3 stars, last pushed 21d ago), licensed MIT. It adds 24 tokens to every session and 1,386 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
mcp-host-styling-integration
Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
ui-first-builder
Creates production-ready UI immediately from any description. Generates complete pages, components, and realistic mock data in FIRST response. Uses Next.js 16 + Tailwind + shadcn/ui. Never asks questions - infers everything from context. Triggers: UI creation, page building, component generation, build interface…
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
coss-ui
Set up or extend a Next.js web app with Coss/UI — the official Cal.com design system, built on Base UI + Tailwind CSS v4 and installed through the shadcn CLI via the namespaced @coss/ registry. Two modes: Init (shadcn init @coss/style on a new project) and Add (pull @coss/ui primitives, single @coss/ components, or…
animated-icons
Add a Motion-animated icon to a Next.js app from a shadcn registry instead of hand-animating an SVG. Two registries, picked from the project's icon set: heroicons-animated (316 icons, shadcn add @heroicons-animated/ ) and hugeicons-animated (165 icons, shadcn add @hugeicons-animated/ , which also installs a shared…