Last week, Anthropic released Claude 3.5 Sonnet, a groundbreaking new AI model that beats OpenAI's GPT-4o in most tests. Along with the new model, Claude also added a set of new features, including Projects and, my favorite AI innovation of the year, Artifacts.
Artifacts allow Claude to share content he generates in a dedicated window, such as code that can be run in a game, code that can be played with Artifacts, or even an outline of a short story that Claude has written.
I used them to create and test an election simulator to run a campaign, refining the code and playing the game with Claude, then I copied the entire codebase into my own code editor so I could play it whenever I wanted, or I could further enhance it myself.
What are artifacts?
An artifact can be anything, but Claude uses this feature when the artifact produces “significant, self-contained content, typically more than 15 lines,” that people are likely to want to edit, repeat, or use outside of a conversation.
Content includes Markdown or plain text documentation, code snippets, single-page websites, vector graphics, diagrams, and interactive components built using React.
The main advantage is that they don't exist in messages, so at any point in the conversation, if you want Claude to iterate over some piece of code or text, you just point to that specific artifact, even if it's from the beginning of the thread.
Creating a Prompt
We're also starting to preview Artifacts at https://t.co/uLbS2JMEK9. You can ask Claude to generate documentation, code, mermaid diagrams, vector graphics, and even a quick game. Artifacts will appear next to your chat, allowing you to see, iterate, and build on your creations in real time. pic.twitter.com/ow77Jh7ebOJune 20, 2024
For each of these prompts, I tried to make them simple enough to share, but detailed enough that Claude could understand the request and create something close to what I would generate.
It won't remember what you type, so if you want to create a more permanent version, especially a code example, you can ask Claude how to install and run it locally.
You may need to enable Artifacts first, to do so open the side menu, click “Feature Previews” at the bottom, and check Artifacts “On”.
1. Colorful mood boards
We all like to experiment with our moods from time to time, preferably in a positive way, but this prompt gives you the freedom to be as positive or negative as you like. This is a nice and simple prompt.
"Create an interactive mood board generator using React. Include features for shuffling color palettes, adding/removing mood words, and generating a grid of random shapes in the chosen colors. Make it visually appealing and easy to use."
You'll see a list of colors, a brief list of words you can add, and a box with lots of different colored shapes – the shapes and colors are designed to reflect the words.
Every prompt is a conversation starter, and you can even ask them to add in features like including additional colors or being able to create different shapes.
2. Simple games
Claude can create a variety of fun games, especially simple tower defense games, but this time he's created a square grid-based survival game.
"Create a simple, playable 2D survival game using React and SVG graphics. The game's goal is to achieve the highest score possible by surviving as long as you can on a 10x10 grid-based board. Players control a character that moves one cell at a time in four directions using arrow keys or on-screen buttons, aiming to avoid 3-5 AI-controlled opponents that move randomly every few seconds. Increase the player's score by collecting randomly spawning items and lasting longer. End the game when the player collides with an opponent, displaying the final score and offering a restart option. Use basic SVG shapes with different colors to represent the player (e.g., blue circle), opponents (e.g., red circles), and collectable items (e.g., gold squares). Include simple sound effects for movements, item collection, and game over. Gradually increase difficulty by speeding up AI movements and adding more opponents as the score increases. Implement this game logic in a single React component, focusing on creating an engaging gameplay loop with clear objectives and escalating challenges."
It's a very simple game, but surprisingly fun to play. You can reply to Claude and ask him to make any changes or updates you want, including changes to the entire game.
3. Virtual Bookshelf
When does a personal book collection become a library? Apparently it's about 5,000 books, and if you have a lot of books you'll want to keep track of them. Why not use Claude to build your own virtual bookshelf app?
"Create a React component for a virtual bookshelf using only React hooks and Tailwind CSS for styling. The component should allow users to add books with details including title, author, genre, read/unread status, and cover image URL. Implement features for organizing books by genre and read/unread status, as well as a search function to find books by title. Include a simple reordering functionality using React state management, allowing users to move books up or down on the shelf. The bookshelf should display books in a responsive grid layout, with each book shown as a card containing its details and cover image. Use placeholder images for books without cover URLs. Ensure the component includes an add book form, filter and search options, and a book display grid. The component should be self-contained and easily integrable into a larger React application. Don't use any external libraries other than React and the Lucide React icon library for up, down, and search icons. Prioritize functionality and clean code over complex styling."
It's a very simple system and you'll need to run it locally to be able to load the images properly (ask Claude how to do this), but it's a very useful library app for my books.
4. Family tree creation tools
Tracing your roots is big business, and while there are plenty of genealogy apps and websites to choose from, you can now ask Claude to help you create one with these prompts:
"Create an interactive Family Tree Builder using React. The application should allow users to construct a family tree with predefined relationships including Self, Spouse, Child, Parent, and Sibling. Each family member should be represented by a node displaying their name and relationship. The tree should visually link family members, with spouses appearing in the same node and children connected below their parents. Include a feature to add new relatives to any existing family member using a '+' button, which reveals a form to input the new member's name and select their relationship from a dropdown menu. The tree should dynamically update and rearrange itself based on the relationships added, such as inserting a new parent above the current member or adding siblings at the same level. Ensure the design is visually appealing with a tree-like structure, using appropriate colors and styling to represent the family hierarchy. The component should be responsive and able to handle a growing family tree, potentially with scrolling or zooming capabilities for larger families. Focus on creating an intuitive user interface that makes it easy for users to build and visualize complex family structures."You can ask Claude to add style elements, make the links between different family members more logical, or improve it to suit your specific needs. If for some reason it doesn't work at first (the AI model doesn't reproduce the exact same output), just ask Claude to fix it. Explain what's not working and he'll regenerate the artifact.
5. Make pixel art
Who doesn't love creating pixel art block by block? This prompt lets you do just that by turning your artifacts into simple artboards with an export button.
"Create a React-based pixel art creator component that allows users to draw, erase, and fill pixels on a customizable canvas. Include options for different canvas sizes (16x16, 32x32, 64x64) and a color palette with both preset and custom colors. Implement drawing functionality that supports both clicking individual pixels and click-and-drag for continuous drawing. Add undo and redo capabilities to allow users to correct mistakes easily. Include a fill tool that can color-connected areas of the same color. Provide an export feature that saves the artwork as a high-quality PNG file. Use shadcn/ui components for the user interface, including buttons, selects, and popovers. Utilize the lucide-react library for icons. Ensure the component is responsive and user-friendly, with a clear layout for tools and color selection. The color palette should have a way to add custom colors using a color picker. Make sure to handle mouse events properly for smooth drawing operations. Finally, implement the export functionality using a hidden canvas element to generate a larger, clearer image of the pixel art.."You can ask Claude to extend this to add custom shapes, export to different formats, add the option to import and edit images, etc. Each of these are starting points for a conversation with your chatbot. To use the export, you need to run the code locally.
More articles from Tom's Guide
Back to MacBook Air
