如何开启Claude3.5-Artifacts实时代码预览/渲染模式？

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 中，我可以使用具有指定尺寸的占位符图像。

Artifacts 官方视频演示

8MB

Claude官方演示视频1.mp4

Open

官方的视频演示展示了Claude 3.5强大的图片识别功能和Artifacts功能，生成了一份美观的HTML格式PPT幻灯片，并展示了Claude 3.5强大的数据分析能力。

视频过程

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的帮助表示感谢，并通过电子邮件将演示文稿发送给学生。

通过这个演示，我们可以看到Claude 3.5不仅能够进行复杂的数据处理和可视化，还能生成专业的演示文稿，为用户提供全面的支持和服务。