Welcome to this tutorial on creating a landing page from a simple screenshot using Claude's Artificats.

One of the most powerful features of Claude AI to date is its ability to produce Claude Artifacts—structured outputs like detailed reports, summaries, and actionable recommendations. These artifacts transform raw data into valuable information, empowering businesses to make better decisions and increase productivity.

In this tutorial, you'll learn how to leverage Claude AI's capabilities to build a professional landing page from just a simple screenshot in under 10 minutes.

Let’s get started and unlock the potential of Claude AI for your business!

Recreating a landing page

First, you need to go to Claude and if you don't already have one create an account (free or not).

Now it's time to recreate the landing page of your choice. We'll take Dupple's.

‍

To pass it to Claude, just prompt your image and a text that fits your needs and tada! Some example of prompt you can use is:

Generate a website that looks like this, and include the code in your answer

Here is the result for our example. If you try this at home (which we highly recommend!), you might note that the result is not just a basic webpage, but includes buttons you can connect to your other Claude-generated pages.

You can also publish the page on the internet! Here's our page.

As you can see, it's far from perfect (no images... which is normal) but the structure is there and you can easily iterate on it now.

Customizing your website

Of course what Claude provides you may not be exactly what you want.

No problem: you can edit the result with very simple prompts.

For instance, let’s say I want a dark version of the landing page.

Prompt:

Make a dark version of the landing page

‍

Let's have some fun now!

More high-tech version:

More like "Bloomberg or the Financial Times" (okay that's maybe too much):

Export the website

To export and share the website, you can click on the “Chat controls” button (at the top right of your screen), and find any attached content from Artifacts.

The code is built by Claude to be deployed quickly, and autonomous, so most of the time the whole development work is already done!

‍