开启 3 天免费试用
注册即可免费体验全部高级功能。
*仅限新用户；每位用户只能获得一次试用。
如何使用 Claude Artifacts 构建并修订原型
Olivia Park
2026年9月4日· 更新于 2026年9月5日· 8 分钟阅读
要使用 Claude Artifacts 制作原型，先定义一个可测试的用户路径，再要求最小可运行切片，同时检查预览与代码，并按书面验收矩阵逐轮修订。Artifact 能让想法变成可交互页面，但预览能运行并不证明设计已经安全、准确、无障碍、易维护或适合生产。［1］
本文使用不含真实员工资料的“会议成本估算器”合成示例。基础功能可先看Claude 入门指南，更通用的任务边界见实用 AI 工作框架。
开始前请确认已经启用 Code execution and file creation。Anthropic 当前指引 Free、Pro 和 Max 用户前往 Settings > Capabilities，Team 和 Enterprise 则由组织所有者管理同一能力。菜单名称和可用性可能变化，应以实际操作日界面为准。［1］
关键要点
- 让 Claude 开始构建前先写 brief 和非目标。
- 第一个 Artifact 只实现一条完整用户路径。
- 人工测试正常、边界、失败、恢复和无障碍场景。
- 同时检查代码和表现，漂亮预览可能隐藏脆弱逻辑。
- 每轮只改变一个变量并记录原因。
- 分享前确认版本、受众和关联附件。
- 生产软件必须在真实仓库中重建和审核。
什么时候适合使用 Claude Artifacts 做原型？
好原型用较低成本回答一个具体问题：用户能否理解流程，计算解释是否清楚，或交互顺序是否自然。它不应冒充生产可靠性证明。
Anthropic 将 Artifacts 描述为显示在独立工作区的实质性、自包含内容，包括代码、文档、图表和交互组件。Claude 可以在对话中更新 Artifact，用户也能查看不同版本。［1］ 这适合受控探索，前提是测试问题始终不变。
| 要回答的问题 | 可用 Artifact | 不能由它证明 |
|---|---|---|
| 用户能否完成一条路径 | 小型交互界面 | 大规模生产可用性 |
| 概念是否易懂 | 图解或说明页 | 未经审核的技术正确性 |
| 计算布局是否清晰 | 使用合成数据的计算器 | 每类输入和地区都正确 |
| 文案层级是否合理 | 可点击内容模型 | 品牌、法律或无障碍批准 |
| 数据视图能否支持讨论 | 合成图表 | 私有数据是否真实准确 |
更一般的代码边界见用 AI 处理编程任务的指南。
怎样写原型 brief？
先在聊天外写 brief，指定一个用户、一个问题、一条成功路径、明确非目标和接受修订所需证据。
原型：会议成本估算器
用户：准备内部议程的主持人
问题：用户能否在排会前理解成本？
输入：人数、分钟数、合成时薪
输出：估算结果和自然语言计算过程
成功：只用键盘即可完成，错误输入有明确反馈
非目标：认证、存储、薪资集成、分析和部署
数据规则：只用合成值，不含姓名和薪资记录
可以说明目标视口和交互限制，但不必预先规定完整生产技术栈。让 Claude 先列出歧义，只解决会影响测试问题的部分，其余写入非目标。
如需上传资料，使用最小获准节选。Anthropic 记录了支持的文件类型，也说明不同文件的处理方式有所不同。［3］ 大量私有资料不会自动带来更可靠的原型。
怎样生成最小可运行切片？
1. 请求一条端到端路径
第一版只要单屏、三个输入、一个动作、一个结果和重置。要求使用本地合成数据，不做网络请求、账户系统、外部追踪或持久存储。
根据 brief 创建交互式 Artifact。
只实现成功计算路径和可见校验。
使用语义标签和键盘可操作控件。
不要加入认证、API、存储、分析或真实员工资料。
在结果旁用自然语言显示公式。
完成后单独列出假设和未测试行为。
2. 检查界面契约
颜色之前先检查：每个输入是否有标签，单位是否清楚，操作是否明确，输出是否说明含义。一个没有币种、时间基准和舍入规则的“成本”，即使数字会变化也不能验收。
3. 检查生成代码
在可用的代码视图中寻找隐藏默认值、魔法数字、不安全 HTML 注入、网络访问、无界输入和无法重置的状态。Anthropic 说明可以在不同 Artifact 版本之间切换并通过对话修改，但版本列表不是源代码管理。［1］ 深入检查可使用AI 生成代码审核清单。
怎样先建立原型验收矩阵？
在要求“改进”前写测试，否则每轮只会优化最显眼的部分。
| 编号 | 场景 | 输入 | 预期观察 | 状态 |
|---|---|---|---|---|
| N1 | 正常 | 6 人、30 分钟、有效时薪 | 公式与结果一致 | 未测试 |
| B1 | 下边界 | 1 人、1 分钟 | 接受且不舍入成零 | 未测试 |
| B2 | 大数值 | 已定义上限 | 界面仍清晰并能响应 | 未测试 |
| F1 | 缺值 | 时长为空 | 指定字段报错且无结果 | 未测试 |
| F2 | 无效值 | 人数为负 | 拒绝并清除旧结果 | 未测试 |
| A1 | 键盘 | Tab、输入、提交、重置 | 焦点顺序合理且可见 | 未测试 |
| A2 | 缩放 | 200% | 指令与操作不被裁掉 | 未测试 |
矩阵是人工观察工具，不是自动化测试套件。每次记录 Artifact 版本、浏览器、日期、输入、实际结果和证据。Claude 说“已修复”不能把状态改成通过。
怎样测试预览和代码？
测试预期路径
先独立计算一个正常结果，核对人数、时间、时薪、单位和舍入规则。
测试边界
再试零、一、已定义上限、小数、粘贴文字和超长输入；哪些值应被拒绝必须由产品决定，不能让原型自行发明政策。
测试失败与恢复
提交缺值和无效值，检查错误是否指向字段、保留无关有效输入、必要时清除过期结果，并且无需刷新即可恢复。代码中应先校验再计算。
测试无障碍基础
只用键盘完成流程，再检查焦点顺序、焦点可见性、标签、错误关联、对比度、200% 缩放和状态是否只用颜色表达。原型不能认证无障碍，但能提前暴露明显障碍。
对照来源检查假设
最后让 Claude 列出所有假设，并逐项对照 brief 和代码。模型可能漏列假设或给出错误而自信的解释，Anthropic 也建议用户核验重要信息。［4］ 需要迁往仓库测试时可参考AI 测试生成与核验指南。
怎样进行单变量修订？
每轮建立一张修订单，只写一个失败条件、证据和允许变化的范围。
修订 R3
失败项：F2 负数人数
观察：输入无效后旧结果仍显示
所需变化：拒绝负数并清除旧结果
不可改变：公式、标签、布局、颜色和最大值
证据：说明改动的代码路径，并让我重跑 F2
更新后先重跑失败场景，再跑正常路径和相邻边界，避免窄修复引入回归。不要同时“修校验、重设计卡片、改文案并新增导出”；若无法判断哪项变化导致结果，修订范围就过大。
版本日志至少记录修订目的、重跑检查和保留或拒绝决定。被拒绝的版本也有价值，因为它解释了为何最终方案没有采用某个方向。
| 修订 | 单一目的 | 重跑检查 | 决定 |
|---|---|---|---|
| R1 | 建立最小流程 | N1、F1 | 基线 |
| R2 | 增加键盘焦点 | A1、N1 | 保留 |
| R3 | 清除过期结果 | F2、N1、B1 | 复测后保留 |
| R4 | 尝试精简文案 | A2、N1 | 拒绝，说明不清 |
分享或发布 Artifact 前检查什么？
先选择准确版本。Anthropic 针对不同账户区分公开 publishing 与组织内 sharing，可用动作与受众取决于账户和工作区。［2］ 在实际分享面板确认，不要凭按钮名称推测私密性。
还要检查关联对话和附件。Anthropic 提醒，共享 Artifact 可能让查看者取得创建对话中的附件与文件。［2］ 公共演示最好从干净对话和合成资料开始。
分享记录应包括版本、矩阵结果、预期受众、实际权限、所含数据、已知失败、非目标、负责人和移除日期。若出现 Logo、客户名称、专有设计或个人资料，应先完成权利和隐私审核；“只是原型”不会缩小公开链接的受众。
怎样交给生产团队？
把 Artifact 当作行为参考，不是可部署包。交接 brief、选定版本、验收矩阵、已知失败、版本日志和获准截图，再由生产团队在真实仓库中依据架构、依赖、安全、无障碍、测试和发布流程重建。
生产交接必须分开说明：brief 证明问题与非目标；版本说明所选交互；验收证据说明人工观察；开放问题说明尚未证明的内容；生产 owner 负责架构和发布；重建计划说明怎样进入真实系统。
| 交接项 | 能证明什么 |
|---|---|
| 原型 brief | 问题与非目标 |
| 选定版本 | 供后续实现的交互 |
| 验收证据 | 实际人工观察结果 |
| 开放问题 | 尚未证明的内容 |
| 生产负责人 | 谁决定架构与发布 |
| 重建计划 | 行为如何进入真实系统 |
不要未经审核就复制原型代码。先检查依赖许可、数据流、错误处理、安全假设和测试。Canvas 长文修订流程适合文档，但软件交接需要更严格的仓库控制。
最终检查清单
- brief 指定一个用户、问题、成功路径和非目标。
- 输入为最小、获准的合成资料。
- 第一版只有一条完整用户旅程。
- 预览与代码都已检查。
- 正常、边界、失败、恢复和无障碍场景有记录。
- 每轮只改变一个变量并重跑相邻检查。
- 分享前确认准确版本、真实受众及关联附件。
- 生产实现回到真实仓库和正式流程。
常见问题
什么是 Claude Artifact？
它是 Claude 在独立工作区显示的实质性内容，例如代码、文档、图表或交互组件，可通过对话修订并查看版本。［1］
Artifact 等同于生产应用吗？
不等同。它不能证明生产安全、可靠性、无障碍、监控、数据治理或可维护性。
是否应让 Claude 一次修好所有问题？
不应。每轮只处理一个失败条件，固定其它变量，并重跑失败项和相邻场景。
预览成功能证明计算正确吗？
不能。必须独立计算代表性案例，并检查单位、舍入、默认值、边界和代码校验。
Claude 自动修错后还要测试吗？
要。自动修复只是需要重新评估的新版本，不是测试通过证据。
Artifact 可以公开发布吗？
是否可公开及具体受众取决于账户和工作区。Anthropic 当前区分公开发布和组织内分享，操作前应检查实际设置。［2］
查看者能看到附件吗？
在部分分享情境中，查看者可能取得创建对话关联附件。请按最新官方说明复核，公共演示尽量使用干净的合成资料。［2］
生产工程师能直接使用生成代码吗？
只能作为参考。生产实现应在真实仓库中按批准依赖、架构、测试、无障碍、安全和发布控制重建或完整审核。
VPN 能测试或部署 Claude Artifact 吗？
不能。VPN 不能验证原型、批准访问、审核代码或把 Artifact 转为生产软件。
来源
- Anthropic, “What are artifacts and how do I use them?” — https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them
- Anthropic, “Publish and share artifacts” — https://support.claude.com/en/articles/9547008-publish-and-share-artifacts
- Anthropic, “Upload files to Claude” — https://support.claude.com/en/articles/8241126-upload-files-to-claude
- Anthropic, “Claude is providing incorrect or misleading responses” — https://support.claude.com/en/articles/8525154-claude-is-providing-incorrect-or-misleading-responses-what-s-going-on
Sources checked 2026 年 9 月 5 日。
