在AI技术日新月异的今天，Artifacts作为Claude Sonnet模型的一项创新功能，正在重新定义我们与AI的互动方式。本文将通过十个问题深入探讨Artifacts的诞生、功能及其在AI应用开发中的潜在影响。

“工欲善其事，必先利其器”——《论语》中这句话，在AI时代有了新的解释：

从公元前鲁班制器，到文艺复兴达芬奇的手稿，再到今天 Claude 的 Artifacts（有工具画-有说明书-有智能助手），人类一直在追寻着让创造更简单的方法。

当 Andrej Karpathy 在微软 Build 大会上将 Prompt Engineering 重新定义为一种全新的编程范式时，也许他看到了与古人相同的智慧：真正改变世界的，从来都不是工具本身，而是工具带来的创造可能。　

Artifacts是今年6月随着Claude Sonnet一起推出的新功能，黄叔一直认为它会带来一些新的可能性，所以找了很多朋友交流后，尝试用10个问题勾勒出Artifacts，如果你觉得有收获，欢迎分享。　

一、让Prompt火爆的词生卡背后是Artifacts？

这三张图估计大家有见过的：　

左一from 即友@李继刚 的汉语新解，中间from 即友@云中江树 的AI 简历，右一from 即友@一泽Eze 的社交名片。　

除了这些，还有下面的（以及更多的“一天”变种）：　

From 即友@空格的键盘 　

这一类，可以统称为：词生卡（输入Prompt，大模型生成卡片）　

词生卡在过去一段时间里，火爆全网，这背后除了李继刚和开源社区诸多玩家（上面罗列出了几位重要玩家和代表作）的费心研究之外，他们的研究成果能具象化以图片的方式呈现，极大程度上依赖于Claude Sonnet的发布，以及同期上线的Artifacts能力。　

有个很有意思的点是，在我和李继刚聊的时候，他有些气愤的说：　

Artifacts没啥好研究的。就是一个工程上的形。　

真正牛的东西，就是Prompt弄出来的那个文本，「神」。

二、Artifacts只是工程上的形？

某种角度来说，确实如此。　

Andrej Karpathy在2023微软Bulid大会上做了个主题分享：State of GPT，其中提到了Prompt的重要性：　

Prompt弥补了人类大脑和LLM大脑两种认知架构的差异　

人类要用自然语言进行编程　

也需要深入理解模型的行为和反应　

之所以李继刚的Prompt出神入化，背后一个是深入理解了模型，另一个也确实是对自己脑海中的思考做了极致的压缩：　

得意忘言。手指月。形神之辨。　

都在说「那个东西」。　

李继刚的思路，更偏向思辨，这个关注点会集中在Prompt层面，从这点来说，Artifacts只是最终的具象化表达。　

我们再看另外一个思路：云中江树的思考，他觉得Artifacts除了形，还和模型能力的魂（艺术、设计等审美）有关！　

怎么理解呢？　

Claude这个模型的审美很好，能够把卡片、网站渲染的很漂亮：Artifacts 是 Claude 模型能力的很好的外化表现形式！　

用大白话解释就是：　

光靠Prompt的优化，光靠模型的输出，光靠Artifacts自己，都不能输出很漂亮的内容，一定是这三者的结合！　

也就是说：没有 Claude 底层的审美能力，Artifacts 火不了！　

那审美能力为何重要呢？好产品总是和审美相伴相随，如果不好看，传播性就会很弱，词生卡大概率也就无法成为爆款，甚至很多场景下就失去了实用性！　

某种意义上，Claude 很懂人性，知道人的认知惯性，懂得信息的放大和弱化，聚焦和省略，Artifacts把这一点具象化的传递了出来！　

从这个角度来讲，Artifacts是一个最终把它（模型编程能力、审美）呈现出来的功能。　

302.ai的Jomy，以及社交名片的作者 即刻@一泽Eze 对此有进一步的解释：

三、Artifacts更多是功能？

302.ai对旗下的所有LLM都增加了Artifacts：　

@Jomy 认为：Artifacts是个功能，不算是模型能力。　

为啥呢？因为Artifacts是通过系统提示词约束模型输出，再通过前端渲染出来，本身不难：　

那为何很多模型加上Artifacts，效果并不好呢？　

因为这非常看模型本身的输出能力，再具体一些就是模型的编程能力。　

是的，根据多位朋友的反馈，Claude Sonnet 0620版本的时候，Prompt需要写的非常详细，在稳定性、代码生成和设计美感几个方面都需要有小技巧。但到了1022版本，Claude对前端代码的理解，以及美学上的设计感就强非常多了。过去需要很多小技巧的Prompt现在也不需要写的那么详细了，输出也更加稳定了。　

所以，我们可以理解为，Artifacts是一个功能，但最终渲染效果的好坏，很吃模型本身的编程能力！　

社交片名的作者：即刻@一泽Eze 做过一个分享，其中一页PPT是这么描述的，我觉得很贴切：　

