Try Claude Artifacts WIth These 5 Cool Prompts

It’s been weeks since Anthropic dropped Claude 3.5 Sonnet alongside the new Artifacts feature, and users have been sharing various awesome use cases of it. You can now build web apps, games, interactive charts, and more.

And the best part? You can do all of these for free.

In this article, we’ll explore five incredible capabilities of Claude Artifacts and explain why each one is so awesome.

What Are Claude Artifacts?

Claude Artifacts is a new feature introduced by Anthropic for their AI assistant Claude, designed to enhance user interaction and content creation.

It displays substantial, standalone content Claude generates in response to user requests. These are not just text responses, but interactive and editable outputs that can include code snippets, documents, and interactive React components.

For example, you can create a fully working calculator web app with this prompt:

Prompt: Create a simple calculator web application

Artifacts even give you the code for both the front end and the back end. This is super cool!

Now, let’s dive into the cooler capabilities.

1. Creating Games

One of the coolest features of Claude Artifacts is its ability to create games. Yes, you heard that right! With Claude Artifacts, you can design and develop engaging games without needing to be a programmer.

For this example, I am going to ask Claude to create a snake game:

Prompt: create a fully working snake game web app with scoring system

Surprisingly, it only took one attempt to build a fully working snake game with a scoring system. You can take this further by adding more complex features like stages, lives, etc.

However, in my observation, some games do not work the first time. You may need to redo the prompt or add more specific instructions on how the game should work.

2. Generating Diagrams

Another awesome feature of Artifacts is its ability to create diagrams and flowcharts. In the example below, I asked Claude to create a graphical illustration of Retrieval Augmented Generation (RAGs).

Prompt: Create a graphical overview of RAGs

The reference file is from Microsoft’s RAG in Azure AI Search.

Pretty cool, right? You can download these files and open them locally with another program, allowing for further customization and integration into presentations or reports.

3. Creating Websites

Building a website from scratch is an extremely complex and time-consuming job, especially if you’re not a developer. Claude Artifacts simplifies this process, allowing you to create functional websites with ease.

Prompt: Create a personal portfolio website with sections for an ‘About Me’ page, a ‘Projects’ gallery, a ‘Blog’ for sharing articles, and a ‘Contact’ form.

One thing that could take this even further is the support for Tailwind CSS and other front-end frameworks to improve the overall aesthetics of the website. Currently, Artifacts do not support the Tailwind library.

Nonetheless, this feature is incredibly powerful. With more time and customization, you could create anything from blogs to e-commerce stores.

4. Creating Presentation Decks

For professionals and educators, creating a compelling presentation deck can be challenging. Soon, we’ll be able to generate these presentation decks in a matter of seconds with tools like Claude Artifacts.

Prompt: Create a presentation deck for a startup pitch, including slides for the company overview, market analysis, product features, business model, and financial projections. The presentation should have multiple slides that user can switch to next and previous slides by clicking the arrow keys.

Aside from the ability to change slides by arrow keys, these graphs are interactive. You can also upload the reference data for these graphs and ask Claude to improve the design.

5. It Can Generate Sounds

Last but not least, Claude Artifacts has the capability to generate sounds. Here’s a sample prompt:

Prompt: create for me an 61 key interactive keyboard using webaudio with multiple instruments

Note that it won’t work if you ask Claude to generate music directly. You will have to instruct it to use third-party services like WebAudio to generate sounds.

For example, if you feed this prompt:

Generate a 30-second upbeat background music track for a promotional video, featuring a mix of electronic and acoustic instruments.

Claude will respond with something like this:

This opens up new possibilities for creative projects, from sound design to music production, without needing to rely on stock sounds or spending hours recording your own. It could also spark debates about licensing and copyright, but the potential for innovation is undeniable.

How to enable Artifacts?

You can enable this feature under your profile’s menu. Click on the “Feature Preview” and toggle the Artifacts setting as shown in the image below:

That’s about it. I hope you find this list helpful, and if you know other cool use cases or tricks, let me know in the comments.

Final Thoughts

So there you have it — these are just five examples of endless other possibilities you can achieve with Claude Artifacts. It feels like having a whole team of creative professionals at your fingertips. In my experience, Claude Artifacts is hands-down the most capable and powerful AI tool out there when it comes to generating interactive components.

What’s really exciting is that we’re just scratching the surface of what’s possible. Right now, we’re working with Claude 3.5 Sonnet, but a more advanced Claude 3.5 Opus model is already on the horizon.

Just imagine — if Claude Artifacts can already create games, generate diagrams, build websites, craft presentations, and compose music, what will it be capable of with an even more powerful model?

We could be looking at AI that can create fully-fledged applications, design complex 3D models, or even generate entire virtual worlds.

‍