{"id":7006,"date":"2025-02-25T09:19:29","date_gmt":"2025-02-25T09:19:29","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=7006"},"modified":"2025-02-25T09:19:30","modified_gmt":"2025-02-25T09:19:30","slug":"claude-3-7-sonnet-examples","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/claude-3-7-sonnet-examples\/","title":{"rendered":"10 Insane Coding Tasks Claude 3.7 Sonnet Surprised Us With"},"content":{"rendered":"\n<p>Anthropic just dropped its &#8220;most intelligent model to date&#8221;! 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.<\/p>\n\n\n\n<p>The company has also <a href=\"https:\/\/www.anthropic.com\/news\/claude-3-7-sonnet\" target=\"_blank\" rel=\"noopener\">sa<\/a><a href=\"https:\/\/www.anthropic.com\/news\/claude-3-7-sonnet\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">i<\/a><a href=\"https:\/\/www.anthropic.com\/news\/claude-3-7-sonnet\" target=\"_blank\" rel=\"noopener\">d<\/a> 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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"10-coding-examples-of-claude-3-7-sonnet\"><strong>10 Coding Examples of Claude 3.7 Sonnet<\/strong><\/h2>\n\n\n\n<p>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:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-a-minecraft-clone\"><strong>1) Claude cloned Minecraft<\/strong><\/h3>\n\n\n\n<p>Now, you can make your video games with just simple text prompts. The user shared that &#8220;<em>It (Claude 3.7 Sonnet) created this Minecraft clone in one prompt, and made it instantly playable in artifacts<\/em>&#8220;:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">Anthropic&#39;s just dropped Claude 3.7 Sonnet, the best coding AI model in the world.<br><br>I was an early tester, and it blew my mind.<br><br>It created this Minecraft clone in one prompt, and made it instantly playable in artifacts: <a href=\"https:\/\/t.co\/XObmBkHwxl\" target=\"_blank\">pic.twitter.com\/XObmBkHwxl<\/a><\/p>&mdash; Rowan Cheung (@rowancheung) <a href=\"https:\/\/twitter.com\/rowancheung\/status\/1894106441536946235?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p><a href=\"https:\/\/favtutor.com\/articles\/claude-3-5-sonnets-artifacts-feature\/\">Artifacts in Claude<\/a> are interactive, editable documents where you can generate and refine text as well as code, alongside your chat.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-just-better-design-always\"><strong>2) Just Better Design Always<\/strong><\/h3>\n\n\n\n<p>While AI can do anything nowadays, it has a common problem when it comes to designing an application: if you don&#8217;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.<\/p>\n\n\n\n<p>Worry no more, as Sonnet will give you a beautiful design by default.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1280\" height=\"706\" src=\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Front-End-Design-2.jpg\" alt=\"Claude 3.7 Sonnet Better Design\" class=\"wp-image-7010\" srcset=\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Front-End-Design-2.jpg 1280w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Front-End-Design-2-768x424.jpg 768w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Front-End-Design-2-750x414.jpg 750w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Front-End-Design-2-1140x629.jpg 1140w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\">(source: <a href=\"https:\/\/x.com\/miiura\/status\/1894179764996641211\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">X\/Yoshiki Miura<\/a>)<\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\"><strong>3) Better Animation Also<\/strong><\/h3>\n\n\n\n<p>OK, so the flat design is awesome but can it do the same with animation? Yes, it can:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">Claude Sonnet 3.7 Coding Test<br><br>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\u2026 <a href=\"https:\/\/t.co\/UQStFWb7nG\" target=\"_blank\">pic.twitter.com\/UQStFWb7nG<\/a><\/p>&mdash; Delusionals (@AGI_FromWalmart) <a href=\"https:\/\/twitter.com\/AGI_FromWalmart\/status\/1894144392145113508?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p>Here is the <a href=\"https:\/\/x.com\/AGI_FromWalmart\/status\/1894144392145113508\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">prompt<\/a>: &#8220;<em>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.<\/em>&#8220;<\/p>\n\n\n\n<p>Note that the user mentioned all the animations in plain simple English. Such special &#8220;effects&#8221; 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. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-claude-made-a-3-d-city\"><strong>4) Claude made a 3D City<\/strong><\/h3>\n\n\n\n<p>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:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">OMG Claude Sonnet 3.7 is insane. I got this stunning 3D city with one shot. Look at the shadows and the way the day transitions. This is just awesome. <a href=\"https:\/\/t.co\/ntDJ2i26nO\" target=\"_blank\">pic.twitter.com\/ntDJ2i26nO<\/a><\/p>&mdash; Ozgur Ozer (@ozgrozer) <a href=\"https:\/\/twitter.com\/ozgrozer\/status\/1894125497379926101?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p>Here is the <strong><a href=\"https:\/\/x.com\/ozgrozer\/status\/1894125497379926101\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Prompt<\/a><\/strong> shared by the user: &#8220;<em>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.<\/em>&#8220;<\/p>\n\n\n\n<p>You can try the prompt and see the result yourself too.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5) Solar System in 3D<\/strong><\/h3>\n\n\n\n<p>Why stop with a city when you can create a full solar system? Watch this:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">Sonnet 3.7 Thinking one-shotted this \ud83d\udc47 <a href=\"https:\/\/t.co\/8ZaQQbKkFI\" target=\"_blank\">pic.twitter.com\/8ZaQQbKkFI<\/a><\/p>&mdash; Rapha\u00ebl Dabadie\ud83c\uddeb\ud83c\uddf7 (@RaphaelDabadie) <a href=\"https:\/\/twitter.com\/RaphaelDabadie\/status\/1894121303507972534?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p>Claude was able to make it one-shot.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-glass-like-css\"><strong>6) Glass-Like CSS<\/strong><\/h3>\n\n\n\n<p>Claude 3.7 Sonnet combined with Claude Code can create magic. When it was asked to create a &#8220;glass-like&#8221; design system, it made it in only one try.  <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1505\" height=\"847\" src=\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Glass-Like-CSS.jpg\" alt=\"\" class=\"wp-image-7009\" srcset=\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Glass-Like-CSS.jpg 1505w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Glass-Like-CSS-768x432.jpg 768w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Glass-Like-CSS-750x422.jpg 750w, https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Claude-3.7-Sonnet-Glass-Like-CSS-1140x642.jpg 1140w\" sizes=\"(max-width: 1505px) 100vw, 1505px\" \/><figcaption class=\"wp-element-caption\">(source: <a href=\"https:\/\/x.com\/skirano\/status\/1894171599508537620\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">X\/Pietro Schirano<\/a>)<\/figcaption><\/figure>\n<\/div>\n\n\n<p>The best part is it didn\u2019t just &#8220;hardcode&#8221; colors but used variables correctly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-a-snake-game-for-apple-watch\"><strong>7) A Snake Game for Apple Watch<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>As you can understand, it would be not easy to build. But because of the &#8220;reasoning&#8221; capabilities, the model tried its best to correct the mistakes after <a href=\"https:\/\/claude.ai\/share\/ac45287c-3d56-4a7d-a438-bbe8c5e3ce06\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">3-4 more prompts<\/a> and we got this:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">In just 5 prompts, Claude Sonnet 3.7 makes a Snake game for the Apple Watch that is tied to your heart rate \ud83d\udc0d<br><br>The more stressed you get the faster the Snake moves, the calmer you are the easier it is.<br><br>Demo + full prompts with code below! <a href=\"https:\/\/t.co\/LGJQoYYchN\" target=\"_blank\">pic.twitter.com\/LGJQoYYchN<\/a><\/p>&mdash; Ammaar Reshi (@ammaar) <a href=\"https:\/\/twitter.com\/ammaar\/status\/1894131337583288636?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p>This shows how far AI models have come and with a little bit of coding knowledge, you can create anything in minutes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8) A Simulator Game<\/strong><\/h3>\n\n\n\n<p>A user called Zack on X just shared interesting examples where it asked Claude to create a 3D simulator for an &#8220;Anthropic Researcher Simulator&#8221;.  Here is the result:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">Claude 3.7 Sonnet created this 3D \u201cAnthropic Researcher Simulator\u201d in one shot \ud83e\udd2f<br><br>Prompt below <a href=\"https:\/\/t.co\/oEOGHK9re2\" target=\"_blank\">pic.twitter.com\/oEOGHK9re2<\/a><\/p>&mdash; zack (@wenquai) <a href=\"https:\/\/twitter.com\/wenquai\/status\/1894109880253833241?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p class=\"has-text-align-left\">He also <a href=\"https:\/\/x.com\/wenquai\/status\/1894109880253833241\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">shared<\/a> the prompt: &#8220;<em>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<\/em> <\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>* Searching for reward hacks <\/em><\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>* Waiting for jobs to complete <\/em><\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>* Getting coffee etc. <\/em><\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>Make it hilarious to play.<\/em>&#8220;.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9) 8-bit Fun<\/strong><\/h3>\n\n\n\n<p>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&#8217;s see what Claude did:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"720\" height=\"405\" src=\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2025\/02\/Sequence-01-2.gif\" alt=\"Iron Man vs Captain made with Claude 3.7 Sonnet\" class=\"wp-image-7018\"\/><\/figure>\n<\/div>\n\n\n<p>This was very impressive since I was able to make this in the background while I was writing this blog. <\/p>\n\n\n\n<p>The game I made had many problems like the scoreboard not working properly, but I didn&#8217;t specifically mention that either.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10) Complete Website in 1 Prompt<\/strong><\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Here is the <a href=\"https:\/\/x.com\/mckaywrigley\/status\/1894123739178270774\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">prompt<\/a> that user Mckay Wrigley gave: &#8220;Build a next.js SaaS marketing template&#8221; and he got 26 files of code in one shot:<\/p>\n\n\n\n<div align=\"center\"><blockquote class=\"twitter-tweet\" data-media-max-width=\"560\"><p lang=\"en\" dir=\"ltr\">Claude 3.7 Sonnet is the best model in the world for code.<br><br>It\u2019s like having a world-class dev with exceptional taste.<br><br>\u201cbuild a next.js SaaS marketing template\u201d<br><br>And boom &#8211; 26 files of beautiful code in one shot.<br><br>Absolutely unreal. <a href=\"https:\/\/t.co\/vmH0tiVY7v\" target=\"_blank\">pic.twitter.com\/vmH0tiVY7v<\/a><\/p>&mdash; Mckay Wrigley (@mckaywrigley) <a href=\"https:\/\/twitter.com\/mckaywrigley\/status\/1894123739178270774?ref_src=twsrc%5Etfw\" target=\"_blank\" rel=\"noopener\">February 24, 2025<\/a><\/blockquote> <script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/div>\n\n\n\n<p>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 &#8220;creativity&#8221; side of the model, where it may surpass OpenAI&#8217;s o-series too.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"takeaways\"><strong>Takeaways<\/strong><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anthropic just dropped its &#8220;most intelligent model to date&#8221;! 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 [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":7020,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard"},"jnews_primary_category":[],"footnotes":""},"categories":[57],"tags":[56,147,90,359],"class_list":["post-7006","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai","tag-ai","tag-anthropic","tag-claude","tag-claude-3-7-sonnet"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/7006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=7006"}],"version-history":[{"count":8,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/7006\/revisions"}],"predecessor-version":[{"id":7024,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/7006\/revisions\/7024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/7020"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=7006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=7006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=7006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}