深入分享 Claude 3.5 Sonnet Artifacts 高级应用 | 附 Manim 与React 轻松上手指南

引言

继前三天分享了Claude 3.5 Sonnet 实测的内容后，今天是第四波分享。这次我尝试了一些稍复杂的应用。

往期内容：

CNN卷积可视化程序

提示词：

我要做出这样的程序 ，请用artifacts

make it better

看到下面博主的分享，我把截图发给Claude，让它做出类似的。

只需再加一句：make it better

它会做得更好，2次沟通后结果如下：

制作仪表板——CPI和PPI数据

提示词：

---根据上面内容，创建一个信息图来描述文章要点，信息要丰富，有图表，动画，配色商务风

注：文字内容来源——解读2024年5月份CPI和PPI数据

采用图片里配色重新生成仪表板，注意背景和文字的颜色要合拍，要能适合阅读

现在很流行渐变色背景，我将之前用AI生成的一张渐变图发给它，让它生成类似的配图，它生成的效果很不错（除了图标小些）。

用React制作仪表板还有一个好处是，它会自适应，适合不同截图用于不同场景。

我实际体验了几次仪表板制作后，觉得现在有了Claude，做图文类内容实在太方便了，无论是做成小🍠帖子还是公众号长图，都很容易。

像下面的时效性强的文章，1分钟做成长图，实在太方便了，后期可以把图标P大些。

制作Manim动画——展示财报亮点

前2天做的关于理想汽车财报亮点的视频还比较受欢迎，今天又尝试了做小米的，这次是多次沟通修改的。

注：这里示例用的是小米2024年第一季度业绩公告，44页PPT样式的PDF。

提示词：

提取附件财务报告的要点，使用Manim库编写动画进行展示。动画要多样化，显示效果要华丽。

首页标题页背景改成橙色，文字白色；其他页背景改成灰色#ececec，白色文字改成 黑色文字，橙色保持不变，请给到完整代码

make it better ,让动画效果更丰富

很不错，成功运行了，请你再努力下，make it better，幻灯片转换优化，字体大小优化、动画优化等

CLaude先总结这篇财报的亮点，接着基于这些亮点，写了代码。

最终，多次调整后的效果：

这里我解释下，不是Claude直接生成最后的视频效果，而是让Claude先用Manim库生成python脚本，之后本地运行Python脚本渲染生成MP4。

我之前写过3篇Manim的文章，有兴趣的可以读下。

Manim + ChatGPT 实战：模仿苹果 WWDC 动画效果

Manim 动画制作不再难：ChatGPT + Graphviz/Mermaid 助你快速上手

我也看到一些用户反馈Manim本地安装各种依赖比较难，不用着急，今天推荐一个非常好用的平台——Replit，在这篇文章里我也介绍过它的基础使用方法。

Replit是一个在线的集成开发环境（IDE），可以让你直接在浏览器中编写、运行和分享代码，无需进行复杂的本地环境配置，非常适合快速原型设计和学习新的编程语言或框架。

Replit官方为Manim做了一个开箱即用的模版和拓展，只需在尝试创建新的repl时查找“manim”即可。

可以说，这把使用Manim的难度降到最低了，把Claude写的py放到main.py里，点击“Run”，等待它渲染完成，之后在videos文件夹里就可以找到你的视频。

制作两只兔子对话的动画

提示词：

帮我做成类似的动画，用react 用Claude3.5 Sonnet Artifacts，但是要求左边是一只SVG画的粉红兔子，右边是一个紫色兔子，想象两个兔子在讨论晚餐去哪吃，他们交替说话，当左边兔子说话时，它说的话也会显示在它的头上，它就会上下动，另一只兔子不变，反之亦然，对话至少7轮

把左边兔子改成下面的svg，嵌入到代码里

把右边兔子改成下面的svg，嵌入到代码里

要把他们放在一个画面里，他们一样大小，分别在画面的左边和右边，画面里出现他们的对话

