Hey there,

We’ve recently explored several vibe coding tools, from Lovable to Build Mode to custom GPTs and Gems. Today I wanted to look at a tool that combines Build Mode and Gems together. Enter Claude Artifacts. This feature allows you to describe a website or interactive experience and sit back while Claude creates it.

What Are Claude Artifacts? 

Claude Artifacts are interactive experiences created directly within Claude that allow you to turn your ideas into easily customizable and shareable apps – from live website previews to dynamic document templates.

Here’s a look at what you can create with Artifacts:

• Code Snippets: You can create small apps or generate individual features for a larger project. 

• Small Websites: Artifacts are great for prototyping websites or customizing HTML files. Especially because you can see the results of the code before making changes to your project.

• Charts and Diagrams: Creating visuals for presentations and projects is simple and incredibly useful.  

• Documents and Templates: Whether you need to format a one-off paper or need a template for your weekly newsletter, Claude can create a template that is fully custom for you.

Initially I thought that Artifacts were just Claude’s version of custom GPTs and Gems, however, this isn’t true. Claude Artifacts are actually closer to vibe coding tools like Bolt, Lovable, or AI Studio’s Build Mode.

How to Create Claude Artifacts: A Quick-Start Guide 

Now that we have a better understanding of what they are, let’s actually create an Artifact. In this example, I’ll create a tokenizer that helps people understand what tokens are and how they work. 

• Step 1: Go to Claude and click on the shapes in the upper left corner. This will take you to the Artifacts page. From here, select “Create Artifact”.

• Step 2: Now you just need to describe your idea. As with any AI tool, prompting is extremely important. You’ll want to be as detailed and thorough as possible to ensure the best results. I’ve often had Claude ask me several follow-up questions to help iron out the details of what I’m looking for. 

• Step 3: Now Claude will generate your Artifact. The description of your creation will be on the left side of the screen while the interactive artifact will be on the right. If you’re happy with your creation, you can share it by clicking the “Publish” button. 

• Step 4: Now that you have your first artifact, you can start making iterative improvements. There are two ways to do this. You can either describe what you want in the chat on the left or you can change to the code preview and select individual lines of code. By selecting code, you can directly tell the model what lines / features to change while the chat experience is better for more general changes. 

If you’ve never used Artifacts, I’d recommend checking them out. Anthropic has an Artifacts marketplace where you can explore their creations and better understand what they are truly capable of. 

Are Claude Artifacts Worth Using? The Pros and Cons 

With so many other tools out there, are Artifacts worth using? Let’s look at the pros and cons that I’ve noticed. 

Pros: 

• Fast Prototyping: Significantly cuts the time it takes to bring an idea to life. 

• Lowers the Barrier of Entry: One of my favorite upsides of AI is that it gives more people the opportunity to create things that they otherwise wouldn’t be able to. Artifacts allow people with no coding / development background to bring their ideas to life. 

• Templates / Sharing: Unlike other features (like Gems), your Claude creations are easily shared and they’ve taken the time to create dozens of unique templates to start with. 

• Instant Visual Feedback: You can ask for a change in the chat – like “make the button blue” and watch it update in the Artifact window in real-time. It completely changes the speed of UI/UX iteration.

Cons: 

• Not a Full IDE: Unlike other tools (Google’s Build Mode), Artifacts don’t allow users to manually write code. While you can highlight and ask for changes, you aren’t able to write code yourself. This was disappointing. 

• No External API Connections: While you are able to create Artifacts that use Claude features, you can’t connect to other APIs. While some people will care about this more than others, it's still unfortunate.  

My Thoughts

So what's the final verdict? Claude Artifacts are a genuinely powerful and unique feature that have already found a permanent place in my AI workflow. They can be very helpful and powerful in certain instances and have found a permanent place in my AI workflow. Personally I use Artifacts to create small interactive demos to showcase complex ideas / topics. The Tokenizer artifact I created above is a perfect example of what types of use cases I find Claude perfect for. My recommendation to you would be to experiment with Artifacts and determine if it fits or should replace any tools in your tech stack.