CLA 3.5 Sonnet의 아티팩트 엔지니어링 이해

### CLA 3.5 Sonnet의 고유한 아티팩트 기능 이해
* 🤖 CLA 3.5 소네트의 아티팩트 기능은 **신속한 엔지니어링과 구조화된 포맷**을 통해 구현된 핵심 차별화 요소입니다.
* 📝 아티팩트는 명확성을 위해 **별도의 UI 창에 표시되는 실질적인 독립형 콘텐츠**입니다.
* 🛠 아티팩트에 대한 시스템 프롬프트에는 **아티팩트 사용 시기와 특성 등 자세한 사용 지침**이 설명되어 있습니다.
* 💻 아티팩트는 **코드 스니펫, 긴 텍스트, 참조하거나 재사용할 가능성이 있는 복잡한 콘텐츠**에 특히 유용합니다.
* 🧠 이 프롬프트는 구조적이고 논리적인 사고 과정을 반영하여 아티팩트를 만들기 전에 **'개미 사고' 태그에서 사고**할 것을 강조합니다.
* 🎨 CLA는 **DALL-E와 같은 텍스트-이미지 변환 모델**은 없지만 **코드 및 다이어그램 생성**과 같은 텍스트 기반 작업에는 탁월합니다.
* 📚 어시스턴트는 **아티팩트를 과도하게 사용하지 않아야** 하며, **사용자 경험을 저해하지 않고 향상**시킬 수 있어야 합니다.
* 🎁 동영상은 **Asus가 후원하는 Asus VivoBook 노트북을 증정**하는 것으로 마무리됩니다.

Claude 3.5 Sonnet의 아티팩트 기능을 사용하면 대화 중에 상당한 양의 독립된 콘텐츠를 만들고 참조할 수 있어 UI를 깔끔하게 유지할 수 있습니다.

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 소네트의 아티팩트와 엔지니어링의 독특한 특징

5 Sonnet의 아티팩트 기능은 프롬프트 엔지니어링을 사용하여 Chachi PT와 차별화됩니다.

5 소네트 시스템 아티팩트 프롬프트는 더 나은 결과물을 위한 서식 사용을 강조하는 프롬프트 엔지니어링에 대한 귀중한 교훈을 제공합니다.

아티팩트는 별도의 UI 창에서 코드 및 텍스트와 같은 실질적인 콘텐츠를 생성하고 참조하는 데 사용되며, 대화 섹션을 깔끔하게 유지합니다.

아티팩트는 대화 창에서 복잡하고 독립적인 콘텐츠를 깔끔하게 유지하는 데 유용합니다.

사용자가 수정하거나 재사용할 수 있는 중요한 콘텐츠에 사용해야 합니다.

어시스턴트는 SVG 이미지를 생성하고 간단한 웹사이트를 아티팩트로 만들어 대화 창을 깔끔하게 유지하고 코드 미리 보기를 제공할 수 있습니다.

DALL-E와 아수스 비보북 노트북의 영향력

ChatGPT의 DALL-E 통합은 이미지를 쉽게 생성할 수 있어 자주 사용되는 주요 이유입니다.

AI 기능과 스냅드래곤 X 엘리트 칩이 탑재된 아수스 비보북 노트북은 인상적인 온디바이스 AI 처리와 놀라운 OLED 화면을 제공합니다.

이 노트북의 AI 기능에는 스토리 큐브, Windows 스튜디오 효과 및 적응형 잠금 기능이 포함되어 있어 강력하고 혁신적인 디바이스입니다.

GPU 판매 웹사이트에서 아티팩트 사용 가이드라인

새 콘텐츠 또는 업데이트된 콘텐츠에는 관련 식별자와 함께 "Ant Artifact" 태그를 사용하세요.

Cloudflare를 제외한 외부 웹 이미지 및 스크립트를 사용하지 마세요.

코드 조각에는 "코드" 유형을, VM 다이어그램에는 "VM"을 사용하세요.

머메이드 다이어그램은 코드 블록에 넣어서는 안 됩니다.

React 컴포넌트 규칙을 따르고 임포트 후 UI 라이브러리에서 미리 빌드된 컴포넌트를 사용하세요.

코드 작성에 ChatGPT를 사용할 때의 어려움

ChatGPT는 다른 라이브러리 사용과 웹 이미지 금지에 대한 이해에 어려움을 겪고 있습니다.

또한 전체 콘텐츠를 반복하지 않고 업데이트된 코드를 제공하는 데 문제가 있어 상호 작용이 느리고 비효율적입니다.

다른 인공지능 비서는 아티팩트를 생성할 때 보다 체계적이고 논리적인 사고 과정을 보여주는데, 이는 ChatGPT가 해결해야 할 과제입니다.

프롬프트에 대한 응답으로 아티팩트 예제를 제공하지 않음

이 프롬프트는 어시스턴트에게 쿼리와 직접 관련이 없는 한 아티팩트 지침이나 마임 유형을 언급하지 않도록 지시합니다.

또한 어시스턴트는 위험한 아티팩트를 생성하지 않아야 하지만 요청이 있는 경우 동일한 콘텐츠를 텍스트 형식으로 제공할 수 있습니다.

블로그 게시물에서는 더 나은 결과를 위해 프롬프트에서 가능한 6가지 차단 방법을 언급했습니다.