Feather - 支羽

About

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.