如何使用 Claude Artifacts 功能
掌握 Claude Artifacts 功能,在侧边栏即时预览并编辑代码、文档与网页原型。提升 AI 工作流效率的完整指南。
- 激活 Artifacts 功能. 登录 Claude 网页版,点击左下角的个人头像,选择“Feature Preview”。确保“Artifacts”选项处于开启状态,以启用独立窗口渲染功能。
- 输入生成指令. 在聊天输入框中输入需要创建代码、文档或网页的指令,例如“创建一个带有计数器功能的 React 组件”或“撰写一份项目需求文档”。Claude 检测到内容符合要求时,会自动生成 Artifact 窗口。
- 查看 Artifact 独立视图. 生成后,屏幕右侧会出现一个独立的 Artifact 预览窗口。点击窗口底部的标签页切换,可以在“Code”代码视图和“Preview”实时预览视图之间快速切换。
- 进行即时迭代. 直接在右侧预览窗口中修改代码,或者在左侧对话框中输入修改意见,例如“将按钮颜色改为蓝色”。Claude 会更新右侧窗口的内容,并即时同步预览结果。
- 保存与导出项目. 点击 Artifact 窗口右上角的“Copy”按钮即可将内容复制到剪贴板,或点击“Download”将其导出为独立文件。历史记录会自动保存,以便后续在对话列表中重新查看。