PinchTab + Claude — Browser Automation for Visual Verification

Claude Code builds UI fast. The problem: claiming visual work is "done" when you haven't seen it rendered in the browser is how CSS regressions ship. PinchTab solves this with a dead-simple CLI that screenshots any URL across 6 viewports (360/390/768/1024/1280/1440) and pipes the output back into your Claude session. You get proof before you commit.

The Hard Rule That Changed Everything

I built this rule into my personal stack two years ago: never claim visual work is complete without a screenshot pass. Unit tests pass, TypeScript compiles, CSS loads — none of that guarantees the page actually looks right. A responsive grid might collapse at 768px. Your web fonts might not load before layout renders. A z-index stack could bury your CTA under something else. You can't see any of it without opening a browser. PinchTab is CLI-first. No GUI. No Playwright test files. Just point it at a URL and get multi-viewport screenshots back as image files or base64 streams that Claude can read inline.

Workflow: One Command, Six Viewports

{`# Install PinchTab globally
npm install -g pinchtab

# Screenshot one URL at 6 standard breakpoints
pinchtab https://localhost:5173 \\
  --viewports 360,390,768,1024,1280,1440 \\
  --output screenshots/

# In Claude Code session:
# Claude reads the 6 images, spots rendering issues immediately
# No human inspection needed — AI catches layout breaks before you do`}

Run this at your dev server. PinchTab waits for the page to stabilize (full DOM ready, images loaded), screenshots at each breakpoint, saves PNGs. Paste the image paths into your Claude session. Claude sees all 6 viewports at once and flags any CSS breaks, missing elements, or responsive logic failures. If everything looks good, you're shipping. If something's wrong, you fix it and re-screenshot. This turns visual verification from "hope I didn't miss anything" into a deterministic gate.

Why This Beats Playwright for Most Teams

Playwright is powerful but requires test files, config, CI integration. PinchTab is a one-liner. No test scaffolding. No snapshot baselines. No headless-Chrome-specific quirks. Just "here's a URL, give me screenshots". Playwright is the right tool when you're building regression test pipelines for CI/CD. PinchTab is the right tool when you're building fast and need proof that the build actually looks correct before shipping.

Integration Points

Before every final commit: run PinchTab, paste results into your Claude session, let AI verify rendering. Before merging any PR that touches layout, responsive CSS, or component structure: screenshot at all 6 viewports. The rule is friction-free because it's a single command. For team projects, store the 6 screenshots in a shared S3 bucket or commit them to a `/screenshots/` branch. Any member of the team can verify visual state without rebuilding locally.

The Bottom Line

AI builds UI fast. PinchTab + Claude verify it actually looks right before shipping. Screenshot 6 viewports, read the images, spot regressions in seconds. It's the difference between "the code compiled" and "humans can actually use this". See `/pricing` for a visual build review service that runs this pattern at scale, or integrate it into your own workflow. Either way: no more shipping broken layouts because you didn't look.