Claude Code Artifacts

你正坐在电脑前，跟一个同事在 Slack 里争论一个 React 组件的样式。你觉得自己写的那个 hover 动画没问题，但同事说“你跑一下看看”。你只好把代码复制出来，打开 CodeSandbox，粘贴，等它加载，再截图发过去。整个过程大概三分钟，但你已经被打断了三次——一次是 Slack 通知，一次是浏览器标签页太多找不到 CodeSandbox，一次是粘贴时漏了一行 import。等你终于把截图发过去，同事又说“不对，你点一下那个按钮试试”。你没法在截图里演示交互，只能再录个屏。这时候你已经完全忘了刚才在想什么。

Claude Code Artifacts 就是冲着这个场景来的。它不是一个独立的 IDE，也不是一个在线沙箱，而是直接嵌在 Claude 对话里的一个功能。你在跟 Claude 聊天时让它写一段代码——比如一个带交互的图表、一个表单验证逻辑、或者一个简单的网页布局——它生成代码的同时，旁边就会自动出现一个实时预览窗口。你不需要离开对话，不需要新建项目，不需要配置环境。代码改了，预览立刻跟着变。而且你点一下“分享”，就能生成一个公开链接，任何人打开就能看到那个可交互的工件，就像打开一个网页一样。

它的工作流很简单。你打开 Claude，输入“帮我写一个倒计时组件，样式好看一点，支持自定义截止时间”。Claude 开始生成代码，同时 Artifacts 模块自动启动：它把生成的 HTML/CSS/JS 渲染在一个隔离的 iframe 里，你立刻就能看到倒计时在跑。你觉得字体太小，说“把字体调大，用红色”，Claude 修改代码，预览同步更新。你觉得差不多了，点“分享”，复制链接，丢到 Slack 里。同事点开链接，看到的就是一个能交互的倒计时，还能自己改时间测试。整个过程你只用了两次对话，没有离开 Claude。

你可以把它想象成一个“会自己搭舞台的魔术师”。传统方式是你写好剧本（代码），然后自己找舞台（本地环境或在线沙箱），自己搭布景（配置依赖），自己拉幕布（运行预览）。而 Claude Code Artifacts 是魔术师一边写剧本，一边就把舞台搭好了，幕布也拉开了，你甚至可以直接把观众请进来看。它把“写代码”和“展示代码”这两个动作合并成了一个。

跟 CodeSandbox 或 JSFiddle 这类工具比，路径完全不同。CodeSandbox 是一个完整的在线 IDE，你需要在里面创建项目、安装依赖、写代码、运行。它的优势是能处理复杂项目，有完整的文件系统和包管理。但代价是启动慢、操作重、不适合快速迭代。Claude Code Artifacts 选择的是“轻到极致”——它不关心你的项目结构，不关心依赖管理，只关心你当前这一小段代码能不能跑起来、能不能给别人看。所以当你只是想快速验证一个想法、或者给同事演示一个交互效果时，CodeSandbox 就像开一辆卡车去买瓶水，而 Artifacts 就像骑共享单车。

当然，代价也很明显。它只能处理单文件或少量文件的小型代码片段。如果你要做一个多页面应用、需要后端 API、或者要集成复杂的 npm 包，Artifacts 就无能为力了。它没有文件系统，没有状态管理，没有调试工具。而且预览环境是受限的——你不能访问本地文件、不能调用外部服务、不能持久化数据。它本质上是一个“演示沙箱”，不是开发环境。另外，分享的链接是公开的，如果你不小心把包含敏感信息的代码分享出去，那就麻烦了。所以它适合原型、演示、教学、快速验证，不适合生产级开发。

想象一下这个场景：你正在跟产品经理开会，讨论一个新功能的前端交互。产品经理说“能不能做一个像苹果官网那样的卡片翻转效果？”你打开 Claude，输入“写一个卡片翻转的 3D 效果，鼠标悬停时翻转，背面显示产品信息”。几秒钟后，一个可交互的卡片出现在预览区。你点一下分享，把链接发到会议群里。产品经理在手机上点开，翻转卡片，说“背面再加个按钮”。你当场改代码，预览实时更新。整个会议没有一个人离开座位，没有一个人打开 IDE。这就是 Claude Code Artifacts 想创造的日常。