--- title: "Claude Artifacts 功能详解：对话中直接预览网页和图表" description: "讲清 Artifacts 何时触发、适合做哪四类产出、怎么迭代，以及它在后端、数据和复杂项目上的边界。" updated: 2026-11-13 canonical: https://docai.cc/learn/claude-artifacts-explained/ markdown_mirror: https://docai.cc/learn/claude-artifacts-explained.md --- ## 它省掉的是复制粘贴 平时让 Claude 写一个网页，结果是一段代码，你还得复制到编辑器、保存、打开浏览器。预览面板把这一步搬进对话：生成的页面、图表、文档出现在侧边，直接看效果、直接改。 它适合「看一眼效果」的阶段，不适合当成完整的开发环境。 ## 哪些内容会进面板 当输出是一份完整、自包含的文件时，Claude 往往会自动放进预览面板：单个 HTML 页面、React 组件、SVG 图形、较长的 MD 文档。你也可以明确要求「在面板里展示」。 关键在自包含：样式和脚本尽量在同一份文件里，不依赖本地服务，不连接数据库。需要多个文件互相引用的项目，面板放不下。 ## 四类常用产出 页面原型。把用途、屏幕宽度、内容区块写清楚： ``` 在预览面板里做一个活动报名页，移动端优先，宽度按 375px 设计。 内容：活动名称、时间地点、两句介绍、报名按钮。 风格：暖色、留白多、标题稍大。 只用一个 HTML 文件，样式写在 style 里，不要外部图片。 ``` 图表。指定图表库、数据、坐标轴和交互： ``` 基于 Chart.js 画一周专注时长柱状图：周一 2.5 小时、周二 3 小时、周三 1.5 小时、周四 4 小时、周五 2 小时。 要求：有标题和纵轴单位，悬停显示具体数值，浅色背景，单文件。 ``` 小工具与文档模板同样适用：倒计时、单位换算、周报模板、需求文档骨架。判断标准只有一个——浏览器里能独立运行，或能独立阅读。 ## 怎么迭代 小改样式，一次只提一处，改完立刻看预览；如果你的界面提供面板内编辑，可以直接在预览里改，否则回到对话里说明位置。改结构或加功能，先说清要动哪一块再让它重写。每次只改一件事，比攒一堆要求一次生成更容易定位问题。 描述页面时按「用途—读者—内容—限制」四段写，比一句「做个好看的页面」有效。所谓好看无法验收，而「移动端、暖色、标题 28px、按钮在底部」可以。 大改之前先复制一份代码留底。面板里的历史版本不一定随时可取，自己留一份最稳。提示词写得越具体，返工越少，基本方法见[什么是提示词](/concepts/prompt/)。 ### 一个完整的三轮往返 从一句需求到可用页面，通常三个来回：第一轮生成骨架，确认区块和文案；第二轮补样式，调整间距、字号和颜色；第三轮处理交互，比如按钮状态、表单校验。每一轮只提一类修改，模型更容易改对，你也更容易看出哪一步引入了问题。 三轮改完先停一下，判断要不要搬走：如果下一步要接真实接口、保存数据，或者拆成多个文件互相引用，就已经超出面板的范围。做法是继续用假数据把布局和交互验证完，再把代码复制进本地项目补逻辑，而不是在面板里硬接服务端。 ## 它的边界 面板运行在浏览器里，没有后端，也没有真实的数据库和接口。`fetch('/api/...')` 这类同源请求没有服务器接应，会直接失败；即使请求发得出去，密钥也会暴露在源码里。登录、支付、写库这些动作同理，只能先在本地或测试环境验证。 预览通过，不等于上线通过。不同浏览器、真实数据量、网络条件都会改变表现。复杂项目最终还是要在本地环境里开发和测试。 另外，贴进面板的内容同样会进入对话，涉及真实用户数据时先脱敏。 ### 预览里也要检查 面板里能点、能滚动，不代表结构正确。检查三件事：窄屏下有没有横向溢出、键盘能否操作按钮、文案换行后是否挤压布局。这些在预览里都能试。 面板适合验证想法，不适合沉淀代码。确认方向后，把代码复制回项目，接上真实数据和构建流程，才算进入开发。 ## 不出现在面板里，怎么排查 最常见的三种失败，症状和原因并不一样： - **只回了代码，面板没出现。** 说明模型把它当成片段而不是完整文件。把要求改成「输出一个完整的 HTML 文件，用面板展示」，并检查代码里有没有多余的解释文字。 - **面板一片空白。** 通常是第一行脚本就报错，或者引用了加载不到的外部库。打开浏览器控制台，先看第一条错误；把外部依赖去掉，往往立刻恢复。 - **改完一处，整页错位。** 原因是尺寸写死：固定宽度、绝对定位、固定高度。改成弹性布局和百分比，再在窄屏下复查。 如果试了这三步仍旧空白，就把代码复制到本地保存成 `.html` 再打开。本地能跑、面板不能跑，多半是面板环境限制；两边都不能跑，问题在代码本身。排除输入问题的方法见[新手最容易犯的六个错误](/learn/first-chat-common-mistakes/)。 ## 自测 1. 你的产出是不是单文件、能独立运行？ 2. 改样式和改结构，分别该在哪里动手？ 3. 哪些需求注定超出这个面板的范围？ 这个功能把「写出来」变成「看得见」，但验证仍要你自己完成。下一节把产物变成可下载的文件：[生成可下载的代码和文档](/learn/downloadable-code-and-docs/)。