分享 Claude 3.5 Sonnet 多个精彩使用案例：编程无敌，轻松制作动画和幻灯片，数据分析功能出色

Claude 3.5 Sonnet 简介

Claude 3.5 Sonnet昨晚发布，一句话总结，目前最强的大模型（除语音外），且价格比Claude 3 Opus要优惠不少，速度也更快。

Claude 3.5 Sonnet 和 Claude 3 Opus 每百万个输入token收费分别为 15，输出token收费分别为 75。

Claude 3.5 Sonnet 可在claude.ai和 Claude iOS 应用程序上免费使用。

新闻链接：

https://www.anthropic.com/news/claude-3-5-sonnet

Claude 3.5 Sonnet 在多个测试中表现优异，尤其在代码（92.0%）和小学数学（96.4%）方面表现突出，相比之下，Claude 3 Opus 和其他模型的表现略逊一筹。

Claude此次还有了Artifacts feature，这是一个交互友好的功能，让我觉得值得在Claude官网上充值。

点击头像，在设置里打开。

Artifacts feature可以干什么？

让Claude回答：

提示词：

回答：

Artifacts 功能介绍

Artifacts 是一项强大的功能，允许用户在对话中创建和引用大量独立的内容。对于你可能想要修改、迭代或重复使用的内容，它们特别有用。

Artifacts 的主要功能：

内容类型：

• 代码：我可以创建包含各种编程语言的代码片段或脚本的 artifacts。
• 文档：我可以生成纯文本、Markdown 或其他格式的文本文档。
• HTML：我可以创建可在用户界面中呈现的单文件 HTML 页面。
• SVG：我可以生成可缩放矢量图形 (SVG) 图像。
• Mermaid 图表：我可以使用 Mermaid 语法创建图表。
• React 组件：我可以开发 React 组件，包括使用 Hooks 和 Tailwind CSS 进行样式化的组件。

持久性和迭代：

• 在我们的整个对话过程中，都可以引用和更新 Artifacts。
• 这允许对代码、文档或其他内容进行迭代开发。

渲染：

• 根据类型的不同，artifacts 可以直接在用户界面中呈现。
• 例如，可以将 HTML 页面、SVG 图像和 Mermaid 图表可视化。

与聊天分离：

• Artifacts 显示在单独的 UI 窗口中，保持主对话清晰和集中。

可重用性：

• artifacts 中的内容可以轻松复制、修改或在我们对话之外使用。

复杂内容支持：

• Artifacts 非常适合包含大量内容（通常超过 15 行），这些内容如果直接包含在聊天中可能会过于笨拙。

特定于语言的功能：

• 对于代码 artifacts，我可以指定编程语言，从而实现正确的语法高亮显示。

组件库：

• 对于 React 组件，我可以使用来自 shadcn/ui 等库的预构建组件。

占位符图像：

• 在 HTML 和 React artifacts 中，我可以使用具有指定尺寸的占位符图像。

Claude 3.5 Sonnet 编程无敌

最吸引我的是在 Claude 内部代理编码评估中，Claude 3.5 Sonnet 解决了 64% 的问题，明显优于 Claude 3 Opus 的 38%。

评估测试模型修复错误或向开源代码库添加功能的能力，并给出所需改进的自然语言描述。在接受指导并提供相关工具后，Claude 3.5 Sonnet 可以独立编写、编辑和执行代码，并具有复杂的推理和故障排除功能。

它可以轻松处理代码翻译，对于更新遗留应用程序和迁移代码库特别有效。

Anthropic 的 Alex Albert 说：Claude开始真正擅长编码和自主修复拉取请求。很明显，一年后，很大一部分代码将由LLM编写。

这里有个官方演示视频

这段视频展示了Anthropic的 Claude 3.5 Sonnet模型如何帮助软件工程师进行代码测试和修复。

0:00-0:07: 视频开始介绍了软件工程师在编写代码时，测试和修复代码通常比编写代码本身花费更多时间。

0:07-0:11: 视频介绍了Claude 3.5 Sonnet模型，并展示了它可以自动编写测试和修复代码。

0:11-0:25: 视频展示了一个示例场景：工程师编写了一个图像裁剪函数，该函数将图像裁剪成圆形，并希望确保所有用户头像的大小一致。

0:25-0:35: 视频指出，该函数存在一个bug，裁剪后的图像仍然是方形且背景是白色的。

0:35-0:47: 视频展示了如何将代码和描述bug的指令输入Claude模型。Claude模型自动创建了一个测试用例，并指出bug所在：代码将图像转换为RGB模式，导致透明度信息丢失。

0:47-0:56: Claude模型创建了一个测试文件，并解释了测试的步骤。

0:56-1:07: Claude模型执行了测试用例，测试用例失败，并解释了失败原因。

1:07-1:22: Claude模型自动修复了bug，并解释了修复过程：在转换图像模式之前，先检查图像是否已经是RGBA模式，如果是，则无需再次转换，以保留透明度信息。

1:22-1:30: Claude模型再次执行测试用例，测试用例通过，说明bug已经被修复。

Claude 3.5 Sonnet 图片识别能力强

官方这个视频演示也很惊艳，最后生成了一个很美的HTML格式的幻灯片。

它的发布打击了一些 AI PPT 应用，同时也展示了Claude现在有了数据分析功能。

不知是否还有读者记得我前段时间介绍Marp，有点类似reveal.js库制作了一个幻灯片。

