---
name: nxx-sharingan
description: >-
  Faithful replication of a visual reference — copying an existing design,
  screenshot, mockup or image into Figma, HTML or components so it measures
  identical instead of merely looking similar, and verifying any build against
  its reference. Encodes the model's known failure modes (prior regression,
  saturating similarity, lossy attribute round-trip, self-evaluation
  contamination) and the counter-pipeline: serialize attributes before
  building, crop-and-upscale diffs, pixel sampling for magnitudes, and — only when the owner asks — a
  blind subagent diff under shuffled neutral filenames. Use whenever the user
  asks for a replica or copy of a reference ("réplica", "idêntica", "igual ao
  print", "clone this design", "copie essa referência", "pixel-perfect"),
  pastes or points at an image or a live URL to reproduce, asks what differs
  between a
  build and its reference ("compare com o original", "o que está diferente"),
  or before declaring any copy finished — even if the word "replica" never
  appears. Also keeps the technique ledger — the growing catalogue of art
  styles and effect recipes learned from references (glass morphism, masked
  photography, aurora overlays) and how to reproduce them — so trigger it
  too when the user asks what technique a reference uses or how to rebuild
  its effect. Explains meaning as well as method: trigger it when the user
  asks for a semiotic or symbolic reading of a design ("análise semiótica",
  "leitura simbólica", "o que significa esse fundo/essa cor/esse itálico",
  "why does this design feel X"), and every design delivery it touches
  leaves a brief semiotic reading beside the work.
---

# My Sharingan

A replica hands the role of system of record to the reference image. Your
taste, the house system and every default you carry are suspended until the
surface stops being a replica — quorra.ds states the same contract from the
design-system side in its "Replicating a reference" section. This skill is
the method: it exists because on 2026-08-13 a replica of a glass morphism
card "looked close" at first screenshot and measured 2.2× off in luminance,
inverted two fill polarities, flattened a per-word emphasis and shipped the
wrong headline weight — and every rule below was paid for that day.

## Know your failure modes

You are a model. These biases are systematic, so they are predictable, so
they can be engineered against. Read them as facts about yourself, in your
own language.

1. **Semantic similarity saturates.** Your visual comparison operates on a
   lossy embedding: it reports "same composition, same objects" with high
   confidence and carries no magnitude. Two glows 2.2× apart in luminance
   land in the same bucket. High confidence with low resolution is the
   dangerous pair — magnitude exists only when a tool samples the pixel.
2. **Generation regresses to the prior.** Every parameter of the reference
   you did not explicitly serialize into context — font weight, leading,
   fill-versus-stroke, margins — gets filled by the mode of your training
   distribution conditioned on the genre ("landing page hero": Medium
   weight, airy leading, filled chips, outline icons). Replication is
   inference against the prior, and the prior wins wherever attention did
   not land.
3. **The round-trip drops low-salience bits.** Image → internal description
   → construction is lossy: the description keeps "two small badges" and
   drops the outline/filled bit; reconstruction completes it from the
   prior. The granularity of your description caps fidelity — per-word
   emphasis inside a line does not exist if your unit is the line.
4. **Object-centric parsing misses relational effects.** You describe nodes
   and their properties; what a blur does to what sits behind it is a
   property of no single node, so it falls out of your list — and it may be
   the dominant fact of the rendered image. Judge translucent materials by
   their effect on the background, never by their own fill.
5. **Self-evaluation is conditioned on your own trace.** Your verification
   context contains your intentions, your layer names, your "applied X" —
   those tokens dominate the verdict. This is contamination, and no amount
   of honesty fixes it from the inside.
6. **Your default loss is not the task loss.** Your trained objective is
   "good UI"; the task objective is "minimize distance to the reference".
   Where they diverge — a shadow you are proud of, icons crisper than the
   original — you will optimize the default without registering the swap.
   In a replica, a difference is an error even when it is an improvement.
7. **Content and medium are different distributions.** A photographic
   reference carries grain, color cast, softness. Matching the design but
   not the medium gives a content match with a texture mismatch, and the
   mismatch dominates perception. Separating signal from artifact (JPEG
   blocking, image-edge borders — never copied) requires a model of how
   the image was produced, not just its pixels.
8. **Effort does not correct bias; conditioning does.** More care inside
   the same context reproduces the same failures. The gains come from
   changing what the judgment is conditioned on: crops, numbers, fresh
   contexts, neutral labels.
9. **The verification channel has its own artifacts.** A renderer can
   report a defect the file does not contain: on 2026-08-13 an MCP
   full-frame screenshot dimmed every variable-bound text fill while the
   file held the right values — provable by resolving the bound variable
   for the consumer node and by rendering the same nodes isolated. When a
   defect shows in one render path, check the medium's own data and a
   second render path before touching the build; a defect only one
   channel can see belongs to the channel. The measuring tools qualify
   too: on 2026-08-13 `sips --cropOffset 0 0` silently produced a
   center crop — sips treats zero offsets as unset — and the "corner"
   crop showed a bright rim line that a direct pixel sample proved was
   300px away. A crop is trusted only after one sampled pixel agrees
   with it.

## When there is no reference yet

Everything below assumes a reference exists. Sometimes the better move is to
manufacture one first: generate the design as an image, then serialize and
build against it exactly as if a client had sent it. The pipeline is unchanged
from step 0 — the only difference is where the reference came from.

It is worth doing when a surface is being invented rather than copied, because
it separates two decisions that otherwise contaminate each other. Deciding what
the page looks like while writing the markup produces a page shaped by what was
easy to code. Deciding it in an image first, then translating, produces a page
shaped by the design, and the gap between them becomes measurable rather than a
matter of opinion.

Two rules make it work:

- **One section, one image.** A single render of a whole page compresses every
  section into a thumbnail, and thumbnails are where weight, polarity and
  spacing go to die — the same reason failure mode 2 exists. Generate each
  section at the aspect ratio it will ship at.
- **Never crop a section out of a larger render to use as its spec.** Re-render
  that section standalone. A crop of a compressed page inherits the compressed
  page's proportions, so the type scale and margins you serialize from it are
  wrong in a way that measures consistent.

The second rule governs *sourcing a spec*, and it does not touch the diff:
cropping and upscaling to **compare** a build against its reference stays
mandatory at steps 0, 2 and 4. Two different uses of the same verb — one is
where the truth comes from, the other is how you look at it.

**The drift this exists to catch.** The characteristic failure is that the
generated comp is distinctive and the coded result is generic: generous spacing
compressed, a distinctive section flattened into a standard row, nested
containers reintroduced, the palette pulled back toward defaults. It happens
because the build is a translation and every translation rounds toward the
translator's habits. The bar is not *inspired by* the comp. It is the same bar
as any other reference in this file — measured identical — and steps 2 and 3
are how you prove it rather than assert it.

## The pipeline

### 0. Serialize before you build

Walk the reference region by region and write the attribute list down —
in the plan, not in your head: exact weights, line gaps in px, sizes,
margins, radii, stroke-versus-fill for every small element, per-word style
changes inside lines, what each material does to what is behind it, and
what the medium contributes (grain, cast, softness). What is not written
will be invented by the prior (failure modes 2–4). Crop and upscale small
regions while doing this; thumbnails hide weight and polarity.

When the reference is native to a structured medium — a Figma node, a
DOM, an SVG — serialize from its data rather than its pixels: exact
fills, gradient stops, blend modes and effect stacks beat any sampled
estimate. **When it is a live site, read
[references/live-extraction.md](references/live-extraction.md) before
serializing**: a running page holds its answers in eight separate places, four
of which no static read reaches, and `scripts/extract-layers.js` there pulls
all eight. Name what you are copying while you walk it: the genre and the
technique (glass morphism, masked photography, aurora overlay) and the
recipe — which stack of nodes, blends and blurs produces each effect.
Attributes alone do not survive a change of medium; the recipe does.
Check [references/tecnicas/](references/tecnicas/README.md) before
serializing — a recognized technique tells you which attributes carry it.

Serialize existence before appearance: `visible` flags, clipping, and
whether each subtree contributes any rendered pixel. On 2026-08-13 a
moon group carrying a 1.4 MB photographic fill shipped hidden and fully
outside its frame's clip; a serializer that recorded every paint, effect
and font — and not `visible` — described a rich element that renders
nothing. Structure describes what would render; only a render shows
what does.

### 1. Build from the spec

Build from the serialized list, never from memory of the image. When a
value is missing from the list, go back and measure it — do not let the
default supply it.

When the reference already exists in the target medium and is ours — a
house Figma node, a house asset — transplant it: clone the node, copy the
asset, and spend the remaining steps verifying the transplant. A third
party's site is studied, never mirrored: its media, text, fonts and code
stay with it, and the technique is rebuilt on house material. A clone measures identical by construction (on 2026-08-13
a cloned cover diffed 2 px of anti-aliasing jitter in 1.3M); rebuilding
from a spec is the path for a reference that lives in another medium.

The fidelity contract binds the rendered pixels; the layer tree binds
the next reader, and the two never trade. Everything this skill writes —
a clone, a rebuilt replica, a frame created from scratch — is born with
semantic organization: every node named by its role (Moon, Logo lockup,
Aurora wash), grouping by meaning, layout containers where the structure
implies them, so the file explains itself to whoever opens it next. The
transplant case is where the duty must be imposed rather than merely
followed: a structured source — a Figma file, a DOM — arrives carrying
its author's process (anonymous "Group 8", "Frame 1", "Asset 8 1",
accidental nesting), that organization is not part of the reference, and
copying it buys no fidelity. Failure mode 6 forbids improving the
render; the tree sits outside the render, so organizing it is duty, and
the proof is render-neutrality: reorganize, then let steps 2–3 show the
pixels did not move.

