Introducing CSS Peeper: Smart CSS viewer tailored for Designers
No more digging in a code. Inspect styles in a simple, well-organized & beautiful way with CSS Peeper chrome plugin. Our mission is to let designers focus on design, and spend as little time as possible in a code.
Some time ago we’ve created Chrome extension called CSS Peeper to make designers’ life easier. Ever wondered what’s the line-height, font or a button size on a website? We provide you the ultimate tool to satisfy your design curiosity.
Below you will find a short story of how this idea went live and what capabilities we offer you with our simple Chrome extension. In the end there are some current statistics of the tool. Enjoy the read!
Back story
Imagine that you’re working on a redesign of a digital product without a style guide to refer to. Probably the first thing you’d do is to go to the product website to check the design system and brand essence: colors, typography, spacings and look for specific imagery or icons.
Pretty obvious behavior so far… When you’re at that point, you probably want to inspect some existing CSS styles, get the color palette or download some assets that might be reused. The question is: How do you get all of that without digging in a code inspector of a browser?
As a Chrome user I went to look for an extension that will basically do that for me. I’ve found plenty different plugins: mostly poorly designed solving just small problems and not user centered. Many of them were designed without attention to detail and with usability issues.
In fact none of these plugins solved my problem entirely and there was no homogenous solution.
Basically I was unable to find just a single Chrome extension that will fit all my needs. I’ve decided to ask fellow designers if they’ve ever found something like that. Surprisingly they haven’t and just like me they wanted to limit the amount of extensions they have to use.
I’ve always wanted to have an extension that is like a Swiss Army knife for every designer. That’s why we’ve decided to create CSS Peeper.
After hours of searching I’ve decided to create something new from scratch. The unfulfilled need turned into a side project called CSS Peeper. I’ve proposed the design concept to my friend, Jędrzej Sadowski, who is a great Front-End Developer with a can-do approach and everything started!
Meet the CSS Peeper
The tool I’ve always missed in my design toolkit was a simple and handy code inspector that will give me all the necessary styles on a silver plate. Driven by these needs I’ve defined a wish list for MVP:
- Check the styles available on the web without having to switch plugins.
- Quick glimpse on a typography (font family, size, line-height etc.) used on a website.
- Ability to see all the colors available on a website without inspecting it piece by piece.
- Inspect single element in order to get the measurements, padding and style effects like shadows, hover states etc.
- Download assets (pngs, svgs, jpgs etc.) with one click.
- Beautiful UI for the finest user experience.
- Provide all information in a simple, well-organized & beautiful way.
The list above was transformed into the capabilities of the first version of CSS Peeper. Meet the functionalities that were included into MVP of our side project in details.
Meeting designers expectations
The first thing I thought was the simplicity and beauty of the UI. Designing for designers is a really hard thing. We see things that other people don’t, so astonishing first impression was a key priority. The experience was designed to be delightful and flawless.
I believe that beauty in user interfaces is as important as the usability. Today the great visual details differentiate the great products from the mediocre ones. We wanted CSS Peeper to stand out!
Select item to inspect
The core functionality of our extension: when you launch it you can click different objects on website like buttons, headings, backgrounds and anything you want to inspect.
As a result you’ll get a full specification of the object you’ve selected with some handy properties that you can easily use in Sketch or Photoshop.
Color palette
CSS Peeper allows you to inspect whole color palette used on a website. You can see all of them listed in a visually appealing way so you can find the one you need in a seconds.
We plan to add quick copy option and switching between different color values like HSL or RGB. If you see a room for even more improvements here, simply let us know and we will make it happen!
Export assets
If you ever tried to extract some assets (image, svg icon, etc.) from the deepest nest in a code you will totally appreciate this feature.
CSS Peeper does the dirty work for you so you don’t have to dig in a code. We provide ability to download assets one by one or get them all packed as a .zip file.
What happened so far?
We’re truly happy to announce that since the launch of CSS Peeper we have over 16,000 users so far! That’s just amazing! Along with that number we’ve gathered hundreds of positive opinions and get some really valuable feedback from our users. Below you can find some interesting charts from that period of time.
Almost three days after launch the news about CSS Peeper went viral, and we were featured on one of the most popular design blogs and services:
We’ve received some warm welcome from hundreds of Designers from all over the world. That’s super motivating and gives us strength to develop CSS Peeper along with your expectations for the finest quality. However in order to achieve the best results…
We need your input!
For now we have delivered the minimum viable product and we want to extend the tool along with user needs. We have our own vision of this small product, but also we want to hear the feedback directly from you!
We’d really love to hear more from the designers themselves and know how they feel about using CSS Peeper so that we could design it user-centered way. All suggestions and ideas from you are really precious for us!
