Claude Artifacts 功能详解：对话中直接预览网页和图表

它省掉的是复制粘贴

平时让 Claude 写一个网页，结果是一段代码，你还得复制到编辑器、保存、打开浏览器。预览面板把这一步搬进对话：生成的页面、图表、文档出现在侧边，直接看效果、直接改。

它适合「看一眼效果」的阶段，不适合当成完整的开发环境。

哪些内容会进面板

当输出是一份完整、自包含的文件时，Claude 往往会自动放进预览面板：单个 HTML 页面、React 组件、SVG 图形、较长的 MD 文档。你也可以明确要求「在面板里展示」。

关键在自包含：样式和脚本尽量在同一份文件里，不依赖本地服务，不连接数据库。需要多个文件互相引用的项目，面板放不下。

四类常用产出

页面原型。把用途、屏幕宽度、内容区块写清楚：

在预览面板里做一个活动报名页，移动端优先，宽度按 375px 设计。
内容：活动名称、时间地点、两句介绍、报名按钮。
风格：暖色、留白多、标题稍大。
只用一个 HTML 文件，样式写在 style 里，不要外部图片。

图表。指定图表库、数据、坐标轴和交互：

基于 Chart.js 画一周专注时长柱状图：周一 2.5 小时、周二 3 小时、周三 1.5 小时、周四 4 小时、周五 2 小时。
要求：有标题和纵轴单位，悬停显示具体数值，浅色背景，单文件。

小工具与文档模板同样适用：倒计时、单位换算、周报模板、需求文档骨架。判断标准只有一个——浏览器里能独立运行，或能独立阅读。

怎么迭代

小改样式，一次只提一处，改完立刻看预览；如果你的界面提供面板内编辑，可以直接在预览里改，否则回到对话里说明位置。改结构或加功能，先说清要动哪一块再让它重写。每次只改一件事，比攒一堆要求一次生成更容易定位问题。

描述页面时按「用途—读者—内容—限制」四段写，比一句「做个好看的页面」有效。所谓好看无法验收，而「移动端、暖色、标题 28px、按钮在底部」可以。

大改之前先复制一份代码留底。面板里的历史版本不一定随时可取，自己留一份最稳。提示词写得越具体，返工越少，基本方法见什么是提示词。

一个完整的三轮往返

从一句需求到可用页面，通常三个来回：第一轮生成骨架，确认区块和文案；第二轮补样式，调整间距、字号和颜色；第三轮处理交互，比如按钮状态、表单校验。每一轮只提一类修改，模型更容易改对，你也更容易看出哪一步引入了问题。

三轮改完先停一下，判断要不要搬走：如果下一步要接真实接口、保存数据，或者拆成多个文件互相引用，就已经超出面板的范围。做法是继续用假数据把布局和交互验证完，再把代码复制进本地项目补逻辑，而不是在面板里硬接服务端。

它的边界

面板运行在浏览器里，没有后端，也没有真实的数据库和接口。fetch('/api/...') 这类同源请求没有服务器接应，会直接失败；即使请求发得出去，密钥也会暴露在源码里。登录、支付、写库这些动作同理，只能先在本地或测试环境验证。

预览通过，不等于上线通过。不同浏览器、真实数据量、网络条件都会改变表现。复杂项目最终还是要在本地环境里开发和测试。

另外，贴进面板的内容同样会进入对话，涉及真实用户数据时先脱敏。

预览里也要检查

面板里能点、能滚动，不代表结构正确。检查三件事：窄屏下有没有横向溢出、键盘能否操作按钮、文案换行后是否挤压布局。这些在预览里都能试。

面板适合验证想法，不适合沉淀代码。确认方向后，把代码复制回项目，接上真实数据和构建流程，才算进入开发。

不出现在面板里，怎么排查

最常见的三种失败，症状和原因并不一样：

• 只回了代码，面板没出现。 说明模型把它当成片段而不是完整文件。把要求改成「输出一个完整的 HTML 文件，用面板展示」，并检查代码里有没有多余的解释文字。
• 面板一片空白。 通常是第一行脚本就报错，或者引用了加载不到的外部库。打开浏览器控制台，先看第一条错误；把外部依赖去掉，往往立刻恢复。
• 改完一处，整页错位。 原因是尺寸写死：固定宽度、绝对定位、固定高度。改成弹性布局和百分比，再在窄屏下复查。

如果试了这三步仍旧空白，就把代码复制到本地保存成 .html 再打开。本地能跑、面板不能跑，多半是面板环境限制；两边都不能跑，问题在代码本身。排除输入问题的方法见新手最容易犯的六个错误。

自测

1. 你的产出是不是单文件、能独立运行？
2. 改样式和改结构，分别该在哪里动手？
3. 哪些需求注定超出这个面板的范围？

这个功能把「写出来」变成「看得见」，但验证仍要你自己完成。下一节把产物变成可下载的文件：生成可下载的代码和文档。