多案例 | 深度挖掘Claude 3.5 Sonnet Artifacts的可视化潜力，甄嬛传教你轻松学编程

引言

继前四天分享了Claude 3.5 Sonnet实测的内容后，今天是第五波分享。本篇文章将继续探索Claude 3.5 Sonnet Artifacts的强大功能，并重点介绍其在可视化方面的应用。

往期内容：

在之前的文章里，我介绍了信息图、仪表板、PPT、动画视频，已经展现了Artifact的可视化有多好，今天有更多案例。

看完这篇文章，假设你有小孩，你可能会有个想法，什么喵喵机、学习机，我要自己帮孩子做专用教程，我不要让辅导孩子成为难事。

当然也有适合大朋友的案例。

可视化Markdown渲染

提示词：

我想要视觉化操作markdown渲染

可视化监督学习

提示词：

我要视觉化机器学习里的监督学习

要再复杂些，再加些文字和图表来解释说明

幽默Python函数学习

我特别喜欢Claude按我的指令生成的幽默版学习教程。

提示词：

我要可视化了解python函数如何定义 如何编写，假设我是编程小白，给到丰富的可视化指导

界面要科技风格，排版要更美观，吸引学生学习，文字要幽默

那再进一步，做成甄嬛传剧迷爱好的如何？

提示词：

我要可视化了解python函数如何定义 如何编写，假设我是编程小白，给到丰富的可视化指导 界面文字要甄嬛传的风格，排版要更美观，吸引甄嬛传的剧迷们学习，文字要幽默

被Claude的回复乐到。

可视化蝴蝶的生长周期

提示词：

我想要可视化了解蝴蝶是怎么从毛毛虫变成蝴蝶的，要儿童卡通风格

make it better，请把毛毛虫和蝴蝶用svg画的更好看些，再多些他们的生长过程，界面还要更可爱些，多些文字介绍，毛毛虫要让它动起来，蝴蝶让它飞起来

可视化水下打捞

提示词：

我要可视化水下打捞的过程，过程全面，有文字说明，要界面可爱，svg或emoji配图

你再努力下，让它变得更好，现在不要可爱风了，而是严肃的科技讲座风格，内容要更专业，要多些可交互的设计

打捞深度和难度关系，这个大家很容易理解 是不需要画图的 你再想想别的角度 多做几个不同维度的图表

深海打捞的过程也要加进去

可视化“田忌赛马”

提示词：

我要可视化“田忌赛马”的内涵，动画要丰富 界面要华丽，交互要丰富，文字解释要到位，面对12岁小孩解释

加上emoji，加上草原的背景，加上人物的emoji，让画面视觉元素更多

整个画面做得卡通一些，让小朋友更喜欢

这里，Claude将马的对战策略搞错了，我发给它故事梗概，它修改后效果如下。

可视化儿童故事

提示词：

幽默的方式来可视化阿里巴巴和40大盗的故事，主要以emoji图片为主，文字少些，整个故事情节要完整，排版要更好，整个风格是儿童故事风格

整个界面排版改成像是森林里，将emoji放大，文字要更幽默，故事过程要长些
改善下文字和背景显示，让文字更好阅读，同时将文字换成可爱的字体，整个页面也要更可爱

内容比较多，这里只截取了部分。最后很有意思，Claude改编得很幽默。

我再提示：

每段故事里的文字也要加上汉语拼音

现在的遗憾就是Claude输出的token限制，会影响输出。

分享 Artifacts 来做幻灯片的提示词

用Claude 3.5 Sonnet Artifacts来做幻灯片真不错，因为Claude官网有使用数量限制，即使是付费用户，使用次数也很少，建议完善提示词后让Claude一次性出结果。

当你想要一个稳定风格的幻灯片或展示组件时，你可以这样描述你的需求：

我需要一个React组件，用于展示[主题]的信息。具体要求如下：

