An integration for reading Figma design files, where teams store screens, components, styles, and design tokens. It provides summaries, screenshots, and implementation details for coding agents.

Use it to examine layouts, colors, typography, spacing, components, variables, and screenshots while implementing a design.

It reduces the need to manually inspect a design file or translate its visual details into code instructions.

figma — Skill for Claude Code and Codex by emanuelcasco

Install

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.

Any agent

npx skills add emanuelcasco/pi-mono-extensions --skill figma

Clone the repo

git clone --depth 1 https://github.com/emanuelcasco/pi-mono-extensions

Made for: Claude Code, Codex.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/emanuelcasco/pi-mono-extensions/figma.svg)](https://agentmods.dev/skills/emanuelcasco/pi-mono-extensions/figma)

Your own site

<a href="https://agentmods.dev/skills/emanuelcasco/pi-mono-extensions/figma"><img src="https://agentmods.dev/badge/skills/emanuelcasco/pi-mono-extensions/figma.svg" alt="Measured on agentmods" height="20"></a>

Per session 44 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,442 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits

NVIDIA SkillSpector warn 7 Sept 2026

SkillSpector: 1 finding, up to high

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

high Privilege Escalation · line 3
Code accesses credential files (SSH keys, AWS credentials, etc.). This could indicate credential theft attempts.

Fix: Remove references to credential paths. Use environment variables or secrets managers. For docs, use placeholder paths (e.g., /path/to/config). Never load .env or token files in production code paths.

How audits are shown

Origin original No closer match found in the catalogue.

Token cost

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.00044	$0.01442
Opus 5	$0.00022	$0.00721
Sonnet 5	$0.00009	$0.00288
Haiku 4.5	$0.00004	$0.00144

Measured 8d ago against content hash 073a3d68b896, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-08, from the pricing page.

Security

Grade A, and why

figma 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 8d 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.

extensions/figma/skills/figma/SKILL.md · 144 lines

How it starts

The opening of the file, as written. The whole thing — 144 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Figma Design Integration

Use the native figma_* tools to read Figma files and translate designs into code. Prefer processed, LLM-ready tools over raw Figma JSON.

When to Use

User provides a Figma file URL and asks you to explain or implement a design.
User asks about Figma colors, typography, spacing, components, variables, or layout.
You need screenshots/assets for visual validation.

Authentication

The tools read the token from an in-memory override, FIGMA_TOKEN, or ~/.pi/agent/auth.json at .figma.token.

If auth is missing, invalid, or expired, do not ask the user to paste the token in chat. Use the native figma_configure_auth tool or ask the user to run /figma-auth --force. The prompt is masked and the token is stored by the extension without returning it to the model.

URL Parsing

Given:

https://www.figma.com/design/ABC123def456/Project-Name?node-id=123-456

File key: ABC123def456
Node ID: 123-456 from the URL (figma_* tools also accept API format 123:456)

Use figma_parse_url when you need to extract these values from a full URL.

Default Tool Workflow

Use figma_configure_auth only when auth is missing, invalid, expired, or the user asks to update the token.
Use figma_parse_url for full Figma URLs.
If the exact target node is unclear, use figma_get_design_context plus figma_find_nodes_by_name or figma_find_nodes_by_text before raw exploration.
Use figma_render_nodes for screenshots and figma_extract_assets when icons, node renders, or image fills are needed for implementation.
- Do not pass outputDir unless the user explicitly requests persistent files in a specific location. Let the extension use its OS temp directory default for generated images/assets.
Use figma_explain_node or figma_get_node_summary for the target frame/component.
Use enriched figma_get_implementation_context when coding from a design. Pass framework, styling, resolveTokens, and includeCodeSnippets when useful.
Use figma_find_code_connect_mapping only when the local repo may contain Code Connect mappings or Figma URL/node references.
Use figma_get_component_implementation_hints for component-level implementation planning.
Use figma_get_nodes only for raw debugging.

Read the full file on GitHub · 144 lines

Changes

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.

8d ago First seen · 144 lines · 44 tokens per session scan A 073a3d68b896

Subscribe to this mod's changes

figma is a skill published in the GitHub repository emanuelcasco/pi-mono-extensions (99 stars, last pushed 13d ago), licensed MIT. It adds 44 tokens to every session and 1,442 once invoked, about $0.0002 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-08-30.

Design and UX ai ai-agents pi-ai pi-coding-agent pi-extensions pi-mono

plannotator-visual-explainer

Generate self-contained HTML visualizations with Plannotator theming. Use for implementation plans, PR explainers, architecture diagrams, data tables, slide decks, and any visual explanation of technical concepts. Plans and PR explainers follow Plannotator's prescriptive approach; all other visual content delegates to…

backnotprop/plannotator · 78 tokens

plannotator-annotate

Open Plannotator's annotation UI for a file, folder, or URL, then address the returned annotations.

backnotprop/plannotator · 29 tokens

codebase-memory

Use the codebase knowledge graph for structural code queries. Triggers on: explore the codebase, understand the architecture, what functions exist, show me the structure, who calls this function, what does X call, trace the call chain, find callers of, show dependencies, impact analysis, dead code, unused functions…

narumiruna/pi-extensions · 98 tokens

using-pi-subagents

Operate pi-subagents jobs safely, including direct-work decisions, least-privilege tool selection, thinking-level selection, delegation, bidirectional messaging, parallel starts, timeout selection, waiting, cancellation, result handling, verification, and writer isolation.

narumiruna/pi-extensions · 54 tokens

configuring-pi-starship

Configure @narumitw/pi-starship and answer questions about its pi-starship.toml settings. Use when the user asks to create, edit, repair, migrate, or understand pi-starship.toml, or asks which pi-starship module, variable, option, style, palette, preset, or runtime behavior to use. Do not use for generic TOML, shell…