Claude Artifacts：创建与导出AI生成代码的完整指南

Umbrabits · 2026年5月3日 · 1 分钟阅读

claudeartifactsguide

Anthropic 的 Claude 有一项绝大多数 AI 聊天机器人都不具备的功能：artifacts。这些是自包含的代码片段、HTML、React 组件、Mermaid 图表和 SVG 图形，它们会在聊天中以独立的可编辑单元实时渲染。

掌握 artifacts，Claude 就会变成一个强大的一次性原型引擎。使用不当，它们就只是花哨的代码块。以下是你需要了解的一切。

artifact 到底是什么

Anthropic 将 artifact 定义为“用户可能修改、迭代或带出对话的、实质性的、自包含的内容”。它们共有六种类型：

代码：Python、TypeScript、Rust、Go 等，带有完整的语法高亮。
Markdown 文档：长篇内容、报告和润色后的草稿。
HTML 页面：完整的单文件落地页、仪表盘和交互式原型。
React 组件：完全响应式、实时渲染的 UI 组件。
Mermaid 图表：流程图、ER 图和序列图，以内联 SVG 形式渲染。
SVG 图片：直接通过文本提示创建的矢量图形。

Claude 会根据内容的长度和自包含性自动判断何时应生成 artifact。想要更多控制权？直接说“把这个做成 artifact”或“把它创建成一个自包含的组件”。

为什么 artifact 对导出很重要

Artifact 拥有自己独特的生命周期：

它们独立于对话文本渲染。
你可以通过要求 Claude“迭代这个 artifact”来内联编辑它。
每个 artifact 在所有修订版本中保持稳定的标识符。

这就带来了一个导出挑战。 如果你的导出工具只是将对话转储为 Markdown，那么 artifact 要么 (a) 变成普通的代码块，失去交互形式，要么 (b) 完全消失。

成熟的导出工具会将 artifact 视为一等公民。

ChatExport AI 如何处理 artifact

ChatExport AI 提供三种不同的导出模式，每次导出时选择：

模式 1：内联（PDF 和 Word 的默认模式）

Artifact 内容直接嵌入对话记录中的原始位置。代码保持语法高亮。Mermaid 图表显示为嵌入的 SVG。HTML 页面显示为渲染截图。

最适合：与需要完整对话上下文的读者分享导出内容。

模式 2：单独文件（ZIP 和 Markdown 的默认模式）

每个 artifact 保存为独立的文件：

代码 → chat/<artifact-name>.py（或 .ts、.rs 等）
HTML → chat/<artifact-name>.html
React → chat/<artifact-name>.jsx
Mermaid → chat/<artifact-name>.mmd 加上 chat/<artifact-name>.svg
SVG → chat/<artifact-name>.svg

聊天记录通过相对文件路径链接到每个 artifact。

最适合：需要实际运行或修改代码的开发者。

模式 3：两者兼顾

ZIP 导出包含所有内容：一个用于阅读的内联聊天记录，以及用于执行代码的独立 artifact 文件。

最适合：长期归档。六个月后当你需要这两个视图时，你会感谢自己的。

artifact 注意事项

多次修订

当你迭代一个 artifact（比如“把按钮放大”），Claude 会原地更新它。之前的版本会从对话视图中消失，但可以通过 artifact 的历史面板访问。

ChatExport AI 在导出时会捕获每个 artifact 的当前版本。需要所有修订版本？在导出前让 Claude“展示 artifact 的 v1、v2、v3”，这样修订历史就会作为单独的代码块导出。

未完成的 artifact

在 Claude 生成过程中导出，你会得到一个不完整的 artifact。务必等待流式指示器完成后才导出。

React artifact 依赖

React artifact 可以从一个有限的许可列表中导入（React、通过类名的 Tailwind、lucide-react 图标）。导出会保留 JSX 源代码；任何本地运行它的人需要配置相同的依赖。

ChatExport AI 会在 ZIP 导出中为 React artifact 包含一个 README.md 文件，记录所需的依赖以及一个快速启动代码片段，展示如何搭建一个可以立即运行 artifact 的 Vite + React 项目。

Mermaid 图表离线渲染

导出的 Mermaid 图表（SVG 格式）是完全自包含的，你可以在任何浏览器中打开它，无需联网。.mmd 源文件允许你稍后编辑并重新渲染图表。

工作流：从 Claude 原型到上线代码

以下是最快的工作流：

让 Claude 把你的原型构建为一个 React artifact。内联迭代 2-3 次直到满意。
将对话导出为 ZIP。 聊天记录记录了你的设计思路；artifact 文件可以直接运行。
将 artifact 导入到生产环境的 Vite 项目中。 安装所列的依赖。组件无需修改即可运行。
用正确的 JSDoc 替换提示风格的注释。 添加测试。部署。

从初始提示到本地运行的总时间：大约 5 分钟。导出过程弥合了“Claude 构建了这个”和“这个已存在于我的仓库中”之间的差距。

试试看

打开 Claude。让它“给我构建一个自包含的 HTML 页面，里面有一个 Mermaid 图表展示用户注册流程。”当 artifact 渲染出来后，通过 ChatExport AI 将对话导出为 ZIP。你的 ZIP 文件包含完整的聊天记录，以及一个独立的 .html 文件、.mmd 源文件和渲染后的 .svg 文件。

这就是完整的 Claude artifact 工作流。