Converts product screenshots into structured, reusable design systems and self-contained .skill files for AI agents to recreate across any tech stack.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install ui-cloner
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install ui-cloner using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is UI Cloner Skill?
The UI Cloner skill is an advanced automation blueprint for Openclaw Skills that enables AI coding agents to reverse-engineer any user interface from simple screenshots. By processing single or multiple application pages, it extracts a holistic design identity—including atomic tokens, component variants, complex layout grids, and interactive behaviors—and packages them into a portable specification file.
This workflow ensures that a design system is never lost or siloed in pixels. The generated asset is independent of specific front-end technologies, acting as a clean specification layer that can later guide downstream agents to perfectly recreate visual interfaces in React, Vue, Tailwind CSS, or any target stack.
UI Cloner Skill Use Cases
- When an agent is prompted with instructions like "clone this UI", "copy this design", or "reproduce this page".
- When engineering teams need to reverse-engineer a competitor's visual language or an existing app into a clean, structured layout.
- When a product manager provides baseline mockups and expects a fully documented, reusable design framework instantly.
How UI Cloner Skill Works
- Collect Inputs: The agent gathers the screenshot file paths or directory, the target product name, and optional context.
- Analyze Screenshots: Runs the specialized UI-to-artifact MCP server to extract precise layout specifications and high-level descriptions across all provided images.
- Synthesize Design System: Aggregates the visual details into cohesive design tokens, component inventories, layouts, and interaction style guides.
- Generate Skill Assets: Writes out a structured
{product-name}-uilocal workspace containing the Markdown spec sheets. - Visual Verification (Optional): Iteratively renders a prototype page, performs a visual diff check against original screenshots using automated tools, and fixes discrepancies.
- Package Environment: Runs a Python packager script to compile the directory into a deployable Openclaw Skills asset.
UI Cloner Skill Setup
To initialize and compile skills, make sure the target framework script path is accessible. Run the packager by supplying your product name and distribution directory:
python3 /Users/zhenyangze/.claude/skills/skill-creator/scripts/package_skill.py {product-name}-ui {output-dir}
By default, the skill prefers project-local installation within .claude/skills/{product-name}-ui/ to optimize project containment before falling back to global user profiles.
UI Cloner Skill Data Schema & Taxonomy
The skill establishes a strict, clean file layout inside the generated environment directory:
| File Path | Description |
|---|---|
SKILL.md |
Core instructions, activation triggers, and skill metadata template. |
references/design-tokens.md |
Global variables including typography, colors, padding systems, radii, and drop shadows. |
references/components.md |
Inventory of extracted interactive blocks, element structures, and state variations. |
references/layout.md |
Definitions for page navigation components, flexible flex/grid layouts, and general structure. |
references/style-guide.md |
Aesthetic definitions, hover transitions, focus ring behaviors, and UX core design principles. |
UI Cloner Skill Advanced Features
- Cross-Page Synthesis: Intelligently unifies multi-page screenshot folders into a single, cohesive product visual style rather than fragmented pages.
- Automated Visual Diff Loops: Leverages automated differential analysis tools to visually compare generated output with raw source images to eliminate edge-case drift.
- Downstream Agent Bridge: Directly interfaces with advanced generator agents to facilitate zero-lag compilation into production code right after packaging.
- Project-Aware Scope Prioritization: Automatically scans workspace rules to isolate the output environment within project subdirectories, protecting global setups from asset pollution.
SKILL.md
Loading
Related Openclaw Skills
Professional Naming Skill
A structured AI agent skill designed to generate multi-scenario names for individuals, brands, and companies with multi-turn risk assessment.
Live Highlight Slicer
An automated live stream recording processing tool designed to detect highlight moments and slice them into short video clips.
dlazy-video-generate
An AI-powered video generation skill that dynamically selects and executes the optimal dLazy CLI model based on user prompts.
Playbook Generator
A conversational utility that generates schema-compliant playbook YAML files for intelligent outbound call platforms through natural language.
LeaferJS Canvas Engine
An AI-assisted integration of LeaferJS, an ultra-high-performance 2D Canvas engine designed for building complex graphic editors, games, and responsive UI layouts.
Perry TypeScript Compiler (perryts)
A high-performance compiler that translates TypeScript directly to native machine code via LLVM without virtual machines or runtimes.
Featured*
