Artifacts 预览

Artifacts 提供 AI 生成内容的丰富交互式预览。

什么是 Artifacts？

当 AI 生成特定类型的内容时，Alma 可以将其渲染为可视化预览：

• HTML 页面
• React 应用
• SVG 图形
• Mermaid 图表
• Markdown 文档

使用 Artifacts

自动检测

当 AI 创建支持的内容类型时，预览会自动出现。

查看预览

点击 Artifact 卡片展开预览面板。

全屏模式

点击展开图标进入全屏视图。

下载

点击下载图标保存 Artifact 到本地。

支持的类型

HTML

完整的 HTML 页面，支持：

• CSS 样式
• JavaScript 交互
• 外部资源

React

React 应用，支持：

• JSX 语法
• Hooks
• 状态管理

SVG

矢量图形：

• 图表
• 图标
• 插画

Mermaid

图表和可视化：

• 流程图
• 时序图
• 类图
• 状态图

示例请求

创建一个简单的 React 计数器应用

用 Mermaid 画一个用户注册流程图

设计一个 SVG 加载动画

最佳实践

1. 具体描述：清晰描述你想要的内容
2. 迭代改进：要求 AI 修改和完善
3. 下载保存：下载有用的 Artifacts
4. 复制代码：获取代码在项目中使用