Connor Holly

← AI Skills

Visual Research Pipeline

Content & Docs

researchscreenshotsCRO

What It Does

Automates web research with visual evidence: browse websites, capture annotated screenshots, and package findings into tickets with inline images. Used for competitive analysis, conversion audits, and design inspiration.

The Pattern

The pipeline has four stages: research, screenshot, upload, and ticket creation.

Stage 1: Research. Web search and page fetching to gather benchmarks, data points, and competitor information. Run research agents in parallel when covering multiple topics or competitors. One agent gathers quantitative benchmarks while another analyzes the current state of a specific site.

Stage 2: Screenshot. Chrome DevTools Protocol (CDP) captures full-page and viewport-specific screenshots. The key is automating what you'd normally do manually: navigate to the page, dismiss cookie consent modals, scroll to the relevant section, wait for lazy-loaded content, then capture.

Launch Chrome with debugging → Navigate to URL →
Dismiss popups → Scroll to target → Wait for render → Capture PNG

Practical details that matter:

  • Cookie consent modals block the hero section on most sites. Dismiss them via JavaScript injection before capturing.
  • Lazy-loaded content needs 1-2 seconds after scrolling before it renders. Screenshot too early and you get placeholder images.
  • Name screenshots with consistent prefixes (/tmp/vr-{site}.png) for batch processing later.

Stage 3: Upload. Screenshots go to a CDN (in this case, Linear's embed upload) to get permanent URLs. The upload must target the same workspace where the ticket will live. Assets are workspace-scoped.

Stage 4: Ticket creation. Assemble findings into a structured ticket with inline images using markdown. Both ticket bodies and comments support embedded images.

Annotation is critical. Raw screenshots without context are useless. Every screenshot should have a "Key technique" label and a "Takeaway" note explaining what's worth learning from it.

Key Decisions

Go beyond direct competitors. The best conversion patterns often come from different industries. SaaS onboarding flows, e-commerce checkout optimization, and media subscription paywalls all have battle-tested patterns worth studying regardless of your domain.

Parallel research and screenshots. Launch research agents first, then start Chrome and capture screenshots while agents work. The research phase (reading and analyzing pages) is slower than the screenshot phase (navigating and capturing). Overlapping them saves significant time.

Show, don't tell. A screenshot with an annotation communicates more than a paragraph of description. When creating tickets for design changes or CRO improvements, the screenshot is the primary content. Text is supporting context.

Batch uploads, then assemble. Upload all screenshots first, save the URLs to a temp file, then compose the ticket body referencing those URLs. This is faster and less error-prone than uploading inline during ticket composition.

When to Use It

  • Competitive analysis that needs visual evidence
  • Conversion rate optimization audits
  • Design inspiration gathering across industries
  • Bug reports that need screenshot proof
  • Any ticket where "show, don't tell" communicates better than text alone