Feather - 支羽

Inspect any website's design instantly. Analyze fonts, colors, spacing, CSS and components with a side panel.

Feather is a powerful web design inspection tool that helps designers and developers analyze any website's visual details directly in the browser. HOW IT WORKS 1. Click the Feather icon to open the side panel 2. Toggle the inspection mode ON 3. Hover over any element on the page 4. View detailed design data in the side panel FEATURES Typography Analysis - Font family, size, weight, line height - Letter spacing and text alignment - Web font detection with source identification Color Inspection - Text, background, and border colors - Color format display (HEX, RGB, HSL) - Gradient detection and CSS output - CSS variable color matching Layout & Spacing - Box model visualization (margin, padding, border) - Flexbox and Grid layout detection - Element dimensions and positioning - Spacing between sibling elements CSS Properties - All matched CSS rules - Inline style inspection - CSS variable detection - Framework identification (Tailwind, Bootstrap, MUI) Component Detection - Automatic component type recognition - Buttons, Cards, Navbars, Forms, Modals, Hero sections Asset Analysis - Image dimensions and formats - SVG detection - Background image extraction WHY FEATHER? - Fast and lightweight side panel interface - No page reload required - Works on any website - Export data as JSON or CSS - Save snapshots for later reference - Clean, distraction-free UI PERFECT FOR - UI/UX designers analyzing competitor websites - Frontend developers reverse-engineering layouts - Design system builders extracting patterns - QA testers verifying visual consistency - Students learning web design techniques Feather respects your privacy - all analysis happens locally in your browser. No data is sent to external servers.