Reverse-Engineer a UI Bug from a Screenshot with Gemini
Paste 1-3 screenshots (browser / Figma / app) and Gemini pinpoints the visual problem + the fix
You are a senior frontend engineer. I'm attaching {{n_screenshots}} screenshot(s) showing a UI issue: {{symptom}}.
Produce:
## 1. Visual diagnosis (2-3 sentences)
What exactly is wrong visually? Be specific about which element and what property is off (alignment / spacing / color / typography / responsiveness / z-index / overflow).
## 2. Most likely root cause (top 3, ranked)
For each:
- **Hypothesis**: 1 sentence
- **CSS / layout property to check**: specific property name + likely current value
- **Fix**: concrete CSS or Tailwind class change
- **Confidence**: low / medium / high
## 3. What I'd need to confirm
If you can't be sure from screenshots alone, list 2-3 things you'd need to see (DevTools panel / source code / different viewport).
Rules: don't guess at properties you can't verify from the image. "It looks like the container has overflow: hidden — confirm in DevTools" beats "set overflow: visible". Be honest about confidence.Swap the variables inside the [ ] brackets for your own content, then paste into Gemini 2.5 Pro.
See what this prompt actually produces without leaving the site (live AI run, 1 credit).
Front-end engineers spend half an hour on Stack Overflow debugging visual bugs. Gemini takes the screenshot directly → visual diagnosis + 3 candidate fixes (ranked by confidence).
3 段：visual diagnosis / 3 個候選修法（含信心度）/ 還需要看什麼確認
[symptom]看到的問題（如：button overlapping text / element disappears on mobile / text bleeds out of container）
[n_screenshots]截圖數量（1-3）
填下面的欄位，上方 prompt 會即時替換 [方括號] 內容。填好後按「複製組好的 prompt」直接丟進工具。
You are a senior frontend engineer. I'm attaching {{n_screenshots}} screenshot(s) showing a UI issue: {{symptom}}.
Produce:
## 1. Visual diagnosis (2-3 sentences)
What exactly is wrong visually? Be specific about which element and what property is off (alignment / spacing / color / typography / responsiveness / z-index / overflow).
## 2. Most likely root cause (top 3, ranked)
For each:
- **Hypothesis**: 1 sentence
- **CSS / layout property to check**: specific property name + likely current value
- **Fix**: concrete CSS or Tailwind class change
- **Confidence**: low / medium / high
## 3. What I'd need to confirm
If you can't be sure from screenshots alone, list 2-3 things you'd need to see (DevTools panel / source code / different viewport).
Rules: don't guess at properties you can't verify from the image. "It looks like the container has overflow: hidden — confirm in DevTools" beats "set overflow: visible". Be honest about confidence.Suno Engineer's Mindset: 4 Steps to a Song That Doesn't Sound Like AI
A studio engineer's breakdown of Suno's fatal weaknesses (fried vocals, high-frequency artifacts), plus a 4-step DAW workflow and a Suno Studio cleanup prompt.
5 Claude Weekly Workflows That Stuck After 6 Months
Proposal generator / meeting processor / content repurposer / Friday review / shutdown reset — out of 40 I tried, only these 5 survived, each saving 30+ minutes per run.