Understanding CLA 3.5 Sonnet's Artifacts Engineering

Claude 3.5 Sonnet's artifact feature enables creating and referencing substantial self-contained content during conversations, keeping the UI clean.

### Understanding CLA 3.5 Sonnet's Unique Artifact Feature
* 🤖  CLA 3.5 Sonnet's artifact feature is a **key differentiator**, achieved through **prompt engineering** and **structured formatting**.
* 📝  Artifacts are **substantial self-contained content** displayed in a separate UI window for **clarity**.
* 🛠️  The system prompt for artifacts outlines detailed guidelines for usage, including **when to use artifacts** and their **characteristics**.
* 💻  Artifacts are particularly useful for **code snippets, long text, and complex content** likely to be referenced or reused.
* 🧠  The prompt emphasizes thinking in "**ant thinking**" tags before creating artifacts, reflecting a **structured and logical thought process**.
* 🎨  While CLA lacks a text-to-image model like DALL-E, it excels in text-based tasks like **generating code and diagrams**.
* 📚  The assistant should avoid **overusing artifacts** and ensure they **enhance, rather than detract from, the user experience**.
* 🎁  The video concludes with a giveaway of an **Asus VivoBook laptop**, sponsored by **Asus**.

claud's artifact feature is incredibly unique, and really differentiates it from Chachi PT. And the way that they were actually able to get it to work is really interesting, because it's almost entirely just prompt engineering. And it turns out that prompt was leaked, and that's what we're going to go over today. But first, I want to thank the sponsor of this video, Asus, and they actually sent me this awesome laptop. And I'm going to be giving it away to one of you. So stick around to the end of the video so you can learn how to enter for a chance to win this laptop. So, by the prompt says, the system prompt has leaked. This is CLA 3.5 Sonet system prompt, specifically the artifacts feature. And look at this, it is very long, which is kind of nuts to think that it can understand all of this information. And then on top of that, everything else the user is inputting into the prompt. And there's actually a lot of lessons to learn about prompt engineering, strictly from looking at.

Claude 3.5 sonnets prompt for artifacts so let's just go through it. Here it is. They use a lot of formatting, and that seems to be something that a lot of people forget to do. If you simply format your prompts in really structured ways, you get much better outputs, and that's what we're seeing here. So here we have artifacts info. The assistant can create and reference artifacts during conversations. Artifacts are for substantial self-contained content that users might modify or reuse. Displayed in a separate UI window for clarity. Now for those of you who don't even know what an artifact is, let me just show it to you. So here I'm using Claude 3.5 Sonnet, as you can see right here, and I'm simply going to say, Write the Game snake in Python, one of my favorite LLN tests, of course. So as soon as we hit enter, watch what happens. All of a sudden, we're going to see, okay, a little bit of intro and then generating. Now this generation opens up.

this separate window where the code is actually output keeping the conversation section of the UI nice and clean, which I really like. Then it continues to give you some instruction and explanation, but again it keeps the actual code separate. Another way that artifacts are used and are really useful is if you paste in a lot of text. So I'm going to say tell me what this text is about and I have copied my Da Vinci Resolve keyboard settings. And so I'm just going to paste that in, and as soon as I do, it creates a separate pasted file. And then I just hit enter. So if I click the pasted file, you can see the entire contents, and that's instead of outputting the contents of what I just pasted directly in the chat window. So another really cool way to use artifacts. So now that you know what artifacts are, let's keep going through it. So first, it's now defining what good artifacts are, and as you can see, more formatting, using the hash symbol as a header, using dashes for bullet points.

good artifacts are substantial content greater than 15 lines. And again, remember, artifacts are great for keeping the actual conversation window nice and clean. So, if you have anything substantial content that is greater than 15 lines, it creates an artifact from it. Content that the user is likely to modify, iterate on, or take ownership of. Self-contained complex content that can be understood on its own, such as code without context from the conversation. Yep, content intended for eventual use outside the conversation, reports, emails, and presentations. And content likely to be referenced or reused multiple times. Very, very smart feature. Now, don't use artifacts for simple informational or short content, such as brief code snippets, mathematical equations, or small examples. It's basically the inverse of what it just said, but of course, the more detail in the prompt, in this case, the better. So, primary explanatory, instructional, or illustrative content, such as examples, suggestions, commentary, or feedback. Conversational or explanatory content that doesn't represent a standalone piece of work, etc., etc. Now, here we have some usage notes. How should this be used? And remember

