skills.rest
bienhoang
bienhoangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-clone

Clone website designs via multi-viewport screenshots and HTML/CSS extraction.

5|1|Updated Feb 3, 2026
Search Tags:#clone#web-design#ai-analysis#asset-extraction#css-filtering#hover-states
One-click install
npx skills add https://github.com/bienhoang/design-clone --skill design-clone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-clone
Source: https://github.com/bienhoang/design-clone/tree/main
Command: npx skills add https://github.com/bienhoang/design-clone --skill design-clone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill automates the process of cloning website designs by capturing multi-viewport screenshots and extracting production-ready HTML/CSS, reducing manual design-to-code effort.

Core Features & Use Cases

  • Multi-viewport screenshots (desktop, tablet, mobile) for accurate design reproduction
  • HTML/CSS extraction with script removal and dead-code filtering
  • Hover state capture and generated hover CSS for interactive elements
  • Built-in AI structure analysis to generate design tokens and layout insights
  • Asset extraction for images, fonts, and icons, with optimized handling
  • Pixel-perfect cloning and multi-page site cloning with shared CSS Use cases include quick clone of live sites, pixel-perfect replication, and Figma-to-code workflows.

Quick Start

Run design-clone init to install the skill, then clone a site with /design:clone https://example.com.

Frequently Asked Questions about design-clone

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

FAQPage Schema
How do I clone a website design and extract the HTML CSS?▼

Website design cloning captures multi-viewport screenshots and extracts production-ready HTML CSS automatically. It reduces manual design-to-code effort by filtering dead code, capturing hover states, and generating shared stylesheets for multi-page sites.

Can I generate design tokens from an existing website automatically?▼

Yes, you can generate design tokens from an existing website automatically. The built-in AI structure analysis evaluates the captured screenshots and HTML to extract layout insights and reusable design tokens for your codebase.

What is the best way to capture hover states and interactive CSS when cloning web design?▼

Capturing hover states during web design cloning is handled by automated interactive element extraction. The tool detects hover states and generates the corresponding hover CSS rules alongside the base production-ready HTML and stylesheets.

Does automated site cloning work for multi-page websites with shared CSS?▼

Yes, automated site cloning works for multi-page websites with shared CSS. It supports pixel-perfect replication across multiple pages, extracting shared stylesheets and assets to ensure consistent styling throughout the cloned site.

What are the limitations of automated web design cloning for pixel-perfect replication?▼

Limitations of automated web design cloning include potential difficulties with highly dynamic JavaScript-rendered content. While it extracts static HTML, CSS, and assets, complex client-side interactions may require manual adjustment after the initial AI-driven extraction.

Related Skills

Explore More Software Engineering Skills→
bejranondabejranonda
27

web-validation

Detect JavaScript errors and collect browser diagnostics from web pages.

Community
Advanced
KARENLHAOKARENLHAO
1

frontend-design

Generate frontend interfaces and components with HTML/CSS, React, or Vue.

Community
Advanced
phismith91phismith91

optimize

Identify and fix frontend performance bottlenecks using Core Web Vitals metrics.

Community
Advanced
GainInsightDevGainInsightDev

af-figma-design-expertise

Capture live UI to Figma and extract design context back to code.

Official
Advanced