Match the live preview
Last updated: October 16, 2026
After the agent writes the files, compare your page with the live preview and fix motion, spacing, scroll, and images.
What you'll end with
The mounted section matches the Live visual source of truth URL from the copy.
Step 1: Open both
Open the URL in the copy that starts with https://design-layer.com/part/. Open your page beside it.
On both: wait for the entrance, hover, and scroll to the bottom of the page.
Step 2: Scroll-linked sections
A section that tracks scroll in the preview can freeze on the first frame in your app.
A parent with overflow: hidden, or a short h-screen box that cannot scroll, stops sticky positioning and progress. Leave the section a real scroll distance.
Send the preview URL back to the agent:
This does not match https://design-layer.com/part/THE_ID.
Do not wrap the scroll-linked part in overflow:hidden or a short h-screen box.
Give the page (or that region) a real scroll track and restore the preview's progress.Step 3: Missing images
Image URLs in the copy point at files on DesignLayer. If the agent replaced them, put the original URLs back. Replace a URL only when the original does not open.
Step 4: The layout was reinvented
When spacing, type size, or easing differ, stop the redesign. Paste the preview URL again and tell the agent to restore that page's motion, typography, and spacing. Change headlines and links after the motion matches.