深入分享 Claude 3.5 Sonnet Artifacts 高级应用 | 附 Manim 与React 轻松上手指南
引言
继前三天分享了Claude 3.5 Sonnet 实测的内容后，今天是第四波分享。这次我尝试了一些稍复杂的应用。
往期内容：
分享 Claude 3.5 Sonnet 多个精彩使用案例：编程无敌，轻松制作动画和幻灯片，数据分析功能出色
多案例、实测（二） | Claude 3.5 Sonnet：会编程、懂设计、做动画、幻灯片也很容易
多案例、实测（三） | 分享 Claude3.5 Sonnet Artifacts 如何快速开发 10+ 小应用
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 实践：零基础也能制作酷炫动画 (qq.com)
Manim + ChatGPT 实战：模仿苹果 WWDC 动画效果我也看到一些用户反馈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文件，你可以按照以下步骤操作：
创建新的Repl：
点击 “Create Repl“
在语言选择中，搜索并选择 “React TypeScript“
设置项目：
Replit 会自动为你设置一个基本的 React TypeScript 项目结构。
编写代码：
在
src文件夹中，你可以找到.tsx文件你可以编辑现有的文件或创建新的
.tsx文件运行项目：
在 Replit 界面的顶部，你会看到一个 “Run“ 按钮
点击 “Run“ 按钮来启动你的 React 应用
查看结果：
Replit 会在右侧打开一个预览窗口，显示你的 React 应用
实时更新：
当你修改代码时，Replit 会自动重新编译并更新预览
在Claude里，打开和模型对话生成的预览页面，如果你直接下载对应的代码，实际上对于在本地或Replit上运行这个程序会不足的。比如下面两张图，都是在Replit里运行相同程序的结果，但前者因为缺少样式文件，所以显示效果欠佳。
我是这样和Claude交流的。
我要求它提供目录结构。
当你和它交流，它把文件都提供了后，也可以在Artifacts页面里查看它生成的文件。
我还让它提供了一个项目运行指南，将我和它的交流保存为md文件提供下载。
之后，你按照它的指南里的指示在Replit里操作即可。
最后，分享一个看到的不错的Tip：
结语
快体验Claude 3.5 Sonnet Artifacts，很有趣！
欢迎在评论区留言，让我们一起交流进步。
欢迎点赞、转发、收藏。
精选历史文章，请看这里：
Groq Whisper API 进阶：使用提示词精准控制转录风格和内容，结合 spaCy 实现精准分句
Open Interpreter 本地模型深度体验：功能升级，离 LLM OS 还有多远？
Google 新推出 AI 辅助工具，Data Science Agent 和 Code Transformation 值得一试