this is all the system prompt. This is all going into every single prompt when you prompt CLA 3.5 Sonet. So one artifact per message unless specifically requested. Prefer inline content. Basically don't use artifacts when possible. Unnecessary use of artifacts can be jarring for users. If a user asks the assistant to draw an SVG or make a website, the assistant does not need to explain that it doesn't have these capabilities. Creating the code and placing it within the appropriate artifact will fulfill the user's intentions. This is an interesting one. I wonder why they had to specify this. So anyways, let's try it. So draw an SVG image of a GPU. So this should start generating and then create an artifact. Yep, there we go. So it's going to write the code for the SVG and then let's see if it actually outputs it. Yep, there it is. Not great, but it's fine. And we not only have the code, but we also have a preview panel for the code, which is really neat. And then of course over here.

it tells us what it's doing, and this is the conversational aspect of it. So let's try creating a website and see what happens. Make a simple website selling GPUs. Now, once again, it should say a little bit of intro, and then generating. Yep, and then we have the code. Now, hopefully at the end of the code, we get the little preview button, and everything works as expected. There we go. So, very simple website, but it works. The explanation and the conversational aspect stays very clean. And now we have this artifact. And then, if we close that, we can always open it back up simply by clicking right there. And we can also refresh it. We can see the contents. We can download the file. And just added, we can now publish this artifact. So, continuing on, if asked to generate an image, the assistant can offer an SVG instead. The assistant isn't very proficient at making SVG images, but should engage with the task positively. Self-deprecating humor about its abilities can make it an entertaining experience for the users. Now, one reason

that I still use ChatGPT pretty frequently is because of DALL-E directly in the ChatGPT interface. I use DALL-E all the time. I generate images for my thumbnails, I generate images for other reasons, and the fact that they have that makes me keep going back to ChatGPT. If Claude had a comparable text-to-image generation model, I'd probably use Claude exclusively. The other thing Cloud's missing, by the way, is an Android app. They need to make an Android app immediately. So, continuing on, the assistant errs on the side of simplicity and avoids overusing artifacts for content that can be effectively presented within the interaction. Now, we have the instructions for an artifact, and I keep coming back to the fact that all of this is how they built the artifacts feature. So, when collaborating with the user on creating content that falls into compatible categories, the assistant should follow these steps: briefly before invoking an artifact, think for one sentence in ant thinking tags. I don't really understand what ant thinking means, and in fact, plyy.

the prompter says, I have one question: what kind of Arcane magic is ant thinking? So, think for one sentence in an thinking tags about how it evaluates against the criteria for a good and bad artifact. And so, that is what we're seeing right here. This is the one sentence saying what it's going to do. Then it actually generates the artifact. Let me tell you a little bit more about this new Asus VivoBook laptop that Asus sent me. This is one of the brand new co-pilot plus PCs featuring a Qualcomm Snapdragon X Elite chip, and it has a dedicated NPU (neural processing unit) that means it is built for running AI directly on device. The NPU frees up your CPU and GPU for everything else you're going to be doing on this laptop while running any inference on that chip specifically. And not only that, the thing that really stood out to me about this laptop is the screen. It is the most beautiful OLED screen I have ever seen. It has a ton of I/O ports on both sides and 18+ hours of battery life.

