Summary
Ever wished you could create your own web apps and games without knowing how to code? Well, I’ve been using Claude, an AI chatbot, to create fully-functional web apps and games without writing a single line of code myself. Here are the best practices for doing it yourself!
What Is Claude and What Kind of Apps Can You Create With It?
Claudeis an AI chatbot similar to ChatGPT that’sextremely popular among coders and developers. Now, if you have used ChatGPT before, you probably know these AI models can not only write your emails and essays but can also write code. But if you’re not a programmer or someone who can read code, how can you know if thecode it writes is any good or not?
Well, seeing the massive popularity of Claude among developers, I decided to take it out for a spin and see if I can really create apps or games using the chatbot. For context, I am not a programmer, but I did study C and HTML back in college, which was eight years ago. For the most part, I can read and understand code, but lack thenecessary knowledge to write or edit code.
With this background, I approached Claude to create code that actually works—and it did an awesome job. It can generate working code in a matter of seconds. You can preview the code and see how it works right in the chat interface without needing to start acoding program. You can also share these apps that you create with your friends and family with the click of a button. And best of all, you can do all this using a free account.
To give you a taste of what’s possible, I have created the following apps:
If you like what you see, then here’s a brief overview of my best practices for creating games and apps using Claude.
How to Approach the Creation Process
The process starts simply by asking Claude to create an app or game. Let’s take the example of creating a snake game. When you request this, Claude generates the code and displays it in a new window called anartifact, which includes both the code and a preview where you can test the game. You can start with something as simple as:
Create a snake game for me.
And you should get a response like this:
While Claude often gets the basic functionality right on the first try, there’s usually room for improvement. In my case, the initial version had several limitations:
Now, going from this basic version to a polished final product, can be a frustrating endeavor that can make you feel like pulling out your hair. However, if you approach it from a more strategic angle, then you may make it work, almost every single time.
Step 1: Know What You Want
The key to successfully creating apps with AI is having a clear vision of what features you want. However, it’s often difficult to know all your requirements upfront. That’s why I recommend starting with a basic version and then making a list of improvements you’d like to see.
In my case, I first ask Claude to generate the Snake game without much information to see what it does. Next I note down the shortcomings. Finally, I draft a list of features that I want in the finalperfectproduct. For reference, here’s my desired list of features:
The key is to be specific about each feature. Instead of just writing “better graphics,” specify exactly what visual elements you want to improve. This makes it easier to communicate your needs to the AI.
Step 2: Add One Feature at a Time
Once you have a list of features you want to add to the final product, don’t just dump all of them at once into Claude. That’ll just overwhelm the chatbot and cause more issues. Instead, take the approach of adding one feature at a time. Once you see Claude has nailed that one feature, you can move on to the next one.
Step 3: Copy the Code and Continue on New Chats
One limitation you’ll encounter is Claude’s message cap, which is based on the total length of the conversation rather than the number of messages. When working with code, you’ll likely hit this limit after just a few exchanges.
Thankfully, the solution is simple—you just need to copy the code of a working artifact, paste that into a new chat window, and start from there. To do this, simply hit the copy button on the artifact. This way, the total length of the conversation stays as compact as possible, increasing your total message cap.
Other than this, sometimes you’ll notice that Claude isn’t able to fix an issue or properly implement a feature, no matter how many times you go back-and-forth with it. Here, too, copying the code and taking it to a new conversation has a tendency to fix the issue. Just copy the code and ask Claude what it thinks is causing the undesired behavior and then ask it to fix it. Works like a charm!
How to Share Your Creations
Once you’ve perfected your app or game, sharing it is straightforward. Just click the “Publish” button on the artifact to generate a URL that anyone can access—no Claude account required. Of course, if the person you send it to does have a Claude account, they can use the “Remix Artifact” feature to build on top of that app or game you made.
There’s a Premium Alternative With Better Results
Since we were using Claude’s free version, you might be thinking I’m about to recommend Claude’s paid version as the superior alternative. Claude Pro does offer you a higher message limit, allowing for longer conversations, which can help you build more complex applications with more lines of code. However, if you’re looking for faster results with less back-and-forth, ChatGPT Pro with the o1 model might be worth considering.
The o1 model combined with theCanvasfeature and Preview functionality gives you the same benefits as Claude to use and share the web apps and games you build with it. However, o1 is areasoning model, and it can better understand what you want with fewer iterations.
The ability to create functional web applications and games without coding knowledge is a game-changer for creative individuals. Whether you’re a teacher wanting to create educational games, a content creator looking to add interactive elements to your website, or just someone with a cool app idea, these AI tools make it possible to bring your vision to life.
