Artifacts

LobeHub 支持 Claude 风格的 Artifacts：当 AI 生成内容较为完整且自包含时，会自动在屏幕右侧打开专属预览面板。你无需从聊天气泡中复制代码，可以直接在面板中交互、迭代并导出结果。

什么是 Artifacts？

Artifacts 是 AI 生成的、值得拥有独立展示空间的内容。它们在分屏面板中显示，你可以：

查看生成内容的实时预览
与应用程序和可视化内容实时交互
通过对话方式迭代优化输出
导出或复制最终结果

符合 Artifacts 条件的内容：

内容量较多（超过几行代码或文本）
自包含且功能完整
你希望反复迭代或复用的内容
适合实时预览的内容

不需要 Artifacts 的内容：

简短的代码片段或示例
简单的文字回答
解释性文本

支持的 Artifacts 类型

SVG 图形

创建可缩放的矢量图形和图表：数据图表、流程图、图标、信息图以及数据可视化内容。

示例提示：

"创建一个展示软件开发生命周期的 SVG 图表"
"生成一个显示市场份额分布的饼图"

导出选项：下载 SVG、下载 PNG、复制为图片。

React 组件

构建可在浏览器中直接运行的交互式 React 应用：计算器、数据仪表盘、小型 Web 应用、UI 原型。

示例提示：

"用 React 创建一个房贷计算器"
"构建一个交互式待办事项应用"
"做一个打字速度测试游戏"

功能：完整的 React Hooks 支持、实时状态管理、响应式布局。

HTML 页面

生成完整的、带样式的 HTML 页面：落地页、邮件模板、简单网页、格式化报告。

示例提示：

"为健身应用创建一个产品落地页"
"设计一个 HTML 邮件通讯模板"

Mermaid 图表

创建专业图表：流程图、时序图、类图、状态图、甘特图、ER 图、Git 图。

示例提示：

"创建用户认证流程的时序图"
"绘制订单处理工作流的流程图"

代码文件

生成独立的代码文件：Python、JavaScript/TypeScript、Shell 脚本、配置文件（JSON、YAML）等。

示例提示：

"编写一个分析 CSV 数据的 Python 脚本"
"生成一个 GitHub Actions 工作流配置文件"

功能：语法高亮、一键复制、代码与预览并排显示。

使用 Artifacts

触发 Artifacts 创建

只需要求 AI 创建较完整的独立内容：

"创建一个 React 计算器应用"
"生成一个展示季度销售额的 SVG 图表"
"构建一个关键事件的交互式时间轴"
"为一家咖啡馆设计一个落地页"

当 AI 判断输出内容较为完整且自包含时，会自动生成 Artifacts。

查看与交互

Artifacts 创建后，预览面板自动在右侧弹出：

预览模式 — 显示渲染后的输出。交互式应用实时运行，SVG 图形以完整质量显示，HTML 页面完整渲染。
代码模式 — 显示带语法高亮的源代码。适合复制代码到项目中或了解实现细节。

使用面板顶部的切换按钮在两种模式之间切换。

对话式迭代

继续聊天即可完善任何 Artifacts：

"添加一个深色模式切换"
"使图表在移动端自适应"
"将配色方案改为蓝绿色"
"为表单添加错误处理"

每次更新都会实时应用 —— 你可以在预览面板中立即看到变化。

导出

根据 Artifacts 类型，可以：

复制代码 — 将完整源代码复制到剪贴板
下载 SVG — 保存为 .svg 文件
下载 PNG — 导出为图片
复制为图片 — 将渲染输出复制到剪贴板
保存 HTML — 下载完整网页

使用场景

快速原型验证 — 无需编写代码即可构建和测试想法：UI 模型、计算器、转换工具、表单验证演示。实时迭代，然后导出到项目中。

数据可视化 — 将原始数据转化为图表和仪表盘。分享数据或描述数据，请求图表，自定义后导出用于演示或报告。

学习与教育 — 创建交互式算法可视化、分步演示和练习题。非常适合教师制作教学材料。

设计创意 — 生成 Logo 概念、图标集、图表和装饰元素。下载 SVG 在设计工具中进一步编辑。

使用技巧

具体描述需求 — 详细的提示词会产出更好的 Artifacts。提前指定颜色、布局、功能和特性，而不是要求笼统的输出。

分步迭代 — 每次只做一个改动，保持 Artifacts 的稳定性。同时做大量改动可能引入 Bug。

测试交互性 — 对于交互式 Artifacts（React 应用、表单），在导出前测试所有功能，并针对特定边界情况请求修复。

善用两种模式 — 在预览模式和代码模式之间切换，同时了解视觉效果和实现细节。

保存满意的结果 — 复制或下载你想保留的 Artifacts。它们会保存在对话历史中，但单独保存会更便于访问。

<Callout type={'warning'}> Artifacts 在沙盒环境中运行以保障安全。需要外部 API 调用或敏感浏览器权限的功能可能在预览面板中无法正常工作。 </Callout>

<Callout type={'info'}> 并非所有模型都支持 Artifacts。Claude 系列模型是 Artifacts 生成的主要来源。复杂的 Artifacts 可能需要片刻时间完整渲染。 </Callout>