Send a Lovable Preview a Screenshot and a One-Line Fix

You are looking at a Lovable preview and the pricing card is off. The middle plan should sit above the other two, and right now all three are the same height so the "Most popular" badge floats over nothing. You could type a paragraph into the chat describing it. Or you can show Lovable the exact card and say one sentence. Here is the second way, start to finish.

The setup: a Lovable preview with one visible bug

The build is a three-tier pricing page. Free, Pro, Team. In the preview the three cards render in a row, each 320px tall, and the Pro card has a badge positioned top: -12px that is supposed to overlap a taller card. Because the card was never made taller, the badge overlaps the header text above it instead. A person can see it in half a second. Described in words, it takes three confusing sentences and Lovable still guesses at which card you mean.

So instead of describing, you capture. Open a new tab and go to start a new review. No install, no extension, no signup. Click Capture screen, and the browser asks which window to share. Pick the tab with the Lovable preview.

Capture, crop, and pin the exact card

The current frame is drawn to a canvas. You do not need the whole page, so drag a rectangle around the pricing row and release. That crop is your still. Now add a numbered pin: click the spot where the badge collides with the header, and pin 1 lands right on the overlap. The pin is what turns "the badge is off" into "the badge at this exact pixel is off," and it saves you from a back-and-forth where Lovable edits the wrong element.

Add one comment to the item. In Chrome or Edge you can dictate it with the built-in speech recognition, or just type. Keep it to a single instruction:

Pin 1: the "Most popular" badge on the Pro card overlaps the header text. Make the Pro card taller than Free and Team (about 360px) so the badge sits above the card, not over the heading.

That is the whole review. One cropped still, one pin, one line. Click Publish. The review saves and gets a short public URL like /r/pricing-badge.

What Lovable actually reads: the markdown

The public link is for people. For Lovable you want the plain-text version, which lives at /r/pricing-badge/markdown. Open it and you get something like this:

# Pricing page review

## Item 1 (screenshot)

Pin 1: the "Most popular" badge on the Pro card overlaps the header text. Make the Pro card taller than Free and Team (about 360px) so the badge sits above the card, not over the heading.

Copy that. Paste it straight into the Lovable chat. The screenshot travels as an image reference and the instruction is right beside it, so the model knows both what it is looking at and what you want changed. Lovable is a browser-based builder, and the Lovable workflow pairs cleanly with a review you built in another browser tab: no context switch, no file to attach, just paste and send.

This is the same reason clean markdown beats a screen recording as input. A model cannot skim a video for the one frame that matters. It reads text and a still. If you want the longer version of why the format matters, what makes feedback agent-readable covers it, and the markdown screenshots terms defines the pieces.

Why the pin does the heavy lifting

Without the pin, "the badge overlaps" could mean the badge overlaps the card edge, the neighboring card, or the header. Lovable would pick one and you would run the loop again. With the pin at the exact collision, there is one place to look and one thing to fix. That precision is worth more than a long prompt. If you want to get better at it, pinning the exact spot a reviewer means walks through more cases.

Keep each comment to one instruction. If you also want the Team card to drop its annual toggle, that is a second item with its own pin, not a second sentence buried in the first. Lovable acts on discrete instructions far more reliably than on a paragraph that hides three changes. The same discipline that makes a good QA bug report makes a good agent prompt.

After the fix lands

Lovable rebuilds the preview. Look at the new frame. If the badge now sits above a taller Pro card, you are done. If it is off by a few pixels, capture the new preview the same way, pin the remaining gap, and paste the fresh markdown. Each pass is one tab, one crop, one line.

The published link stays live for anyone you share it with, and you can send the same review to a teammate as a PDF or Word doc if a person needs to sign off before the change ships. Anyone with the link can comment on the item, and you can mark each comment resolved once it is handled. For the broader pattern of capture, publish, and feed to a builder, the feedback loop for vibecoding page ties it together.

Next time a Lovable preview looks wrong, do not write a paragraph. Capture the frame, pin the spot, say one sentence, and paste the markdown. The fix lands on the first try more often than not.

Send us feedback

Stuck, or want to do something it won't let you? Tell us what you're trying to do and we'll reply by email as soon as we can. This isn't a live chat.

Powered by AcornReply