I have some tips on how to make your site / app feel real and human even if it's vibe coded.

- I'm not a graphics designer but I've worked with many and deeply interested in it for 15 years. - I led a UX team in a 50K+ organisation - I've launched 6+ businesses and did countless websites.

So here's how I do it -- I'm not saying THIS IS THE WAY to do it. This is HOW I DO IT.

1) Whiteboard. Sit your ass down, put some music on you find inspirational and imagine what you want your users to feel. What type of an "ambiance" this site should have? Energetic, calming, playful, serious? Pick 1 or 2 as your primary emotional anchors.

2) Principles. You need to have these engrained in your bones. Less is more. If you try to do everything you do nothing. Design is an exercise in ruthless elimination. Read on design to build your internal mental heuristics library.

3) Mental Image. Once you have a feel and direction decided (can change, but clarity is important) (For example, while I was building my current project (AISA - AI Fluency) I had this sight / taste / smell of a creamy, sweet, lime liquor - only needs to make sense to you at this stage and okay if you can't put it into words as long as you have it mentally.

4) Colours and tones. Colours are the spirit of it. Search for "colour pickers" there are many, which give you a set of colours that look good with each other. Scroll until you find one that matches #3. Save it, these are your brand colours.

5) Primary visuals. For AISA this was the colourful sugar orange. It's a hybrid of AI generated and hand edited. It's not pixel perfect but for me it captures the right emotional tone. Then you need to look at how it plays with the colours.

6) Design language. Is it dark glass isomorphism? Is it flat design? Is it retro? Look at design language's and method's e.g. like bento-box and more. Read more, fill your gaps (This is where I fall the shortest btw and would love to improve myself)

7) The Master Design Brief. This is a document that brings all the colours, feeling, design language elements, fonts, images together in a presentation / html page. This is also I begin to write the early copy such as H1 and capturing strong verbal elements to see everything together. You play with all these levers until it "feels right". Using AI here is great to see different combinations of these.

8) HERE COMES AI Turn all of it into a design file in md format. This is going to be the Bible for your AI agents to refer to and stick to when it comes to ANY design decision in your site / app. Make it a Claude rule or whatever to always refer to this file first and re-use same components and keep it consistent.

9) Build the code and Iterate. You've now given the soul to it with 1 - 7. Using AI more and more at each step. Now time to iterate with AI, letting it do the heavy work of creating mock-ups and versions.

10) Make it a living thing. You need real users, real people, who access and use it, and you need to get feedback. You need to sleep on it, wake up on it, live with it for a bit and keep coming back to it. Takes weeks - sometimes months till it "settles". Play with it until you are happy with it.

Follow these 10 and I guarantee you your site/app will have a soul and look better and more human than 99% of the examples out there. Why? Guess what, because you actually MADE IT HUMAN with putting some of yourself into it.

Design with a Soul: How to make your Vibe-coded site not look like AI Slop