Agent skill · Yu-369
pixel-perfect-replication
Image-to-code replication pipeline. When the user provides a screenshot or design reference, this skill runs a structured extraction across seven layers (grid, type, color, spacing, components, atmosphere, interaction), builds an Extraction Sheet before any code is written, implements with exact fidelity to the reference, and verifies through inline Quality Gates and a final Visual Diff. The reference image is the spec. The code is a translation, not an interpretation.
What it needs
About 12k tokens when loaded.
What this skill does
Pixel-Perfect Design Replication This skill fires when the user provides a screenshot, mockup, Figma export, or any design image and asks you to replicate it in code. The reference image is the specification. Your role is translator, not designer. Every visual decision - font size, spacing, color, radius, shadow, layout proportion - comes from the image, not from your preferences. --- The Pipeline Every replication job follows this flow. No phase can be skipped. No phase can start before the previous one completes. --- Phase 1: Image Intake Receive the reference image. Before doing anything else, classify what you are looking at. → Classify the image Fill in this table for every reference image: Field Your answer --- --- Image type Full-page screenshot / single section / component detail / mobile view / desktop view / Figma frame / design tool export / live site screenshot Sections visible List top-to-bottom, e.g. "Nav → Hero → Features → Testimonials → Footer" Target viewport Estimated width: 1440px (desktop), 1280px (laptop), 768px (tablet), 375px (mobile) Fidelity High-res export (sub-pixel details are intentional) / compressed screenshot (some lossy artifacts) Theme Light / Dark / Mixed → Output the Extraction Summary Before any code, state what you see in structured natural language. This anchors every decision that follows. Example: Light mode, 1440px desktop. Five sections: sticky frosted nav with logo left / links center / CTA right, hero with massive serif heading left-aligned over full-bleed photography, 3-col feature grid with icon-top cards, testimonial carousel with large quotation marks, minimal footer with 4-col link grid. Palette: warm cream base, near-black text, terracotta accent on CTAs. Typography: serif display heading (likely Playfair Display), geometric sans body (likely Outfit). Cards are sharp-cornered, buttons are pill-shaped. No visible shadows - flat design with subtle border separators. → If the image is unclear Do not guess. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills Yu-369/pixel-perfect