bgdlplmmdmekinbhmmbmmfgpiapmommc
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.
AI Shopping - Review Analyzer & Compare
Product Insight is a powerful AI-powered browser extension built for modern online shoppers. Leveraging advanced machine learning, it intelligently analyzes product reviews, generates personalized recommendations, and supports smarter purchase decisions — all with review summaries that remain neutral and consistent, regardless of any commercial affiliations. • Automatic Data Extraction – Captures product information and customer reviews directly from the page. • AI-Powered Insights – Detects sentiment and highlights recurring themes in user feedback. • Concise Summaries – Presents clear pros and cons in your preferred language. • Multi-Language Support – View AI insights in English, Simplified/Traditional Chinese, Japanese, Korean, German, French, Spanish, Arabic, Portuguese, Russian, Vietnamese, and more. Product Comparison • Side-by-Side View – Compare up to 5 products at once in a unified layout • Tailored Suggestions – Receive recommendations based on your specific preferences and needs AI-Powered Insights • In-Depth Understanding – Uncover product strengths and common user concerns • Data-Backed Guidance – Get actionable insights to support your purchase • Scenario-Specific Advice – Recommendations that adapt to your unique context 💡 Use Cases • Informed Buying Decisions – Quickly assess pros and cons to shop with confidence • Product Comparison – Easily evaluate similar products to find the best match • Time Efficiency – Skip lengthy reviews and focus on what matters most • Cross-Language Understanding – Access reviews across languages effortlessly • Expert-Level Support – Gain AI insights that reflect your budget and shopping goals ⚙️ How It Works 1. Install the extension in your browser 2. Open any supported product or service page 3. Click the extension icon to activate analysis 4. Instantly view pros and cons generated by AI 5. Compare products side by side 6. Get data-informed recommendations for confident purchasing All insights are AI-generated and provided for informational purposes only. We do not guarantee accuracy or applicability. This tool does not constitute professional advice. Always verify details independently before purchasing. Final decisions are solely the responsibility of the user. To support continued development, this extension participates in affiliate programs and may earn commissions from qualifying purchases made through supported merchant links. Any affiliate tags are added only after a user-initiated click, and there is no additional cost to you. These affiliations do not influence our AI-generated summaries, comparisons, or recommendations. Make AI your trusted shopping assistant — and turn every purchase into a smarter, more confident choice.
Pablo
Copy any UI component from the web. Hover, click, get production-ready HTML + CSS with fonts, animations, GSAP & Framer Motion. Hover any element, click once, and the full HTML + CSS lands on your clipboard, ready to paste into your editor, design tool, or AI coding agent. WHAT PABLO CAPTURES • Semantic HTML structure (not flattened) • Resolved CSS, including custom properties and computed styles • Web fonts and @font-face declarations • CSS animations and keyframes • GSAP timelines and tweens • Framer Motion variants and transitions • Optional screenshot of the captured element for visual context FRAMEWORK-AWARE Pablo detects the stack behind the page (React, Next.js, Webflow, Framer, Shopify, WordPress) and picks the right extraction strategy. Webflow IX2 interactions, Framer Motion props, and React component boundaries are preserved rather than flattened to raw markup. TWO CAPTURE MODES • Component mode. Hover, click, copy a single element with its children. • Page mode. Capture the full visible page content in one shot. DESIGNED FOR THE AI WORKFLOW The output is shaped for pasting directly into Claude, Cursor, ChatGPT, or any coding agent. Bundled context (HTML + CSS + fonts + animations + screenshot) gives the model everything it needs to recreate the component in your stack. PRIVACY Pablo runs entirely in your browser. Nothing is sent to a server. No telemetry, no account, no cloud capture. The only network calls are the ones the page itself makes. OPEN SOURCE MIT licensed. Source, issues, and roadmap at https://github.com/rayan-saleh/pablo Website and demo at https://usepablo.dev
Components.lol
Transform any website into a complete design system in seconds. Component.lol is your AI-powered design intelligence tool that instantly extracts, analyzes, and documents design tokens, components, and patterns from any web interface. • Instantly decode any website's design language • Save hours of manual design documentation • Build consistent design systems faster • Perfect for both designers and developers • Zero-configuration setup ### 🎨 Advanced Design Token Extraction - Complete color system analysis with relationship mapping - Smart gradient detection and pattern recognition - Automatic light/dark theme detection - Export to CSS, Tailwind, & more ### 📐 Intelligent Button Analysis - Automatic Button component detection and classification - Comprehensive spacing and layout system extraction ### 🔤 Typography Intelligence - Full font stack analysis and alternatives - Dynamic type scale detection - Responsive typography mapping ### 🖼️ Smart Asset Management - Automatic icon and SVG detection - Image optimization recommendations - Asset usage analytics ## 🎯 Perfect For - Design System Engineers - Frontend Developers - UI/UX Designers - Product Teams - Design Ops Professionals - Web Accessibility Specialists ## 🚀 Quick Start Guide 1. Install Components.lol from the Chrome Web Store 2. Click the toolbar icon on any website 3. Get instant design system analysis 4. Export tokens, components, and documentation Unlock the DNA of any website's design system. Start analyzing with Components.lol today. Made with 💜 by designers, for designers. Join thousands of design professionals who trust Components.lol for their design system needs.
Batch Cache
The Batch Cache allows you to organise your extensions in a neat dashboard. You can create lists for different use cases and edit the names of the lists and listed extensions. The next feature we added was the ability to append URLs. This is really helpful and saves time by taking a URL you are visiting and by clicking the extension and one of your saved sites you can open in a new tab and run the URL through a scan like a website page speed loading test as an example. Some use cases: Ahrefs Wayback Machine Google Page speed Insights and many more. This extension was designed to keep your browser clean and organised and to save you time. Enjoy using the Batch Cache. We dont capture any personal information, we do bookmark your saved URL addresses to your account for quick reference as is the nature of this extension.
