PikSpec – CSS Inspector & Font Finder

PikSpec is a CSS inspector, font finder and color picker for any website, built for designers, front-end developers and anyone building with AI. See exactly how a site is designed, then turn it into design tokens, a Tailwind theme or a DESIGN.md your AI coding tools can follow. No more guessing from screenshots. Click an element and get the real values. ━━━━━━━━━━━━━━━━━━━━ ✦ WHAT YOU CAN DO WITH PIKSPEC 🔍 Inspect any element Hover or click on a heading, button, card or layout to see its computed CSS: font family, font size, line height, colors, padding, margin, gap, borders, border radius, shadows and dimensions. Copy the values straight into your code. 🔤 Identify fonts Find out which fonts a website uses, with the weights, sizes and line heights in each style. PikSpec checks the font that actually rendered, not just what the CSS asked for. 🎨 Extract the color palette See every color on the page in one place: backgrounds, text, borders and accents. Copy HEX or RGB values with one click. 📐 Read the whole design system Typography scale, spacing scale, radius, shadows and effects, laid out together so you can understand a site's design language at a glance. 🖼️ Find images, SVGs and icons Browse the images, SVG icons and other media on the page, then preview and download the ones you are allowed to reuse. 🧩 Export design tokens Turn what you inspected into reusable design tokens: • CSS custom properties (CSS variables) • JSON tokens • Tailwind CSS v4 theme • SCSS variables • DESIGN.md, a design brief for AI coding tools like Cursor, Claude Code, v0, Lovable and Bolt 📄 Clone a page as static HTML/CSS Save a static HTML and CSS reference of a page, with its supported assets. It is a starting point for studying or rebuilding a layout. It doesn't copy the site's backend or guarantee every interaction works the same. Only reuse pages and assets you have permission to use. 📸 Responsive screenshots Capture desktop, tablet and mobile screenshots of a page to compare layouts across breakpoints. 🗂️ Keep everything in your workspace Save your captures to your private PikSpec workspace and come back to them anytime. Build a library of design references for your next project. ━━━━━━━━━━━━━━━━━━━━ ✦ WHO IT'S FOR • Web designers and UI/UX designers studying layouts, typography and color • Front-end developers matching a design pixel for pixel • Vibe coders and AI builders who want Cursor, Claude or v0 to follow a real design system • Students learning CSS and web design from sites they like • Agencies and freelancers auditing a client's site before a redesign ━━━━━━━━━━━━━━━━━━━━ ✦ HOW IT WORKS 1. Open PikSpec from the Chrome toolbar. It opens in the side panel. 2. Click "Grant access & analyse" on the page you want to inspect. 3. Inspect elements, browse styles and media, and export tokens. 4. Save what you need to your workspace. PikSpec never analyses a page on its own. Opening the panel or switching tabs does nothing until you click Analyse. ━━━━━━━━━━━━━━━━━━━━ ✦ PRIVACY • Pages are inspected locally in your browser. • Nothing is uploaded until you choose to save a capture to your workspace. • Account and plan checks talk to PikSpec's service. • Anonymous usage stats record which features are used, never page addresses or content. You can turn them off in the account menu. • Screenshots and rendered-font checks may show Chrome's "started debugging this browser" notice. That's expected. Screenshots and saved pages can include personal information shown on the page, and cloned pages can include hidden markup or inactive scripts. Review a capture before you save or share it. Some protected browser pages and media can't be captured. ━━━━━━━━━━━━━━━━━━━━ ✦ PLANS See plans: https://www.pikspec.com/pricing ━━━━━━━━━━━━━━━━━━━━ Website: https://www.pikspec.com Help: https://www.pikspec.com/support Privacy: https://www.pikspec.com/privacy Made by an indie developer. Questions or ideas? Email support@pikspec.com, I read every message.