Build Your Website with Claude Code using these 3 steps

Sign Up here | Advertise with Us

Hey there, AI Geek!

You Asked. We Built. 🛠️

A few weeks ago our inbox was flooded with the same question. "Can you do a proper breakdown of Claude Code? Not a tutorial, something real." We heard you.

Disclaimer: This is not another step-by-step guide that feels like reading a manual. This is based on a real problem at hand.

We wanted to build our website and had been putting it off. And this felt like the right time.

Just used Claude Code, plain English and no developer or coding. Haha, we did not even type. We used a voice dictation tool called Wispr flow & dictated prompts in a few seconds. Read more to find out how. 🤯

What came out the other side looked so good we had to share the whole process with you. This issue is that process, start to finish, exactly as it happened.

First, What Even Is Claude Code? 🤔

You already know Claude as the AI you chat with to write emails, summarise documents, and brainstorm ideas. Claude Code is a completely different animal.

While regular Claude talks to you, Claude Code actually builds for you. A working website, a live app, a tool connected to your Slack, all from a plain English description you type like you're texting a friend.

Think of it this way: regular Claude is your brilliant colleague who gives great advice. Claude Code is that same colleague, except they also happen to be a full stack developer who works for free, never sleeps, and delivers in minutes instead of weeks. 🧑‍💻

There are two options to use it. 

Option 1: On the Desktop App 🖥️( No code friendly )

Open the Claude desktop app, click the Code tab at the top, and you're in. Files on the left, chat in the middle, live preview on the right. Nothing to download, nothing to configure, no technical knowledge needed whatsoever.

Option 2: In Your Terminal 💻( coder friendly )

For the slightly more adventurous, you install Claude Code with one command, open your project folder, type Claude, and it runs right there in your terminal window. Same plain English prompts, just a different environment. Most non-coders won't ever need this, but it's good to know it exists.

Step 1: Get Claude Code Running 🚀

Before anything else you need the Claude desktop app installed on your computer. Head to claude.ai/download, grab the app for Mac or Windows, sign in with your Claude account, and you'll land on the familiar chat interface you already know. Now look at the top of the screen, you'll see a tab that says Code, click that and you're now inside Claude Code.

That's your entire setup done with nothing else to touch. 🙌

One thing worth knowing before you start: you'll need at least a Claude Pro account which runs at $20 a month, that’s it. 💳/

Step 2: Plan Before You Build 🧠

Before touching anything, we prompted Claude to only plan and not generate any code yet. Simple as that, no special buttons, just telling it upfront what we want it to do first.

One quick thing before you type anything: click the model selector and pick Sonnet. Not Opus. Never Opus for planning.

Using Opus for a planning session is like hiring a Michelin star chef to make you toast, technically capable, but your token credits will vanish faster than free food at a startup event. 🐔

Model selection tricks:
High effort = Opus (building code)
Low effort = Sonnet / Haiku (For planning etc) 

Here's exactly what we told Claude:

"Don't build anything yet. I want you to plan a website for our AI newsletter called What’s Up in AI. Ask me questions and help me figure out the structure before we start building."

Claude then asked us a few questions and we answered them:

• What is the website about? A weekly newsletter covering AI for everyday professionals and business owners.

• What is the goal? Get visitors to subscribe and understand why it's worth their inbox.

• What is the product? A free weekly newsletter that makes AI accessible and actionable for non-technical readers.

• How many pages? One clean single page website that does one job brilliantly.

• What sections? Hero with subscribe button, about section, what you'll get, social proof, and a footer.

Claude came back with a complete structure for the website. We read through it, approved it, and then asked it to start building. 👊
Output:

That's when the real fun started. 👇

Step 3: Give It a Design Brain 🎨

Claude can build you a working website in minutes, but left to its own devices the design will look clean but forgettable. Like a Wikipedia page that went to business school. This is where most people stop and settle, but we didn't.

We went to Motion Sites first. 👀

If you haven't heard of it, Motion Sites is basically an AI design repository, a massive library of stunning website designs, all stored in a prompt format that Claude Code actually understands. You browse, you find a vibe you love, you copy the design prompt, and Claude builds your website looking like a proper agency made it.

We found a design that matched the What’sup in AI energy perfectly, copied the prompt straight from Motion Sites, dropped it into Claude Code alongside our website brief from Step 2, and watched Claude rebuild the entire thing with that design language baked in from the start.

The difference was honestly embarrassing. Same content, completely different level. 🤯

Here's exactly how to do it:

• Head to Motion Sites and browse until something clicks

• Copy the design prompt they provide

• Drop it into Claude Code and say "build my website using this design style" 

• Choose a Claude Opus model for building this website 

• Watch Claude apply it across every section automatically

(PS: The prompt was dictated by Wispr Flow. You’ll find the link to it in this issue)

No design skills needed. No Figma. No mood boards. Just a prompt and a result that looks like you spent three weeks with a designer. 🙌

And Then This Happened. 🤯

We typed a brief. We copied a design prompt from Motion Sites. We gave Claude Code plain English instructions.

What came out the other side genuinely made us stop and stare at the screen for a second. A fully designed, properly structured, actually beautiful website for What’s Up in AI, built in under 10 minutes, looking like we'd spent three weeks with a designer and about £4,000 we didn't have. 👇

Output: 

The hero section, the about section, the subscribe button, the social proof, all of it, exactly where we planned it in Step 2, dressed in a design we found on Motion Sites and handed to Claude in a single prompt dictated by Wispr Flow. (check it out above)

This is what "building in plain English" actually looks like when the output slaps. 🔥

💬 What do you want to build using Claude Code?

A website, a game, an app, or something completely different? Reply and let us know, we’d love to see what you create! Or maybe we might just cover another use case that you’d want us to.

Also, our email is always open if you’re stuck, need help or just some advice :)

And that’s a wrap!

Rate this issue and reply to this email to tell us if you liked this and would want more such deep dives! (the more specific you are, the better we can deliver!)👇️

We’ll be back soon with more spicy takes on What’s Happening in AI, so stay tuned & share our newsletter with a friend! Stay Tuned! 🤖 

Team What’s Up in AI