什么是Artifacts？
在数字化时代，AI对话工具已经成为我们日常工作的得力助手。然而，这些工具通常局限于输出纯文本内容，如Markdown和代码，使得用户在验证AI生成内容的实际效果时，不得不在多个软件和平台间频繁切换，这一过程不仅耗时耗力，还极大地降低了生产力和工作流畅性。
如今，Claude 3.5 Sonnet的Artifacts功能以其创新的技术突破，为这一难题提供了解决方案。该功能不仅可以生成代码，还能即时将代码转化为实际的网页设计、SVG图形和Mermaid图表。用户可在同一界面中实时预览代码内容，反复修改调整并分享，极大地提升了开发体验和工作效率。
Artifacts功能成标配，AI产品哪家强？
Artifacts完美切中开发人员及非专业用户的关键需求，重新定义了AI领域的标杆功能。自从Claude 3.5 Sonnet推出Artifacts功能后，其影响力迅速扩散，同类产品开始跟进，尽管某些产品在支持格式上还相对有限，比如只能运行HTML代码。
而302.AI在支持Artifacts功能方面表现出色：
- 支持多种编程语言和代码类型，100%还原了Claude的版本；
- 支持所有大模型使用Artifacts功能，且预览中的SVG或HTML可保存为PNG；
- 具备实时修改功能，可直接改动代码，例如替换图片链接；
- 支持用户保存及共享，将生成的Artifacts保存为链接分享给他人，方便后续使用或团队合作。
只需两步，即可在302.AI中快速开启Artifacts功能。
1.注册账号后，进入302.AI官网，点击左侧工具栏，根据需求选择机器人类型、使用的AI模型及版本，创建机器人
2.在聊天界面，点击右侧“设置”键，开启artifacts功能
Artifacts应用实例：制作网页游戏
下面将通过创建一个简单的网页游戏，具体演示如何使用Artifacts功能，在对话中生成代码、实时预览效果，并进行快速迭代，从而实现更加流畅的开发流程。
1.设计角色形象——实时预览SVG图片
用户可以使用SVG代码生成游戏角色的图片，并在预览窗口中查看和调整角色的外观。
2.调整角色外观——实时修改图片
用户可以在对话中输入新的代码或修改现有代码，预览窗口会实时显示修改后的效果。
点击预览页左上角“代码”，查看并编辑代码，将小狗眼睛颜色从黑色更改为紫色。
也可以通过对话，改变小狗形象。比如，让小狗的表情从微笑变为开口笑。
3.保存角色形象——下载预览图片
将预览窗口中的SVG或HTML保存为PNG格式，选择右上角下载键，下载保存预览图片。
下载保存的图片：
4.设计网页游戏——实时预览HTML页面
使用设计出的小狗角色形象，设计网页游戏。
在生成多个artifacts的情况下，选择想预览的代码，点击右下角“预览”，切换预览，即可查看。
比如，在生成游戏的情况下，想查看小狗图片，只需点击相应代码右下方的“预览”，预览页内容从游戏跳转回小狗角色的内容。
5.分享协作
用户可以将生成的Artifacts保存到账户中，并通过分享功能与团队成员进行协作，共同完善游戏。
Artifacts支持哪些内容格式？
除了Markdown或纯文本、代码之外，Artifacts还支持以下几种内容格式：
1.HTML
Artifacts支持HTML预览，用户可生成单文件HTML页面并在界面中直接查看设计。开发人员能够迅速构建静态网页，并通过预览窗口实时调整HTML代码，确保效果符合预期。
这一过程不仅让构建和组合项目变得更加清晰，还使得学习和理解编码变得更加直观。用户可以即时看到代码更改对网页设计的影响，从而更深入地掌握网页构建的技巧。
2.React组件
Artifacts支持开发人员生成和预览React组件，包括利用Hooks和Tailwind CSS进行样式化。他们可以在对话中直接创建交互式组件，实时查看效果，并调整组件的行为和外观，以便在用户界面中完美呈现。
3.SVG绘图
Artifacts支持SVG图形的生成与预览，方便用户创建可缩放的矢量图像。用户在对话中输入SVG代码后，可以直接在预览窗口查看效果并进行调整，提高了SVG编辑和优化的效率。
4.Mermaid
Artifacts还支持使用Mermaid语法创建图表，如流程图、序列图、类图和状态图等。用户可以在对话中输入Mermaid代码，并实时预览图表效果，进行调整和优化。
总结
Artifacts 标志着 AI 聊天平台和助手发展已步入新阶段，它不仅提升了开发体验，还拓宽了AI助手的应用范围，使其成为AI领域中的一个标杆功能。现在就来302.AI体验Artifacts，释放你的创意潜能，享受一站式的AI服务。
👉立即注册免费试用302.AI，开启你的AI之旅！👈
为什么选择302.AI？
● 灵活付费：无需月费，按需付费，成本可控
● 丰富功能：从文字、图片到视频，应有尽有，满足多种场景需求
● 开源生态：支持开发者深度定制，打造专属AI应用
● 易用性：界面友好，操作简单，快速上手
Comments(39)
There is noticeably a bundle to know about this. I assume you made certain nice points in features also.
[…] 在推出之始，这段prompt是专门搭配Claude 3.5 Sonnet模型使用的，除了因为Claude 3.5 Sonnet模型具备出色的文本生成能力外，更重要的是Claude 3.5 Sonnet模型的artifacts功能，这一功能可以出色地处理编程相关的指令，并实时显示生成好的SVG代码并合成图片，而比如GPT-4o、国产Step-2-16k等模型在这方面存在不足。 […]
[…] 提到Claude，或许大多数用户都会联想到Claude Artifacts，Anthropic在官网宣布推出Claude 3.5 Sonnet的同时，也宣布将在 Claude.ai上推出Artifacts功能，这一功能在用户请求Claude生成代码、文档或网站设计时，能够将这些生成的成果与对话一同直观地展现在一个专门的窗口里。这样，用户不仅可以实时查看和修改这些内容，还能轻松地将AI的创意融合到自己的工作项目中，极大地提升了工作效率和创作体验。 […]
I’d have to verify with you here. Which is not one thing I normally do! I take pleasure in studying a publish that can make individuals think. Additionally, thanks for permitting me to remark!
Nice post. I learn one thing more challenging on different blogs everyday. It’s going to always be stimulating to read content material from other writers and apply somewhat one thing from their store. I’d choose to use some with the content on my blog whether you don’t mind. Natually I’ll provide you with a hyperlink in your internet blog. Thanks for sharing.
I enjoy your writing style really loving this website .
Hey very nice website!! Man .. Excellent .. Amazing .. I will bookmark your blog and take the feeds also…I am happy to find a lot of useful info here in the post, we need develop more strategies in this regard, thanks for sharing. . . . . .
F*ckin’ remarkable issues here. I’m very happy to see your article. Thanks a lot and i’m having a look forward to touch you. Will you please drop me a e-mail?
certainly like your web-site however you have to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I to find it very bothersome to inform the truth nevertheless I¦ll definitely come again again.
Very instructive and excellent body structure of articles, now that’s user pleasant (:.
What i do not understood is if truth be told how you’re no longer really a lot more well-appreciated than you may be right now. You’re very intelligent. You understand therefore considerably in the case of this subject, made me individually imagine it from numerous numerous angles. Its like men and women aren’t involved until it¦s something to do with Woman gaga! Your personal stuffs great. All the time handle it up!
I cling on to listening to the news bulletin lecture about getting free online grant applications so I have been looking around for the top site to get one. Could you tell me please, where could i acquire some?
Great amazing things here. I?¦m very happy to see your article. Thanks a lot and i’m taking a look ahead to contact you. Will you please drop me a mail?
An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!
Nice blog here! Also your web site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as quickly as yours lol
But a smiling visitor here to share the love (:, btw outstanding design. “Individuals may form communities, but it is institutions alone that can create a nation.” by Benjamin Disraeli.
You are my intake, I possess few web logs and rarely run out from to post : (.
I haven’t checked in here for a while since I thought it was getting boring, but the last few posts are good quality so I guess I will add you back to my everyday bloglist. You deserve it my friend :)
I just like the helpful info you supply on your articles. I will bookmark your blog and take a look at once more here frequently. I’m slightly certain I will be informed lots of new stuff proper right here! Best of luck for the next!
As soon as I observed this internet site I went on reddit to share some of the love with them.
I am really enjoying the theme/design of your site. Do you ever run into any web browser compatibility problems? A number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Chrome. Do you have any ideas to help fix this problem?
I conceive you have remarked some very interesting points, thanks for the post.
Hey are using WordPress for your site platform? I’m new to the blog world but I’m trying to get started and create my own. Do you require any coding knowledge to make your own blog? Any help would be really appreciated!
I’ve been surfing online greater than 3 hours today, but I by no means found any fascinating article like yours. It is pretty value sufficient for me. In my opinion, if all site owners and bloggers made just right content material as you probably did, the web can be much more helpful than ever before. “I thank God for my handicaps, for through them, I have found myself, my work and my God.” by Hellen Keller.
Wonderful site. Plenty of useful information here. I’m sending it to a few buddies ans additionally sharing in delicious. And of course, thank you on your effort!
I like this blog its a master peace ! Glad I discovered this on google .
fantástico este conteúdo. Gostei bastante. Aproveitem e vejam este conteúdo. informações, novidades e muito mais. Não deixem de acessar para aprender mais. Obrigado a todos e até a próxima. :)
great submit, very informative. I wonder why the opposite experts of this sector don’t notice this. You should proceed your writing. I’m sure, you have a huge readers’ base already!
Hey There. I found your blog using msn. That is an extremely well written article. I will be sure to bookmark it and come back to learn extra of your useful info. Thanks for the post. I’ll certainly return.
Youre so cool! I dont suppose Ive learn anything like this before. So good to search out any person with some original thoughts on this subject. realy thank you for starting this up. this website is something that is wanted on the net, someone with a little bit originality. useful job for bringing one thing new to the internet!
What’s Going down i’m new to this, I stumbled upon this I’ve discovered It positively helpful and it has helped me out loads. I’m hoping to give a contribution & assist other users like its aided me. Great job.
I have been absent for a while, but now I remember why I used to love this blog. Thanks , I’ll try and check back more often. How frequently you update your web site?
I am often to running a blog and i actually respect your content. The article has actually peaks my interest. I am going to bookmark your site and keep checking for brand spanking new information.
Good day very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your website and take the feeds alsoKI am happy to search out a lot of helpful info here in the publish, we’d like work out more techniques in this regard, thank you for sharing. . . . . .
I enjoy, lead to I discovered exactly what I was having a look for. You’ve ended my 4 day lengthy hunt! God Bless you man. Have a great day. Bye
Hello, i read your blog occasionally and i own a similar one and i was just wondering if you get a lot of spam responses? If so how do you stop it, any plugin or anything you can suggest? I get so much lately it’s driving me insane so any assistance is very much appreciated.
Hey very nice blog!! Guy .. Beautiful .. Superb .. I will bookmark your site and take the feeds additionally…I am glad to find numerous helpful information here within the submit, we need work out more strategies on this regard, thanks for sharing. . . . . .
Enjoyed reading this, very good stuff, thanks. “Love begets love, love knows no rules, this is the same for all.” by Virgil.
Today, I went to the beach with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She placed the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is entirely off topic but I had to tell someone!