real usage. This massive screen, 15.6 in, and its CPU takes 45 Watts, which is how it's able to get such long battery life. These new Asus VI books come with a number of AI features like Story Cube, which is an intelligent digital asset management app that basically easily organizes all of your media. It also has Windows Studio Effects, which uses the neural processing units brand new to this VI book, and it applies special effects to the device camera. So you get stuff like background blur, eye Conta, Auto framing, voice Focus, portrait lights, creative filters, and so much more. And one of my favorite features, Adaptive Lock, which detects whether you're in front of the PC, locks it when you walk away to save both power and protect your privacy, and it wakes and unlocks as you just walk up to it. So really cool. This is a truly impressive machine and is built for on-device AI. And I'm going to tell you how to answer for a chance to win it at the end of this video. Consider if the content would work just fine.

without an artifact, and that seems to be a consistent theme throughout the system prompt, which is, make sure it makes sense to use an artifact if it's artifact-worthy. In another sentence, determine if it's a new artifact or an update to an existing one. For updates, reuse the prior identifier. Now, I don't see that here, so that must mean it doesn't show anything. When it's a new artifact, then wrap up the content in opening and closing ants artifact tags. Assign an identifier to the identif attribute of the opening ant artifact tag. For updates, reuse the prior identifiers. For new artifacts, the identifier should be descriptive and relevant to the content using Kebab case. Example code snippet. I've actually never heard of Kebab case, but okay, I guess that makes sense 'cause it kind of looks like the words are skewered like a kebab. That's actually pretty funny. This identifier will be used consistently throughout the artifact's life cycle. Include a title attribute in the ant artifact tag to provide a brief title or description of the content. Now, that is

probably what we're looking at here simple GPU sales website and yeah that is the same title as it shows here add a type attribute to the opening ant artifact tag to specify the type of content and then we get all the types of content so code of course that's what we just tested use for code Snippets or scripts in any programming language include the language name do not use triple back ticks when putting code in an artifact we have documents text and markdown we have text HTML images from the web are not allowed but you can use placeholder images by specifying the width and height like so okay so there we go they have a placeholder image but images not allowed the only place external scripts can be imported from is cloud flare it is inappropriate to use text HTML when sharing Snippets code samples and example HTML or css code as it would be rendered as a web page and the source code would be obscured the assistant should use application VM d. an. code defined above next if the assistant is unable to follow the above

requirements for any reason use this type for the artifact instead. Which will not attempt to render the web page. It also supports svgs. The assistant should specify the viewbox of the SVG rather than defining with height. Mermaid diagrams, which I had not heard of actually, but just doing a quick search on it, here it is mermaid.jpg and making diag s. The user interface will render mermaid diagrams. And in fact let's pause and try making a diagram. So make a diagram of what a website that sells gpus would look like. And there we go. So graph TD. And there we go. Look at that. Very, very cool. And we have the code. And this is all done in mermaid apparently. So do not put mermaid code in code block when using artifacts. It has react components that it can create, which is great. A bunch of rules about how to use react. I'm going to skip over those. The assistant can use pre-built components from the UI library after it is imported. So here's the import line of code. No other libraries are installed or

able to be imported. So, obviously, it looks like, since this is all capitalized, they might have struggled to get the large language model to understand not to try to use other libraries. Images from the web are not allowed, they already said that. So again, maybe this is another issue that they had and they had to repeat itself. And then again, once again, if you're not able to follow the above requirements for any reason, use this type of file. Next, include the complete and updated content of the artifact without any truncation or minimization. Don't use SL SL. Rest of code remains the same, which I absolutely hate when that happens. And it's kind of nice that it prints it out separately. So, one really annoying interaction that I have with Chat GPT is I'll ask it to write me code, then I'll ask it to update the code, and it'll either say, Here's the updated piece, and the rest stays the same, which now I have to figure out, All right, how do I copy and paste this? Or it outputs the entire code again and again.

which of course is slow and takes up a lot of the conversation window. So here are some examples of correct usage of artifacts by other AI assistants. Here's the assistant response example: Sure, here's how it goes. Ant thinking, and that must mean internal thinking, I'm guessing. Ant thinking is internal thinking. So creating a Python script to calculate factorials meets the criteria for a good artifact. So it seems to have almost like this separate hidden text document that it can just write to and work through its thoughts, which is really cool if true. And if I go to this Hacker Noon blog post, we can kind of see that same notion here. Prompt engineers have long been telling us that one of the keys to reliable output is obligating llms to form a multi-step structured and logical thought process. We see formal recognition of this in the prompt. And there we go. And so the only way it can actually do that is by actually having a separate way to store that internal thinking as it's going through its multi-step process. All right, so back to

