Introduction

By now, you’re probably pretty familiar with ChatGPT and its chatbot-style interface. But there’s a lot of innovation happening in user interfaces.

Take Claude’s Artifacts, for example. Unlike ChatGPT, Claude adds a persistent window on the right to show what you’re working on. If you’re creating a report, it displays an outline you can change in real-time just by asking.

This dual-pane setup makes managing and editing content easier without losing context, making AI tools more intuitive and accessible.

We’re going to try a couple of ways to make a landing page.

1. Create a landing page with Claude using Prompts

1. Go to Claude and register.

2. Click your initials in the lower left corner.

3. Select “Feature Preview” from the dropdown.

4. Toggle on the Artifacts option.

5. Ask it to create a landing page: “Create a landing page for a new cybersecurity product we’re launching. Use inline styling.”

6. Watch as it creates the landing page in real time.

   

7. Now, let’s edit it. Notice how this experience is very different from using ChatGPT—you’re interacting with a persistent artifact.

   1. “Generate a relevant header image and insert it at the top of the page. Add pricing information half way down the page, as well as two customer testimonials. The first testimonial should be about the excellent service, and the second about the ease of use”

      

8. Notice how the landing page changes on the right. And the cool thing is, this is actual code (well, partly - you’ll need to host it somewhere and get the forms working). But, as a test, let’s check it.

9. Click Copy Contents in the bottom right. This will grab the code to your clipboard.

   

10. Let’s check it works. Go to: https://html.onlineviewer.net/ and paste the code in the left hand side. You should see the code appear on the right hand side.

    

Example 2: Using an Example to Create a Landing Page