Design Fidelity Verify

Prove a running app matches its design spec by measuring rendered values, not eyeballing a screenshot. Use when the user says "verify the design", "is this pixel-perfect", "check against Figma", "does the app match the design", or "design QA this screen". Runs a bounded vision+numeric loop over web or mobile, classifying every spec row rather than reporting a bare pixel delta. Consumes the figma-design-extract spec table.

5 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add jeltehomminga/figma-design-skills --skill design-fidelity-verify

Manual install

git clone --depth 1 https://github.com/jeltehomminga/figma-design-skills.git /tmp/figma-design-skills
mkdir -p ~/.claude/skills
cp -r /tmp/figma-design-skills/skills/design-fidelity-verify ~/.claude/skills/design-fidelity-verify

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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`](../figma-design-extract/SKILL.md)** — 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)

1. **Blurry capture.** The default device/headless screenshot is often low-res and hides truncation, wrong colors, and small spacing drift. Always capture full-resolution.
2. **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

Read the full skill on GitHub

Details

Skill name: design-fidelity-verify
Repository: jeltehomminga/figma-design-skills
Path: skills/design-fidelity-verify/SKILL.md
License: MIT
Repo updated: 9 July 2026
Listed in: karanb192/awesome-claude-skills

FAQ

What does the Design Fidelity Verify skill do?

How do I install the Design Fidelity Verify skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add jeltehomminga/figma-design-skills --skill design-fidelity-verify. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design Fidelity Verify popular?

It lives in jeltehomminga/figma-design-skills, which has 5 GitHub stars and 1 forks, and is included in 1 curated skill list.

Related skills

Figma Design Extract

jeltehomminga/figma-design-skills

Extract exact design values from a Figma node into a build-ready spec table, instead of eyeballing a screenshot. Use when the user shares a figma.com node URL, or says "implement this Figma design", "build this component from Figma", "extract the Figma values", or "match the Figma". This is design-to-code only - to push code into Figma, use figma-generate-design instead.

Frontend & DesignIn 1 list

UI UX Fixer

nerdstalker/ui-ux-fixer

Advise on and critique UI/UX design work through the lens of Luke Wroblewski's published principles, using his MCP archive to retrieve relevant writings, presentations, videos, and other source material for each task. Use this skill whenever the user asks for a design review, UX critique, or feedback on a screen, page, form, sign-up flow, checkout, mobile layout, navigation scheme, or AI/agent interface — or asks "what would LukeW say," mentions Luke Wroblewski, or wants design advice grounded in established best practices rather than taste. Also use it when the user asks to fix or improve a U

Frontend & Design

Telegram Premium Emojis

abbosahmad/telegram-premium-emojis

Comprehensive guide, design system, and code generator for Telegram Bot Premium Custom Emojis, Aiogram 3 card UI, icon_custom_emoji_id inline buttons, and sticker pack discovery.

Frontend & Design

Russian Text Quality

Anic888/russian-text-quality

Use when reviewing or writing code that contains Russian-language UI strings, i18n locale files (ru.json, ru.yml, ru.po), Russian comments, or transliterated identifiers (polzovatel, tovar, kolichestvo). Triggers on mixed English-code + Russian-content projects. Does not cover typography, spelling, or ё/е.

Frontend & Design

Apple Design

XOVIET-GAME/apple-design-skill

Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.

Frontend & Design

Nature Style

Zhangyanbo/nature-style-skill

Nature-journal house style for publication-ready scientific figures, optimised for Python/matplotlib plotting. Bundles palette.py (a drop-in matplotlib style module with the Nature-style house palette, Wong colourblind-safe set, point-scale type, safe stroke weights, and helpers) plus the full design system as CSS tokens and figure components for HTML/SVG. Use this skill whenever creating or restyling any chart, plot, diagram, schematic, or multi-panel figure for a scientific paper or analysis — matplotlib/seaborn code, an HTML/SVG mock, choosing colours for scientific data, or preparing figur

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.