Build toward the design.
Then protect the result.

Give the reference some intent

Include the target viewport, scale, theme, and component state. Say which details are essential: heading wrapping, spacing around an action, content order, or a disabled state. Note deliberate differences such as placeholder copy.

A screenshot alone cannot explain responsive behavior or interaction requirements. Provide those in text, alongside the image or design file.

Render, inspect, and adjust

With your app running, capture the page after each implementation change. Replace this example route with your own:

npx -p @juxtapose/cli jux snap http://localhost:5173/settings --as iteration-1

Review that render beside the reference at matching viewport and scale. Give specific feedback, such as “the title wraps to a third line” or “the action needs more space below the body.” Let the agent adjust the component and capture again.

To see what the latest edit changed in the implementation:

npx -p @juxtapose/cli jux snap http://localhost:5173/settings --as iteration-2
npx -p @juxtapose/cli jux diff iteration-1 iteration-2 --json

What is supported today

Juxtapose captures rendered pages and compares rendered captures. Reference-led review is the design workflow around those captures. Importing Figma files, matching arbitrary design images, and automatically scoring design fidelity are not supported.

The diff between iterations tells you what the code edit changed. It does not prove either iteration matches the design reference; that still needs review.

Approve the result, then check regressions

Once the implementation matches your intent, represent it in a Storybook or Ladle story and establish its reviewed baseline. Subsequent changes can then be checked against that baseline using deterministic screenshot and DOM comparisons.

Next: set up Storybook captures, use Ladle, or protect the approved component states.