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 sutchan/Agent-Skills-Hub --skill figma-implement-designgit clone --depth 1 https://github.com/sutchan/Agent-Skills-HubWrote 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/sutchan/agent-skills-hub/figma-implement-design)<a href="https://agentmods.dev/skills/sutchan/agent-skills-hub/figma-implement-design"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/figma-implement-design/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/sutchan/agent-skills-hub/figma-implement-design"><img src="https://agentmods.dev/badge/skills/sutchan/agent-skills-hub/figma-implement-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00087 | $0.02800 |
| Opus 5.5 | $0.00035 | $0.01120 |
| Sonnet 5.5 | $0.00017 | $0.00560 |
| Haiku 4.5 | $0.00009 | $0.00280 |
Grade A, and why
figma-implement-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 19d 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.
This is a copy
89% identical to figma-implement-design — 36 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 263 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Implement Design
Overview
This skill provides a structured workflow for translating Figma designs into production-ready code with pixel-perfect accuracy. It ensures consistent integration with the Figma MCP server, proper use of design tokens, and 1:1 visual parity with designs.
Skill Boundaries
- Use this skill when the deliverable is code in the user's repository.
- If the user asks to create/edit/delete nodes inside Figma itself, switch to figma-use.
- If the user asks to build or update a full-page screen in Figma from code or a description, switch to figma-generate-design.
- If the user asks only for Code Connect mappings, switch to figma-code-connect-components.
- If the user asks to author reusable agent rules (
CLAUDE.md/AGENTS.md), switch to figma-create-design-system-rules.
Prerequisites
- Figma MCP server must be connected and accessible
- User must provide a Figma URL in the format:
https://figma.com/design/:fileKey/:fileName?node-id=1-2:fileKeyis the file key1-2is the node ID (the specific component or frame to implement)
- OR when using
figma-desktopMCP: User can select a node directly in the Figma desktop app (no URL required) - Project should have an established design system or component library (preferred)
Required Workflow
Follow these steps in order. Do not skip steps.
Step 1: Get Node ID
Option A: Parse from Figma URL
When the user provides a Figma URL, extract the file key and node ID to pass as arguments to MCP tools.
URL format: https://figma.com/design/:fileKey/:fileName?node-id=1-2
Extract:
- File key:
:fileKey(the segment after/design/) - Node ID:
1-2(the value of thenode-idquery parameter)
Note: When using the local desktop MCP (figma-desktop), fileKey is not passed as a parameter to tool calls. The server automatically uses the currently open file, so only nodeId is needed.
What ships with it
5 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.
- 19d ago Changed · -1 lines 7a9ee66502da
- 1mo ago First seen · 264 lines · 87 tokens per session scan A 04113a930bda
figma-implement-design is a skill published in the GitHub repository sutchan/Agent-Skills-Hub (2 stars, last pushed 3d ago), licensed MIT. It adds 87 tokens to every session and 2,800 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 89% identical to figma-implement-design, differing in 36 lines, and is treated as a copy.
Other skills, from other repositories
canting-bikeng-zhinan
A Chinese-language guide to planning and decorating dining rooms, covering furniture, storage, lighting, layouts, small spaces, and open kitchens.
ui
Opinionated constraints for building better web interfaces with coding agents. Use this skill whenever the user asks you to build, review, or fix a UI — landing pages, dashboards, components, or any frontend code — and whenever you write Tailwind CSS, motion/react animations, accessible component primitives (Base UI…
frontend-ui-engineering
Build production-quality, accessible, non-generic-looking UI components and pages — component composition, the state-management ladder (local to global), avoiding the recognizable "AI aesthetic," WCAG 2.1 AA accessibility, and responsive/loading/empty states. Use when building or modifying user-facing interfaces, or…
ai-design-slop-audit
This skill should be used when the user wants an evidence-backed review of an existing UI for generic "AI-generated" design defaults — asking to "audit this design", "why does this look AI-generated", "review this for design slop", or wants a removal-first cleanup plan without a speculative redesign. Point-in-time…
响应式布局与无障碍
A guide for building web interfaces that adapt to different screen sizes and remain usable with keyboards, screen readers, and other access needs.
user-research-synthesis
Guides synthesizing raw qualitative user research into defensible themes using affinity mapping (the KJ method) and conducting Jobs-to-be-Done "Switch" interviews about past purchase decisions. Use when the user asks to "affinity map these notes", "synthesize interview findings", "cluster these observations into…