copy-website

Extract layout, design tokens, animations, and media from live websites into code.

Updated Mar 9, 2026

Search Tags:#web development #website design #design conversion #layout extraction #AI-powered design

Ready to run

npx skills add https://github.com/fauzanazz/claude-skills --skill copy-website

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: copy-website
Source: https://github.com/fauzanazz/claude-skills/tree/main/copy-website
Command: npx skills add https://github.com/fauzanazz/claude-skills --skill copy-website

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, firecrawl, puppeteer, pdf2image, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of copying a live website's design and functionality, allowing users to quickly replicate webpages without starting from scratch.

Core Features & Use Cases

Reverse-Engineered Website Design: Convert live websites into runnable code through a comprehensive 6-phase pipeline.
Customization: Select from multiple fidelity tiers to capture the desired level of detail.
Use Case: Need a landing page with the same layout as another website? This skill can capture the design and convert it into a functional web component.

Quick Start

Run the copy-website skill with the URL of the target website: copy-website <URL>

Frequently Asked Questions about copy-website

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

FAQPage Schema

How do I convert a live website design into React or Next.js code?▼

You can replicate a live website into React or Next.js code by running the skill with the target URL. It extracts the layout, design tokens, animations, and media to generate functional replica code across HTML, Vue, and Astro.

What is the best way to extract design tokens and layout structure from an existing webpage?▼

Extracting design tokens and layout structure from an existing webpage is done via a comprehensive 6-phase pipeline. It captures CSS tokens, animations, and media to reverse-engineer the visual design into runnable code.

Can I use Playwright and Firecrawl to automate website design conversion?▼

Yes, you can use Playwright and Firecrawl to automate website design conversion. Playwright drives browser automation and image capture, while Firecrawl handles optional content extraction to replicate the webpage.

Does the website design extraction tool support Vue and Astro frameworks?▼

Yes, the website design extraction tool supports Vue and Astro frameworks. It generates functional replica code applicable to HTML, React, Next.js, Vue, and Astro from the extracted live website layout.

How do I adjust the fidelity tier when copying a website layout?▼

You can adjust the fidelity tier when copying a website layout by selecting from multiple customization options during the extraction process. This allows you to capture the exact desired level of design detail.

Why are PDF files needed for website layout extraction?▼

PDF files are processed using the pdf2image dependency to assist with website layout extraction and image capture. This helps translate visual page states into accurate design replicas during the pipeline.