ProofPages

A Claude Code skill that enhances case study pages with interactive, data-driven components — styled to perfectly match the target page's design system.

Give it any case study URL. It scrapes the page, reads it like a skeptical buyer, identifies where the argument is weak, and generates bespoke interactive components designed specifically for that page.

What It Does

1. Scrapes any live case study page (HTML, CSS, assets, screenshots)
2. Extracts design tokens from the CSS (colors, fonts, spacing, border-radius, shadows)
3. Analyzes the content as a skeptical prospect — finds where the argument loses the reader
4. Generates bespoke interactive components (no fixed templates) matched to the design system
5. Injects components into a cloned version of the page
6. Previews a local before/after comparison

Example Components

These are examples of what ProofPages has generated. Every component is designed bespoke — there is no fixed template library.

• ROI Calculator — Interactive sliders letting prospects plug in their own team size, hourly cost, and time saved. Shows personalized annual savings and ROI multiplier.
• Product Demo — A simulated product UI (chat interface, data pipeline, step-through flow) that lets the reader feel what using the product is like.
• Animated Metrics — Key numbers that count up on scroll, giving buried statistics the visual weight they deserve.

Installation

Prerequisites

• Node.js (v18+)
• Claude Code
• Python 3 (for injection scripts)

Clone and Install

git clone https://github.com/XZTP/interactive-case-study.git
cd interactive-case-study
npm install
npx playwright install chromium

Add the Skill to Claude Code

Copy the skill file to your Claude Code commands directory:

cp skills/enhance-case-study/SKILL.md ~/.claude/commands/enhance-case-study.md

Usage

In Claude Code, run:

/enhance-case-study https://example.com/case-study/customer-name

Claude will:

1. Scrape the page and extract its design system
2. Analyze the content and propose 1-2 interactive enhancements
3. Ask you which to build (and request product screenshots if needed)
4. Generate the components, inject them, and launch a local preview

Preview URLs:

• http://localhost:3456/compare — Side-by-side before/after
• http://localhost:3456/enhanced.html — Enhanced page
• http://localhost:3456/original.html — Original clone

Project Structure

proofpages/
├── skills/
│ └── enhance-case-study/
│ └── SKILL.md # Claude Code skill instructions
├── scripts/
│ ├── enhance.js # Orchestrator (scrape + extract pipeline)
│ ├── scrape-page.js # Playwright page scraper
│ ├── extract-design-tokens.js # CSS → design token parser
│ └── preview-server.js # Local preview with before/after
├── .claude-plugin/
│ └── marketplace.json # Plugin metadata
├── output/ # Generated output (gitignored)
│ └── <site-slug>/
│ ├── original.html
│ ├── enhanced.html
│ ├── design-tokens.json
│ ├── content.json
│ ├── inject.py
│ └── assets/
└── package.json

Design Philosophy

• Show the product, don't reorganize text. The highest-value components simulate a slice of the product so the reader feels what using it is like.
• Match, don't impose. Generated components must be indistinguishable from native page elements.
• Data over spin. Use the actual numbers from the case study. Never fabricate statistics.
• Restraint over range. 1-2 components is the sweet spot. If you can't make it interactive, reconsider whether it should exist.
• Always interactive. Every component must add something text cannot: interactivity, animation, personalization, or product simulation.
• Self-contained. Each component is vanilla HTML/CSS/JS — no framework dependencies.

Tech Stack

• Playwright — Full page scraping with screenshots
• Cheerio — HTML parsing and content extraction
• css-tree — CSS parsing for design token extraction
• Express — Local preview server
• Python — Injection scripts for large HTML files

License

MIT