How do I install the Compare Code To Design skill?

Run npx skillmds@latest add hiai-gg/compare-code-to-design in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Compare Code To Design safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Compare Code To Design?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Compare Code To Design free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Compare Code To Design?

HiAi-gg (@hiai-gg) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Compare Code To Design by hiai-gg — Agent Skill

Name: Compare Code To Design
Author: HiAi-gg

Compare Code To Design

Compare implemented UI code against its Figma design: fetch the design context and screenshot, inspect the implementation, and report visual/behavioral differences. Use when a feature was built from a design and needs verification, or when design and implementation drift.

HiAi-gg fa8cffd 2.0 KB Updated Sep 17, 2026

File contents

Compare Code to Design

Use this skill when an agent must verify that an implementation matches its Figma design.

Workflow

1. Gather both sides

Design side: fetch the design context (structure, tokens) and a screenshot of the Figma node.
Code side: read the implemented component/page and, if possible, render or inspect it (e.g. via a browser tool).

2. Compare systematically

Check in this order:

Layout: spacing, alignment, nesting, responsive behavior vs auto-layout.
Colors & typography: values used in code vs the design tokens; flag hardcoded values that should be tokens.
Components: does the code reuse the mapped component (see map-design-components) or duplicate it?
Behavior: interactions the design implies (states, hover, empty states) vs what the code does.
Assets: are the images/SVGs from the Figma payload used, or placeholders?

3. Classify differences

Mismatch: clear deviation from the design (wrong color, spacing, missing element) — list with severity.
Intentional: difference justified by the project (design token overrides, framework constraints) — note it as acceptable with reason.
Unverifiable: cannot be compared from available evidence (e.g. no screenshot) — state the gap.

4. Report

Give: the comparison table (dimension, design, code, verdict), the actionable mismatches ranked by impact, and the recommended fixes. Do not modify the implementation or the Figma file as part of the review.

Guardrails

Read-only review; no code or Figma mutations.
Base every verdict on evidence (token values, screenshots), not guesses.

---name: compare-code-to-designdescription: Compare implemented UI code against its Figma design: fetch the design context and screenshot, inspect the implementation, and report visual/behavioral differences. Use when a feature was built from a design and needs verification, or when design and implementation drift.---# Compare Code to DesignUse this skill when an agent must verify that an implementation matches itsFigma design.## Workflow### 1. Gather both sides- **Design side**: fetch the design context (structure, tokens) and a screenshot of the Figma node.- **Code side**: read the implemented component/page and, if possible, render or inspect it (e.g. via a browser tool).### 2. Compare systematicallyCheck in this order:- **Layout**: spacing, alignment, nesting, responsive behavior vs auto-layout.- **Colors & typography**: values used in code vs the design tokens; flag hardcoded values that should be tokens.- **Components**: does the code reuse the mapped component (see `map-design-components`) or duplicate it?- **Behavior**: interactions the design implies (states, hover, empty states) vs what the code does.- **Assets**: are the images/SVGs from the Figma payload used, or placeholders?### 3. Classify differences- **Mismatch**: clear deviation from the design (wrong color, spacing, missing element) — list with severity.- **Intentional**: difference justified by the project (design token overrides, framework constraints) — note it as acceptable with reason.- **Unverifiable**: cannot be compared from available evidence (e.g. no screenshot) — state the gap.### 4. ReportGive: the comparison table (dimension, design, code, verdict), the actionablemismatches ranked by impact, and the recommended fixes. Do not modify theimplementation or the Figma file as part of the review.## Guardrails- Read-only review; no code or Figma mutations.- Base every verdict on evidence (token values, screenshots), not guesses.

Frequently asked questions