clone-website

Recreate websites as single-file HTML prototypes using Playwright.

264|11|Updated Apr 25, 2026

Search Tags:#playwright #design extraction #pixel perfect #website cloning #html prototype #ui replication

Ready to run

npx skills add https://github.com/coco-research/coco --skill clone-website-coco-research

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: clone-website
Source: https://github.com/coco-research/coco/tree/main/skills/clone-website
Command: npx skills add https://github.com/coco-research/coco --skill clone-website-coco-research

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the slow, manual work of recreating websites by turning a live page into a faithful, self-contained HTML prototype that can be opened and reviewed immediately.

Core Features & Use Cases

Pixel-Perfect Cloning: Reproduces layouts, typography, spacing, colors, and visual hierarchy from real webpages.
Interaction and Asset Capture: Extracts screenshots, computed styles, SVGs, images, and interactive behavior with Playwright.
Single-File Output: Builds a standalone HTML file with inline CSS and JavaScript, making it easy to share or inspect offline.
Use Case: A designer or engineer can clone a marketing homepage, a dashboard, or a product landing page to accelerate prototyping, analysis, or handoff.

Quick Start

Use the clone-website skill with one or more target URLs to generate a single-file HTML prototype of the site.

Frequently Asked Questions about clone-website

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I clone a website into a single-file HTML prototype?▼

Cloning a website into a single-file HTML prototype involves using Playwright to capture screenshots, computed styles, assets, and interactions, then reconstructing the page section-by-section with inline CSS, JavaScript, and encoded media into one standalone file.

Can I extract CSS styles and images from a live webpage for UI replication?▼

Yes, extracting CSS styles and images from a live webpage for UI replication uses Playwright to capture computed styles, SVGs, images, and interactive behavior, producing a self-contained HTML output with all assets encoded inline.

What is the best way to create a pixel-perfect HTML prototype from an existing URL?▼

Creating a pixel-perfect HTML prototype from an existing URL is done by capturing layout, typography, spacing, colors, and visual hierarchy through Playwright, then compiling them into a standalone HTML file with inline CSS and JavaScript.

Does Playwright support capturing interactive behavior for website cloning?▼

Yes, Playwright supports capturing interactive behavior for website cloning by extracting screenshots, computed styles, and interactive behavior directly from the target webpage to faithfully reproduce interactions in the final single-file HTML output.

Are there limitations when recreating a web app as a standalone HTML file?▼

When recreating a web app as a standalone HTML file, limitations include capturing only the static visual state and mapped interactions of the provided URLs, meaning dynamic server-side data fetching or complex backend logic is not replicated in the self-contained output.

Do I need multiple URLs to reconstruct a full landing page design?▼

No, you do not need multiple URLs, as the tool applies to website and web app cloning tasks from one or more URLs, performing design extraction, interaction mapping, and section-by-section reconstruction to generate a complete single-file HTML prototype.