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 yonatangross/orchestkit --skill figma-design-handoffgit clone --depth 1 https://github.com/yonatangross/orchestkitWrote 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/yonatangross/orchestkit/figma-design-handoff)<a href="https://agentmods.dev/skills/yonatangross/orchestkit/figma-design-handoff"><img src="https://agentmods.dev/badge/skills/yonatangross/orchestkit/figma-design-handoff/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/yonatangross/orchestkit/figma-design-handoff"><img src="https://agentmods.dev/badge/skills/yonatangross/orchestkit/figma-design-handoff.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to medium
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 →
- medium Data Exfiltration · line 79 Data is being sent to an external URL. This could be legitimate telemetry or data exfiltration. Manual review is recommended.Fix: Verify the destination URL is trusted and necessary. Remove or replace with documented APIs. Ensure no secrets, tokens, or PII are transmitted.
- medium MCP Rug Pull · line 91 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
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.00076 | $0.02826 |
| Opus 5 | $0.00038 | $0.01413 |
| Sonnet 5 | $0.00015 | $0.00565 |
| Haiku 4.5 | $0.00008 | $0.00283 |
Grade A, and why
figma-design-handoff scanned grade A with 1 finding 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
curl -s -H "X-Figma-Token: $FIGMA_TOKEN" \ How it starts
The opening of the file, as written. The whole thing — 261 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Figma Design Handoff
Figma dominates design tooling in 2026, with the majority of product teams using it as their primary design tool. A structured handoff workflow eliminates design drift — the gap between what designers create and what developers build. This skill covers the full pipeline: Figma Variables to design tokens, component spec extraction, Dev Mode inspection, Auto Layout to CSS mapping, and visual regression testing.
Quick Reference
| Rule | File | Impact | When to Use |
|---|---|---|---|
| Figma Variables & Tokens | rules/figma-variables-tokens.md |
CRITICAL | Converting Figma Variables to W3C design tokens JSON |
| Component Specs | rules/figma-component-specs.md |
HIGH | Extracting component props, variants, states from Figma |
| Dev Mode Inspection | rules/figma-dev-mode.md |
HIGH | Measurements, spacing, typography, asset export |
| Auto Layout → CSS | rules/figma-auto-layout.md |
HIGH | Mapping Auto Layout to Flexbox/Grid |
| Visual Regression | rules/figma-visual-regression.md |
MEDIUM | Comparing production UI against Figma designs |
Total: 5 rules across 1 category
Figma Dev Mode MCP Server (2026 default path)
The Figma Dev Mode MCP Server replaces most manual REST + Dev Mode inspection. Configure it once and any Claude Code session with Figma access can pull design context, tokens, and code mappings directly.
Key tools (16 documented — developers.figma.com/docs/figma-mcp-server/tools-and-prompts):
| Tool | Returns | Use for |
|---|---|---|
get_design_context |
Component tree + layout + typography + spacing | First call on any Figma node → grounds every other tool |
get_variable_defs |
Token collections (variables + modes + aliases) | Straight export to W3C DTCG JSON — skip the REST pipeline |
get_code_connect_map |
Figma node → codebase component mapping | Linking generated code to existing repo components |
get_screenshot |
PNG of a node or frame | Screenshot for visual diffing / embed in chat |
search_design_system |
Token/component search across libraries | Finding existing tokens before generating new ones |
use_figma (beta) |
Writes back to the Figma canvas | Code-to-design round-trip (write-to-canvas) |
generate_figma_design (beta) |
Creates a design frame from a prompt | AI-generated design stubs for handoff |
What ships with it
11 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.
- references/applitools-figma-plugin.md 3.7 KB
- references/design-dev-communication.md 3.3 KB
- references/figma-to-code-workflow.md 5.6 KB
- rules/_sections.md 595 B
- rules/_template.md 339 B
- rules/figma-auto-layout.md 3.3 KB
- rules/figma-component-specs.md 2.6 KB
- rules/figma-dev-mode.md 2.7 KB
- rules/figma-variables-tokens.md 2.4 KB
- rules/figma-visual-regression.md 3.0 KB
- test-cases.json 2.8 KB
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 · 261 lines · 76 tokens per session scan A 4ed36820896e
figma-design-handoff is a skill published in the GitHub repository yonatangross/orchestkit (231 stars, last pushed yesterday), licensed MIT. It adds 76 tokens to every session and 2,826 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
mk:figma
Read-first Figma gateway via Figma MCP: analyze designs, implement Figma-to-code for 1–3 screens, extract design tokens, produce a Figma Evidence Packet for planning handoff, screenshot fallback. Advanced operations (Code Connect, canvas writes, design-system/library patterns) are gated references loaded only on…
design-to-code
Use this skill when translating UI/UX designs into production-ready frontend code. Handles design source ingestion (Figma, Sketch, Adobe XD, screenshots, design specs), design token extraction, component hierarchy mapping, responsive breakpoint strategy, accessibility-first implementation (WCAG 2.1 AA minimum)…
design-to-code-check
Check alignment between a specific design specification and its code implementation — a focused, single-component or single-screen comparison. Trigger when someone says: does this match the design, check implementation, design code alignment, what's different between the design and the build, spec check…
design-engineering
Premium design engineering skill for agentic workflows — produces high-end, distinctive UI designs using DESIGN.md as the portable contract across Pencil MCP (in-IDE canvas), Figma MCP (team handoff + design tokens), and Google Stitch (vibe exploration + AI generation). Enforces anti-generic principles, WCAG 2.2 AA…
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…
canva-token-inference
AI-powered design token extraction from Canva screenshots. Uses Claude vision to infer colors, typography, spacing, and effects with confidence scoring. Presents tokens for user confirmation before locking. Keywords: Canva tokens, token inference, design tokens, Canva extraction, AI token detection, color extraction…