Media
5 items
Description
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. [NEW IN VERSION 0.3.0.2 — July 2026] • Fixed the re-scan button and logic. • Added OpenRouter support to generate AI design brief • Scan History: Your last 10 scans are saved locally. Re-open any previous analysis in one click — no re-scanning needed. • Semantic Color Tokens: Colors are automatically named by role (primary, background, surface, text, text-muted, error, success, warning) so exports are meaningful, not just a list of hex codes. • Framework Detection: Instantly see what framework is being used. • W3C Design Tokens Export: Export a standards-compliant design-tokens.json alongside JSON, CSS, Tailwind, Figma Tokens, and Markdown. • Figma Tokens: One-click export ready to import directly into the Figma Tokens plugin (Plugins → Figma Tokens → Load → Raw JSON). • Spacing & Border Radius Tab: Visual bar-chart scale for every spacing value and a radius preview grid — copy any value with a single click. • Site Comparison: Mark any two history scans as A and B, then open a side-by-side diff. Colors, fonts, spacing, and radius are compared row by row with differences highlighted. Export the diff as a clean Markdown table. 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: 🎨 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 Tailwind CSS, Material UI, Chakra UI, Radix UI, Bootstrap, and Next.js — 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.