10 Insane Coding Tasks Claude 3.7 Sonnet Surprised Us With

Anthropic just dropped its “most intelligent model to date”! But why is that? As you know, ChatGPT gives you instant answers to a simple question and their o-series reasoning models provide better step-by-step solutions for complex problems. Well, Anthropic has just combined both of them in one. Claude 3.7 Sonnet is the first-ever hybrid AI model made open to the public.

The company has also said they had made major improvements in coding and front-end development. Well, they did a splendid job. Users have already started experimenting with the new model and shared some amazing examples that will surprise you. So, I decided to find the most interesting things people coded with the new Sonnet.

10 Coding Examples of Claude 3.7 Sonnet

Claude can build complete web apps with a superior design that other AI models might not. Here are some of the most mind-blowing things Claude 3.7 Sonnet was able to do:

1) Claude cloned Minecraft

Now, you can make your video games with just simple text prompts. The user shared that “It (Claude 3.7 Sonnet) created this Minecraft clone in one prompt, and made it instantly playable in artifacts“:

Artifacts in Claude are interactive, editable documents where you can generate and refine text as well as code, alongside your chat.

2) Just Better Design Always

While AI can do anything nowadays, it has a common problem when it comes to designing an application: if you don’t mention what look you want, it might give you a dull barebone design. Now, we all are not coders and even if we know coding, we might not know how to make our web apps look cool.

Worry no more, as Sonnet will give you a beautiful design by default.

3) Better Animation Also

OK, so the flat design is awesome but can it do the same with animation? Yes, it can:

Here is the prompt: “Create a single HTML file containing CSS and JavaScript to generate an animated weather card. The card should visually represent the following weather conditions with distinct animations: Wind: (e.g., moving clouds, swaying trees, or wind lines) Rain: (e.g., falling raindrops, puddles forming) Sun: (e.g., shining rays, bright background) Snow: (e.g., falling snowflakes, snow accumulating) Show all the weather card side by side The card should have a dark background. Provide all the HTML, CSS, and JavaScript code within this single file. The JavaScript should include a way to switch between the different weather conditions (e.g., a function or a set of buttons) to demonstrate the animations for each.“

Note that the user mentioned all the animations in plain simple English. Such special “effects” are not something a normal front-end engineer would pull out. Companies hire the best UI/UX designers for such stuff, but now the AI will do that without you ever asking for it.

4) Claude made a 3D City

AI models often struggle with front-end coding tasks when it comes to more visual things. However, Claude was able to make a complete 3D city with various elements as well as a simulation of day and night cycles:

Here is the Prompt shared by the user: “Create a 3D city scene using Three.js that features a bustling urban environment with skyscrapers, apartment buildings, and smaller shops lining the streets. Incorporate roads with moving cars, traffic lights, and pedestrian crossings to bring the city to life. Add pedestrians walking on sidewalks and crossing the streets to enhance realism. Include street elements such as lampposts, benches, and trees for a more immersive experience. Utilize dynamic lighting to simulate day and night cycles, and implement basic camera controls to allow users to explore the vibrant cityscape from different perspectives.“

You can try the prompt and see the result yourself too.

5) Solar System in 3D

Why stop with a city when you can create a full solar system? Watch this:

Claude was able to make it one-shot.

6) Glass-Like CSS

Claude 3.7 Sonnet combined with Claude Code can create magic. When it was asked to create a “glass-like” design system, it made it in only one try.

The best part is it didn’t just “hardcode” colors but used variables correctly.

7) A Snake Game for Apple Watch

Leading AI experts in the industry were also impressed with the new AI model. Ammaar Reshi, product and brand designer at Eleven Labs tried to create a snake game, but not just a simple one that we know of. He made the game of Apple Watch where the snake runs fast if the heartbeat of the user increases.

As you can understand, it would be not easy to build. But because of the “reasoning” capabilities, the model tried its best to correct the mistakes after 3-4 more prompts and we got this:

This shows how far AI models have come and with a little bit of coding knowledge, you can create anything in minutes.

8) A Simulator Game

A user called Zack on X just shared interesting examples where it asked Claude to create a 3D simulator for an “Anthropic Researcher Simulator”. Here is the result:

He also shared the prompt: “Create a detailed HTML/ThreeJS job simulator game that simulates the daily work of a researcher at Anthropic. The game should walk around the Anthropic office and work at my desk. Include tasks such as

* Searching for reward hacks

* Waiting for jobs to complete

* Getting coffee etc.

Make it hilarious to play.“.

9) 8-bit Fun

When it comes to animation, 8-bit is one of the most nostalgic styles that people love because of the video games they used to play as kids. So, I tried Claude 3.7 Sonnet also and made a simple 8-bit interactive environment with Marvel superheroes like Iron Man and Captain America. Let’s see what Claude did:

This was very impressive since I was able to make this in the background while I was writing this blog.

The game I made had many problems like the scoreboard not working properly, but I didn’t specifically mention that either.

10) Complete Website in 1 Prompt

Well, not a complete website, but if you want a full template for a NextJS SaaS with all the pages, Claude beats other models hands down.

Here is the prompt that user Mckay Wrigley gave: “Build a next.js SaaS marketing template” and he got 26 files of code in one shot:

He also compared the results with Sonnet 3.5 to show how the newer model created more pages as well as integrated better design. He was so impressed by the “creativity” side of the model, where it may surpass OpenAI’s o-series too.

Takeaways

So now you can also try the new model as Claude 3.7 Sonnet is also available for Free users on their platform, except for the extending thinking part. This new feat has put Claude in a much closer to OpenAI in the AI race.

Anthropic has also released Claude Code, their first agent-based programming tool to read code, edit files, run tests, commit, and push code to GitHub.