视频过程：

1. 教授向Claude发送信息，并附上两张图片：图1：一张关于人类基因组测序成本随时间推移的图表。

   图2：一张关于人类基因组测序关键里程碑的时间轴图表。

2. Claude帮助教授将图表数据转换成JSON格式：Claude首先将两张图片中的数据分别转换成JSON数组，并分别命名genomeSequencingTimeline和costPerHumanGenome。

   然后，Claude将两个数组合并成一个结构，并将它们命名为genomeSequencingTimelineAndCostJSON。

3. 教授请Claude根据JSON数据创建一个交互式图表：教授提供了一个调色板文件，用于设置图表颜色。

   Claude使用plotly.js库创建了一个交互式图表，并将里程碑信息设置为悬停提示。

4. 教授请Claude使用reveal.js制作一个演示文稿：

   Claude使用教授提供的图表数据和reveal.js库制作了一个演示文稿，其中包含了人类基因组测序的关键信息。

5. 教授对演示文稿表示满意，并发送给学生：

   教授对Claude的帮助表示感谢，并通过电子邮件将演示文稿发送给学生。

官方还有2个视频，都建议看下，Claude官方演示很不错，有很多提示词细节需要关注。

博主分享的优质使用 Claude 3.5 Sonnet 案例

Threejs+cannonjs 3D

画图标

甚至接入11lab的API，在Claude官网上播放声音

3D游戏制作

https://websim.ai/c/koXDcARYdiI95gIB3?stream=

我的Claude 3.5 Sonnet 实际体验

制作manim动画

提示词：

说实话，我琢磨用GPT4画Manim有段时间了，这次Claude 3.5 Sonnet的效果真实超级棒。

提示词：

如果说什么限制了Manim的设计，那就是Claude的使用次数。

制作简单游戏

体验了下Artifacts feature，让它写一个奔跑的兔子游戏，初看很好，背景颜色有好几种颜色，方块是在奔跑的样子

制作幻灯片（ reveal.js）

提示词：

除了最后一页画面出现了重叠，其他还不错。

制作可视化图表（plotly.js）

提示词：

Artifacts feature的交互显示特别棒

制作儿童动画（ three.js）

提示词：

提示词：

当我想把上面的动画加到之前的幻灯片里，出现了些错误，我准备之后再尝试。

图片识别并绘制

提示词：

生成的动画效果不错。

我看了下文件的代码，它是用 React（一个用于构建用户界面的 JavaScript 库）编写的。React 是一个用于构建用户界面的开源库，特别适合构建单页面应用程序。代码中的动画效果是通过使用 JavaScript 的 animate 方法在 SVG 元素上实现的。

制作蝴蝶动画（three.js）

提示词：

得到回复：I apologize, but I'm not able to directly draw or generate images. However, I can provide you with code to create a 3D scene with multiple fluttering butterflies using Three.js. Would you like me to create a Three.js script that renders animated butterflies?

我让它继续了，得到如下效果。

制作烟花动画（three.js）

提示词：

当它生成的内容是黑屏，我看不到内容时，它还会帮我debug，而且是能直观地debug。

可以看出，Claude 3.5 Sonnet的编程能力已进入了一个新的阶段，部分呼应文中的第一个视频。

数据可视化

提示词：

看来以后数据分析图表制作又多了一个工具。

根据文本制作幻灯片

提示词：

结果生成了tsx文件，展示效果如下：

提示词：

可能现在用的人多，还有问题。

制作SVG logo

提示词：

Claude目前似乎存在一些问题，某些截图（如小红书页面）发送给它时，会显示模型不支持。

制作Mermaid图

提示词：

结语

在使用过程中，即使充值了Claude会员，能使用的次数也是有限的，Poe里也可以用 Claude 3.5 Sonnet，它比Claude 3 Opus便宜，性能更好。

Claude 3.5 Sonnet是最近一个月最让我心动的产品的，真的超级棒，我之前一直在思考如何更好地用 Manim 画动画、用 Marp 制作 PPT 和用 Gemini 生成 UI，这次 Claude 3.5 Sonnet 似乎都解决了这些问题。

这次Claude 的 Artifacts 功能真的很棒，交互好，还能实时debug，引入了React组件，多种js直接用，直接显示，真的非常厉害。

别的大模型做出来的贪吃蛇游戏界面不够美观，快来体验 Claude 3.5 Sonnet 吧！

欢迎在评论区留言，让我们一起交流进步。

拓展阅读

Artifacts 功能主要支持以下 JavaScript 相关的展示能力：

• React 组件：Artifacts 可以创建和渲染 React 组件。这包括：

  纯函数组件

  使用 Hooks 的函数组件

  React 类组件

  在创建 React 组件时，你可以使用：

  Tailwind CSS 进行样式设计

  lucide-react 库（版本 0.263.1）用于图标

  recharts 库用于创建图表和图形

• HTML 中的基础 JavaScript：你可以在 HTML artifacts 中包含 JavaScript，但这仅限于内联脚本或从 https://cdnjs.cloudflare.com 托管的脚本。

• SVG 中嵌入的 JavaScript：SVG artifacts 可以包含嵌入的 JavaScript 以实现简单的交互性。

• Mermaid 图表：虽然不是基于 JavaScript 的，但 Mermaid 图表提供了一种使用简单标记语言创建各种图表和图形的方法。