Design Overlay

A development tool that lets you select any element on the page and edit it with AI — directly in the browser. No switching between code and preview. Point, describe what you want, and watch it change.

How to use it

1Click the cursor toggle at the bottom center of the screen to activate the overlay.
2Hover over any element — you'll see a blue outline highlighting it. Click to select.
3Describe what you want to change in natural language. The AI edits the element's styles and content in real time.

Demo content below — try editing it

The quick brown fox

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Card one

This is a sample card. Select it with the overlay and ask the AI to change its background, text, layout — anything.

Card two

Another sample card. Try asking the AI to make this one stand out, add a border color, or restyle the typography.