Media
5 items
Description
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, vibe coders, and frontend developers. With a single click, extract a complete design system—colors, gradients, typography, shadows, border radius, 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 v3/v4, JSON, SVG, and more. ✨ Key Features 🔍 NEW: Design Audit - Automatically audit any website against real design system rules: accessibility, color, typography, spacing, layout, and component consistency. - Peek scores each dimension and gives an overall grade so you can see exactly where a site’s design falls short. 📊 NEW: Design Health & Overview - The Overview tab now shows a live Design Health score with grade, rationale, and per-dimension breakdown. - Color harmony detection, WCAG contrast pair analysis, font pairing review, and dark mode detection — all in one place. - Jump straight to Audit Findings or the full Typescale view from Overview. 🌑 NEW: Shadow Extraction - Peek extracts every box-shadow and drop-shadow from the page — parsed into individual layers with offset, blur, spread, and color. - Inspect shadow details in the dedicated Shadow Modal. - Browse all shadows on the Shadows Page and copy them as CSS tokens with one click. 🛠️ NEW: Tech Stack Detection (Built With) - Peek detects the popular frameworks the websites were built with. - Stack icons and tooltips with framework descriptions appear directly in the Overview tab. ⬛ NEW: Border Radius Extraction - Peek now surfaces border radius tokens used across the page, shown in the Overview tab alongside your color and typography summary. 🖼️ Complete Asset Extraction - Instantly find and analyze all images, SVGs, and other assets on a page. - Search assets by name or category; filter by size (small / medium / large). - Filter, scale, copy, and download assets with one click. 🎨 SVG Color Customization - Change individual SVG colors directly inside Peek — including multi-color SVGs. - Copy or download the customized SVG instantly. - Gradient SVGs are detected automatically and flagged with a clear banner. 🎨 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 v3, Tailwind CSS v4, JSON, and SVG. 📝 Advanced Typography Analysis - Instantly identify font families, sizes, weights, and line heights. - Visualize the site’s full typescale with semantic labels (Display, Title, Body, Caption…). - Live Font Previews: see fonts rendered exactly as they appear on the site. - Intelligent Script Detection: Peek automatically detects the script (Latin, Bangla, Hindi, Tamil, Telugu, Malayalam, Hebrew, Chinese, Thai, Arabic, Japanese, Cyrillic, etc.) and previews fonts in the appropriate language. - Copy the full typescale in CSS, SCSS, Tailwind, or JSON from the Overview tab. 📤 Tailwind v3 & v4 Export - Export color tokens for both Tailwind CSS v3 and v4. - Peek automatically warns you when a color format (e.g. OKLCH) isn’t compatible with Tailwind v3, so your output always works. 🚀 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 running design audits and 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 - Install the Peek extension - Navigate to any website - Click the Peek icon - Extract styles instantly 💡 Use Cases - Run a full design audit on any site in seconds. - Reverse-engineer a website’s design system. - Detect what framework and libraries a site is built with. - 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, Tailwind CSS (v3 & v4), 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! Release History 🚀 v0.8.10.0 // 29 May 2026 (Patch v0.8.10.1; 12 Jun 2026) 🥳 New! 1️⃣ Design Audit: Peek now audits any website against real design rules across accessibility, color, typography, spacing, layout, and component consistency — with a scored grade and an exportable report. 2️⃣ Design Health Score: The Overview tab shows a live health score, grade, per-dimension breakdown, color harmony detection, WCAG contrast pair analysis, font pairing insights, and dark mode detection. 3️⃣ Shadow Extraction: Every box-shadow and drop-shadow on the page is extracted, parsed into layers, and viewable in a dedicated Shadow Modal and Shadows Page. Copy shadows as CSS tokens instantly. 4️⃣ Tech Stack Detection (Built With): Peek detects popular frameworks the websites are built with — shown with icons and tooltips in the Overview tab. 5️⃣ Border Radius Extraction: Border radius tokens are now surfaced in the Overview tab. 6️⃣ Tailwind v3 Export: Export color tokens specifically for Tailwind CSS v3, with automatic warnings when a color format isn’t compatible. 7️⃣ Assets Tab Search & Filter: Search assets by name or category and filter by size (small / medium / large). ⬆️ Improvements - Typography Modal: enhanced interaction and richer stats. - Overview tab redesigned for clarity and navigation to Audit Findings, Typescale, and Shadows pages. - SVG gradient detection with inline banner notice in Asset Modal. - Consistent Title Case across all labels, buttons, and badges throughout the UI. --- 🚀 v0.8.9.1 // 19 Apr 2026 🥳 New! 1️⃣ SVG Superpowers: Change SVG colors and Copy/Download the customized SVG (Gradient SVG color customization coming soon!) 2️⃣ More Organized Assets: Logos now appear first! Other assets are grouped by asset type. 3️⃣ Improvement: Jump To Top button in Overview Tab 🐞 Bug Fix: Fixed a bug where manually entered HEX values were not working in SVG Color Edit mode. --- 🚀 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. 2️⃣ Color analysis – Dominant, secondary, and accent colors with role breakdown (background, text, button). 3️⃣ Typography summary – Heading/body fonts, unique styles count, and typescale preview. 4️⃣ Quick actions – Jump to Copy or Download for a chosen color group from Overview. 🥳 New: Copy Typescale 1️⃣ Copy Typescale As… – Copy the full typescale in CSS, SCSS, Tailwind, and more. ⬆️ Improvement: Output code (Copy / Download) 1️⃣ Cleaner generated code – More consistent formatting, spacing, and comments. 2️⃣ Better structure – Logical grouping and ordering of variables and rules. --- 🚀 v0.8.7.2 // 4 Nov 2025 ✨ New Features & Improvements • Delete Picked Colors: Delete individual picked colors with undo support. • Conic Gradients to SVG: Conic gradients auto-convert to linear in SVG exports. • Enhanced Video Player: Picture-in-Picture support in the Assets Modal. • Improved Color Conversion: OKLCH gradient colors now properly convert to your selected format. 🐞 Bug Fixes • Fixed OKLCH gradient colors not converting in Copy and Download pages. ENJOY! https://trypeek.app