### 2. Sighted diff, measured

Screenshot the build. Compare full views, then matched crops of every
region, upscaling small ones. Every magnitude claim gets a sampled number
(luminance, gap, size); one tool-measured value beats ten adjectives
(failure mode 1). On macOS:

```bash
sips -c <h> <w> --cropOffset <y> <x> in.png --out crop.png   # crop region
sips -z <h*4> <w*4> crop.png                                 # upscale 4x
```

sips reads a zero offset as "not given" and crops the center instead —
for a corner crop pass `1 1`, never `0 0`, and confirm any crop with one
direct pixel sample before believing it (failure mode 9).

### 3. Blind diff, decorrelated

Only when the owner asks for it. On 2026-09-24 he took it out of the
default: each pass spends a subagent's whole context, and one type-quality
pass on the Nash Grotesk ran 38 minutes. Without his request, steps 4 and
"Done means" run on the sighted diff of step 2, and the render goes in
front of him.

Copy both images to neutral names (`a.png`, `b.png`), shuffle which is
which, and hand them to a subagent with no other context (failure modes
5 and 8).

**Both frames must be the same crop of the same scope**, and this is the
setup step that is easiest to skip. On 2026-08-21 a section-only build was
diffed against a whole-page frame of the reference; the pass correctly
reported a missing header, which was page-level furniture the section was
right not to carry. The finding was real about the images and false about
the build, and it cost a round of reconciliation. When the build is one
section of a longer page, capture the reference at the same section and say
in the prompt what the crop covers.

