Code Specimen: CSS, Font & Color Inspector bởi Code Specimen: CSS, Font & Color Inspector

🔍 Code Specimen is a free AI Powered CSS inspector, font finder and color picker for Firefox. Point at any heading, button or card on a website and see its typography, colors, spacing and styles in Firefox's sidebar, each with its own copy button. This version adds Site DNA, a design brief, a live preview, screenshots you can frame, and three free HTML to Tailwind conversions with no API key. No account, no tracking, and it speaks 20 languages.

⚡ How it works

Click the Code Specimen icon in your toolbar (or press Alt+Shift+S) and choose Start inspecting. Hover over anything to see its size and style, then click to lock it. The details open in the sidebar beside the page, which stays with you as you switch tabs, so you never have to open the developer tools.

✨ What you can do

• 🧩 Inspect element styles: font family, weight, size and line height, text and background with contrast ratings, the box model with margin and padding, and layout values.
• 📋 Copy CSS without cleanup: one value, one section or every style on the element, in px or rem.
• 🧱 Copy a whole component as clean HTML and CSS, with only the rules that apply, including hover, focus and media queries.
• 👀 Live preview: see the component you picked on its own, in its normal, hover and focus looks, and at phone width.
• 🔤 Identify fonts on any website: the Type tab lists every typeface and weight on the page and builds the type scale from H1 to caption, ready for your stylesheet.
• 🎨 Extract a site's color palette: every text, background and border swatch, grouped and counted, in HEX, RGB, HSL or OKLCH.
• ✅ Check contrast: a built-in WCAG contrast checker flags every text and background pair that fails AA.
• 📦 Export the palette as CSS variables, a Tailwind config or JSON, ready to use as design tokens.
• 🧬 Site DNA: see at a glance how many colors, fonts, images, SVGs, background images and videos a page uses, with hints about what it is built with, such as React, Next.js, Vue, WordPress, Shopify, Webflow or Bootstrap.
• 📝 Design brief: download a page's typography, palette, contrast results and assets as one Markdown file, ready to paste into an AI chat or a document.
• 📸 Frame a shot: take a screenshot of anything on screen, crop it, and set it on a clean background with padding, rounded corners, a border and a shadow, then copy it or save it as a PNG.
• 🖼 Download images: every image, SVG and background image on the page, one at a time or all together as a .zip file.
• ⌨ Keyboard navigation: the arrow keys step to the parent, first child and sibling, and Space pins your selection.
• ✏ Edit live: change styles on the page, including hover and focus states, then copy your edits as a stylesheet. Closing the sidebar puts the page back exactly as it was.
• 🤖 HTML to Tailwind: turn a component into Tailwind classes. Your first three conversions are free, with no API key and no sign-up. After that, add your own Anthropic, OpenAI or Google Gemini key and keep going. Nothing is sent until you press the button, Firefox asks your permission first, and you see exactly what will be sent.
• 🌍 Speaks your language: English, Spanish, Portuguese, French, German, Italian, Dutch, Polish, Russian, Ukrainian, Turkish, Arabic, Hindi, Indonesian, Vietnamese, Thai, Japanese, Korean and Chinese (Simplified and Traditional).

🔒 Private by design

Code Specimen reads a page only after you open it there, by clicking its icon or pressing its shortcut. It never asks for access to all your websites, so installing it shows no warning about reading your data. No analytics, no ads, no account, and your settings stay on your computer. The free conversions are the one feature that goes through our server, which passes your component to Google Gemini and keeps nothing but an anonymous count.

👥 Who it's for

Web designers checking how a live site was built, front-end developers matching a mockup, UI designers collecting a site's type and palette, people building with AI tools who need a page's look in words, and anyone who has looked at a website and wondered "what font is this?" or "what color is that button?"