Speculation Rules API Playground: AI-Generated Code Example

This prompt is designed for developers and technical educators who want to demonstrate the Speculation Rules API — a modern browser feature that enables near-instant page navigation through intelligent prefetching and prerendering. The generated output is an interactive playground UI complete with hover-triggered visual indicators, a live stats panel showing rule matches, and a ready-to-copy setup code block, making it ideal for documentation sites, dev blogs, or internal tooling demos.

It works best with code-capable models like GPT-4o or Claude 3.5 Sonnet, which can produce clean, functional HTML, CSS, and JavaScript in a single pass. To customize the output, try specifying a target framework (React, vanilla JS, etc.), adjusting the animation style from subtle to prominent, or adding support for eagerness levels such as immediate, eager, or moderate. This prompt is particularly effective for anyone building performance-focused web tutorials or presenting browser API capabilities to a technical audience.