Prompt shape:

> Compare a.png and b.png. Do not assume which is correct. Examine full
> views, then crop matching regions. List every visible difference,
> ordered by visual significance, with estimated px/RGB values.

Reconcile its list with yours. Expect it to find things you cannot: on the
skill's founding session the blind pass caught the bevel rim, a
vertical-rhythm inversion and the glass's frosting behavior that the
sighted pass missed.

**Re-derive which label is your build before turning any finding into an
action — a flipped label inverts add into remove.** A finding phrased "A
has an element B lacks" is a removal instruction when A is your build and
an addition instruction when A is the reference; the subagent's prompt
withholds which is which specifically so its list stays unbiased, which
means reconciliation is the one place the mix-up can still happen. On the
R#4 replica (2026-08-13) a footer band the blind pass flagged as present
only in the build (mine) was read backward as "the reference has a card
here", built, screenshotted, and only removed a pass later once a direct
pixel sample of the reference's own bottom edge came back uniform. Look
up the shuffle key first, then translate.

When successive passes contradict each other, the disagreement is itself
a measurement. Independent observers fail to converge only where the
reference carries no stable signal to converge on: on 2026-08-13, over an
AI-generated reference's melted glyphs, one pass read an icon as a
crescent moon and the next as an arrow; one called the title face heavier
than the build's, the next called it thinner. Chasing each verdict in
turn oscillates the build without ever landing. Classify the element as
an artifact of the medium (failure mode 7), record the medium decision
with the user — typically "kept legible", the same standing that excluded
JPEG blocking gets — and stop steering by that element. A finding earns a
fix only when two independent passes can agree on what they saw.

### 4. Fix in the viewer's order

Rank fixes by the viewer's order — rendered-pixel dominance, the blind
list's order when one ran — not by
your build order or your craft instincts (failure mode 4: the maker ranks
by effort, the viewer by what hits the eye). Put your own "improvements"
on the suspect list first (failure mode 6).

