Lens is a Chrome extension built for designers and developers who care about the details. Inspect, extract, and understand the design systems that power the web.
Trusted by designers at
In a world of AI-generated everything, Lens is intentionally minimal. We believe that good design tools should get out of your way and let you focus on what matters: understanding the web around you.
Every feature has a purpose. Every interaction feels natural. No bloat, no complexity, just clarity.
Hover over any element to inspect tags, classes, and computed styles. Understand the hierarchy and structure of any design you encounter.
Pull colors, typography, images, and assets directly from the web. Build your design system faster by studying what works.
Convert raw CSS into Tailwind utility classes instantly. Keep your modern workflows streamlined and focused.
Explore all CSS variables on any website. Understand how the design system is built, piece by piece.
Chat with AI about any element or design decision. Get suggestions that actually matter, grounded in real design patterns.
Soft Lavender
Dusty Rose
Warm Cream
Periwinkle
Blush Pink
Mauve
Lilac
Pearl
Orchid
Watch a quick tutorial on how to install Lens
Join thoughtful designers and developers who are building better with Lens.