大家好，我是 LV。
最近写了一本《AI 赋能前端研发从 0 ～ 1》开源电子书，从头开始分享自 AI 爆发以来，将 AI 融入前端研发工作流的探索经历。
目前已经连载多篇，全开源，点亮star，不迷路～ 同时接收最新版本的 GitHub 通知，点击文末的阅读原文跳转到电子书阅读。
前一段时间，Claude 发布了 3.5 Sonnet，其中有一个新的功能叫做：「Artifacts」。
这篇文章本早就想写了，但一直被一些事情耽搁了，今天咱们来聊一聊 Artifacts，这个功能到底有多牛逼，作为专业的前端，是如何看待这个功能的。
artifacts 发布完之后，随即爆火，在各大媒体上都迅速刷屏了，很多人冲着这个功能，直接从 ChatGPT 路转粉到了 Claude。
下面，咱们正式开始。
Artifacts 是个啥？
简单理解：Artifacts 能够将 AI 生成出来的代码可视化运行出来。
其中代码包括：HTML、css、js、React、svg等。
如下是一个简单的示例：
需求：给《AI赋能前端研发从 0 ～ 1》开源电子书添加一个首页的图片动态svg效果。
经过几轮聊天迭代，Claude 生成了如下 svg ，并且直接在 Artifacts 中运行出来。👇
放到我的电子书中，刚刚好，效果很赞。👇
如上，Artifacts 就是这么一个功能，能够将 AI 生成的代码可视化运行出来。
下面，分享一些 Artifacts 的使用案例。（采集自网络）
一些案例
「案例 1」：生成前端代码。
仿谷歌日历 👇
「案例 2」：做一些小游戏。
炫酷版的贪吃蛇 👇
马斯克的 spaceX 火箭 👇
「案例 3」：可视化的动画。
宇宙星空运转👇
将论文转换为可视化的图表学习资料 👇
冒泡排序算法的可视化 👇
同类产品
自从 Artifacts 发布之后，我目测这个功能会成为AI 生成代码领域的标配。
果然不久，很多同类产品也纷纷发布了Artifacts类功能，部分如下：
「产品 1」：DeepSeek
链接：DeepSeek
在 Claude 发布 Artifacts 之后，DeepSeek 第二天就发布了DeepSeek Artifacts，这种反应速度，真的是够快的。
注意，它目前只能运行html、css、js代码，其他的暂时不支持。
输入：帮我用html生成一个贪吃蛇游戏 👇
预览效果如下 👇
「产品 2」：Monica Artifacts
链接：Monica Artifacts
目前 Monica Artifacts 支持的代码类型比较多，包括：
代码片段 网站（单页 HTML） 可缩放矢量图形 (SVG) 图像 图表和流程图 交互式 React 组件
跟 Claude 的 Artifacts 高度相似。
如下例子，生成一个React 登陆页面👇
跟 Claude 的 Artifacts 一样，会基于 shadcn/ui 组件库来生成 React 代码。
「产品 3」：chatgpt-artifacts
链接：chatgpt-artifacts
chatgpt-artifacts 是一个开源项目， 支持用 OpenAI 的 API 生成代码和 Artifacts，除此之外，还支持下面的几种 LLM：
本地 LLM（如 Llama3 或 Gemma2）
Groq
Azure OpenAI
如下例子，生成一个计算器功能👇
「产品 4」：ai-artifacts
链接：ai-artifacts
ai-artifacts 是一个开源项目，主要功能如下：
AI 代码生成：使用 Anthropic Claude Sonnet 3.5 模型生成代码。
安全的代码执行：通过 E2B 的 Code Interpreter SDK 在云沙箱中安全地运行 AI 生成的代码。
多种编程语言支持：支持 Python、JavaScript、R 以及 Next.js 应用的生成和运行。
思考
如上，Artifacts 功能在短短的时间内，就迅速的火了起来，这背后的原因主要是新奇性、和易用性。
对普通人的影响
对于普通人来说，Artifacts 可以让他们不需要懂代码，就可以生成代码，并且看到效果，这对于他们来说，是一个很大的创新。
编程的门槛会越来越低，未来，由 AI 驱动的编程会成为一种大众的趋势，而不是程序员独有的技能。
对专业前端的影响
对于专业前端来说，Artifacts 可以让他们更快的验证想法，更快的生成代码，更快的看到效果，这对于他们来说，是一个很大的提升。
同时，前端研发的门槛势必会越来越低，未来，借助 AI 生成代码，会成为前端研发的标配。
比如，同时研发一个业务页面（业务迭代需求），借助 AI 工具，一个前端实习生的效率，可能会超过不使用 AI 的前端资深工程师。
当然，现阶段的 Artifacts 也有一些局限性，Claude Artifacts 现阶段只能生成遵循特定规范生成特定技术栈的代码，比如只基于shadcn/ui组件库生成 React 代码。
这对于一些有自己的技术栈的团队来说，可能会有一些不适。
不过这个问题，在未来会逐渐解决，这个痛点，我很早之前也就在实践研发类似的产品，如下简单介绍一下。
「LV0 产品」：
链接：https://lv0.chat/
产品定位：LV0 是由AI驱动的前端代码生成平台，可以基于任意的开源、私有UI组件库来生成前端代码。
产品愿景：助力部分前端完成广度方向的转型，成为 AI 时代的超级个体，一个人即可搞定产品、UI 设计、和前端开发。
5大功能：1.自然语言生成代码、2.截图生成代码、3.原型设计生成代码、4.代码版本管理、5.代码可视化微调。
2大优势：1.基于任意开源或者私有组件库生成代码、2.开放核心 API 能力，快速接入工作流。
AI 浪潮不可逆，作为专业前端，需要有转型的意识，是从深度耕耘某一个前端领域？亦或是从广度拓展更多的领域到产品、设计等环节，朝着超级个体的方向发展？
机会
Artifacts 的出现，同时也给创业者带来很多的机会～
「编程教育」：Artifacts 类的功能，可以让编程新手更快的上手，通过聊天的方式，生成代码，然后直接看到效果，这对于新手来说，是一个很好的学习方式，由于在同一个上下文中，所有有什么不懂的地方，直接聊天问 AI 就好了。
「游戏创新」：Artifacts 类的功能，甚至可以让普通人也能创造游戏，比如 2048 这种简单趣味性的小游戏，只要你脑洞够大。
「可视化学习」：Artifacts 类的功能，可以快速将一些知识，转换为可视化的学习资料，比如冒泡排序算法的可视化。比如将论文转换为可视化的图表学习资料。
今天的分享就先到这～
关注公众号，最新内容会第一时间推送给你～
最后，如果你也想知道 AI + 前端的更多可能性，探索 AI 时代下前端人员的转型（超级个体）之路，扫描下方二维码加我的微信，备注来意，我会拉你进「最懂 AI 的前端伙伴们」群。
