- Prompt at a glance
- Category
- Text & chat
- Works with
- Claude · ChatGPT · Claude Code
- Length
- 89 words
- Fields to fill
- PASTE
- Last updated
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.
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.
Attach a screenshot of the broken view and, if you can, one of how it should look. Two pictures beat a long description.
From copy to answer in four steps
- 1
Open Claude and start a new chat.
- 2
Paste the prompt.
- 3
Replace each [BRACKETED] field with your real details and paste in your own text where asked.
- 4
Reply with follow-ups such as "make it shorter" or "make it sound more like me".
About this prompt
Which AI tools work with this prompt?
It is written for Claude, ChatGPT and Claude Code. Paste it into your preferred tool and adjust the wording if the result is off.
What do I need to fill in?
Replace the field before you send it: PASTE. Each field shows an example in the prompt.
Should I paste private information into the prompt?
Only what the task needs. Remove names, contact details and other sensitive data before pasting a resume or document into any AI tool.
