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 jeltehomminga/figma-design-skills --skill design-fidelity-verifygit clone --depth 1 https://github.com/jeltehomminga/figma-design-skillsWrote 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/jeltehomminga/figma-design-skills/design-fidelity-verify)<a href="https://agentmods.dev/skills/jeltehomminga/figma-design-skills/design-fidelity-verify"><img src="https://agentmods.dev/badge/skills/jeltehomminga/figma-design-skills/design-fidelity-verify/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/jeltehomminga/figma-design-skills/design-fidelity-verify"><img src="https://agentmods.dev/badge/skills/jeltehomminga/figma-design-skills/design-fidelity-verify.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.00099 | $0.02608 |
| Opus 5.5 | $0.00040 | $0.01043 |
| Sonnet 5.5 | $0.00020 | $0.00522 |
| Haiku 4.5 | $0.00010 | $0.00261 |
Grade A, and why
design-fidelity-verify 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 1mo 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 — 130 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Design Fidelity Verify — prove the running app matches the spec
"Looks done" is not a check. This skill runs a measured feedback loop: render → capture → read the actually rendered values off the live app → compare each against the design spec → fix → re-verify, bounded. The numeric pass is the whole point — it catches what the eye and a screenshot cannot. The bar is spec fidelity — every value resolves to its intended token, within tolerance — not literal "pixel-perfect" (a phrase that means little across devices); measure tokens and deltas, don't chase byte-identical pixels.
Upstream: the spec table
This skill consumes the design-spec table produced by figma-design-extract — rows of element | property | exact value | repo token | source component. If you don't have one yet, run that skill first. The spec is your pass/fail checklist; without it you're back to eyeballing.
Why this exists (two failure modes)
- Blurry capture. The default device/headless screenshot is often low-res and hides truncation, wrong colors, and small spacing drift. Always capture full-resolution.
- No feedback loop. Building once and declaring victory is not verification. Render → measure → compare → fix → re-measure, with a hard cap so it terminates.
When to use
Trigger phrases: "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", "design QA this screen", or immediately after building a screen with figma-design-extract.
Pick your platform (then load the matching reference)
The loop below is identical for web and mobile. Only two steps differ — how you capture full-res, and how you read rendered values. Read the one reference file for your platform before the numeric pass (B5); ignore the other.
| Platform | Capture + measure mechanics | Reference to load |
|---|---|---|
| Web | getComputedStyle + getBoundingClientRect via a browser/Playwright/Chrome MCP; capture at devicePixelRatio ≥ 2 |
references/verify-web.md |
| Mobile | The resolved style off the rendered React fiber, read over the Metro/CDP eval channel; capture at scale: 1.0 |
references/verify-mobile.md |
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.
- evals/evals.json 3.1 KB
- examples/worked-example.md 7.4 KB
- README.md 3.0 KB
- references/drift-classification.md 7.7 KB
- references/verify-mobile.md 9.5 KB
- references/verify-web.md 5.2 KB
- scripts/rn-style-read.js 15 KB runs code
- scripts/token-drift-diff.js 6.0 KB runs code
- scripts/token-drift-diff.test.js 2.8 KB runs code
- scripts/web-style-read.js 8.0 KB runs code
- scripts/web-style-read.test.js 2.7 KB runs code
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.
- 1mo ago First seen · 130 lines · 99 tokens per session scan A 8fc2950c9dfd
design-fidelity-verify is a skill published in the GitHub repository jeltehomminga/figma-design-skills (5 stars, last pushed 3mo ago), licensed MIT. It adds 99 tokens to every session and 2,608 once invoked, about $0.0004 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-31.
Other skills, from other repositories
accessibility-per-component
Audit one design system component's accessibility against WCAG 2.2 AA: keyboard, screen reader, contrast, focus, ARIA, target size. Trigger: a11y audit, is this accessible, WCAG check, screen reader support, keyboard navigation check. Not for page- or product-wide audits.
schema-validator
Validate token files structurally against DTCG 2025.10 (including resolvers), Style Dictionary 3 to 5 or Tokens Studio: parse errors, $type/$value, name rules, broken or circular aliases. Trigger: validate token JSON, DTCG compliance, are my token files valid. Naming or architecture: token-audit.
fmcp-ds-audit-orchestrator
Figma ekranlarını 5 kategori açısından platform-agnostic denetler (DS compliance / a11y / drift / visual QA / impact). Read-only çalışır; bulguları raporlar, düzeltmeleri sadece önerir — mutation için onay + ayrı agent. Her platformda çalışır. Condensed-first: Essentials bölümü %80 case'i kapsar, Advanced sadece edge…
design-dna
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
figma-variable-audit
Audit Figma variable collections: tier mapping, naming, alias chains, modes, orphans; can fix in place with Figma Console MCP. Triggers: audit my Figma variables, review variable collections, Figma variable health. For token files in code use token-audit.
theme-audit
Audit theme parity: tokens missing or unchanged per theme, component tokens bypassing semantics, contrast within each theme, resolver contexts, theme-switch regressions. Triggers: dark mode audit, theme coverage, brand variant parity. For general token structure use token-audit.