ui-cloner

Generate UI replication and brand adaptation plans from a reference website URL.

8|4|Updated Jan 15, 2026

Search Tags:#ui #design system #replication #cloning #website audit #brand adaptation

Ready to run

npx skills add https://github.com/jscraik/Agent-Skills --skill ui-cloner-jscraik

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-cloner
Source: https://github.com/jscraik/Agent-Skills/tree/main/frontend/tools/ui-cloner
Command: npx skills add https://github.com/jscraik/Agent-Skills --skill ui-cloner-jscraik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps users replicate the visual design and structure of existing websites, adapting them to new brand guidelines or requirements. It bridges the gap between inspiration and implementation.

Core Features & Use Cases

UI Replication Planning: Generates detailed plans for recreating a website's layout, components, and design tokens.
Brand Adaptation: Provides guidance on how to adapt a source UI's elements to match a user's specific brand identity.
Use Case: A user wants their new marketing site to have the same modern feel as a competitor's site. This Skill can analyze the competitor's site and produce a plan to replicate its structure and adapt its color palette and typography to the user's brand.

Quick Start

Use the ui-cloner skill to create a replication plan for the website at https://example.com, adapting it to our brand colors.

Frequently Asked Questions about ui-cloner

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

FAQPage Schema

How do I replicate a website's UI design and adapt it to my brand?▼

Website UI replication extracts a reference site's visual design system and generates a structured implementation plan for adapting its layout, components, and design tokens to your brand identity. It produces artifacts like site DNA and adaptation maps to guide the recreation process.

What is a site DNA artifact in UI cloning and when do I need it?▼

A site DNA artifact in UI cloning is a structured extraction of a reference website's visual system, including layout patterns, components, and design tokens. You need it when planning high-fidelity replication or brand adaptation to map the source structure accurately.

Can I perform a fast UI inspiration scan instead of a full website replication?▼

Yes, you can perform a fast inspiration scan instead of a full website replication by selecting the fast inspiration mode to quickly extract high-level visual system guidance. This allows you to capture the structural feel of a site without generating a detailed high-fidelity cloning plan.

Does UI replication work with large site structures and complex page layouts?▼

UI replication works with large site structures by delegating raw crawl orchestration to handle complex page layouts and extensive site navigation. This ensures visual system extraction and replication planning scale beyond single pages to accurately map entire website architectures.

What's the best way to adapt a competitor's UI design system to match my brand colors?▼

The best way to adapt a competitor's UI design system to your brand colors is to generate an adaptation map from their reference URL, which translates their extracted visual tokens and typography into a customized implementation plan matching your specific brand identity requirements.

What are the limitations of using automated UI cloning for website audits?▼

Automated UI cloning for website audits focuses on visual system extraction and structural replication planning, meaning it does not generate deployable code or replicate backend functionality. It is limited to producing implementation guidance artifacts like design tokens, site DNA, and adaptation maps.