After seeing a few posts on social media about the newest Claude AI Sonnet release, I knew I had to take a closer look. I did, and I am surprised at how good it is. In this post, I am sharing what I learned and how I used it to prototype a landing page (content and design).
What’s New with Claude 3.5 Sonnet?
According to Anthropic’s official announcement, Claude 3.5 Sonnet brings significant advancements:
Frontier Intelligence at 2x the Speed
- Outperforms competitor models and Claude 3 Opus on a wide range of evaluations
- Operates at twice the speed of Claude 3 Opus
- It is ideal for complex tasks like context-sensitive customer support and orchestrating multi-step workflows
Enhanced Reasoning and Knowledge
- Sets new industry benchmarks for graduate-level reasoning (GPQA) and undergraduate-level knowledge (MMLU)
- Shows marked improvement in grasping nuance, humor, and complex instructions
Advanced Coding Capabilities
- Excels in coding proficiency (HumanEval)
- Solved 64% of problems in an internal agentic coding evaluation, compared to 38% for Claude 3 Opus
- Capable of independently writing, editing, and executing code with sophisticated reasoning and troubleshooting abilities
State-of-the-Art Vision
- Surpasses Claude 3 Opus on standard vision benchmarks
- Excels in visual reasoning tasks, like interpreting charts and graphs
- Accurately transcribes text from imperfect images
Artifact Creation
- A new feature that allows users to generate and manage content like code snippets, text documents, or website designs in a dedicated window
- Creates a dynamic workspace for real-time editing and collaboration
The Artifacts feature
One standout feature of Claude AI models, including Sonnet, is their ability to work with artifacts.
This allows the AI to create and manage substantial, self-contained pieces of content such as code snippets, documents, or even simple graphics.
These artifacts can be easily referenced, modified, and reused throughout your project, making it an invaluable tool for creators of all trades.
Artifacts can be thought of as a layout feature separating input and output. They are like a versioning feature for the created content and make it much easier to handle long AI conversations in Claude.
I am a heavy user of ChatGPT and am just starting to take Claude AI more seriously with the latest release. One of the first things I tried was creating the content for a landing page and the actual page.
Let us take a look at how that worked.
Key Features for Creators
While Claude 3.5 Sonnet offers a wide array of features, in this blog post, we’ll focus primarily on four key areas:
- Content Ideation: We’ll explore how Sonnet can help generate content and landing pages.
- Rapid Prototyping: We’ll demonstrate how Sonnet can quickly produce design ideas, streamlining your creative process.
- Design and Code Creation: We’ll show how Sonnet can assist in creating designs and generating the necessary HTML, CSS, and JavaScript for your landing pages – and preview/publish it.
- Artifact Management: We’ll illustrate how Sonnet’s artifact feature can help manage and iterate on different components of your content and landing page designs.
Video Version of the Creator Demo – Creating a landing page with Claude AI
In this video demo, I am showing how I use Claude to create content, turn it into a landing page, and publish it on the web.
Creating content
For this example, we will use Claude to create content for a newsletter landing page. The first prompt is straightforward:
The result is created in seconds and shown on the right-hand side; it’s our first “artifact” in this chat conversation.
But what if we want to prototype a landing page with existing content?
Adding your existing content
To infuse existing copy into the generated example, I uploaded a screenshot of a newsletter landing page I like, which is our own.
Claude can transcribe text from images.
But Claude also accepts PDFs, data files, and more. So, in whatever format you have your existing content, if you can convert it to any of the file formats Claude accepts, you are good to go.
The prompt states to take the copy from the uploaded screenshot:
You can see that this works fine. Claude is capable of taking the copy from the screenshot and infusing it in the generated first version of the copy.
Take note of the control options at the bottom of the artifacts preview.
You can download, copy, and publish the created content. And jump between the artifacts.
The download creates a Markdown (.md) file. If you are unfamiliar with Markdown, check out Obsidian.
Switching between artifacts in Claude AI is a new and valuable feature that helps you stay sane during long conversations.
This screen recording shows the feature in action:
Creating the landing page
Now that we got a decent copy for our landing page, we followed up with a prompt in the same conversation asking for the creation of the landing page.
Claude creates the code, a simple layout and design for the landing page, and previews it on the right.
On the screenshot, you can see I can switch between code and preview view with a click.
Let us iterate on the design. I want to apply the design of Fresh van Root.
Again, I refer to the uploaded screenshot (a screenshot of the Fresh van Root homepage).
The first result is pretty good. It adds a similar-looking font to the landing page, recreates the style of the sign-up form used on the Fresh van Root homepage, adds the gradient, and provides more details. Note that Claude is doing all that without providing graphics or specific details. The prompt only says, “Extract from uploaded website screenshot.”
Here is a GIF comparing the two versions:
You can also examine the generated code and ask Claude AI to update specific segments.
Right now, Claude is not a code editor, so you cannot edit the landing page by changing the code. Instead, you can create follow-up prompts and ask Claude AI to update specific segments of the landing page.
As you can see in the screenshot, updating specific segments of your landing page works just fine.
Publishing the landing page
We are ready to send around a link to the landing page and collect feedback from my peers.
Claude has you covered. Clicking the publish button makes the selected artifact available on the web. This works for all generated artifacts, including text documents, web pages, browser games, images, and so on.
Once you publish, you get a link to send around. You can publish at any time.
Users opening the link will see a disclaimer stating that they are looking at user-generated content with Claude AI.
Expanding on this use case
This is an elementary example of a typical creator task: Creating copy and a landing page. But you can go much farther. Here are some ideas:
- Expand the landing page by adding navigation and more pages. Create not just one landing page but a complete website.
- Create a logo or animation in SVG to add to your pages
- Create dynamic web apps
- Create content for A/B tests based on your existing landing pages
- Ask for feedback on existing content, for example, SEO advice
and much more …
I have asked Claude to list all content types it can create for you. Here it is:
Text-based content:
- Plain text
- Formatted text (using Markdown or simple HTML)
- Articles, essays, and reports
- Scripts and screenplays
- Poetry and creative writing
- Outlines and bullet point lists
- FAQs and Q&A formats
Code and programming:
- Source code in various programming languages
- Pseudocode
- Algorithm descriptions
- Code explanations and documentation
Data formats:
- JSON
- YAML
- CSV (as text representation)
- XML
Simple diagrams and charts (as text representations):
- ASCII art
- Mermaid diagram syntax
- Simple tables using ASCII characters
Mathematical content:
- Equations and formulas (in LaTeX or plain text format)
- Mathematical explanations and proofs
Simple SVG:
- Basic vector graphics described in SVG format
Structured documents:
- Basic HTML
- Markdown documents
- LaTeX documents
Planning and organization:
- To-do lists
- Project plans
- Schedules and timelines (in text format)
One question you might have is if Claude AI can also create images, videos or audio from a prompt. It cannot, at this point:
I cannot create, edit, manipulate, or view actual image files, audio files, videos, or complex graphical content.
Viewing all your creations
A nice thing about the Claude AI chat interface is that you can browse all your creations in the “chat controls” section on the right.
All your created assets – documents, code, design- will appear here. This is neat for managing bigger projects.
Comparing Claude AI with ChatGPT
Managing your conversations and projects
From my point of view, Claude AI beats ChatGPT in managing your Chat conversations and creating assets and projects.
The features recently added make it easier to manage AI conversations across teams and projects.
The latest added feature, “projects,” is something I have been looking for in ChatGPT for some time.
Using it, you can add multiple chats to one project. In addition, you can add files under “Project knowledge”, and custom instructions (how Claude should behave and respond for all of the chat within this project).
Here is a screenshot of the project view in Claude AI:
Once you have created projects, you can add new conversations from the Claude AI homepage to it.
- Learn more about the Claude AI projects feature
Responsiveness
Another area where Claude AI beats ChatGPT is response time. This is not scientifically measured, just from my experience using ChatGPT to create content, content, design, and more. Claude AI feels more responsive.
Errors
In ChatGPT, I am pretty accustomed to getting errors, and it fails to create a response. While I can always click “Regenerate,” it is annoying. I haven’t run into this issue in Claude AI.
Custom GPTs
Claude AI doesn’t have a similar feature right now. For example, in ChatGPT, you can use the Netlify custom GPT to publicly publish websites or web apps on the web.
Conclusion
After playing around with Claude AI 3.5 Sonnet, I’ve got to say – it’s a AI prototyping powerhouse. This tool is a game-changer for creators, letting you go from brainstorming ideas to rapid prototyping and publishing a landing page (and much more), all in record time.
The new Artifacts feature is a standout for me. It’s like having an organized assistant who keeps all your prototype versions and creations in check. The Projects feature makes it possible to manage complex ideas from start to finish.
What is missing: text-to-image that ChatGPT has integrated as a custom GPT. But for prototyping content, code, and designing web pages, I see Claude in the lead.
What struck me is how responsive Claude is during the prototyping process and how it can update specific segments without changing previous responses.
If you’re a ChatGPT regular like I was, give Claude AI a spin for your next prototyping project. It might just change the way you work.
Generative AI is a game-changing technology for prototyping your ideas. We recently launched services to help teams and individuals apply generative AI in their day-to-day work. Learn more at PrototAIping.com.