pcholjbndbjlojpjjfndmagjnoihjngg
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.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. 🎨 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. 📤 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. PRIVACY FIRST: All extraction happens locally in your browser. No data is sent to external servers. Your browsing activity stays private.
VisualDNA – Design System Extractor
Extract the complete visual design system of any site. Get colors, typography, components, and generate AI-ready prompts instantly. 🧬 VisualDNA – Extract the Design System of Any Website VisualDNA is a powerful developer and designer tool that analyzes any webpage and extracts its complete visual design system in seconds. Instead of manually inspecting elements in DevTools, VisualDNA automatically detects colors, typography, UI components, layout systems, images, and technologies used on a site. The results are converted into structured data you can use for design references, AI prompts, or code generation. Perfect for frontend developers, designers, indie hackers, and AI-assisted “vibe coding” workflows. Extract complete color palettes with: • Hex and RGB values • Usage percentages • Automatic classification (text, background, accent, border) Detect the full typography system used on a page: • Font families • Font sizes and weights • Heading hierarchies • Complete type scale visualization • Button styles and variants • Input fields • Interactive elements • Flexbox and Grid detection • Container widths • Spacing scale patterns • Border radius systems • Shadow systems Generate AI-ready prompts to recreate the UI using tools like: Prompts are structured to help AI tools reproduce layouts, colors, and components accurately. View images in a lightbox and download them individually or as a ZIP file. • Frameworks (React, Vue, Next.js) • CSS libraries and UI frameworks • Icon sets • Analytics tools • Build systems Also includes metadata insights such as Open Graph tags and PWA information. Convert the detected design system into formats ready for development: • 🎨 Color palette extraction with usage analysis • 🔤 Typography detection and type scale • 🧩 Component and button style detection • 📐 Layout system analysis • 🤖 AI prompt generator • Limited daily prompt exports • 🖼️ Image extractor with unlimited downloads + ZIP export • ⚙️ Advanced tech stack detection (30+ technologies) • 📦 Full export formats (JSON, CSS variables, Tailwind, React theme) • 🤖 Platform-specific AI prompts for Cursor, v0.dev, and Gemini • 🔓 Unlimited page scans 👨💻 Who It's For VisualDNA helps you reverse-engineer the visual structure of any website and turn it into reusable design systems, AI prompts, and developer-ready code. 🚀
TheSprkl
TheSprkl is an extension for Webflow Seamlessly integrate TheSprkl design system components directly within Webflow. Copy components, blocks, and sections into your project effortlessly with a single click. Class Sync feature ensures synchronized components with updated classes, eliminating duplication. Say goodbye to rebuilding layouts for every project. Install the Chrome Extension for instant access to these components within Webflow ⚡️ 800+ components. Hundreds of components and variations for every taste and purpose. ⚡️ The Class Sync feature. Seamless synchronisation of components with updated classes directly in the designer. Keep your project tidy without the clutter of redundant classes. Experience a new level of simplicity and speed in handling Webflow projects - install TheSprkl Extension today. 🚀 Get to know TheSprkl Figma Kit for free: https://bit.ly/3Ov80rR Note: Using Chrome Extension requires TheSprkl Subscription. More details on website TheSprkl UI Kit Extension for Webflow: https://www.thesprkl.io/thesprkl-ui-kit/webflow
Yoink - Design Token & Style Extractor
Extract design tokens, colors, fonts, spacing, and styles from any website and export clean YAML for design systems and AI tools. Yoink extracts design tokens, colors, typography, CSS variables, spacing, components, and layout styles from any website in one click. Export clean YAML for design systems, UI audits, component libraries, and AI coding assistants like Claude and Cursor. Point, click, and extract a website’s complete design language: - Colors - Full palettes with usage frequency, CSS variables, and color relationships - Typography - Font families, type scales, headings, body text, and line heights - Spacing & Layout - Grid systems, containers, spacing patterns, and flexbox configurations - Components - 30+ UI patterns including buttons, forms, cards, navigation, modals, and tooltips with all their variants and states - Animations - Transitions, durations, and easing functions - Shadows & Effects - Complete elevation systems from subtle to dramatic - Responsive Design - Breakpoints and media query patterns PERFECT FOR - Developers building UIs that match existing designs - Designers documenting design systems - AI-assisted coding (paste the YAML directly into Claude, Cursor, or other AI tools) - Learning from well-designed websites - Design system audits and analysis 1. Navigate to any website 2. Click the Yoink extension icon 3. Click "Scan Page" (toggle component detection as needed) 4. Copy or download the generated YAML 5. Paste into your AI coding assistant to recreate matching UI automatically Yoink processes everything locally in your browser. No servers. No analytics. No tracking. What you scan stays on your machine. Yoink is fully open source and built transparently. Review the code, contribute, or adapt it for your workflow. Install Yoink and start extracting design systems in seconds. No account required. No setup needed. Just click and extract.
Deveser design system
Example of a design system inside a chrome extension This is for help developers with ideas of a design sysmte, easy to share and to check the elements of design
