PIXEL-PERFECT CSS DEBUGGING WORKFLOW:

Step 1 - INSPECT: First, analyze the current state by inspecting elements to understand layout, styling, and visual issues. Step 2 - IDENTIFY: Determine what needs to be changed (spacing, alignment, colors, etc.). Step 3 - TEST & VERIFY: Use css_edits parameter to apply changes and instantly see results in returned screenshot. Step 4 - ITERATE: If not perfect, refine css_edits in next call and see updated results immediately. Step 5 - EXTRACT: Copy successful CSS values to your source files.

This tool enables the complete DevTools-like workflow: inspect → edit → verify → iterate → copy. Perfect for debugging layout issues, matching designs exactly, and achieving pixel-perfect UIs through systematic testing.

WHEN TO USE:

• "This button is misaligned" → Inspect current position → Test alignment fixes → Perfect spacing

• "Colors don't match design" → Inspect current colors → Test design values → Verify exact match

• "Layout breaks on mobile" → Inspect responsive behavior → Test CSS fixes → Validate across sizes