302.AI让所有大模型开启Artifacts可视化交互

>  什么是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领域中的一个标杆功能。