skills.rest
kensleDev
kensleDevCOMMUNITY
Explore all skills by this author →
GitHub

ui-cloner

Replicate live website UI into the current project stack with implementation plans.

Updated Oct 14, 2025
Search Tags:#code generation#frontend development#ui design#pixel perfect#ui clone#website replication
One-click install
npx skills add https://github.com/kensleDev/dotfiles --skill ui-cloner
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-cloner
Source: https://github.com/kensleDev/dotfiles/tree/main/claude/.claude/skills/ui-clone
Command: npx skills add https://github.com/kensleDev/dotfiles --skill ui-cloner

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the process of replicating the visual design and user interface of existing websites into your current project, ensuring pixel-perfect accuracy.

Core Features & Use Cases

  • Visual Replication: Clones the look and feel of any website or specific section.
  • Automated Planning: Generates a detailed implementation plan with specific code suggestions.
  • Comparison Mode: Identifies and highlights differences between a target site and your development site.
  • Use Case: You need to build a new landing page that looks exactly like a competitor's. Provide the competitor's URL, and this Skill will analyze it and generate the code structure and styling needed to match it.

Quick Start

Use the ui-cloner skill to replicate the UI of https://example.com/pricing.

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 UI pixel-perfectly into my current project?▼

Website UI replication is achieved by capturing screenshots via agent-browser and using zai-vision for visual diffing. This generates a structured implementation plan with specific code suggestions to recreate the target interface exactly.

Can I compare my development site against a target URL to find UI differences?▼

Yes, comparison mode identifies and highlights visual differences between a target site and your development site. By analyzing both URLs, it generates specific code suggestions to fix the discrepancies and achieve a pixel-perfect match.

What's the best way to automate frontend development for cloning a specific web page section?▼

Automating frontend UI cloning requires providing the target URL and focus areas. The tool analyzes the live website visually and outputs a detailed implementation plan to replicate the specific section within your current project stack.

Does the pixel-perfect UI cloning process work for greenfield projects too?▼

Yes, the process supports both comparison and greenfield modes. For greenfield development, it analyzes the provided URL and generates the foundational code structure and styling needed to recreate the UI from scratch.

How does visual diffing work when recreating website designs?▼

Visual diffing uses zai-vision to analyze screenshots of the target and development sites. It identifies pixel-level mismatches in the UI design and outputs actionable implementation steps to correct the styling and structure.

Related Skills

Explore More Software Engineering Skills→
MakisuoMakisuo
1.6k

clickhousectl-local-dev

Install and configure a local ClickHouse environment with clickhousectl.

Community
Intermediate
YeaChan05YeaChan05

visual-ralph

Automate frontend UI restyling with pixel-diff verification against approved references.

Community
Advanced
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
Spectra29115Spectra29115

recreate-screenshot

Convert images into UI components with layout, color, and typography matching.

Community
Advanced