FigShot

Designer Daily Report

This extension opens a daily Designer Report on a background tab (non-distracting) roughly around 00:00AM PST time as the report is ready. ✦ Curated Inspirational Websites ✦ Daily Products for Designers ✦ Portfolio of the Day ✦ Font of the Day ✦ Color Palette of the Day ✦ Branding of the Day ✦ Articles from popular Design Blogs ✦ News from Reddit ✦ Curated Inspiration from Dribbble and Behance ✦ Inspirational posts from Instagram ✦ Job listings for Designers and more Coming Soon! Be one of the first adopters of Designer Daily Report.

Peek - Design & Asset Toolkit

Extract assets, colors, typography & tokens from any site. Export to CSS, SCSS, Tailwind & more. The ultimate dev & design toolkit. 🎨 Instantly Extract Design Tokens, Styles, and Assets from Any Website Peek is the ultimate all-in-one inspector tool for UI/UX designers and frontend developers. With a single click, you can extract a complete design system—including colors, gradients, typography, and assets—from any website. Say goodbye to manual inspection and hello to a streamlined workflow. Export production-ready code in CSS, SCSS, Tailwind CSS, JSON, SVG, and more. 🖼️ NEW: Complete Asset Extraction - Instantly find and analyze all images, SVGs, and other assets on a page. - Filter, scale, copy, and download assets with one click. 🎨 Smart Color & Gradient Detection - Automatically extracts the entire color palette, including solid colors and gradients. - Supports HEX, RGB, HSL, and modern formats like OKLCH. - Copies or downloads in developer-ready formats: CSS, SCSS, Tailwind CSS, JSON, and SVG. 📝 Advanced Typography Analysis - Instantly identify font families, sizes, weights, and line heights. - Visualize the site's type scale and typographic hierarchy. - Live Font Previews: See fonts rendered exactly as they appear on the site. - Intelligent Script Detection: Peek automatically detects the language (e.g., Arabic, Japanese, Cyrillic) and shows font previews in the appropriate script. 🚀 Lightning-Fast & Developer Friendly - Get instant style and asset data with no page reloads or performance impact. - Copy styles directly to your clipboard or download files. - Export clean, production-ready code. 🎯 Perfect For - UI/UX Designers creating design systems - Frontend Developers building component libraries - Design Teams maintaining brand consistency - Students learning web design principles 🔒 Privacy First - All processing happens locally on your device - No data sent to external servers - Respects your privacy and website content 🚀 Get Started in Seconds 1. Install the Peek extension 2. Navigate to any website 3. Click the Peek icon 4. Extract styles instantly 💡 Use Cases - Reverse-engineer a website's design system. - Build a palette from an inspiring site. - Analyze competitor typography and branding. - Create consistent brand guidelines. - Prototype faster with real-world design tokens. 🎨 Supported Formats - CSS, SCSS, JSON, SVG, and more - Compatible with all major design tools - Ready for production use Install Peek today and unlock the power of intelligent style and asset extraction! 1️⃣ SVG Superpowers: Change SVG colors and Copy/Download the customized SVG (Gradient SVG color customization is coming soon!) 1️⃣ Overview tab – Single-page summary of colors, typography, and typescale from the current site. Color analysis – Dominant, secondary, and accent colors with role breakdown (background, text, button). 2️⃣ Typography summary – Heading/body fonts, unique styles count, and typescale preview. Typescale preview – Font sizes shown with semantic labels (Display, Title, Body, etc.) and script-aware labels for non-Latin scripts. 3️⃣ Quick actions – Jump to Copy or Download for a chosen color group (Background / Text / Button) from Overview. 1️⃣ Copy Typescale As… – From Overview, copy the full typescale (all sizes) in your chosen format (CSS, SCSS, Tailwind, etc.). 2️⃣ Typescale-only flow – Opens the Copy page with typography output pre-selected so you can copy or tweak and copy. 1️⃣ Cleaner generated code – More consistent formatting, spacing, and comments in CSS/SCSS/Tailwind output. 2️⃣ Better structure – Logical grouping and ordering of variables and rules in copy/download output. 3️⃣ Fewer quirks – Edge cases in color/gradient and typography output reduced for more reliable paste-in use. • Delete Picked Colors: You can now delete individual picked colors by hovering over them. An undo option is available if you change your mind. • Conic Gradients to SVG: Conic gradients are now automatically converted to linear gradients in SVG exports. Simply change the gradient type from Linear to Angular in Figma (or equivalent in your design tool) to match the original conic gradient. • Enhanced Video Player: Improved video playback experience in the Assets Modal with Picture-in-Picture support. Pop videos out into a resizable window for better viewing. • Improved Color Conversion: Fixed OKLCH gradient colors to properly convert to your selected format (HEX, RGB, HSL, etc.) across all views. • UI Refinements: Subtle improvements throughout the interface for a smoother, more polished experience. • Fixed OKLCH gradient colors not converting to user-selected color formats in Copy and Download pages.

WebClarityAI

Clear Understanding for Better Websites WebClarity is a lightweight all in one website analysis extension for designers, developers, and SEO and GEO experts. Instead of juggling 10+ separate tools, you can inspect, debug, and audit any page from one clean interface. It is free to install, works without signup, and is built to keep your browser fast while you work. 🎨 FOR DESIGNERS - What Font: Inspect exact font styles directly on the page to align design and implementation with less back and forth. - Style Guide: Capture real rendered design tokens like typography and color values for audits, handoff, and rebuilds. - Assets Downloader: Extract page assets like SVGs and images quickly so you can keep moving without manual hunting. - Contrast Checker: Check WCAG ratios and APCA scores instantly using page colors for faster, defensible accessibility decisions. - Image Source Finder: Send page images to Google Lens in one click to trace sources, find higher-resolution files, and discover similar visuals. - Style Swap: Test font and color changes on the live page to validate visual directions before jumping into design files. 🧑‍💻 FOR DEVELOPERS - Inspector: Inspect computed styles, spacing, and layout context quickly to debug UI issues without getting buried in DevTools. - Technology Detector: Identify CMS, frameworks, analytics, and hosting signals to understand stack decisions in seconds. - Responsive Viewer: Run synchronized cross-device checks in one view for faster responsive QA and implementation validation. 🔍 FOR SEO & GEO EXPERTS - Quick SEO Checker: Audit key on-page SEO signals, including metadata, Open Graph, headings, and image coverage, with clear issue visibility. - Heading Structure: Visualize the full H1-H6 tree and quickly spot skipped levels, multiple H1s, and other structure issues. - Alt Text Manager: Find missing or empty alt text fast so accessibility and SEO fixes are easier to prioritize and execute. - Link Health Auditor: Scan link quality and flag broken URLs, insecure external links, and weak anchor text that can hurt trust and rankings. - Social View: Validate Open Graph and Twitter Card metadata and preview how shared links will appear before publishing. - Performance Insights: Review mobile and desktop speed signals, including key page experience metrics, to guide optimization decisions. All features work offline and require no backend services. Your browsing data stays completely private.

HTML to Figma Extension by Webinspoo

Capture webpages to Figma with ease. Copy and paste your real site directly into Figma as editable layers. No more screenshots! - Get your starting place straight from production - Mock new ideas in seconds Less work, more design. Move faster with Html to Figma