Figwright is a two-way Model Context Protocol server that lets coding agents exchange information with Figma through a companion plugin, turning designs into framework-aware code and editing the Figma canvas from code. Developers use it with agents such as Claude Code, Cursor, or Codex to read design context and create or modify Figma elements, and the catalogue contains skills and other workflow components for those interactions.
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 awdr74100/figwright --skill figma-codegengit clone --depth 1 https://github.com/awdr74100/figwrightWrote 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/awdr74100/figwright/figma-codegen)<a href="https://agentmods.dev/skills/awdr74100/figwright/figma-codegen"><img src="https://agentmods.dev/badge/skills/awdr74100/figwright/figma-codegen/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/awdr74100/figwright/figma-codegen"><img src="https://agentmods.dev/badge/skills/awdr74100/figwright/figma-codegen.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- Socket pass
- Snyk pass
- NVIDIA SkillSpector pass
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.00145 | $0.04221 |
| Opus 5.5 | $0.00058 | $0.01688 |
| Sonnet 5.5 | $0.00029 | $0.00844 |
| Haiku 4.5 | $0.00015 | $0.00422 |
Grade A, and why
figma-codegen 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.
How it starts
The opening of the file, as written. The whole thing — 225 lines — stays where its author put it; the contents beside it link to each section on GitHub.
figma-codegen
Turn a Figma selection into code that looks like the rest of the project: reuse the components and
tokens that already exist, only build what's genuinely missing. The grounded tools do the heavy
lifting so you are not guessing from a screenshot. This file is the router; deep detail lives in
references/ — load a reference when its step is in play.
When to use
- The user pastes a Figma URL/selection and asks for code ("code this", "build this component").
- The user wants to extend an existing component to match a Figma frame.
More than one Figma file open
Every tool result says so when it applies, so you do not have to check up front: with two or more
files connected and none claimed, results carry a MORE THAN ONE FIGMA FILE IS OPEN block naming
them. It matters because calls otherwise follow whichever file the user last touched, which changes
when they switch tabs — so a task can read one file and write to another and report success.
When you see it, claim the file before doing anything else: list_files names every connected file,
use_file({ fileName }) claims one for this session (use_file({ sessionId }) when two open files
share a name — Figma allows that, and x (Copy) is how it happens). Every later call then reaches
that file whatever is in front, including while its tab sits in the background. If the user has not
said which file, ask — do not guess from the names.
Workflow
Run the grounded tools against the selection, then generate — trust them over the rendered image.
get_design_context(detailfull,dedupeComponents: true) → the structural tree with tokens resolved to names (Primary/500,spacing/4), styles deduped intoglobalVars, and each instance'smainComponent/componentProperties. This is the layout + binding source of truth. KeepdedupeComponents: trueand don't depth-limit a subtree you'll build from. → How to read the tree, the per-node fidelity catalog (effects, per-side borders, stroke align, per-corner radius, blend, masks, gradients, image-fit, auto-layout/grid, aspect-ratio, scroll/sticky, stack & stroke-space), Dev Mode annotations as ground truth, and grounding a page too big for one call:references/grounding.md.
What ships with it
6 files 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.
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 Changed · +4 lines 8ff2a6e4c0da
- 17d ago Changed · +8 lines 7e719354f128
- 24d ago Changed · +6 lines 21b16e655356
- 1mo ago Changed · +13 lines 9ae551ed3710
- 1mo ago First seen · 194 lines · 145 tokens per session scan A b1acd5cb8e96
figma-codegen is a skill published in the GitHub repository awdr74100/figwright (1,090 stars, last pushed today), licensed MIT. It adds 145 tokens to every session and 4,221 once invoked, about $0.0006 per session on Opus 5.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.
Other skills, from other repositories
vibefigma
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMATOKEN env var, or .env file).
visual-qa-verification
Automated visual QA with pixel-level diff comparison, iterative fix loop, and cross-browser verification. Uses pixelmatch for programmatic screenshot comparison with region-based analysis. Covers responsive checks, Lighthouse audits, and accessibility validation. Keywords: verify app, visual QA, compare to Figma…
figma-intake
Structured interview that auto-discovers Figma file structure, project context, and asks 3-5 targeted questions to produce a build-spec.json. Entry point for the autonomous build pipeline. Keywords: Figma intake, build spec, project discovery, figma interview, build plan.
indesign-conversion
Convert an exported Adobe InDesign IDML package or PDF into typed React components, design tokens, and Storybook stories via the @aurelius/pipeline InDesign pipeline. Use when a designer hands you an .idml or .pdf and you need a starting React component set. Keywords: InDesign to React, IDML, PDF to React, indesign…
design-pipeline
A build-and-test workflow for turning Figma designs into shadcn/ui components, a reusable set of interface components for React-based projects. It checks the result in a real browser at three screen sizes and runs accessibility checks.
figma-generate-component
Generate production-ready code from a Figma component or frame using the Figma MCP server.