Fidelity Lock

Fidelity Lock

Trigger

Use this skill when all of the following are true:

1. A visual design is already approved/frozen.
2. The task is implementation or migration, not visual redesign.
3. Fidelity to that specific design matters.
4. The implementation must eventually support dynamic data, state, interaction, or resizing.

Do not use this skill as the default for exploratory design work.

Authority

For visual questions, use this order unless the user explicitly supplies another one:

1. canonical design source;
2. canonical render generated from that source;
3. explicit approved design deltas;
4. derived UI specification;
5. current implementation.

A derived specification MUST NOT silently override a conflicting canonical visual source. Record the conflict instead.

Procedure

1. Freeze the canonical environment

Record:

• source file and immutable hash if possible;
• canonical frame/artboard/page;
• render width and height;
• device pixel ratio;
• renderer/browser version where relevant;
• required fonts;
• original image/icon assets;
• approved deltas.

2. Establish a visual shell

Create a baseline that reproduces the canonical render.

For raster sources, a full raster shell is acceptable as an intermediate implementation.

For structured sources such as Figma, preserve native node/component structure where practical, but still keep a canonical raster render for comparison.

The baseline MUST pass the initial visual gate before dynamic conversion begins.

3. Inventory dynamic regions

Create an island manifest. Each island MUST have:

• stable id;
• exact canonical bbox (x, y, width, height);
• reason it must become dynamic;
• source asset/crop or node reference;
• default-state expectation;
• fidelity status.

Do not invent islands for static content merely to make the code more uniform.

4. Convert one bounded island

For the current island only:

1. blank/remove the underlying shell pixels inside its bbox;
2. extract/reuse original assets;
3. implement the replacement;
4. keep all surrounding regions unchanged;
5. render in the canonical environment;
6. compare against the canonical render globally and locally.

5. Gate

Default gate:

GLOBAL_DIFF_PIXELS = 0
ISLAND_DIFF_PIXELS = 0
MAX_CHANNEL_DIFF = 0

If literal zero is impossible due to a proven renderer/font effect:

• localize the exception to the smallest region;
• document the reason;
• define an explicit numeric tolerance;
• keep unaffected regions at zero tolerance.

Never loosen the entire page tolerance because one text region differs.

6. Freeze passed work

Once an island passes:

• mark it frozen;
• do not redesign or refactor it during unrelated work;
• continue to the next island.

If a later change causes regression in a frozen island, stop and fix the regression before continuing.

7. Add behavior separately

After default-state fidelity is locked, add:

• data binding;
• state transitions;
• interaction;
• accessibility;
• responsive constraints.

Prefer separate commits/steps for visual takeover and behavior integration.

8. Responsive expansion

Canonical fidelity comes first.

After it passes, define resize rules explicitly. Add separate visual baselines for each supported breakpoint/state. Do not reinterpret the canonical design merely to make responsive CSS convenient.

Asset rules

• MUST reuse/extract original icons and artwork when available.
• MUST NOT replace them with similar library icons without explicit approval.
• MUST NOT redraw an asset merely because a vector implementation feels cleaner.
• MAY replace a raster island with true DOM/vector later, but only under the same fidelity gate.

Stop conditions

Stop and report instead of guessing when:

• canonical source and derived spec conflict;
• required original asset is missing;
• font dependency is unavailable;
• a design decision is ambiguous and materially affects fidelity;
• the island cannot pass without changing adjacent approved pixels;
• responsive behavior is undefined and cannot be inferred safely.

Anti-patterns

Do not:

• rebuild the whole screen from scratch before establishing a golden baseline;
• treat "looks close" as acceptance;
• modernize or normalize the design without approval;
• solve fidelity and responsiveness simultaneously;
• let Agent-generated UI become the new visual authority;
• continue expanding after a failed fidelity gate.

Required outputs

At minimum, produce:

1. implementation artifact;
2. canonical render reference or reference id/hash;
3. actual render;
4. diff image or diff metrics;
5. island manifest/status;
6. explicit exceptions, if any.

Completion

A fidelity phase is complete when all intended islands pass their visual gates and no untouched/frozen region has regressed.