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.02811 |
| Opus 5.5 | $0.00030 | $0.01124 |
| Sonnet 5.5 | $0.00015 | $0.00562 |
| Haiku 4.5 | $0.00008 | $0.00281 |
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 17d 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 — 254 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.
- 17d ago Changed · -1 lines 3fca4dc6fb4b
- 24d ago Changed 4e060a84068d
- 25d ago Changed · -5 lines 81779b2d43d0
- 26d ago Changed · -1 lines 42418ed6ec7a
- 1mo ago Changed 604469ae0fce
- 1mo 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 (298 stars, last pushed today), licensed MIT. It adds 76 tokens to every session and 2,811 once invoked, about $0.0003 per session on Opus 5.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
apply-mantel-styles
Provides guidelines for applying Mantel's brand styles to diagrams and frontend components. Use when asked to create visuals that need to align with Mantel's branding.
openkb-html-critic
Use to review a generated HTML deck or single-page artifact for visual quality and structural correctness. Especially good at catching CSS specificity bugs where slide-modifier classes (.divider, .center, .q, .flow etc.) accidentally override the base .slide{display:none} and cause one slide to stack on top of every…
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
pn-animation
Motion roles (Reveal/Orient/Confirm/Delight) and budgets. Use when designing or auditing a motion system — load pn-gsap for GSAP API.
pn-color-system
Color system design and implementation: OKLCH color space, tinted neutrals, palette structure, contrast, dark mode architecture, and token hierarchy. Use when establishing color tokens, theming, dark mode, or reviewing color choices.
pn-design-system
Establishes or maintains a design system: tokens, CSS variables, spacing/type scales, theming, and consistency auditing. Use when defining tokens or auditing components. The pn-design-system rule enforces token usage when editing CSS/SCSS files.