Test design options on a live page
Test a layout, color, or copy change on the live website before development. If it works, keep the CSS. If it does not, undo. Visitors never see it.
How it works
- Open the live site. Select an element or change a color or type style across the page.
- Try the design option. Toggle it off to see the shipped UI again.
- Copy CSS, share a preview link, or send the change to your codebase when you are ready.
Frequently asked questions
Is this visual QA or a playground?
A playground on the real URL. Try a design option before you build it. Visual QA that finds drift is Scan UI. Figma vs live is Compare Figma.
Can I edit a live website without deploying?
Yes. inspecta is a visual editor on the real page. Only you see the CSS. Visitors still get the shipped site.
What design options can I test?
Layout, spacing, color, typography, copy, images, and icons. Try one element or a full color system across the page.
How do I compare two directions?
Toggle Show changes to flip the experiment on and off. Undo if it fails. Keep a version in Changes if you want both.
When I like an option, how do I build it?
Copy the CSS, share a link with the live preview, or send the change to Cursor or Copilot so it lands in the repo.
Is this the same as comparing Figma to production?
No. Use this when you want to try a new idea on the live site. Use Compare Figma when the file is already the source of truth.