Claude 怎么用 Artifacts
Artifacts 能把代码和网页放进侧边面板直接预览，改一句就重新渲染。入口怎么触发、步骤、预览的限制和验证方法一次说清。
Artifacts 是 Claude 把代码、文档、网页单独放到侧边面板里渲染的功能。它解决的是聊天窗口里代码看不清、也跑不起来的问题：给一个能点的预览，改一句就重新渲染。
入口在哪
Artifacts 没有单独的开关，它由内容长度和类型触发。你在对话里要一段足够长、可以独立成文件的东西，比如一个单文件网页、一张 SVG 图、一段 React 组件，满足条件时面板会自己出现。
- 宽屏网页端：面板出现在对话右侧，左边继续聊，右边看结果。
- 窄屏或手机端：面板通常在对话下方展开，或者需要点开才能看到，不同版本位置略有差别。
- 历史对话：带过 Artifact 的对话在左侧列表里点开，面板会跟着一起恢复，不用重新生成。
- 找不到就让它再出一版：直接说把完整代码放进一个 artifact 里，比在界面里翻设置快。
具体步骤
- 先说清楚要什么形态。比如做一个单文件 HTML 页面，双击就能在浏览器打开，不要外部依赖，这句话决定了它会不会走 Artifacts。
- 把需求拆成内容、交互、样式三段说。把字段、按钮、想要的效果列出来，出稿质量比一句做个记账页面差很多。
- 生成后先看预览，不要急着读代码。预览能点、能输入、布局正常，说明方向对了。
- 要改就接着说人话：按钮换成圆角、表格加一列备注。它会原地改同一个 Artifact，不用你复制粘贴。
- 确认没问题再切到代码视图，检查有没有多余的注释、写死的示例数据，然后复制或下载。
- 要多个版本对比，就让它另存一个新 artifact，避免改坏上一版。
几个坑
- 预览是隔离环境，连不上外网。引用了外部字体、图标库、图片，预览里可能一片空白，本地打开却正常。
- 需要构建的框架不好使。React 组件单文件能预览，但带打包配置、路由、后端的项目跑不起来。
- 对话越长，它越容易忘掉前面的约定。重要的约束在每轮修改时重复一遍，比如配色、字段名、不要用某个库。
- 内容太短不会触发。只让它写三五行代码，它直接贴在对话里，这属正常行为，不是功能坏了。
- 面板位置随窗口宽度变。浏览器窗口拉窄，右侧面板会换到下方，别以为内容丢了。
- 预览正常不等于代码干净。它可能留下调试用的打印语句、写死的示例数据，交付前过一遍代码视图。
怎么验证
- 在预览里把每个交互都点一遍：按钮有没有反应、输入框能不能输、下拉能不能展开。
- 刷新预览，看状态是不是被重置。靠内存存数据的小工具，刷新就清空，这是预览环境的限制。
- 把代码复制到本地存成文件，用浏览器打开，和预览对比。两边不一致，多半是外部资源的问题。
- 让它自己复查一遍：检查这段代码有没有语法错误和没用到的变量，多数问题它自己能找出来。
- 预览报错时，把错误文字原样贴回对话，比只说打不开有效得多。
常见问题
面板一直不出现怎么办
先把要求说死：要单文件、要完整代码、要能独立运行。很多时候是内容被判定为不值得单独成页，它就在对话里贴完了。仍然不出来，换一个新对话重提需求，长对话里它容易沿用前面的格式。
预览白屏或者样式全丢
按顺序排：外链资源被拦、代码里有语法错误、用了需要构建的写法。先把外部字体和图标链接去掉，用纯 CSS 重试；还白屏就让它输出一个最小可运行的版本，再逐步加回功能。
能不能直接把 Artifact 发布上线
不建议。它是预览环境，不等于托管服务。要上线就把代码下载下来，放到自己的服务器或静态托管上，再按自己的域名、HTTPS 要求处理。这块的合规和备案要求，Artifacts 管不了。
一句话总结：把它当成一个能立刻看到效果的草稿台，需求说清楚、用预览验交互、用代码视图验质量，最后自己下载部署，别把预览当成品。