Anthropic 的 Claude 具备大多数 AI 聊天机器人没有的功能：制品。它们是独立的代码、HTML、React 组件、Mermaid 图表和 SVG，会在聊天中以内联方式作为独立单元呈现。
用好了，Claude 就成了一个一站式的原型制作工具。用不好，它们就是升级版的代码块。以下是完整指南。
制品到底是什么
根据 Anthropic 的文档，制品是指“用户可能会修改、迭代或在对话之外使用的实质性、自包含的内容。” 实际上，它们涵盖六种类型：
- 代码 — Python、TypeScript、Rust、Go 等，带有语法高亮。
- Markdown 文档 — 长篇散文、报告、草稿。
- HTML 页面 — 单文件着陆页、仪表盘、原型。
- React 组件 — 实时渲染的组件，具有完整的响应能力。
- Mermaid 图表 — 流程图、ER 图、序列图，以内联 SVG 的方式渲染。
- SVG 图像 — 根据提示生成的矢量图形。
Claude 会根据内容的长度和自包含性来决定何时将某物制作为制品。你可以通过说“把这个做成制品”或“作为一个独立组件”来引导它的决定。
为什么制品对导出很重要
制品有它自己的生命周期：
- 它独立于对话散文进行渲染。
- 你可以内联编辑它（让 Claude“迭代这个制品”）。
- 它在多次编辑中有一个稳定的标识符。
这让导出变得棘手。 如果你的导出工具只是将对话转储为 Markdown，那么制品会以 (a) 内联代码块的形式出现，失去可渲染的形式，或者 (b) 完全丢失。
好的导出工具会将制品视为一等公民。
ChatExport AI 如何处理制品
三种模式，按导出选择：
模式 1：内联（PDF、Word 的默认模式）
制品内容被内联到对话记录中，位于它出现的位置。代码保留语法高亮。Mermaid 图表渲染为嵌入的 SVG。HTML 页面渲染为渲染页面的截图。
最适合：将导出内容交给只想阅读对话的人。
模式 2：独立文件（ZIP、Markdown 的默认模式）
制品保存为独立文件：
- 代码 →
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
记录中的每个制品通过相对链接引用。
最适合：将制品交给想要运行/修改代码的开发者。
模式 3：两者兼有
ZIP 模式包含两者：内联的记录供阅读，制品作为独立文件供运行。
最适合：归档。六个月后你会庆幸保留了两种视角。
制品注意事项
多个修订版本
如果你在制品上迭代（“把按钮变大”），Claude 会就地更新制品。旧版本从对话视图中消失，但可以通过制品的历史面板找回。
ChatExport AI 在导出时捕获每个制品的当前版本。如果你想要所有修订版本，在导出前让 Claude“展示制品的 v1、v2、v3”；修订历史随后会作为独立的代码块导出。
未完成的制品
如果在你点击导出时 Claude 还在输出，部分制品会按原样包含进去。等待流式指示器结束再导出。
React 制品依赖
React 制品可以从一个小的白名单中 import（React、通过类名的 Tailwind、lucide-react 图标）。导出会捕获 JSX 源码；消费者需要设置相同的依赖才能本地运行。
ChatExport AI 的导出在 ZIP 中为 React 制品包含一个 README.md，注明所需依赖，并附有一个片段展示如何搭建一个能运行该制品的 Vite + React 项目。
Mermaid 图表离线渲染
Mermaid 图表的 SVG 导出是完全自包含的——在任何浏览器中打开，无需网络。.mmd 源码导出让你可以日后编辑和重新渲染。
工作流：从 Claude 原型到已发货的代码
对我最有效的工作流如下：
- 提示 Claude 将原型构建为 React 制品。内联迭代 2–3 次。
- 将对话导出为 ZIP。记录解释了设计决策；制品文件是可运行的。
- 将制品放入真实的 Vite 项目。添加列出的依赖。组件在项目中按原样运行。
- 将提示风格的自然语言注释替换为真正的 JSDoc。添加测试。发布。
从提示到本地运行的总时间：约 5 分钟。导出是加快速度的关键——它是“Claude 构建了这个”和“这个在我的仓库里”之间的桥梁。
试试看
打开 Claude。让它“给我构建一个自包含的 HTML 页面，内容是用户注册流程的 Mermaid 图表”。当制品渲染后，通过 ChatExport AI 将对话导出为 ZIP。ZIP 中包含记录、一个独立 .html、.mmd 源码以及渲染后的 .svg。
这就是完整的 Claude 制品工作流。
相关
- Claude 导出指南。
- Claude 转 Markdown — 仅 Markdown 流程，制品作为独立文件。
- 面向开发者 — 保留代码本真的 AI 导出工作流。