Index

How I Design Websites Using AI :)

I'm not a "natural" designer. My first website was ugly, my first client was a café, and I've since built websites for 50+ clients. Here's how I do it today with AI.

I was terrible at design (at first)

In school, I learned HTML, CSS and JavaScript because I wanted to build cool websites and games. I never figured out how to make the game, but I got completely hooked on how websites work.

Then the COVID lockdown came. I was in 11th grade, stuck at home, and YouTube became my teacher. My routine was simple: watch a tutorial, copy it, break it, fix it, repeat.

My first client was a café

After school, I built a full website for a local café. Menu, pages, the whole thing. It wasn't perfect, but it was real. Someone was actually going to use what I made.

That project changed how I saw building websites. It's not just code, it's also about helping a real business look good online. That one café led to more projects, and slowly the list grew to 50+ clients.

Then college taught me design

In college, I joined Blue Screen Club, our programming club. One of my friends there was great at web design. I kept looking at his work and asking myself, "Why does this look so good?"

Slowly I learned that design comes down to the small things:

  • How components are placed
  • Font choices
  • Colors and spacing
  • Layout and flow

At the same time, I was deep in projects and research. I finished 4 projects in a single month, and I even won a Best Paper Award. That's when I learned something I still believe: the more you build, the better you get.

Now, how I use AI

Here's the mistake most people make: they open an AI tool and type, "Build me a modern website."

I tried that too. The result was always the same, a random, generic website that looked like everyone else's.

Now I don't touch AI until I know what I'm building.

Step 1: Get clear

I answer these first:

  • What is this website for?
  • Who will use it?
  • What pages and content does it need?
  • Dark or light theme?
  • What colors and fonts fit the brand?

Step 2: Collect inspiration

I never start from a blank screen. I mostly use X/Twitter, because so many designers share landing pages, UI ideas and animations there. I save what I like: a layout, a font, a tiny hover effect.

Inspiration isn't copying. It's figuring out why a design works, then making your own version.

Step 3: Write three files

This is the secret. Before any code, I create three simple markdown files:

  • product.md tells AI what we're building: the product, the audience, the problem and the main features.
  • content.md tells AI what the website says: every section and page, with the real text, so nothing is made up.
  • design.md tells AI how it should look: colors, fonts, theme, style and layout.

Now AI doesn't have to guess. It has a clear brief, like a real client would give a designer.

Step 4: Build and keep improving

I give all three files to AI and say: "Read these and build the website."

The first result is never final. I move sections around, change fonts, fix spacing and delete things that don't feel right. Honestly, this is my favorite part.

What I learned

AI didn't replace design for me, it made design knowledge more valuable. If you don't know why something looks good or bad, you'll just accept whatever AI gives you.

I think of AI as a really fast developer sitting next to me. I decide what to build, and AI helps me build it faster.

The tools keep changing, but the basics stay the same: understand the people, know your content, care about the design, and keep building.

I started with HTML on YouTube during lockdown. Now I'm building much bigger things with AI, and I'm still learning. :)