Peek - Design & Asset 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. --- ✨ Key Features 🖼️ 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! --- 🚀 v0.8.8.0 8 Mar 2026 🥳 New: Site Overview 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. 🥳 New: Copy Typescale 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. ⬆️ Improvement: Output code (Copy / Download) 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. ---- 🚀 v0.8.7.2 November 4, 2025 ✨ New Features & Improvements • 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. 🐞 Bug Fixes • Fixed OKLCH gradient colors not converting to user-selected color formats in Copy and Download pages. ---- 🚀 v0.8.6.6 October 28, 2025 ✨ New Features & Improvements • Smarter CSS, SCSS, and Tailwind CSS generation — now produces cleaner, production-ready code with proper font-family fallbacks and industry-standard structure. • Improved asset format detection — no more vague “IMAGE” or “VIDEO” labels! Peek now identifies actual file types more accurately than ever. • Built-in feedback form! You can now go to Menu > Feedback to share ideas, report bugs, or just say hi. • All numbers across the UI are now cleaner and easier to read — decimals are neatly hidden (but still precise behind the scenes). • Subtle UI refinements for a smoother, more polished experience. 🐞 Bug Fixes • Fixed an issue where downloaded videos had a “.video” extension, making them unusable. ---- 🚀 v0.8.5.0 October 27, 2025 ✨ New Features & Improvements - Gradients to SVG: Copy or download gradients as SVG format for direct use in Figma and other design tools - Color Picker Tool: Pick colors from anywhere—webpages or outside your browser. Your colors are stored locally in Peek until you delete them - Export by Groups: Copy or export colors by groups (gradients, solid colors, or picked colors) for better organization - UI polish and performance improvements - Making room for exciting new features coming soon! 🐞 Bug Fixes - Fixed an issue where gradients wouldn't generate unique variable names, which made the CSS unusable. All gradients now generate unique variable names, just like solid colors ---- 🚀 v 0.8.2.9 Release Highlights (20 Oct 2025) ✨ 3 MAJOR NEW FEATURES: - Assets Extraction: You can now analyze, filter, copy, and download all assets from a website. - Gradient Detection: Peek now extracts and displays gradient colors alongside solid colors. - Multi-Script Font Previews: Peek intelligently identifies the language on a page (e.g., Japanese, Arabic, Cyrillic) and displays font previews in the correct script. 🐞 Bug Fixes: - Fixed an issue with HEX to OKLCH color conversion to ensure perceptual consistency. - Plus, many other small bug fixes and performance improvements. --- ENJOY! https://trypeek.app