As developers and designers, we’re drowning in tools. Every week, a new “ultimate” app or “game-changing” plugin lands on Product Hunt, promising to revolutionize our workflow. But hype is cheap. The real test of a tool isn’t its feature list, but whether it saves you time and solves a real, recurring problem without adding unnecessary complexity.
This isn’t another exhaustive list of the usual suspects. You won’t find VS Code or Figma here—we all know they’re great. Instead, this is my personal, battle-tested toolkit. These are the utilities I keep coming back to, the ones that live in my browser bookmarks and have genuinely made my work better, faster, and more creative.
1. BundlePhobia: The Performance Watchdog
Before you npm install another cool-looking package, do yourself a favor and meet BundlePhobia. This tool does one thing, and it does it brilliantly: it tells you how much size a JavaScript package will add to your project. Just search for any npm package, and you get an instant analysis of its minified and gzipped size, its dependencies, and an estimate of how long it will take to download on different network speeds. It’s an essential reality check that helps you build leaner, faster applications by making you conscious of the true cost of a dependency.
Find it here: https://bundlephobia.com/
2. Coolors: For Effortless Color Palettes
Whether you’re a developer tasked with adding some style to a side project or a designer looking for inspiration, color can be one of the hardest things to get right. Coolors is a ridiculously fast and powerful color palette generator. Press the spacebar to generate a new five-color palette instantly. You can lock colors you like, manually adjust hues, and even upload an image to extract its primary colors. It also includes tools for checking color blindness and contrast ratios, making it a one-stop shop for building beautiful and accessible palettes.
Find it here: https://coolors.co/
3. Squoosh: Powerful Image Compression in Your Browser
Page speed is paramount, and oversized images are one of the most common culprits for slow-loading sites. Squoosh is an open-source image compression tool from the Google Chrome Labs team that runs directly in your browser. It’s incredibly powerful, supporting a wide range of formats from WebP to AVIF. What makes it indispensable is the side-by-side comparison view. You can tweak compression settings and see a real-time preview of the quality and file size, ensuring you find the perfect balance before you download.
Find it here: https://squoosh.app/
4. Invert Colors App: Your Go-To for Quick Asset Flips
This tool sounds simple, but its utility is surprisingly broad. Invert Colors App does exactly what its name says: it inverts the colors of any image you upload. Why is this so useful? The most common reason I use it is for dark mode theming. When a client sends over a logo or an icon set, I can instantly see how it will hold up against a dark background. It saves me from firing up Photoshop or Figma for a simple color flip. It’s also great for generating creative variations of an image or for quickly checking how an asset might look with a high-contrast accessibility setting enabled.
Find it here: https://invertcolors.app/
5. Fontjoy: AI-Powered Font Pairing
Typography is an art, but for many of us, it’s a mysterious one. Fontjoy uses AI to help you find fonts that work well together. You pick a starting font, and it intelligently generates combinations for headings, subheadings, and body text based on principles of contrast and similarity. You can lock in fonts you like and keep generating new options until you find the perfect trio. It’s a fantastic way to level up your design game and ensure your text is not only readable but also aesthetically pleasing.
Find it here: https://fontjoy.com/
6. unDraw: Beautiful, Customizable Illustrations for Free
Need a professional-looking illustration for a landing page or blog post but have zero budget? unDraw is a lifesaver. It’s a constantly updated collection of high-quality, open-source illustrations for any conceivable use case. The best part? You can select a primary color before you download, and the entire illustration will be customized to match your brand’s palette. All illustrations are available as SVGs, so they’re infinitely scalable and easy to animate.
Find it here: https://undraw.co/illustrations
7. Lighthouse: Your Built-in Quality Assurance Coach
Lighthouse is built right into Chrome DevTools, but many developers only scratch the surface of what it can do. Running a Lighthouse audit is like having a Google engineer review your site. It gives you a detailed report on performance, accessibility, best practices, and SEO, complete with actionable advice on how to improve.
When I’m working on accessibility, Lighthouse is my first stop. It points out contrast issues, missing ARIA attributes, and more. And when it comes to visual assets, I often pair its feedback with other tools. For instance, to get a quick feel for how an image might appear to users with system-level color inversion enabled, I’ll drop it into a utility like
https://invertcolors.app/. It’s not a replacement for a formal audit, but this kind of quick check helps build empathy and leads to more robust design choices.
Find it here: It’s in your Chrome DevTools! (Audits panel)
A great toolkit is personal and evolves over time. These are the tools that have stuck with me. They’re simple, focused, and solve everyday problems without getting in the way. Hopefully, a few of them can find a permanent home in your workflow, too.