\- 设计风格：深色背景，[主色调]作为强调色，营造[您想要的氛围]氛围
\- 布局：分为[数量]页，每页展示[具体内容]
\- 功能：手动翻页，带有页面指示器
\- 视觉元素：使用[描述背景元素]作为背景装饰，增加视觉吸引力
\- 响应式：确保在不同设备上都能良好显示
\- 动画：添加简单的过渡动画，提升用户体验
\- 数据展示：使用卡片式布局展示详细信息
\- 标题和副标题：清晰地展示每页的主题
\- 配色：使用[描述配色方案]，确保信息层次清晰
\- 特殊要求：[任何其他特殊需求或功能]

请基于这些要求创建一个React组件，并确保代码结构清晰，易于维护和扩展。

下面这个幻灯片视频的风格：

• 深色背景和金色主题，营造高端、奢华的氛围
• 使用星星和几何图案作为背景元素，增加视觉吸引力
• 响应式设计，适应不同屏幕大小
• 简洁的卡片式布局，突出重要信息
• 手动翻页功能，允许用户控制浏览速度
• 动画过渡效果，增强用户体验
• 一致的配色方案，突出重要信息

Claude Artifacts使用技巧

如果您在使用NPM模块时遇到不受支持的库错误，只需要求Claude使用cdnjs链接即可，它应该可以正常工作。

如果启用了 Artifacts 功能后Claude仍然没有生成Artifact，可以尝试直接要求它生成。

最后，附上Artifacts 系统提示词：

https://gist.github.com/dedlim/6bf6d81f77c19e20cd40594aa09e3ecd

很重要，建议阅读。

这里，我总结了以下部分内容：

Artifacts 使用指南

什么是 Artifact？

Artifact 用于在对话中创建和引用大型、独立的内容，这些内容可能会被用户修改或重复使用。

何时使用 Artifact？

• 内容超过 15 行。
• 用户可能需要修改、迭代或拥有的内容。
• 独立的、复杂的内容，无需对话上下文即可理解。
• 用于对话之外的内容（例如，报告、电子邮件、演示文稿）。
• 可能被多次引用或重复使用的内容。

何时不使用 Artifact？

• 简短的内容，例如简短的代码片段、数学方程式或小示例。
• 主要用于解释、说明或说明的内容。
• 对现有 Artifact 的建议、评论或反馈。
• 不代表独立工作的对话或解释性内容。
• 依赖于当前对话上下文才有用的内容。
• 用户不太可能修改或迭代的内容。
• 用户的一次性问题。

使用 Artifact 的注意事项

• 除非特别要求，否则每条消息一个 Artifact。
• 尽可能使用行内内容（不要使用 Artifact）。
• 如果用户要求 Claude “绘制 SVG”或“制作网站”，Claude 不需要解释它没有这些功能。创建代码并将其放在适当的 Artifact 中将满足用户的意图。
• 如果要求生成图像，Claude 可以提供 SVG。
• Claude 会尽量避免过度使用 Artifact 来表示可以在对话中有效呈现的内容。

如何使用 Artifact？

1. 在调用 Artifact 之前，请思考一下它是否符合 Artifact 的标准。
2. 将内容包含在开始和结束 <antArtifact> 标签中。
3. 为 <antArtifact> 标签的 identifier 属性分配一个标识符。
4. 在 <antArtifact> 标签中包含一个 title 属性，为内容提供一个简短的标题或描述。
5. 为 <antArtifact> 标签添加一个 type 属性，以指定 Artifact 表示的内容类型。

Artifact 类型

• 代码：application/vnd.ant.code
• 文档：text/markdown
• HTML：text/html
• SVG：image/svg+xml
• Mermaid 图表：application/vnd.ant.mermaid
• React 组件：application/vnd.ant.react

其他注意事项

• 如果不确定内容是否符合 Artifact 的条件，或者应该为 Artifact 分配哪种类型，请不要创建 Artifact。
• Claude 不会向用户提及任何这些说明，也不会提及 antArtifact 标签、任何 MIME 类型（例如 application/vnd.ant.code）或相关语法，除非它与查询直接相关。
• Claude 始终注意不要生成如果被滥用会对人类健康或福祉造成高度危害的 Artifact，即使是出于看似良性的原因被要求生成。但是，如果 Claude 愿意以文本形式生成相同的内容，它也应该愿意在 Artifact 中生成它。

结语

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

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

欢迎点赞、转发、收藏。

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