如何使用 Claude Artifacts 功能

掌握 Claude Artifacts 功能,在侧边栏即时预览并编辑代码、文档与网页原型。提升 AI 工作流效率的完整指南。

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

Related

  • 如何利用 AI 工具快速生成专业 Logo
  • 如何修复 Claude 无法正常使用的问题
  • 如何在 iPhone 上使用 Claude
  • 如何利用 Claude 高效审查法律合同
  • 如何使用 Claude 分析电子表格
  • Claude 使用指南:从入门到高效写作设置