skills.rest
fauzanazz
fauzanazzCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/fauzanazz/claude-skills --skill copy-website
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
johnlindquistjohnlindquist
24

chrome

Automate browser interactions for web testing and data extraction with Puppeteer or Playwright.

Community
Advanced
rebyteai-templaterebyteai-template
15

web-app-builder

Build and deploy static web apps from local directories to cloud hosting.

Official
Intermediate
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced
JustinWangJPJustinWangJP
6

figma

Generate React components and design tokens from Figma API data.

Community
Advanced