Skip to content
←INDEX / 提示詞庫
TUTORIAL/Gemini 2.5 Pro/進階

Gemini 從截圖反推 UI bug

貼 1-3 張截圖(瀏覽器 / Figma / app)、Gemini 直接定位視覺問題 + 修法

SakuyaPromptCraft 主筆 · 寫於 2026-05-14
AI 教學 / 腳本Gemini 2.5 Pro進階預期輸出說明≈ 239 tokens · 實際用量依工具與輸入而異
Last reviewed2026-05-14Read~3 MIN

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。

◆ 直接開到工具Gemini(記得貼)
RUN站內試跑 / TRY IT
▶ 站內試跑

不用離開網站,直接看這組 prompt 跑出來長怎樣(AI 即時生成,扣 1 點)。

02CONTEXT / 使用情境

前端工程師 debug 視覺 bug 用 Stack Overflow 半小時。Gemini 直接吃截圖 → 視覺定位 + 3 個候選修法(排序信心度)。

03SAMPLE / 期待成果

3 段:visual diagnosis / 3 個候選修法(含信心度)/ 還需要看什麼確認

這是預期成果的文字說明。請查看本文實測說明,並以自己的輸入素材小規模試用。

04VARIABLES / 變數說明

01[symptom]

看到的問題(如:button overlapping text / element disappears on mobile / text bleeds out of container)

02[n_screenshots]

截圖數量(1-3)

05RESOLVER · 變數代入器0 / 2

填下面的欄位,上方 prompt 會即時替換 [方括號] 內容。填好後按「複製組好的 prompt」直接丟進工具。

修飾
Assembled · 填剩餘變數…
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.
FAQ · 常見問題

「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你可能也需要

PRO01
TUTORIALSuno v5.5FEATURED
r/SunoAI (anonymous studio engineer)2026-06-12

Suno 工程師思維:4 步驟做出不像 AI 的歌

5.0(1)

Studio engineer 視角拆解 Suno 致命弱點(油炸 vocals、高頻 artifact)+ 4 步驟 DAW workflow + Suno Studio 修音 prompt

高階
Read

免費02
TUTORIALClaude 4.5 SonnetFEATURED
r/ClaudeAI2026-05-14

5 個 6 月 stuck 下來的 Claude 每週 workflow

提案產生器 / 會議處理器 / 內容再利用 / 週五回顧 / 收工 reset — 試了 40 個只有這 5 個沒被丟掉、各省 30+ 分鐘 / 次。

進階
Read

PRO03
TUTORIALClaude 4.5 SonnetFEATURED
r/PromptEngineering2026-05-14

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。

高階
Read

免費04
TUTORIALChatGPTFEATURED
r/ChatGPTPromptGenius2026-05-14

5 個信任檢查單行 prompt(沒有 role-play)

一年的 role-play system prompt + 14-step framework 後總結:真正改變品質的是 5 個單行 prompt。沒有 role、沒有 markdown、沒有「you are an expert」。

入門
Read

免費 · 全文開放閱讀

完整 prompt 已經開放.

免登入閱讀全文、保存瀏覽器收藏;登入後可一鍵複製與留言討論。不用信用卡。

不想註冊?

留個 email,下次有新 prompt 會寄一封簡短摘要給你。退訂一鍵、不轉賣。

每週一期,新上架提示詞 + 模型測試心得。每封信底部都有一鍵取消訂閱。

或訂 RSS feed(30 秒一次的人味選擇)

COMMENTS · 討論區0 則
登入 後可留言。還沒帳號?註冊
目前沒有留言。第一個說說你的經驗。
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>
預覽 embed →380px tall · responsive width
發現這個 prompt 過時 / 跑不動 / 有錯字? 回報給我們 →