### 5. Decide the medium deliberately

Grain, cast and softness are reproduced or excluded as an explicit
decision recorded with the user — never silently (failure mode 7).
Compression artifacts and image-frame borders are never copied.

### Done means

The owner approves the render, shown beside the reference; when he asked
for a blind pass, its list, rerun after fixes, has nothing above the
threshold agreed with him. "It looks right to me" is not a terminal state
this skill recognizes — that judgment is the contaminated one (failure mode
5).

The threshold has a floor: two exports of the same node differ by a few
pixels of anti-aliasing jitter (measured 2 px in 1.3M on a cloned cover),
so zero is unattainable, and differences at that scale are render noise
rather than findings.

A parity or pixel-diff pass is evidence only for the viewport(s) and
interaction state(s) it was actually run at — never for another width, nor
for dynamic behavior (scroll speed, hover, keyboard) that was never driven
live. A replica of humandone.com (2026-09-02) closed its parity gate at 0
divergences and its pixel diff at 0.44%, both measured only at 1920px, and
had three real, user-visible defects the moment it was opened at 1512px.
State the scope beside the number: "0 divergences at 1920px" is a claim;
"0 divergences" alone overclaims.

## When the reference is a running site

The pipeline above assumes a still. A live site is a structured medium, so
step 0's rule applies at full strength: serialize from its data, not its
pixels. The DOM is the reference and a screenshot is the last resort. The
harness, the ink-not-boxes rule, fluid anchors, animation and pointer
measurement, and the five mirrors that must pair are in
[references/live-extraction.md](references/live-extraction.md) — moved there
verbatim on 2026-09-07 so this file keeps the method and that one the
engine. When the canvas draws the page instead of the DOM, read
[references/webgl-sites.md](references/webgl-sites.md) as well.

## The technique ledger

A replica that ends at matched pixels teaches nothing forward. Each
session also captures the art it copied — the genre, the technique, and
the measured recipe that reproduces it — in
[references/tecnicas/](references/tecnicas/README.md), one file per
technique, written to the template at the top of that index. Read the
ledger before serializing a new reference and add to it before closing the
session: a recipe already paid for beats rediscovering it under deadline.

Every replica's files — the build, the spec, the measurements, the stills —
live in `~/Documents/Profissional/replicas/<slug>/`, one git repo for all of them
(opened 2026-09-07; humandone and milkinside were imported there with their
history). A replica that stays in a scratch folder is lost by the next
session.

A recipe enters the ledger only after its effect has been rendered and
seen — an isolated render of the element, never an inference from its
node stack. The moon entry earned this rule: a recipe written from
structure alone described, as the cover's signature element, a group
that ships hidden and clipped out, rendering zero pixels. Until the
render exists, a recipe is a hypothesis and is labeled as one.

## The semiotic reading

A design explains itself on two layers, and this skill owes both: the
recipe (how the effect is built — the ledger above) and the reading (what
each choice says to the person looking). A technique named without its
meaning is half an answer: "aurora gradient, 5 stops, blur 48" tells the
next builder nothing about why the ground had to be dark for it to read
as light. Asked what a reference uses, answer both layers.

The method, kept brief and in lay terms:

- **One line per sign.** Walk the same regions serialization walks —
  ground, palette, type posture (case, slant, weight, tracking), framing,
  composition, the dominant element — and for each, state what is
  literally there and what it evokes for the audience (denotation →
  connotation). Name the sign type only when it sharpens the point:
  resemblance (icon), causal trace (index), pure convention (symbol).
- **Cite the subject's own record before free association.** A brand's
  element list, a client's written justification, a documented grammar —
  a reading anchored there ("Aurora boreal is on her own element list;
  aurora needs darkness, so the black stage is what makes it possible")
  beats any generic color-psychology claim.
- **What was removed also signifies.** An element the audience could not
  decode, or two signifiers competing for one signified, are findings of
  the same reading — record why they left.
- **Ledger entries may carry a "connotes" line** next to the recipe, so
  the meaning learned with a technique travels with it.

Delivery duty: every design delivery this skill touches leaves the brief
reading beside the work — on a Figma canvas, a `semiotic note YYYY-MM-DD`
sticky card beside the session note, in lay Portuguese per the house note
practice; elsewhere, a short block in the delivery report. The reading is
part of the delivery, not an extra the user must request.