A skill for Claude Code

Pixel Perfect Coding

A Claude Code skill that drives a coded page onto its Figma design and proves it with numbers. It measures the height delta of every section, renders an overlay, fixes the CSS and repeats until the difference is gone. The designer gets a report instead of walking the site by hand.

Version
1.1
Licence
MIT
Requires
Chrome, Node 22+, Python 3
For Figma frames
Figma MCP server
Left: the stredly.cz homepage as rendered. Right: the overlay of a build we deliberately knocked a few pixels off for this demo. Red is the design, green is the build, yellow is agreement. The picture comes from a real run of the skill, not from an image editor.
Download the skill

pixel-perfect-coding.zip · version 1.1

Install

unzip pixel-perfect-coding.zip -d ~/.claude/skills/

Unzip into ~/.claude/skills for a personal install, or into .claude/skills inside a project. Claude Code picks the skill up in the next session; trigger it with "Pixel perfect coding: …".

What the skill does

The skill closes the loop between design and code and keeps it running until the two layers coincide:

  1. Captures the build. Takes a full-page screenshot at the exact frame width through the Chrome DevTools Protocol and reads every section's geometry from the DOM.
  2. Scores the sections. For each one it computes the height delta against the design (Δh) and the ink overlap (IoU). Δh is the number that gets fixed. IoU checks that it is zero for the right reason.
  3. Renders the overlay. Red is design the build does not have. Green is build the design does not have. Yellow is agreement.
  4. Fixes the CSS, largest Δh first, and measures again. It fixes heights, never positions.
  5. Guards against regression. After every round of edits it re-measures the other frames and sweeps widths from 320 to 1920 px. None may scroll sideways.
  6. Writes the audit. An HTML report with a before/after table, an overlay for every section and a list of what it deliberately left alone.

The loop ends when every section is within ±1 px, or is named in the report as deliberately left alone.

How to use it

Claude Code gets a Figma frame (or an attached PNG export) and the address of the running build. It handles the rest: sets up the config, runs the loop, checks the other breakpoints and hands back the report.

Pixel perfect coding: match https://figma.com/design/…?node-id=49-605 against the build running at http://localhost:3000.

What you get back:

  • a table of section heights with the total delta before and after,
  • an overlay of every section at full width,
  • a "Deliberately left alone" list: typos in the design, hand-broken lines, contaminated layers in Figma. Every item with a reason.

What is in the package

File Role
SKILL.md the method: capture → score → overlay → fix → repeat, then guard, then report
scripts/capture.mjs full-page screenshot at an exact CSS width plus DOM geometry, via CDP
scripts/score.py Δh, IoU and best vertical shift per section; writes score.json
scripts/overlay.py red/green/yellow overlays per section
scripts/widths.mjs sweeps 320 to 1920 px and fails on any horizontal scroll
scripts/artifact.py the HTML audit; numbers from score.json, overlays inlined
reference/ getting exact bands out of Figma, and the traps that each cost a full round of measuring
templates/ annotated config, a filled example and the notes template for the report

Requirements

  • Google Chrome; the scripts launch it headless.
  • Node 22 or newer.
  • Python 3 with numpy and Pillow.
  • The build served locally on a fixed port.
  • For Figma frames, the Figma MCP server connected to Claude Code. Without it, comparison against an attached PNG still works.

What the skill deliberately does not do

  • It does not chase line breaks. Designers often break text by hand. The block's height and position match, the line endings never will. The skill does not add <br> to even out an overlay.
  • It does not reproduce typos in the design. A column 5 px lower because its Figma frame has a different gap than its siblings is a design mistake. The skill follows the rule, not the accident, and says so in the report.
  • It does not push IoU past roughly 0.75 on text-heavy sections. Figma and Chrome rasterise type differently; that is a hard ceiling. The goal is Δh at zero, IoU is the check.
  • It does not guess. When a number refuses to move, it proves the cause by experiment: sets the suspect property to zero and measures again.

Versions

1.1 — Report numbers come from score.json, never retyped. A check that the layout viewport matches the frame width (a missing viewport meta tag otherwise breaks mobile silently). An exact procedure for exporting from Figma with get_screenshot and maxDimension. English default labels in the report with optional translation. Optional chromeArgs for local domains with self-signed certificates. README and MIT licence in the package.

1.0 — First public release.