clone-website

Solid

Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reverse-engineer, or create a pixel-perfect copy of any website or web app. Provide one or more target URLs as arguments.

AI & Automation 506 stars 12 forks Updated today NOASSERTION

Install

View on GitHub

Quality Score: 83/100

Stars 20%
90
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Clone Website --- Single-File HTML Prototype Builder You are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype. This is adapted from the [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) approach but optimized for rapid prototyping workflows: **single self-contained HTML files** (no build system, no CDN dependencies, opens directly in a browser). ## Output Format Unlike the original repo (Next.js + shadcn/ui), our output is: - **One HTML file** with `<style>` + `<body>` + `<script>` sections - **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline - **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB - **Project design system** when available --- use tokens from a `design-system.json` colocated with the project ## Pre-Flight 1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`. 2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible. 3. Create output directory: `{project}/Screenshots-clone/` for captured assets. 4. Determine clone mode: - **Full clone** (default): pixel-perfect reproduction of the entire page - **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building - **Selective clone** (`--sections "header,table,sidebar"`): c...

Details

Author
coco-research
Repository
coco-research/coco
Created
5 months ago
Last Updated
today
Language
HTML
License
NOASSERTION

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

clone-website

Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.

1 Updated 2 days ago
NafisRayan
Web & Frontend Listed

clone-website

Reverse-engineer and clone one or more websites in one shot. Extracts assets, CSS, content and behaviors section by section using Playwriter (the user's own Chrome browser) and dispatches parallel builder agents as it goes. Use whenever the user wants to clone, replicate, rebuild, reverse-engineer or copy any website. Also triggers on "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments. Windows / PowerShell environment.

2 Updated 2 weeks ago
rodrigonask
Web & Frontend Featured

clone-website

Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide the target URL as an argument.

534 Updated 1 months ago
vibeeval