I know there is a lot of hype around AI, but when you look past the hype and just focus on real-life practical use cases, AI is pretty cool! As usual, I am excited and embracing all the change. Being in the industry for over 15 years, I have seen many hype circles come and go and have always enjoyed riding the wave.
Naturally, I have been test-driving Claude Sonnet for a while, and overall I must say the model is really impressive, especially for coding tasks and even creative tasks like web design.
Let’s see why I think Sonnet is one of the best, if not the best of the bigger models out in the wild right now.
Claude Sonnet is good at long-context prompts
With Sonnet, you get a decent 200k context window. This basically means you do not need to fine-tune the model. In the case of HTML templates, if you ask the model to generate you one, it’s going to be a hit-and-miss, sometimes you’ll get great-looking templates, and other times just plain junk!
To get around this you can use RAG, but for this kind of task when generating HTML templates, a full RAG solution might be overkill, instead you can just “shove” HTML as examples in your prompt similar to the below example:
<example>
...
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
...
</example>
Shoving HTML or just about any example like this will help you tame the model and get it to scope its responses to just your context.
Sonnet also supports prompt caching, therefore even though you sending this large chunk of HTML every time you prompt the model, the model does not always need to parse and analyze this every time, instead,d it’ll automatically cache this data which makes the whole process much more efficient and save you money at the same time since cached tokens are generally cheaper than regular tokens.
Furthermore, if you use their batch API instead of the real-time API, you save 50%. That’s remarkably cheap for a powerhouse model like Sonnet.
Claude Sonnet is really good at backend code
I am a bit of an old-schooler and don’t use too many AI coding assistants, I feel they generate bad code, and I love fine-grade control of the code I write.
Nonetheless, in today’s fast-paced dev world, we have customers to service. Claude Sonnet is proving to be that excellent side-kick junior developer I’ve always needed, not that I am advocating for replacing developers with AI! No Never!
Instead, AI makes developers more productive so that we can actually focus on the hardcore stuff, the engineering and system design stuff. This mundane stuff that took up time before, like fixing some CSS issue, frankly for a backend dev is a waste of time.
Even in the engineering process, there are often times you would “float” (for lack of a better word) between concepts, which means now you have to scaffold 2-3 variations which could take a couple of hours or days.
With Sonnet, you can just prompt the model to scaffold pseudo-code versions and then iterate from there. It’s boilerplates on steroids essentially!
Previously with ChatGPT, you could get the model to do something similar, however, often it was a waste of time.
The code generated was either heavily hallucinated or outdated, you just couldn’t get a consistent generation from those models and wasted too much time fine-tuning the prompt.
Sonnet seems to have a decent level of accuracy, it’s not always perfect but often it gets you there much closer than any of the OpenAI models ever could.
Claude Sonnet is not bad at web design
I can do UI development just fine, I know my way around pure CSS, Bootstrap, and even Tailwind, yet building frontends is not really my cup of tea, I am backend’er and prefer it that way.
Still, from time to time I have no choice but to throw together a simple landing page or tweak some components here and there.
Previously, well I had two options write the code myself or just buy a template. Now with Sonnet, and a really well-structured prompt, I can get at least 80% there in just a few minutes, and then fine-tune the design manually as and where needed.
A complete landing page from a simple prompt
It’s amazing how much time you could save with Sonnet; I have done a few experiments with generating layouts and UI components and for the most part, Sonnet does a pretty good job.
When the generated code isn’t up to standard, you can step-by-step ask Sonnet to tweak certain aspects, similar to sitting with a web designer and giving them feedback.
Here’s an example of a full layout designed 100% by Sonnet:
Not bad for a business profile type website right? Sure there are some rough edges, and some styling fine-tuning that one can do to make it a little bit more “pretty” but hey this was generated in less than a minute, and it’ll take me 10 minutes just to go in and tweak versus waiting for a designer or scrolling through marketplaces looking for a paid template.
The prompt (I totally made up the plumbing company name, although Sonnet seems to have stolen real content from a real plumbing website, https://danvilleplumbers.com/ in this case, not sponsored but please support them if you are in the area 😊):
Design me a modern looking landing page to
market my plumbing services. You must have an
About me section, my services section,
contact me section including a nice big looking footter.
My colors are: rgb(220, 38, 38), black and white.
Use a parallax effect and images from unsplash.com.
Generate the content for each section as well.
My company name is Danville Plumbers.
Make sure you have a lot of white space and use pictures
that are relevant to plumbing.
Only return HTML, and no commentary or extra text
so that it's easy for me to copy and paste.
And the generated HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Danville Plumbers - Professional Plumbing Services</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
html {
scroll-behavior: smooth;
}
.navbar {
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
z-index: 1000;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: flex-end;
margin-right: 50px;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
transition: color 0.3s;
}
.navbar a:hover {
color: rgb(220, 38, 38);
}
.hero {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-4.0.3');
background-attachment: fixed;
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}
.hero-content h1 {
font-size: 4em;
margin-bottom: 20px;
}
.hero-content p {
font-size: 1.5em;
margin-bottom: 30px;
}
.cta-button {
padding: 15px 30px;
background-color: rgb(220, 38, 38);
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.cta-button:hover {
background-color: rgb(185, 28, 28);
}
section {
padding: 100px 20%;
}
.about {
background-color: white;
}
.services {
background-color: #f5f5f5;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.service-card {
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.service-card:hover {
transform: translateY(-10px);
}
.contact {
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('https://images.unsplash.com/photo-1599567832218-907816219e67?ixlib=rb-4.0.3');
background-attachment: fixed;
background-size: cover;
color: white;
}
.contact-form {
display: grid;
gap: 20px;
max-width: 600px;
margin: 0 auto;
}
input, textarea {
padding: 15px;
border: none;
border-radius: 5px;
}
footer {
background-color: black;
color: white;
padding: 50px 20%;
text-align: center;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
h2 {
margin-bottom: 30px;
font-size: 2.5em;
}
p {
line-height: 1.6;
margin-bottom: 20px;
}
</style>
</head>
<body>
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="hero" id="home">
<div class="hero-content">
<h1>Danville Plumbers</h1>
<p>Your Trusted Plumbing Experts Since 1995</p>
<a href="#contact" class="cta-button">Get Free Quote</a>
</div>
</div>
<section class="about" id="about">
<h2>About Us</h2>
<p>With over 25 years of experience, Danville Plumbers has been the go-to plumbing service provider in the Danville area. We pride ourselves on delivering exceptional quality work with unmatched customer service.</p>
<p>Our team of licensed professionals is available 24/7 for emergency services, ensuring that your plumbing needs are met whenever they arise. We believe in transparent pricing, honest service, and building long-lasting relationships with our clients.</p>
</section>
<section class="services" id="services">
<h2>Our Services</h2>
<div class="service-grid">
<div class="service-card">
<h3>Emergency Repairs</h3>
<p>24/7 emergency plumbing services for any urgent situations.</p>
</div>
<div class="service-card">
<h3>Installation</h3>
<p>Professional installation of fixtures, pipes, and plumbing systems.</p>
</div>
<div class="service-card">
<h3>Maintenance</h3>
<p>Regular maintenance and inspection services to prevent future issues.</p>
</div>
</div>
</section>
<section class="contact" id="contact">
<h2>Contact Us</h2>
<form class="contact-form">
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<input type="tel" placeholder="Your Phone">
<textarea rows="5" placeholder="Your Message" required></textarea>
<button type="submit" class="cta-button">Send Message</button>
</form>
</section>
<footer>
<div class="footer-content">
<div>
<h3>Danville Plumbers</h3>
<p>123 Main Street<br>Somwhere, Someville</p>
</div>
<div>
<h3>Hours</h3>
<p>Monday-Friday: 8am-6pm<br>
Emergency Service: 24/7</p>
</div>
<div>
<h3>Contact</h3>
<p>Phone: (965) 777-0123<br>
Email: info@xyz.com</p>
</div>
</div>
<p>© 2023 Danville Plumbers. All rights reserved.</p>
</footer>
</body>
</html>
Not just static websites
With clever prompting, you can even get Sonnet to code in any backend language, including writing the email code for sending forms or building a gallery.
I am not a Figma person (nor a frontend person for that matter), I do not usually draw layouts and concepts first unless it’s a large project, thus usually, I’ll just take an hour or two to “throw together” a POC and then fiddle with that until I get something closer to the finished concept.
Now with Sonnet, within a few minutes, I can scaffold designs, get variations, and play around with different concepts in a fraction of the time. It’s almost like the Ruby-on-Rails scaffold era, where you could spin up a whole blog in minutes.
Don’t worry though; AI is not going to replace designers or developers, it cannot really think or create at the same level as we do, but it can give creatives (or technical) people a powerful paintbrush to scaffold ideas really quickly.
ChatGPT was okayish at one point, but the quality of the code seemed to drop over time and half the time that code wouldn’t work, Sonnet on the other is far better at generating good quality code that actually works!
Claude Sonnet’s not perfect: Anthropic has scaling issues
I have always noticed weird scaling issues with Anthropic (model overloaded) and even times when the API returned blank results. I find OpenAI is much more stable and GPT4o-mini is much cheaper as well.
Thus, for more RAG-type applications or high-traffic use cases, I tend to use OpenAI models. For creative and as a coding assistant, Sonnet stability isn’t much of an issue.
Another annoying thing with Anthropic is that you have to follow the conversation sequence: AI-HUMAN-AI-HUMAN, this is not natural in the real world, especially when dealing with Voice AI.
OpenAI just seems more idiot proof 😂.
Hopefully Anthropic can work on the developer experience, I feel that’s really holding them back because their models are really great for creative tasks, usually better than OpenAI models.
