One-click install
npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-akornmeier
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-cloner
Source: https://github.com/akornmeier/clawd-config/tree/main/skills/ui-cloner
Command: npx skills add https://github.com/akornmeier/clawd-config --skill ui-cloner-akornmeier

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill enables users to replicate or clone the UI, design, and visual style of a given website for their own product, streamlining the design and development process.

Core Features & Use Cases

  • Website UI Replication: Analyzes a target URL to capture its design elements.
  • Brand Adaptation: Interviews the user to understand their brand identity for customization.
  • Prompt Generation: Synthesizes a detailed replication prompt for developers.
  • Phased Pipeline: Executes a structured 4-phase process (audit, interview, synthesis, quality check).
  • High-Fidelity Mode: Offers detailed artifact generation for pixel-perfect cloning.
  • Refinement Iteration: Includes a mechanism for iterative improvements based on developer feedback.

Quick Start

Use the ui-cloner skill to replicate the UI of https://example.com using high-fidelity mode.

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 and adapt it to my own brand?▼

You can clone website UIs by running a forensic design audit on a target URL and completing a brand interview, which synthesizes a one-shot replication prompt for developers to achieve pixel-perfect results.

What is the difference between standard and high-fidelity UI cloning?▼

High-fidelity UI cloning provides detailed artifact generation to achieve pixel-perfect website replication, while the standard mode captures essential design elements with less forensic depth.

How do I generate a frontend development prompt from an existing website?▼

You can generate a frontend development prompt through a structured 4-phase pipeline that audits the target URL, conducts a brand interview, synthesizes the prompt, and performs a quality check.

Can I refine a website replication prompt after the initial generation?▼

Yes, the pipeline includes a refinement iteration mechanism that allows developers to request iterative improvements to the generated website replication prompt based on their feedback.

Does website replication require any specific frontend frameworks or dependencies?▼

No specific frontend frameworks are required; the Skill operates independently to output a detailed replication prompt that developers can implement in any preferred environment.