figma-design

A Figma-to-code workflow for inspecting designs, extracting styles and reusable components, exporting images, and translating design details into code. Figma is a tool for designing interfaces before they are built.

In plain words
What is it for?
Use it to inspect selected Figma frames, turn design styles into code tokens, export assets, build matching components, and compare the result with the original design.
Why use it?
It helps replace guesswork about spacing, colors, typography, layout, and assets with measurements and specifications from the design file.

Skill for Claude CodeCodex

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.

agentmods
npx agentmods add skills/monkilabs/opencastle/figma
Any agent
npx skills add monkilabs/opencastle --skill figma
Clone the repo
git clone --depth 1 https://github.com/monkilabs/opencastle

Made for: Claude Code, Codex.

Per session 40 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 521 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
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.

ModelPer sessionOnce invoked
Fable 5 $0.00040 $0.00521
Opus 5 $0.00020 $0.00260
Sonnet 5 $0.00008 $0.00104
Haiku 4.5 $0.00004 $0.00052

Measured 3d ago against content hash b01016e37db5, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

figma-design 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 3d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (config.ts), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

src/orchestrator/plugins/figma/SKILL.md · 44 lines

What it actually says

Figma Design

Project design system: the frontend-design skill. Docs: https://www.figma.com/developers/api

MCP tools

Tool Purpose
figma/get_file Full file structure — takes depth to cap traversal
figma/get_file_nodes Specific nodes/frames by node_ids
figma/get_images Export nodes: { ids, format, scale }
figma/get_comments Design review comments
figma/get_styles Color/text/effect styles
figma/get_components Reusable components

Every call needs file_key (from the file URL). Node IDs use a colon, e.g. "123:45". Never call get_file without depth on a large file — it returns the entire node tree.

Workflow

  1. get_file_nodes for the target frames; extract bounding boxes, fills, text styles, and auto-layout properties.
  2. Map returned styles into token files (src/styles/tokens.css or token JSON) — do not inline raw hex values into components.
  3. Build the component consuming those tokens, with a data-testid so the result can be verified programmatically.
  4. Verify: render in Storybook, compare DOM bounding boxes against the Figma node metrics. Acceptance: spacing within 4px, token colors exact, font family and weight exact.
  5. Outside threshold → fix the token mapping or ask design; re-run from step 1.

Figma → CSS, the non-obvious mappings

Figma CSS
Hug contents width: fit-content
Fill container flex: 1 (or width: 100%)
Fixed width: Npx
Auto Layout gap gap (not margins)
Drop shadow box-shadow: x y blur spread color

Auto Layout horizontal/vertical is just flex-direction: row/column.

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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.

  1. 3d ago First seen · 44 lines · 40 tokens per session scan A b01016e37db5

Subscribe to this mod's changes

figma-design is a skill published in the GitHub repository monkilabs/opencastle (61 stars, last pushed 5d ago), licensed MIT. It adds 40 tokens to every session and 521 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.

Related

Other skills, from other repositories

product-architect

Complete product development system with 64 agents and 35 frameworks. Use when the user wants to build a product, write a PRD, plan an MVP or roadmap, design an app, research a market or check whether a feature already exists or is novel, do competitive analysis, run a security audit, build a financial model, plan…

ankitjha67/product-architect · 211 tokens

codex-delegation

Use when a coding task would benefit from delegating work to Codex in the background — a deep independent second opinion, security or architecture analysis, or a parallel implementation running while the session continues. Lets Claude drive the codex companion itself (task, review, status --wait, result) without the…

zebbern/agent-collab · 74 tokens

cursor-delegation

Use when a coding task would benefit from delegating work to Cursor in the background — fast parallel implementation, scaffolding, or an everyday review running while the session continues. Lets Claude drive the cursor companion itself (task, review, status --wait, result) without the user typing /cursor: commands.

zebbern/agent-collab · 66 tokens

cursor-cli-runtime

Internal helper contract for calling the cursor-companion runtime from Claude Code.

zebbern/agent-collab · 17 tokens

cursor-prompting

Internal guidance for composing cursor-agent prompts and picking models for coding, review, diagnosis, and research tasks inside the Cursor Claude Code plugin.

zebbern/agent-collab · 31 tokens

goal-runner

Use when the user asks to advance, continue, or work on the project's long-horizon goal (or to set one up) — the policy for goal-driven increments driven through the goal companion, one increment at a time, delegated via the codex/cursor delegation skills, honestly recorded.

zebbern/agent-collab · 62 tokens