uiClone

Clone any website's design system - Extract colors, fonts, components and export to Markdown or JSON to feed your AI assistant.

Clone any website's design system in seconds — Built for AI-powered workflows. Version 0.3.1.0 — Major UI Overhaul - 🎨 All-new in-page panel: clicking the toolbar icon now opens a sleek, rounded side panel docked inside the page (no more popup window) — inspired by modern analytics dashboards - 📋 Copy every color: click any color anywhere in the Colors tab (main palette, background/text/border groups, or the full grid) to copy its hex code - 🖼️ Smarter asset export: all page assets are now detected (no more 50-item limit), with checkboxes to select exactly what you need - 📦 One-click ZIP download: download all selected images and backgrounds as a single ZIP archive - 🕘 Better history: your scans are deduplicated (reloading a page no longer floods your history) and history is now paginated with previous/next arrows - 🔍 Improved element inspector: the panel closes automatically so the inspector overlay is fully visible KEY FEATURES: 🎨 Complete Color Palette Extraction Capture every color on the page — text, backgrounds, borders, and gradients — automatically categorized by usage and named by semantic role. Copy any value with a single click. 🔎 "Where is this used?" Locator Click the target icon on any color to visually highlight every element using that color on the page. Instantly understand a site's color language. 🆚 Side-by-Side Site Comparison Select two saved scans from history, mark them A and B, and open a visual diff. See which colors, fonts, spacing values, and border radii differ — with mismatches highlighted in amber. Export a clean Markdown comparison table for your team. ✍️ Typography Analysis Discover all fonts, weights, and sizes used across the page. Never spend time identifying typefaces manually again. 🔘 Button & Component Styles Extract complete button specs — border-radius, padding, colors, box-shadow, and more. Perfect for building consistent component libraries. 📐 Spacing & Border Radius System View the full spacing scale as a visual bar chart and border radius values as interactive previews. Every token is named (xs, sm, md, lg…) and ready to copy. 📤 AI-Ready Multi-Format Export Seven export formats in one click: Markdown — structured report, perfect for AI prompts JSON — semantic token map optimised for Claude, ChatGPT Codex, and Cursor CSS Variables — drop-in :root {} block Tailwind Config — ready-to-paste tailwind.config.js W3C Design Tokens — standards-compliant JSON Figma Tokens — import directly into the Figma Tokens plugin AI Prompt — one-click copy of a full design-system prompt 🔍 Interactive Inspector Hover over any element for deep computed details: box model, Flexbox/Grid properties, accessibility roles, contrast ratios (AA/AAA), and background gradients. 🏷️ Framework Detection Automatically identify the used framework — shown as badges on the overview screen. PERFECT FOR: Designers reverse-engineering competitor design systems Developers implementing pixel-perfect UIs from a reference site AI-powered design workflows (Claude, ChatGPT, Cursor, v0) Rapid prototyping and competitive analysis Creating style guides and design documentation HOW IT WORKS: Navigate to any website Click the uiClone extension icon — analysis starts automatically Explore Colors, Fonts, Spacing, Assets, and History tabs Mark two past scans as A & B to compare them side by side Click Export to download your design system in any format WHY UICLONE? Unlike traditional inspect tools that show one element at a time, uiClone gives you the complete picture instantly — semantic tokens, spacing scales, component styles, and framework fingerprints — in formats designed for modern AI-assisted development. Your history is always one click away, and comparing two sites takes seconds. PRIVACY FIRST: All extraction happens locally in your browser. No data is sent to external servers. Your browsing activity stays completely private.