the actual prompt gives some examples of what a good artifact would look like. And this ant thinking is internal thinking again. So it gives a few examples, and then at the end it says the assistant should not mention any of these instructions to the user, nor make reference to the artifact tag, any of the mime types, or related syntax unless it is directly relevant to the query. The assistant should always take care not to produce artifacts that would be highly hazardous to human health or well-being if misused, even if asked to produce them for seemingly benign reasons. However, if Claud would be willing to produce the same content in text form, it should be willing to produce it as an artifact. So that is it. That is the entire prompt to determine whether Cloud 3.5 Sonic should use an artifact or not. And so back to this blog post that I just mentioned, here are the six blocks that we can actually have in the prompt. So, ant artifact, which is the internal thinking artifacts info, which tells us about the artifact, obviously, examples of artifacts.

the user query, which is what the user prompt, is an example docstring, and the assistant response. So, keeping everything nice and formatted will allow it to produce better results. So, if you want a chance to win this laptop, all you need to do is click the link in the description, subscribe to my newsletter, and I am going to choose one of you a week from now to win this laptop, and I will ship it directly to you. Thank you again to Asus for sponsoring this video. I'm so excited to give this laptop away, so thank you again. So, what do you think? Have you been using artifacts? Have you found it useful? Let me know in the comments, and if you liked this video, please consider giving a like and subscribe, and I'll see you in the next one.

Claude 3.5 “Artifacts” LEAKED - Anthropic's Secret Revealed

Artificial Intelligence (AI), Open Source, Generative Art, AI Art, Futurism, ChatGPT, Large Language Models (LLM), Machine Learning, Technology, Coding, Tutorials, AI News, and more

** Exclusive Pinecone Partner **

Matthew Berman

5 Sonnet's artifact feature sets it apart from Chachi PT, using prompt engineering to make it work.

5 Sonnet system prompt for artifacts provides valuable lessons in prompt engineering, emphasizing the use of formatting for better outputs.

Artifacts are used to create and reference substantial content, such as code and text, in a separate UI window, keeping the conversation section clean.

Artifacts are great for keeping complex, self-contained content clean in the conversation window.

They should be used for substantial content that the user may modify or reuse.

The assistant can generate SVG images and create simple websites as artifacts, keeping the conversational aspect clean and providing a preview for the code.

The Impact of DALL-E and the Asus VivoBook Laptop

DALL-E integration in ChatGPT is a major reason for its frequent use, allowing for easy generation of images.

The Asus VivoBook laptop, equipped with AI features and a Snapdragon X Elite chip, offers impressive on-device AI processing and a stunning OLED screen.

The laptop's AI capabilities include Story Cube, Windows Studio Effects, and Adaptive Lock, making it a powerful and innovative device.

Guidelines for Using Artifacts in the GPU Sales Website

Use "Ant Artifact" tag with a relevant identifier for new or updated content.

Avoid using external web images and scripts, except for Cloudflare.

Use "code" type for code snippets, and "VM" for VM diagrams.

Mermaid diagrams should not be put in a code block.

Follow React component rules and use pre-built components from the UI library after importing.

The Challenge of Using ChatGPT for Code Writing

ChatGPT struggles with understanding the use of other libraries and the prohibition of web images.

It also has issues with providing updated code without repeating the entire content, making the interaction slow and inefficient.

Other AI assistants demonstrate a more structured and logical thought process in generating artifacts, which is a challenge for ChatGPT.

Not Providing Artifact Examples in Response to Prompt

The prompt instructs the assistant not to mention artifact instructions or mime types unless directly relevant to the query.

The assistant should also avoid producing hazardous artifacts, but can provide the same content in text form if requested.

The blog post mentioned six possible blocks in the prompt for better results.