Browser Analyze

Browser-Powered Page Analysis

Use Codex Browser to deeply analyze web pages before generating or optimizing storefronts.

When to Use

• User says "remix this", "build like this", "analyze this page"
• User provides a competitor URL or reference site
• User wants CRO audit of their own page
• User wants design tokens extracted from a live site

---

Workflow

Step 1 — Navigate and Capture

Use Codex Browser to:

1. Open the target URL
2. Take a full-page screenshot (desktop viewport)
3. Resize to mobile (375px width) and screenshot again
4. Note the page title, meta description, and any structured data

Step 2 — DOM Inspection

Use Codex Browser to run read-only JavaScript inspection:

// Extract structural data
({
  headings: [...document.querySelectorAll('h1,h2,h3')].map(h => ({ tag: h.tagName, text: h.textContent.trim() })),
  ctas: [...document.querySelectorAll('button, a[class*="btn"], a[class*="cta"], [data-action]')].map(el => ({ text: el.textContent.trim(), href: el.href || '', classes: el.className })),
  images: [...document.querySelectorAll('img')].slice(0, 20).map(img => ({ src: img.src, alt: img.alt, width: img.naturalWidth })),
  colors: getComputedStyle(document.body).backgroundColor,
  fonts: getComputedStyle(document.body).fontFamily,
  sections: [...document.querySelectorAll('section, [class*="section"], main > div')].length
})

From this data, identify:

• Section count and heading hierarchy
• CTA buttons (text, color, position relative to fold)
• Color palette from computed styles
• Font families in use
• Image sources and alt text quality
• Interactive elements (carousels, tabs, accordions, video players)

Step 3 — Conversion Analysis (12-Point Audit)

Score each 0-10 based on screenshots + DOM data:

| # | Dimension | Key Question | |---|-----------|-------------| | 1 | Above-the-Fold | CTA visible without scroll? Hero compelling? | | 2 | Message-Match | Headline aligned with likely traffic source? | | 3 | CTA Quality | Benefit-driven copy? Adequate contrast? Single primary? | | 4 | Social Proof | Stars/testimonials/logos present? Well-placed? | | 5 | Trust Signals | Shipping/returns/guarantees visible? | | 6 | Urgency/Scarcity | Real or manufactured? Appropriate for vertical? | | 7 | Price Psychology | Anchoring? Payment splitting? Bundle breaks? | | 8 | Product Positioning | Benefits-led? Lifestyle context? Differentiation? | | 9 | Mobile UX | 48px tap targets? 16px fonts? Sticky CTA? | | 10 | Section Ordering | AIDA-compliant? FAQ before CTA? | | 11 | Page Speed | Image formats? LCP candidate? Render-blocking? | | 12 | Anti-Patterns | Autoplay? Carousel hero? Nav on LP? Competing CTAs? |

Step 4 — Design Token Extraction

Compile from visual inspection + computed styles:

{
  "primary_color": "#...",
  "secondary_color": "#...",
  "background": "#...",
  "surface": "#...",
  "text_color": "#...",
  "font_heading": "...",
  "font_body": "...",
  "border_radius": "...px",
  "spacing_unit": "...px"
}

Step 5 — Output PAGE_ANALYSIS

Output this structured block:

{
  "source_url": "https://...",
  "page_type": "pdp|landing|collection|homepage|editorial",
  "vertical": "beauty|supplements|fashion|food|luxury|home|tech",
  "sections_found": [
    { "type": "hero", "has_cta": true, "above_fold": true },
    { "type": "social-proof", "subtype": "logo-bar" },
    ...
  ],
  "design_tokens": {
    "primary_color": "#...",
    "font_heading": "...",
    "font_body": "...",
    "border_radius": "8px",
    "spacing": "comfortable|tight|generous"
  },
  "conversion_score": 72,
  "strengths": [
    "Strong hero with benefit-driven headline",
    "Trust badges visible above fold"
  ],
  "weaknesses": [
    { "dimension": "mobile-ux", "issue": "CTA below fold on mobile", "impact": "critical" },
    { "dimension": "social-proof", "issue": "No testimonials with real names", "impact": "high" }
  ],
  "recommended_remix": {
    "sections": ["hero", "trust-bar", "benefits", "testimonials", "product-showcase", "faq", "cta"],
    "tactics": ["sticky-cta", "real-testimonials", "benefit-before-feature"],
    "avoid": ["autoplay", "carousel-hero", "generic-stock"]
  }
}

Then proceed to page generation using this analysis as context.

---

Fallback (No @Browser Available)

If @Browser is not available or not enabled:

1. Use extract_brand_design({ url }) from Lexsis AI MCP for server-side screenshot + token extraction
2. Note limitations: no DOM access, no mobile viewport test, no interaction detection
3. Suggest: "Enable the Browser plugin in Codex settings for deeper page analysis (DOM inspection, mobile testing, interaction detection)."

---

Reference Data

Conversion Benchmarks

| Metric | Average | Top 20% | Top 10% | |--------|---------|---------|---------| | All Shopify | 1.4% | >3.2% | >4.7% | | Mobile | 1.2% | — | >3.9% | | Landing pages (2026) | 3.5-5.2% | — | — |

Critical Multipliers

• Sticky CTA + above-fold CTA: +12% CVR
• Real testimonials with names: +22% CVR
• Autoplay video: -7% CVR
• Personalized CTAs: +202% vs default
• 1s speed improvement: +2% CVR

Anti-Patterns to Detect

• Autoplay video (loses 7% CVR)
• Rotating carousels (banner blindness)
• Navigation links on landing pages (exit opportunities)
• Multiple competing CTAs per viewport
• Generic stock photography
• CTA below mobile fold without sticky alternative

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Aetheria-Labs1
• Source: Aetheria-Labs1/storefront-skills
• License: MIT

Install and usage instructions live in the source repository linked above.