Gemini 從截圖反推 UI bug
貼 1-3 張截圖(瀏覽器 / Figma / app)、Gemini 直接定位視覺問題 + 修法
01PROMPT
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.把方括號 [ ] 內的變數換成你的內容,丟進 Gemini 2.5 Pro。
不用離開網站,直接看這組 prompt 跑出來長怎樣(AI 即時生成,扣 1 點)。
02CONTEXT / 使用情境
前端工程師 debug 視覺 bug 用 Stack Overflow 半小時。Gemini 直接吃截圖 → 視覺定位 + 3 個候選修法(排序信心度)。
3 段:visual diagnosis / 3 個候選修法(含信心度)/ 還需要看什麼確認
這是預期成果的文字說明。請查看本文實測說明,並以自己的輸入素材小規模試用。
04VARIABLES / 變數說明
[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.「Gemini 從截圖反推 UI bug」這組提示詞要怎麼用?
這組 prompt 專為 Gemini 2.5 Pro 設計。把 prompt 內 2 個方括號 [變數] 換成你自己的內容,貼進 Gemini 2.5 Pro 執行即可。難度中等,照變數說明填好後即可上手。
「Gemini 從截圖反推 UI bug」是免費的嗎?
完整 prompt 免費開放閱讀,不用註冊;可保存瀏覽器收藏,登入後可一鍵複製與留言。
用 Gemini 2.5 Pro 依這組 prompt 生成的成果可以商用嗎?
prompt 文字本身你可自由使用與修改。但 AI 生成物(圖/音樂/影片/文字)的商用授權,取決於你在 Gemini 2.5 Pro 使用的方案與其官方服務條款,請以該工具的授權規範為準。
RELATED你可能也需要
Suno 工程師思維:4 步驟做出不像 AI 的歌
Studio engineer 視角拆解 Suno 致命弱點(油炸 vocals、高頻 artifact)+ 4 步驟 DAW workflow + Suno Studio 修音 prompt
5 個 6 月 stuck 下來的 Claude 每週 workflow
提案產生器 / 會議處理器 / 內容再利用 / 週五回顧 / 收工 reset — 試了 40 個只有這 5 個沒被丟掉、各省 30+ 分鐘 / 次。
7 個跨 model A/B 測過的 prompt 技巧(不是 vibes)
六個月在 Claude / GPT-4 / Gemini 上用人工 rater A/B 測 200+ prompt 後寫的。包含 persona+constraint stacking / anti-example / role reversal QA / cognitive scaffold / emotional priming / uncertainty CoT / steelman first。
5 個信任檢查單行 prompt(沒有 role-play)
一年的 role-play system prompt + 14-step framework 後總結:真正改變品質的是 5 個單行 prompt。沒有 role、沒有 markdown、沒有「you are an expert」。
EMBED · 嵌入 blog / Note一行 iframe HTML、貼進文章即顯示此 prompt 卡片+
適合:部落格、Medium、Notion 公開頁、Substack — 任何支援 iframe / HTML 嵌入的地方。對方點「看完整」會回到本站、是 prompt 庫的免費 backlink。
<iframe src="https://prompt.luvai.net/embed/gemini-image-screenshot-debug" width="100%" height="380" frameborder="0" style="border:1px solid #e0dcd0;border-radius:4px;" loading="lazy" title="PromptCraft Embed"></iframe>