uiClone

About

Clone any website's design system in seconds — Built for AI-powered workflows.

[NEW IN VERSION 0.2.0 - December 2025]
• Inspector 2.0: A completely redesigned interactive inspector.
• Smart Backgrounds: Detects background colors even on transparent elements by analyzing parent layers.
• Color Usage Locator: Click the "Target" icon on any color to instantly highlight every element on the page using that color.
• Layout Intelligence: Auto-detects Flexbox (Gap, Justify, Align) and Grid layouts hover.
• Contrast Checker: Instantly check accessibility (AA/AAA) ratios for any text.
• Unified Export: Now includes Tailwind Config and CSS Variables export options.

uiClone is the ultimate Chrome extension for designers and developers who want to instantly extract and reuse design patterns from any website. Supercharge your workflow and save hours of manual work.

KEY FEATURES:

🎨 Color Palette Extraction
Automatically capture every color used on a page — text, backgrounds, borders, and gradients. Get a complete palette categorized by usage (Backgrounds, Text, Borders).

🔎 "Where is this used?" Locator (New!)
Wondering where that specific hex code is used? Click the target icon to visually highlight and scroll to every element using that color on the page.

✍️ Typography Analysis
Discover all fonts, weights, and font sizes used across the site. Never waste time identifying typefaces or sizing manually again.

🔘 Button & Component Styles
Extract complete button specifications including border-radius, padding, colors, hover states, and more. Perfect for building consistent UI components.

📐 Advanced Inspector
Hover over any element to see deep details:
- Computed Styles & Box Model
- Flexbox & Grid Properties (Gap, Alignment)
- Accessibility Roles & Contrast Ratios
- Background Gradients & Images

📤 AI-Ready Export
Export everything as beautifully formatted Markdown, structured JSON, or Tailwind Configuration — perfect for feeding into Claude, ChatGPT, or any AI assistant to generate matching designs.

PERFECT FOR:
- Designers building design systems
- Developers implementing pixel-perfect UIs
- AI-powered design workflows
- Rapid prototyping and MVP development
- Creating style guides and documentation

HOW IT WORKS:
1. Navigate to any website
2. Click the uiClone extension icon
3. Analyze the page instantly
4. Use the "Colors", "Fonts", or "Inspector" tabs to explore details
5. Click "Export" to download your ready-to-use design system

WHY UICLONE?
Unlike traditional inspect tools that show one element at a time, uiClone gives you the complete picture instantly. It's specifically designed to create AI-friendly outputs, making it perfect for modern design workflows where you collaborate with AI tools.

No more manual note-taking. No more guessing. Just instant, accurate design system extraction.

PRIVACY FIRST:
All extraction happens locally in your browser. No data is sent to external servers. Your browsing activity stays private.