Pixel Perfect Reference UI

Mission

Use this skill when the user gives a total website design image, screenshot, image2 output, Figma export, or local reference-image folder and wants an existing frontend to match it.

The mental model is strict:

• The reference image is the single visual source of truth.
• The existing app is the single behavior source of truth.
• Your job is copying and implementing, not creative redesign.
• Do not be "inspired by" the reference. Replicate its layout, assets, spacing, colors, proportions, and visual language as closely as the target app and source quality allow.

This skill is general. Do not bake in project names, brand names, colors, routes, or decorative motifs unless they come from the current user's reference.

Absolute Business Contract

Before editing code, identify the behavior boundary and keep it intact: