Debug UI Screenshots with Gemini 4 Argon
Debug UI Screenshots with Gemini 4 Argon
A screenshot tells you that a button disappeared. The source tells you why. My useful debugging loop is to send both, ask for a small patch, and capture the same viewport again. Here is that workflow with Gemini 4 Argon through Fluxo, without leaving the terminal except to inspect the images.
This walkthrough assumes an existing Vite React TypeScript project with src/App.tsx and src/App.css, an npm lockfile, and a layout bug visible at 1280 by 720. Run everything from the project root in the same shell. Adjust the source filenames if your component lives elsewhere.
Configure Fluxo and the Gemini 4 Argon model ID
If you want to follow along, create a Fluxo account and generate an API key. Fluxo provides one key and one base URL, https://api.fluxorelay.com, for Claude, GPT, Gemini, DeepSeek, Kimi, GLM, Qwen, Grok and more. Select Gemini 4 Argon in the model catalog and copy its API model identifier; a display name is not necessarily the identifier accepted by requests.
Read both values interactively so the key does not become a literal entry in shell history. These commands use Bash.
read -rsp 'Fluxo API key: ' FLUXO_API_KEY; printf '\n'; export FLUXO_API_KEY
read -rp 'Gemini 4 Argon API model ID: ' FLUXO_MODEL; export FLUXO_MODEL
export OPENAI_BASE_URL=https://api.fluxorelay.com/v1
The /v1 suffix is the OpenAI-compatible API prefix used by this walkthrough. Fluxo also works with Claude Code, Codex, Gemini CLI and any OpenAI SDK, so the same account can support your existing editor workflow.
Capture the broken React screen at a fixed viewport
Install the project dependencies and Playwright, then start Vite on a predictable port. Installing Playwright adds a development dependency and updates your lockfile.
npm ci — npm install --save-dev @playwright/test
npx playwright install chromium — mkdir -p .debug
npm run dev -- --host 127.0.0.1 --port 5173 --strictPort >.debug/vite.log 2>&1 &
Wait until Vite reports that it is ready, then capture the page. The brief delay gives this local interface time to render; applications with asynchronous data should wait for a specific ready element instead.
npx playwright screenshot --browser chromium --viewport-size '1280,720' --wait-for-timeout 1500 http://127.0.0.1:5173 .debug/before.png
Inspect the screenshot before sending it. Remove private customer information, credentials, and unrelated browser content. Keep generated debugging files out of commits, especially if your application displays internal data.
Send the screenshot and component source together
The following command builds an OpenAI-compatible chat request with a base64 image and two source files. Including CSS matters: a clipped button can come from an ancestor's overflow rule rather than the button itself.
python3 -c 'import base64,json,os,pathlib; image=base64.b64encode(pathlib.Path(".debug/before.png").read_bytes()).decode(); source="\n\n".join(p+"\n"+pathlib.Path(p).read_text() for p in ["src/App.tsx","src/App.css"]); prompt="Debug this UI at 1280x720. First describe visible defects. Then connect each defect to the supplied source, distinguishing evidence from guesses. Propose the smallest unified diff. Preserve existing behavior and do not add dependencies. If relevant code is missing, identify the file needed. Source:\n"+source; payload={"model":os.environ["FLUXO_MODEL"],"messages":[{"role":"user","content":[{"type":"text","text":prompt},{"type":"image_url","image_url":{"url":"data:image/png;base64,"+image}}]}]}; pathlib.Path(".debug/request.json").write_text(json.dumps(payload))'
curl --fail-with-body --silent --show-error "$OPENAI_BASE_URL/chat/completions" -H "Authorization: Bearer $FLUXO_API_KEY" -H 'Content-Type: application/json' --data-binary @.debug/request.json -o .debug/response.json — python3 -c 'import json; print(json.load(open(".debug/response.json"))["choices"][0]["message"]["content"])'
Verify the proposed CSS fix with another screenshot
Review the explanation against your code, then apply the patch manually. An image can reveal clipping or overlap, but it cannot establish that a click handler works or keyboard focus remains usable.
npm run build — npx playwright screenshot --browser chromium --viewport-size '1280,720' --wait-for-timeout 1500 http://127.0.0.1:5173 .debug/after.png
- Compare both screenshots at identical dimensions before accepting the change.
- Click the affected control and verify its expected state transition.
- Tab through the interface and check that focus remains visible.
- Repeat the capture at your smallest supported viewport width.
Keep screenshot debugging requests focused
Send the affected component and its layout ancestors before sending an entire repository. Fluxo bills per real token, including cache reads and writes, with no monthly fee; inspect reported usage instead of assuming repeated context is free. Users also earn a referral share when people they invite pay. For this workflow, the useful habit is simple: capture, explain, patch, and verify against the same screen.