Skills
.Work. You
Rest

design-clone

Community

Clone sites with multi-viewport capture and AI.

Software Engineering#clone#web-design#ai-analysis#asset-extraction#css-filtering#hover-states
Authorbienhoang
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

scripts

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-clone
Download link: https://github.com/bienhoang/design-clone/archive/main.zip#design-clone

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.