Code Specimen: CSS, Font & Color Inspector 作者: Code Specimen: CSS, Font & Color Inspector

🔍 Code Specimen is a free 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, then copy the UI you like as clean code. New in this version: copy any component as Tailwind code for free, with no AI, no limit and no sign-up, because it is made on your computer. 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.
• ⚛ Copy as Tailwind, React or Vue: a free HTML to Tailwind converter that keeps the exact values, hover and focus styles and breakpoints, in the format your project uses. Nothing is sent anywhere.
• 🤖 Refine with AI: when you want shorter, more familiar classes, an AI pass rewrites them. Your first three are free, with no API key. After that, add your own Anthropic, OpenAI or Google Gemini key. Nothing is sent until you press the button, Firefox asks your permission first, and you see exactly what will be sent.
• 👀 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 the framework or platform behind it.
• 📝 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.
• 🌍 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 or your other tabs, 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 tries of Refine with AI 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 or rebuilding a component, 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?"