Written by a working engineer

A media for first-time builders with AI

Getting Started

Ask Claude to Build You a Web Page

Use Claude's Artifacts feature to create a personal profile page. No coding required. Just talk to it, and a web page appears right before your eyes.

Reading time: 8 min

Goal - After reading this article -

You'll be able to create your own web page just by chatting with Claude.

A web page — from a chat?

In the previous article, we learned how to get better answers from Claude. Remember how changing the way you ask completely changes what you get?

This time, we're taking that conversational power a step further. Just ask Claude to "make me a web page," and it actually will.

"Wait, don't I need to know how to code?" Nope. Just talk to it. Same vibe as when we asked about dinner ideas in the last article.

The feature that makes this possible is called Artifacts.

What are Artifacts?

Artifacts is a feature that displays what Claude creates as a live preview right next to the chat.

Normally, Claude replies with text. But with Artifacts, Claude can write HTML and code, and you see the result as a live web page.

Here's how it works:

  1. You ask "make me a page like this"
  2. Claude writes the code
  3. The result shows up as a preview next to the chat
  4. If something's off, just say "change this part" and ask again

No special setup needed. If you have a Claude account, you're good to go.

Let's build a profile page

Let's try it. We're going to make a personal profile page — a simple web page that introduces you.

Open Claude and start a new chat. Then try asking something like this:

Make me a profile web page. My name is (your name), my hobbies are (your hobbies), and my favorite food is (your favorite food). Add a tagline that says "Currently learning to build things with AI."

Feel free to swap in your own details.

Hit send, and Claude will write the code. A web page should appear on the right side of the chat.

A web page with your name on it, right in front of you. And you didn't write a single line of code. Pretty cool, right?

Let's make it look better

The first version might look decent, but you'll probably want to tweak a few things. Just tell Claude.

For example:

Change the background to a dark color and make it look more modern.

The preview updates and the whole vibe changes.

Let's get more specific.

Put a circular profile photo frame on the left and the bio text on the right. Use a clean, readable font.

See how just asking for small changes over and over gets you closer and closer to what you want?

Remember from the last article how adding conditions changed the answer, and assigning a role gave deeper responses? Those same techniques work here too.

Tips!!
If you don't like the result, don't hesitate to ask for a redo — as many times as you want. "Actually, I liked the previous version better — go back to that" works too. Claude remembers the conversation, so it can handle that.

More things you can ask for

Once you have a base profile page, try adding more features. It's all just chatting.

Add animations

Add an animation so my name fades in when the page loads.

Add social media links

Add X and Instagram links as icons at the bottom of the page.

Make it mobile-friendly

Make it responsive so it looks good on a phone too.

See? Even with zero coding knowledge, you can customize endlessly — it's all about how you ask. This is what it means to build things together with AI.

Save what you've made

Once you're happy with your page, let's open it in a browser. Just click the "Open in Google Chrome" button shown in the red box in the image.

Your page will open in a new browser tab. It's a real web page running in your browser, not just inside Claude.

Tips!!
Your Claude conversations are saved, so you can come back to this page anytime. If you want a local copy, copy the code from the top-right of the preview and save it as index.html.

Summary

Here's what we covered:

  • Artifacts is a feature that lets you preview what Claude creates, right on the spot
  • You can build a web page just by talking to Claude
  • Asking for small tweaks over and over keeps improving it
  • Zero coding knowledge required

At this point, you've created your very own web page just by chatting with AI. But right now, it only lives on your computer.

In the next article, we'll publish this page on the internet so you can share the URL with friends. You'll finally be able to say "I built my own website."

※ AI is a powerful tool, but it can sometimes behave in unexpected ways. We are not responsible for any damages caused by AI-generated content or actions. Always back up important data and review AI outputs yourself before using them.

Back to articles