在这张图里，Artifacts是大模型处理后对输出的一种呈现！　

ok，看完了上面两点后，相信大家对Artifacts有了一些感性的认知，我们下面一起回到Artifacts诞生来进一步理解：

四、Artifacts的诞生是为了简单？

在Claude官方2个月前发布的视频《How we built Artifacts with Claude》里，Alex是这么说的：　

早在三月份，我就想看看最新的模型（指Claude 3.5）在生成网站方面有多好，我一直在将它生成的网站复制并粘贴到编辑器中，然后我保存文件，并在网络浏览器中打开文件，我注意到整个往返过程花费了很多时间。　

我想要它做的只是让它立即在屏幕上渲染，我把这个非常简陋的并排界面放在一起。　

当我开始介绍这个界面，我想很多人都开始意识到，哇，这里好像有东西！　

。。。　

确实，在一开始使用Claude Sonnet辅助代码生成的时候，黄叔也是打开两个窗口，把Claude生成的代码Copy到编辑器里，然后用浏览器打开调试，再把bug Copy到Claude窗口内让其修改，修改完毕的代码再Copy回编辑器，再用浏览器验证：　

现在直接在Claude内输入Prompt之后，合适的条件下，Artifacts就会直接渲染出效果供你检查。这样对于用户来说就非常简单了！　

我Claude账号被封，使用整合了Claude和Aritfacts能力的Monica.im来给大家做个演示：　

上图分为左右两大块，左侧是对话框，显示的是我和Claude的对话内容，当Claude的输出触发了某些机制后（后面我们会补充），右侧就会出现Artifacts的界面，直接显示具体的代码渲染的结果，并且是可以交互点击的，也就是说，如果渲染出了网页，用户可以直接去验证样式、功能是否符合预期，如果不符合，左侧继续去修改就行了。　

比如我希望网页加上功能介绍，以及底部加上作者的信息，那在左侧对话框输入就行了：　

是不是变得非常简单了？我不需要编辑器，不需要额外再打开浏览器，一个页面里解决所有问题！　

是的，简单是Artifacts带来的一个重大改变：

五、Artifacts改变了什么？

我们用自然语言描述需求，AI即时呈现可视化的而结果，当我们看到结果后，可以立即反馈，调整输入，AI也会快速响应，这种交互模式，比起之前大幅简单了！　

对，就是简单！　

“简单”这个词，几乎是所有工具之争的制高点。　

互联网产品，只要降低一个难度门槛，往往就会获得一批新用户。　

梁宁《真需求》　

Claude这个能力的上线，大幅降低了使用大模型的门槛，帮助用户做了很多减法！在一定程度上，覆盖掉了Bolt.new的能力范围~　

在Monica.im里面，我可以使用它进行发布、分享、变成小应用，意味着我使用大模型生成的Artifacts工具，可以固化下来，可以分享出去，让更多人用到，以及自己能持续使用。　

换个角度，你再想想，黄叔没有代码能力，在以前怎么可能做这么一个工具呢？但现在，不需要前端，不需要设计师，我自己输入Prompt，就可以直接跟大模型对话，实现自己的需求了。　

是的，以后甚至不需要详细的PRD，只需要Prompt，就可以构建产品了！　

是不是简单了非常多？　

所以尽管Artifacts看似很简单的一个工程上的功能，但我和很多朋友一样，都认为它会带来巨大的改变。　

Claude的Alex说：“看到它立即出现在屏幕上，某种东西就…突然通了。这不仅仅是为了加快流程，它改变了我们与 Claude 互动的方式。” 　

我也一样这么理解的，以前我们是输入Prompt，模型输出文本，但现在Artifacts把这种交互变成了双向和动态的对话！　

当然，现在的Claude Sonnet V2能力还不够强，但基于强化学习这一个在代码层面确定性很强的方向，Artifacts的效果一定还会随着模型编程能力的持续增强而继续变好，技术的进步往往始于一个简单而大胆的想法，Artifacts无疑代表了一种新范式。　

继续，Artifacts只是词生卡了么？并不只是的，我们前面展示了一些，但还有更多应用场景：

六、Artifacts的应用场景有哪些？

这个我们可以先看常见的Artifacts内容形态：　

文档（Markdown或者纯文本）

Code

网站（单页HTML）

SVG

图标or流程图

交互式的React组件文档

比如用来写小说：　

单页HTML

前面我做的MD文件合并工具，也是一种单页HTML，我们再举个例子，比如下图里的博主，就指出了可以把文档上传，让Claude生成一个可以点击的测验小游戏，这也是基于Artifacts：　

流程图

边画边说，相当贴心的老师了：　

交互式React组件

比如下面这种相对复杂的动态效果呈现，底部调整各个参数的数值时，上面的正方形图块的内容就会发生变化：　

或者其他数据可视化能力等等，都属于这一类。　

还有类似的小游戏开发：　

（from 卡兹克《我体验完刚发布的Claude3.5，发现最强的是这个新功能。》）　SVG

