Fix a layout bug from a screenshot

Attach a screenshot of the broken layout and paste the component code. This prompt first describes what it sees, so you know it read the image correctly, then finds the CSS rule causing the problem and fixes it.

text-code-ui-bug-from-screenshot — claude — 89 words

Act as a senior frontend developer. I am attaching a screenshot of a layout bug.

What looks wrong: [e.g. the card buttons overflow on mobile, text overlaps the image]
Where it happens: [e.g. Safari on iPhone, screens under 400px]
Component code and CSS:
[PASTE]

Describe what you see in the screenshot first, so I know you read it correctly. Then explain which CSS rule causes the problem, give the fixed code, and tell me which other screen sizes I should check so the fix does not break something else.

Edit in the builder Copy & open Claude ↗Copy & open ChatGPT ↗Copy & open Claude Code ↗

Attach a screenshot of the broken view and, if you can, one of how it should look. Two pictures beat a long description.

Get a better result

What you will get

A description of what the AI sees in your screenshot, the CSS rule that causes the problem, the fixed code and a list of other screen sizes to check.

Common mistake

The AI misreads the screenshot and fixes the wrong thing.

Fix: Keep the step where it describes what it sees first, and correct it if wrong before it writes any code.

Also watch for

The fix works at one width and breaks another. Ask for a test list of widths, such as 320, 375, 768 and 1280 pixels, and check each in your browser’s device view.
It adds fixed widths or important flags to force the layout. Say “prefer flexible layout, with no fixed pixel widths or important flags unless you explain why”.

Try a variation: include the browser

Add the exact browser and version where the bug shows, and ask “is this a known behaviour of that browser?”. Some bugs only appear in one engine.

Still not right? Reply with this

Show the smallest CSS change that fixes this at 375 pixels wide, and explain why each line is needed.