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

引言

前三天咱们聊了好几轮Claude 3.5 Sonnet的实测，今天继续第四波分享——这次挑了几个稍微复杂点的应用场景，来试试它的真实实力究竟在哪。

注：往期的系列内容，感兴趣的可以往回翻翻，这里就不一一列举了。

CNN卷积可视化程序

提示词很简单：

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

make it better

其实就是看到下面这位博主分享的截图，把图直接甩给Claude，让它试着复现一个类似的程序。还多加了一句“make it better”——就这一句话，它自动优化了设计，两次沟通后效果就出来了。

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3515904258044674049"></iframe>

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

提示词如下：

——根据以上内容，创建一个信息图来描述文章要点，信息要丰富，有图表、动画，配色商务风。
注：文字内容来源——解读2024年5月份CPI和PPI数据
采用图片里配色重新生成仪表板，注意背景和文字的颜色要合拍，要能适合阅读

渐变色背景最近很流行，我把之前用AI生成的一张渐变图丢给它，让它按那个风格生成配图。结果还挺让人满意——除了图标稍小一点外，整体观感很棒。用React做仪表板的另一个好处：它会自动适配不同屏幕尺寸，方便后续截图用在各种场景。

老实说，连续试了几次仪表板制作之后，最大的感受是：有了Claude，做图文类内容实在方便太多。不管是发个小帖子还是做成公众号长图，都一键搞定。像下面这种时效性比较强的文章，一分钟就能做成一张长图，后期把图标PS大点就完美。（图标小这个缺点确实存在，但瑕不掩瑜。）

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

前两天做过一个理想汽车财报亮点的视频，反响还不错。这次换成小米试试，而且进行了多轮沟通调整。这里用的是小米2024年第一季度业绩公告，44页PPT样式的PDF。

提示词：

提取附件财务报告的要点，使用Manim库编写动画进行展示。动画要多样化，显示效果要华丽。
首页标题页背景改成橙色，文字白色；其他页背景改成灰色#ececec，白色文字改成黑色文字，橙色保持不变，请给到完整代码
make it better，让动画效果更丰富
很不错，成功运行了，请你再努力下，make it better，幻灯片转换优化，字体大小优化、动画优化等

Claude先是总结出这份财报的核心亮点，然后基于这些亮点写出Python代码。

经过多轮调整，最终效果：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3515903147158093837"></iframe>

这里解释一下：并不是Claude直接生成最后的视频，而是让它先用Manim库生成Python脚本，然后在本地运行脚本渲染成MP4。之前写过三篇关于Manim的文章，感兴趣的可以翻一翻。

也有不少用户反馈Manim本地安装依赖比较头疼。别急，这里推荐一个非常好用的平台——Replit。它是在线的集成开发环境，直接在浏览器里编写、运行和分享代码，无需折腾本地环境，特别适合快速原型设计。Replit官方甚至为Manim做了开箱即用的模板——创建新repl时搜索“manim”就能找到。

这就把Manim的使用门槛降到最低了：把Claude写的py文件放到main.py里，点击“Run”，等它渲染完成，在videos文件夹里就能找到最终视频。

制作两只兔子对话的动画

提示词：

帮我做成类似的动画，用React，用Claude3.5 Sonnet Artifacts。但要求左边是一只SVG画的粉红兔子，右边是一只紫色兔子，想象它们讨论晚餐去哪吃。它们交替说话：当左边兔子说话时，说的话显示在它头上，它上下动，另一只不动，反之亦然。对话至少7轮。
把左边兔子改成下面的svg，嵌入到代码里
把右边兔子改成下面的svg，嵌入到代码里
要把它们放在一个画面里，一样大小，分别在左右两边，画面里出现对话
很不错，但左边兔子说完、右边兔子开始说时，右边兔子不要跳到左边，就保持在右边跳，请修改
改成可爱的背景，加上可爱的播放、暂停、重新播放三个按钮，请用Claude3.5 Sonnet Artifacts
将对话改成中文，但讨论的话题改成如何健身，假设两只兔子都很棒，有连续12轮的对话来讨论减肥

还记得昨天我用自己头像让Claude生成的SVG吗？今天让它换个颜色变成紫色兔子，然后让它们讨论健身话题，最后还加了按钮和可爱背景。又是一个多次沟通的项目，用React生成。

最终效果：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3515895350064398336"></iframe>

我还让Claude用reveal.js来做这个项目：

帮我用reveal js做成幻灯片，要求左边是白色兔子svg，右边是蓝色兔子svg，两个兔子讨论如何健身，对话中文。它们交替说话，左边说话时显示在头上并上下动，右边不动，反之亦然。对话至少12轮。
无论哪边说话，都分别保持在画面左右侧。
请添加可爱背景，加上播放、暂停、重新播放三个按钮，请用Claude3.5 Sonnet Artifacts

在没把兔子SVG发给Claude之前，它做出了这样的效果：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3515894531923460103"></iframe>

把兔子SVG发过去后，它消化得不太好，最终做了个简约版，生成了HTML。我替换占位符后的效果如下：

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

文本转视频

这次给了它一则英文新闻正文，按理说要求用reveal.js，但它还是用React生成了。之前觉得reveal幻灯片不错，现在发现React也挺好用。

提示词：

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

生成结果：

<iframe allowfullscreen="" frameborder="0" src="https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_3515893679322120205"></iframe>

这种方法可以用来批量生成快资讯视频——把视频上传给Gemini 1.5 Pro让它生成解说词，再转语音。也可以改成手动播放，控制每页展示时间。

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

对于编程新手来说，让Claude生成的React程序跑起来可能是个问题。这里还是推荐Replit。

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

1. 创建新的Repl：点击“Create Repl”，在语言中选择“React TypeScript”。

2. 设置项目：Replit会自动配置一个基本的React TypeScript项目结构。

3. 编写代码：在src文件夹中找到.tsx文件，可以编辑或新建。

4. 运行项目：点击顶部的“Run”按钮启动React应用。

5. 查看结果：Replit会在右侧打开预览窗口显示应用。

6. 实时更新：修改代码后，Replit会自动重新编译并更新预览。

在Claude里打开与模型对话生成的预览页面，如果直接下载代码，放在本地或Replit上可能会缺一些文件。比如下面两张图都是在Replit里运行相同程序，但前者缺少样式文件，显示效果差很多。

我是这样和Claude沟通的：要求它提供目录结构。当它把文件都提供后，也可以在Artifacts页面里查看生成的所有文件。我还让它提供一个项目运行指南，并将对话保存为md文件提供下载。之后按指南操作，在Replit里运行即可。

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