开篇文章就提到的多种词生卡类型的内容，就是用SVG呈现的！　

SVG这块特别值得说一下，我也是第一次看到这种格式。SVG有几个有意思的特性：　

无损缩放：SVG是矢量格式，可以无限放大

文件体积小

可编程：SVG是基于XML的格式，可以通过代码直接修改和生成。所以它是可以通过数学公式描述图形的，和AI的工作机制很匹配。

跨平台兼容：SVG被所有的浏览器支持

可编程这一点很有意思，我举个例子，用李继刚“逻辑之刃（升级版）”的Prompt生成的SVG后，我可以通过直接修改代码来调整SVG的样式：　

右边Artifacts的编辑区域，当我修改了页脚的文案，并保存之后，左边的SVG图选择的“李继刚 2024”文字就会被修改，这就是可编程！　

这些应用场景，在什么情况下Claude会让Artifacts出现呢？我们来个总结：

七、Artifacts有哪些特性？

根据官网说明，当Claude输出的内容符合下面的要求时，就会创建一个Artifacts：　

内容重要并且独立完整，通常超过15行内容

是你可能会希望在对话之外去编辑、迭代或者重复使用的内容

代表了一个复杂的内容片段，无需额外的对话上下文就可以独立存在的

可能是你稍后希望参考或使用的内容

Artifacts还有几个有意思的特性：　

Artifacts有版本管理，在Artifacts的左下角，有版本选择器，可以方便的在每个版本之间切换；

可以查看Artifacts的代码，可以复制，也可以下载文件

ok，感觉到这里，我们可以对Artifacts来个总结了：

八、所以Artifacts是什么？

总结一下，什么是 Artifacts？　

Artifacts 是 Claude 3.5 Sonnet 模型的一项重要功能，它允许用户在与 Claude 对话的同时，直接在对话旁边编辑和构建 Claude 生成的内容。用户可以要求 Claude 生成代码片段、文本文档、网站设计等内容，这些内容会以可预览的方式呈现在对话旁边的专用窗口中，形成一个动态工作空间。用户可以实时查看、编辑并基于 Claude 的创作进行构建，将 AI 生成的内容无缝集成到他们的项目和工作流程中。　

Claude使用Artifacts的核心原则是：　

当内容需要独立的展示空间和特殊的处理方式时，就会选择使用Artifacts。　

这样可以：　

提供更好的用户体验

方便内容管理和编辑

确保内容的可重用性

支持更复杂的交互需求

整体看下来，Artifacts比较像是一种对于模型输出的额外渲染，这种渲染可以在很多维度和场景，比如下面这些：

九、正在被开发者们玩出新花样？

Artifacts有一种实时生成内容的思路，这种思路被V0.dev，Bolt.new都借鉴了，我们看Bolt.new，和Artifacts一样的能力，左侧是代码编写进程，右侧直接显示页面的Preview，并且可交互：　

一泽也即将发布自己的新产品：aicard.eze.is ，目前可以免费使用，在网页上点击后可以快速生成图片进行分享，是一个Artifacts -> 工程化落地 AI 小产品，大家可以访问链接查看：　

302.ai除了对自己网站内的LLM都加入了Artifacts之外，还直接基于此做了个AI网页生成器：　

我们在《从Monica.im“智能工具箱”，Websim.ai，及李继刚“汉语新解”：AI Coding带来的新范式，不止Cursor！》这篇里也写到Monica.im支持自然语言直接生成工具，然后工具会保存下来，可以在适当的时候调用的策略：　

还有前面我们看到的一个个词生卡，本身也可以认为就是一个个具体的产品，比如基于一泽的社交名片，就有人专门做了个网站：　

这些新花样会不会成为新范式呢？

十、Artifacts会成为一种新范式？

（图源一泽）　

我们可以看到：　

图像化的表达，把大模型的文本输出的呈现效果做了大幅提升！

基于Claude Artifacts的输出能力（从SVG到流程图到网页功能），让设计和研发的实现更加平民化了，AI更加平权了！

也就是说，基于大模型的Artifacts，随着模型能力的逐渐增强，以及被更多用户玩起来，会出现大量的Prompt-Based应用的新解法。　

还是Andrej Karpathy，他对于Prompt工程的本质做了重新的定义：　

他认为”Prompt Engineering”这个词可能有误导性

实际上这是一种新的编程范式，更像是”AI工程”

强调这不仅仅是写提示词，而是一个完整的工程过程

也就是说，我们应该将Prompt工程视为更广泛的AI应用开发的一部分！　

Prompt工程=更广泛的AI应用开发　

Artifacts强化了AI应用开发　

推演：Artifacts进一步加速了这个范式进化的过程~　

未来，值不值得期待呢？

尾声

Artifacts这个选题，其实在我脑海里挺久了，日常我主力使用的模型是Claude，常常惊叹于Artifacts适时地出现，前阵子为了写它，回看了一遍Andrej的演讲，大为震撼，也重新思考Prompt的意义。