Skill pro Claude Code

Pixel Perfect Coding

Skill pro Claude Code, který dotáhne nakódovanou stránku na návrh z Figmy a doloží to čísly. Změří rozdíl výšky každé sekce, vykreslí overlay, opraví CSS a opakuje, dokud rozdíl nezmizí. Designér pak neprochází web ručně, dostane report.

Verze
1.1
Licence
MIT
Vyžaduje
Chrome, Node 22+, Python 3
Pro Figma frame
Figma MCP server
Vlevo render úvodní stránky stredly.cz, vpravo overlay buildu, který jsme pro ukázku o pár pixelů rozhodili. Červená je návrh, zelená build, žlutá shoda. Obrázek vznikl skutečným během skillu, ne v grafickém editoru.
Stáhnout skill

pixel-perfect-coding.zip · verze 1.1

Instalace

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

Rozbalte do ~/.claude/skills pro osobní instalaci, nebo do .claude/skills uvnitř projektu. Claude Code skill načte při další session; spouští se větou „Pixel perfect coding: …".

Co skill dělá

Skill uzavře smyčku mezi návrhem a kódem a nechá ji běžet, dokud se obě vrstvy nepřekryjí:

  1. Zachytí build. Přes Chrome DevTools Protocol pořídí screenshot celé stránky v přesné šířce framu a přečte geometrii každé sekce z DOMu.
  2. Ohodnotí sekce. Pro každou spočítá rozdíl výšky proti návrhu (Δh) a překryv obsahu (IoU). Δh je číslo, které se opravuje. IoU hlídá, že je nula ze správného důvodu.
  3. Vykreslí overlay. Červená je návrh, který build nemá. Zelená je build, který návrh nemá. Žlutá je shoda.
  4. Opraví CSS od největšího Δh a znovu měří. Opravuje výšky, nikdy neposouvá pozice.
  5. Hlídá regresi. Po každé sadě úprav přeměří ostatní framy a projede šířky 320 až 1920 px. Žádná nesmí scrollovat do strany.
  6. Sepíše audit. HTML report s tabulkou před/po, overlayem každé sekce a seznamem toho, co záměrně nechal být.

Smyčka končí, když je každá sekce v ±1 px, nebo je v reportu pojmenovaná jako vědomě neopravená.

Jak ho použít

Claude Code dostane Figma frame (nebo přiložený PNG export) a adresu běžícího buildu. Zbytek si zařídí sám: založí konfiguraci, projede smyčku, zkontroluje ostatní breakpointy a odevzdá report.

Pixel perfect coding: namapuj https://figma.com/design/…?node-id=49-605 na běžící build na http://localhost:3000 a projeď to.

Co dostanete zpět:

  • tabulku výšek sekcí se součtem rozdílů před a po,
  • overlay každé sekce v plné šířce,
  • seznam „Vědomě neopraveno": překlepy v designu, ruční zalomení řádků, kontaminované vrstvy ve Figmě. Každý bod s důvodem.

Co je v balíčku

Soubor K čemu je
SKILL.md metoda: capture → score → overlay → fix → repeat, pak guard, pak report
scripts/capture.mjs screenshot celé stránky v přesné CSS šířce plus geometrie DOMu přes CDP
scripts/score.py Δh, IoU a nejlepší svislý posun pro každou sekci; zapisuje score.json
scripts/overlay.py červeno-zeleno-žluté overlaye po sekcích
scripts/widths.mjs projede šířky 320 až 1920 px a selže při vodorovném scrollu
scripts/artifact.py HTML audit; čísla bere ze score.json, overlaye vkládá přímo do souboru
reference/ jak dostat přesné pásy z Figmy a pasti, které stály celé kolo měření
templates/ komentovaná konfigurace, vyplněný příklad a šablona poznámek k reportu

Požadavky

  • Google Chrome, skripty ho spouští headless.
  • Node 22 nebo novější.
  • Python 3 s knihovnami numpy a Pillow.
  • Build servírovaný lokálně na pevném portu.
  • Pro Figma framy Figma MCP server připojený ke Claude Code. Bez něj funguje porovnání s přiloženým PNG.

Co skill záměrně nedělá

  • Nehoní zalomení řádků. Designéři často lámou text ručně. Výška a pozice bloku sedí, konce řádků ne. Skill nepřidává <br>, aby vyrovnal overlay.
  • Nereprodukuje překlepy v designu. Sloupec o 5 px níž, protože má ve Figmě jiný gap než sourozenci, je chyba návrhu. Skill se řídí pravidlem, ne nehodou, a v reportu to uvede.
  • Netlačí IoU nad zhruba 0,75 u textových sekcí. Figma a Chrome rasterizují písmo jinak, to je tvrdý strop. Cílem je Δh rovné nule, IoU je kontrola.
  • Nehádá. Když číslo nechce klesnout, dokáže příčinu experimentem: nastaví podezřelou vlastnost na nulu a přeměří.

Verze

1.1 — Čísla v reportu se berou ze score.json, ne z ručně opsaných hodnot. Kontrola, že layout viewport odpovídá šířce framu (chybějící viewport meta tag jinak potichu rozbije mobil). Přesný postup pro export z Figmy přes get_screenshot s maxDimension. Anglické výchozí popisky reportu s volitelným překladem. Volitelné chromeArgs pro lokální domény se self-signed certifikátem. README a MIT licence v balíčku.

1.0 — První veřejná verze.