skills.rest
BURHANDEV-ENTERPRISE
BURHANDEV-ENTERPRISEOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mop-ui-clone

Extract HTML structure, CSS design tokens, and 3D assets from websites.

Updated Jun 12, 2026
Search Tags:#ui#frontend#design tokens#web scraping#three.js#ux#cloning
One-click install
npx skills add https://github.com/BURHANDEV-ENTERPRISE/BURHAN-WEB-DEV --skill mop-ui-clone
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mop-ui-clone
Source: https://github.com/BURHANDEV-ENTERPRISE/BURHAN-WEB-DEV/tree/main/.agents/skills/mop-ui-clone
Command: npx skills add https://github.com/BURHANDEV-ENTERPRISE/BURHAN-WEB-DEV --skill mop-ui-clone

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires node:fs, browser-act.

What problem does it solve?

This skill solves the time-consuming challenge of manually recreating complex web interfaces by automating the extraction of design tokens, assets, and structural layouts from existing websites.

Core Features & Use Cases

  • Design Token Extraction: Automatically captures colors, typography, spacing, and shadows into CSS variables.
  • Asset Inventory & Reconstruction: Identifies and extracts fonts, images, SVGs, and complex 3D elements like Three.js scenes.
  • Use Case: A developer needs to study a high-fidelity landing page for inspiration; this skill scrapes the layout and animation logic, providing a structured foundation for a standalone replica.

Quick Start

Use the mop-ui-clone skill to scrape the design and layout of the website located at the provided URL.

Frequently Asked Questions about mop-ui-clone

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

FAQPage Schema
How do I extract CSS design tokens from an existing website?▼

This skill automates the extraction of CSS design tokens by parsing DOM elements and network logs to capture colors, typography, spacing, and shadows directly into structured CSS variables for standalone reconstruction.

Can I scrape and reconstruct Three.js 3D scenes from a web page?▼

Yes, you can reconstruct Three.js 3D scenes by capturing complex 3D assets and animation logic during stealth navigation, generating a standalone code replica of the original interface.

Does UI cloning require a specific browser environment for web scraping?▼

Yes, UI cloning requires the browser-act dependency for stealth navigation to accurately extract structural layouts, and uses node-based scripts to handle asset inventory and animation capture.

What is the best way to replicate a high-fidelity landing page for prototyping?▼

The best way to replicate a landing page is to automate the extraction of HTML structure, design tokens, and assets, generating a structured foundation for a standalone code replica to facilitate rapid prototyping.

How do I inventory fonts and images when cloning a web interface?▼

You inventory fonts and images by using node-based scripts to parse extracted DOM elements and network logs, identifying and pulling visual assets into a structured format for your standalone code replica.

Why use stealth navigation for extracting web UI components?▼

Stealth navigation via browser-act bypasses bot detection to ensure accurate extraction of dynamic HTML structure, CSS design tokens, and complex 3D elements without being blocked by the target website.

Related Skills

Explore More Design & Creative Skills→
IntunedIntuned
30

automation-best-practices

Guide browser automation code with Intuned best practices for selectors and waits.

Official
Basic
maraxenmaraxen
4

frontend-design

Generate production-grade frontend interfaces from user specifications across React, Vue, Svelte, or HTML/CSS.

Community
Advanced
nullhacknullhack
11

design-assets

Update project SVG branding assets to follow branding guidelines.

Community
Intermediate
DarkArty07DarkArty07
3

popular-web-designs

Generate HTML/CSS using pre-analyzed design tokens from 54 brand websites.

Community
Intermediate