Artifacts是什么？

Artifacts是Claude这个AI聊天机器人（https://claude.ai/）推出的实验性功能，可以通过Feature Preview开启：

Artifacts是“产物”的意思，表示“用技艺制造出来的东西”。它在软件CI/CD中常会用到，表示在持续集成中生成的文件或数据。

Claude用它来指代大模型生成的代码、文本、网页、SVG图片、Mermaid绘图（一种用文本来表示绘图的特殊语言， Diagrams as Code）等内容。一般来讲，artifact是一个完整的文件。

当没有打开Artifacts开关时，这个文件的内容会完整展示在AI生成的对话中，与其他文本展示在一起；当开启Artifacts开关时，它会以文件附件的方式嵌入在对话中，同时在对话的右边有一个单独的窗口，来展示这个文件的具体内容。这个窗口还具有版本管理的功能，用户可以看到这个artifact的修改历史。

Artifacts：代码文件

下面以用python计算斐波那契数列为例，来说明Artifacts的功能，让大家获得一个初印象。当未开启Artifacts功能时，大模型生成的python代码是直接以代码块的方式嵌入到对话内容中的：

这样的好处是直观；麻烦在于当代码非常长时，代码的显示会冲乱解释等其他生成的内容。当开启Artifacts功能后：

整个界面分成左右两部分：左边展示整体的对话内容，右边展示生成的代码，也就是artifact。这让用户的注意力比较聚焦：想了解整个对话内容，直接看左边，简洁完整；想了解代码，直接看右边，专注高效。更妙的是，当你提出新的需求，大模型会生成一个新版本的代码，在右边的artifact展示窗口有专门的版本号，且能回溯所有的版本。

通过这个例子，大家能直观了解到Artifacts在提升AI聊天用户体验方面的巨大作用。那么，除了代码，Claude还支持哪些类型的artifact呢？

Artifacts：网页设计

我们可以基于Artifacts做网页设计。比如想要生成一个摄影作品展示网页，Claude按照用户需求，直接生成对应的网页设计，马上看到预览结果：

你可以点击Code按钮，切换查看HTML代码：

可以不断迭代，比如添加个人社交账号的展示：

或者改变配色：

当然，你可以根据你的需要做任何修改。

Artifacts：网页游戏

上面的网页设计实现的是静态页面，能否增加动效呢？来一个网页版的贪吃蛇游戏吧：

一把就成功了，太厉害了！不过蛇的速度太快了，调慢一些：

这个蛇不太像，调整一下头部的形状，随便吐个信子：

你要不要试试做个自己喜欢的小游戏？

Artifacts：SVG绘图

上面的例子都是写代码，除此之外，Claude还会绘图。它虽然不具备Midjourney或者Dalle这样的文生图能力，但它可以生成SVG，通过矢量图的方式来制作简单的图像。比如简笔画“蓝天白云小马”：

虽然抽象，但是有“代码”支撑，非常合理：

再迭代迭代吧。这马终于不那么抽象了：

这马好像一只狗啊！来点群山做背景吧：

别耷拉着头，昂起头，跑起来：

让我们发挥想象，有马当然得有龙：

尽情想象，肆意挥洒，你的艺术细胞AI都接得住！

Artifacts：Mermaid绘图

刚刚描绘的是艺术，还有架构图、流程图等工程师经常接触的绘画，那就需要借助Mermaid这样的Diagram as Code语言。比如让Claude绘制数据湖的架构图：

实际生成的是Mermaid的代码：

不满意就提意见，做修改，增加对表格式功能的支持：

或者进一步细化，展开数据管理相关的功能：

小结

Artifacts真是一个改善AI与用户交互的好设计！它使大模型生成的内容更直观、可回溯、更具交互性。这里面有很多空间可供挖掘，值得深入使用。我能想到的，至少在web开发学习方面，AI可以作为一个非常好的老师，让用户能在自由探索中即时、互动地学习。

关注多享有数，持续为您分享科技行业最新见闻！

多享是一家专注于数字化服务、系统开发、新媒体营销、农村电商的专业互联网公司，成立14年，助力2000+中小企业实现数字化转型升级。研发的多享有数私域运营系统拥有中台云仓、供应商、自营商城、直播、短视频、分销、零售商管理、运营商管理等模块，帮助企业实现数字化转型，做好私域经营！