很不错，但是左边兔子说话后，右边兔子开始说，它不跳转到左边，无论是左边兔子说话还是右边兔子说话，它们都能分别保持在画面的左边和右边

右边兔子说话时，不要跳到左边，它就在右边跳，请修改

改成可爱的背景，加上可爱的  播放、暂停、重新播放  这3个按钮，请用Claude3.5 Sonnet Artifacts

将对话改成中文，但是讨论的话题变成如何健身，假设这两个兔子都很棒，它们有一个连续12轮的对话来讨论减肥

还记得昨天我上传头像让Claude生成的SVG图片吗？今天我让它换个颜色，变成紫兔子，然后让他们讨论健身的话题，最后还给它们加个按钮和可爱的背景。

这也是一个沟通多次的项目，用React生成。

最终生成效果：

我也让Claude使用reveal js来做这个项目。

提示词：

帮我用reveal js做成幻灯片，要求左边是白色兔子svg，右边是一个蓝色兔子svg，两个兔子在讨论如何健身，对话是中文，它们交替说话，当左边兔子说话时，它说的话也会显示在它的头上，它就会上下动，另一只兔子不动，反之亦然，对话至少12轮

无论是左边兔子说话还是右边兔子说话，它们都分别保持在画面的左边和右边

请添加可爱的背景，加上可爱的 播放、暂停、重新播放 这3个按钮，请用Claude3.5 Sonnet Artifacts

未将兔子的SVG发给Claude前，它做出了如下效果：

将兔子的SVG发给Claude后，它不能很好消化我上传给它的两个SVG文件，最终做了简约版，生成了HTML。

我替换了占位符后的效果如下：

可以看出，这里React做的效果更好。

文本转视频

这里我给了它一则英文新闻正文，虽然要求让Claude用Reveal js生成，但是它用React生成了。之前我觉得Reveal js 幻灯片不错，现在感觉React的也不错。

提示词：

---请用Claude3.5 Sonnet Artifacts reveal js做成幻灯片，要有图标，图表，中文的幻灯片，配色要美观大方

生成结果：

我觉得可以用这个方法批量生成快资讯视频了，可以上传视频给Gemini 1.5 Pro，让它生成解说文字，之后再转语音。

也可以让它改成手动播放，控制每张页面的展示时间。

如何运行Claude生成的React程序？

对于初识JavaScript的编程新手来说，如何让它运行起来可能是一个问题。

这里还是推荐Replit。

以上文我上面的兔子动画为例，要在Replit上运行React生成的tsx文件，你可以按照以下步骤操作：

1. 创建新的Repl：

   点击 “Create Repl“

   在语言选择中，搜索并选择 “React TypeScript“

2. 设置项目：

   Replit 会自动为你设置一个基本的 React TypeScript 项目结构。

3. 编写代码：

   在 src 文件夹中，你可以找到 .tsx 文件

   你可以编辑现有的文件或创建新的 .tsx 文件

4. 运行项目：

   在 Replit 界面的顶部，你会看到一个 “Run“ 按钮

   点击 “Run“ 按钮来启动你的 React 应用

5. 查看结果：

   Replit 会在右侧打开一个预览窗口，显示你的 React 应用

6. 实时更新：

   当你修改代码时，Replit 会自动重新编译并更新预览

在Claude里，打开和模型对话生成的预览页面，如果你直接下载对应的代码，实际上对于在本地或Replit上运行这个程序会不足的。比如下面两张图，都是在Replit里运行相同程序的结果，但前者因为缺少样式文件，所以显示效果欠佳。

我是这样和Claude交流的。

我要求它提供目录结构。

当你和它交流，它把文件都提供了后，也可以在Artifacts页面里查看它生成的文件。

我还让它提供了一个项目运行指南，将我和它的交流保存为md文件提供下载。

之后，你按照它的指南里的指示在Replit里操作即可。

最后，分享一个看到的不错的Tip：

结语

快体验Claude 3.5 Sonnet Artifacts，很有趣！

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

欢迎点赞、转发、收藏。

精选历史文章，请看这里：