So you've dipped your toes in to vibe coding and you've coded a basic app, but it's lacking some flair. Here's some useful online tools that can help you make your design really vibe!

Three qualities about all the tools listed here:

• They are all online tools - no downloads needed
• None require you to sign up to register
• The functionality I mention is free (some are ad-supported, but it's not aggressive)

1. Coolors

Coolors has an excellent list of colour palettes to help give your web site or app a unique look. Simply find a palette set you like and hover over the colours to get the hex values - or export them to CSS variables or another format to use them all in your app.

Some of my favourite palettes include this beach sunset combo and this blue-green-orange set

A great list of colour palettes

2. Squoosh.app

Image resize and compression has never been so easy than with Squoosh.app. As well as file uploads, Squoosh also supports pasting an image directly in - which I find extremely helpful when taking screenshots for this blog.

Squoosh runs its compression algorithms in the browser, so you don't send data to the server - and it can continue to process images when your connection is offline. It supports all the major image formats and has options for resizing, reducing colours and compression techniques directly in the app.

Image compression made easy

3. Lucide

Getting a decent set of royalty-free SVG icons on the Internet can be a bit of a challenge, but Lucide has come to the rescue! As well as providing a comprehensive set of over 1,500 icons, Lucide has a React npm library which allows you to easily add SVG icons to your project, and ensure you only include the icons you use in your final app bundle size.

Lucide has over 1,500 icons!

4. SVGOMG

Sometimes we can get the SVGs we need from an icon library and need to use a different source or make our own. SVGOMG's Optimizer is great for cutting away unneeded instructions and data. You cna adjust the compression level with the in-app interface and see a real-time preview to check the quality of your SVG output.

5. PhotoPea

Editing an image or photo means a plethora of different tool options - and rarely are any of them as good as Adobe's original Photoshop. But Photoshop costs money, and this is a list of free tools! Enter PhotoPea - a Photoshop like experience available online without the expense, and without the requirement to sign up.

Photopea supports all the usual PhotoShop file formats, and can handle most of the actions and edits you would typically associate with PhotoShop.

A Photoshop-like experience

So there you go - five of my favourites. Let me know if you have any excellent recommendations to add to the list!