如何用 Claude Artifacts 构建你的第一个交互式应用（完整教程）

大多数人用 Claude 来获取答案。

少数人用它来构建东西。而用 Artifacts 构建东西的人，正在悄悄打造工具、仪表盘、游戏和计算器——这些成果可以在任何浏览器中运行，几分钟内建成，且无需自己编写一行代码，还能分享给任何人。

这是一份关于 Claude Artifacts 的完整教程：它们是什么、如何工作、能产出优秀成果的精确提示词，以及你今天就可以构建的六个应用的完整演练。

我知道这对你来说可能很陌生，但 Artifacts 是那个几乎无人提及的强大工具。

什么是 Claude Artifacts？

当你向 Claude 提出一个普通问题时，它会在聊天窗口中回答。

而当你要求 Claude 构建什么东西——一个工具、可视化、仪表盘、计算器——它会创建一个 Artifact：一个实时交互的输出，出现在聊天旁的一个专用面板中，与对话分离。

Artifacts

Artifacts

Artifact 不仅仅是你复制到别处的代码块。它直接在 Claude 中实时运行。你可以与它交互、测试它、实时迭代——只需继续对话即可。

完成后，你可以将其发布到一个公共 URL，并分享给世界上的任何人。他们使用它不需要 Claude 账户。

Artifacts 的五种类型

Claude 可以创建五类 Artifacts。知道要请求哪种类型是首先要培养的技能。

类型 1：交互式 Web 应用（HTML/CSS/JS）

完整的基于浏览器的工具——计算器、追踪器、游戏、仪表盘、表单、测验。这是最强大的类型。它们完全在浏览器中运行，不需要后端，可以即时分享。

示例： 习惯追踪器、预算计算器、闪卡应用、测验工具、番茄钟、字数统计。

类型 2：React 组件

用 React 构建的现代 UI 组件——非常适合具有状态管理、组件复用和动态数据的更复杂交互界面。

示例： 带实时筛选的数据仪表盘、多步骤表单、产品配置器、看板。

类型 3：数据可视化

图表、图形和数据可视化表示。Claude 可以接收你粘贴的原始数据，生成交互式柱状图、折线图、饼图或散点图——使用 Chart.js 或 D3。

示例： 销售图表、调查结果可视化、预算明细、进度仪表盘。

类型 4：图表和流程图 (Mermaid)

流程图、架构图、决策树、组织架构图和序列图——使用 Mermaid 图表语法。

示例： 用户引导流程、决策树、系统架构图、项目路线图。

类型 5：文档 (Markdown)

格式化文档、报告、模板和结构化文本——呈现为干净易读的内容，而不是原始聊天文本。

示例： 会议议程、项目简报、标准操作流程、内容框架、邮件模板。

Artifacts 实际工作原理

理解其机制会让其他一切更清晰。

侧面板： 当 Claude 生成一个 Artifact 时，它会出现在右侧的分屏面板中。你会看到实时预览。有一个代码切换按钮可以查看原始 HTML、CSS 或 JS。

版本历史： 每次 Claude 更新 Artifact 时，之前的版本都会被保存。你可以使用 Artifact 面板左下角的选择器导航回任何早期版本。

对话即编辑器： 你不会直接编辑代码（除非你想）。你用自然语言描述更改。“把按钮改成青色”，“添加一个笔记区域”，“把字体换成更简洁的”——Claude 会实时更新 Artifact。

发布： 点击 Artifact 面板中的发布按钮。Claude 会在 claude.site 生成一个公共 URL。任何人都可以在浏览器中打开并使用该工具——无需登录，无需 Claude 账户。

混编： 任何查看已发布 Artifact 的人都可以点击“混编”按钮，在自己的 Claude 会话中打开并开始修改。这就是 Artifacts 传播和改进的方式。

核心技能：为 Artifacts 编写提示词

唯一最重要的技能是知道如何提出你想要的东西。通用应用提示词的原则同样适用——但 Artifacts 有一些特定的模式可以解锁最佳结果。

Artifact 提示词公式

[要构建什么] + [它做什么] + [它应该看起来怎样] + [任何约束]

示例 - 弱：

“做一个习惯追踪器”

示例 - 强：

“构建一个交互式习惯追踪器，作为 HTML 应用。我可以输入名称并按回车来添加最多 8 个习惯。每天我可以勾选完成了哪些习惯。在每个习惯旁边用绿色显示 7 天连续天数。今天完成的习惯应该带浅绿色背景。包含一个按钮来清除今天的勾选。设计简洁、极简，白色背景，每个习惯卡片带柔和阴影。在移动设备上运行良好。”

强提示词明确了：

• Artifact 类型（HTML 应用）。
• 精确的交互方式（添加习惯、勾选、查看连续天数）。
• 视觉行为（完成状态带绿色背景）。
• 约束条件（移动端友好）。

给 Claude 这四个要素，输出就会在第一次尝试时接近你想要的结果。

四个迭代短语

一旦 Claude 构建了第一个版本，这些短语可以带来可靠的改进：

• “将 [元素] 改为 [新状态]” —— 具体的视觉或行为更改。
• “添加一个 [功能]，其行为是 [行为]” —— 添加新功能。
• “[元素] 存在 [问题]。修复它，使其 [正确行为]” —— 修复错误。
• “重新设计 [部分]，让它感觉更 [设计方向]” —— 更改美学风格。

第一部分：逐步构建你的第一个应用

应用：每日专注仪表盘

我们将构建一个简洁的每日专注仪表盘，包含任务列表、专注计时器和心情签到。这涵盖了任何应用中最常见的三种交互模式：状态管理、计时器和用户输入。

第 1 步：第一个提示词

在 claude.ai 打开 Claude。在聊天框中粘贴以下内容：

构建一个交互式每日专注仪表盘，作为单个 HTML 应用。

它应该有三个部分：

1. 今日任务 - 我可以输入一个任务并按回车添加。每个任务有一个复选框标记完成（已完成的任务显示删除线并移至底部）。我可以用一个小 × 按钮删除任务。

2. 专注计时器 - 一个 25 分钟倒计时器，带大号数字显示。开始/暂停按钮和重置按钮。当计时器归零时，显示一个柔和的脉冲动画和文字“休息时间！”

3. 心情签到 - 五个表情符号按钮（😞 😟 😐 🙂 😄），我可以点击来设定今天的心情。选中的表情符号有高亮背景。在下方用小文字显示选中的心情标签。

设计：简洁极简。米白色背景（#f7f6f2）。交互元素用青色强调色（#01696f）。所有卡片圆角。每个部分带柔和阴影。在移动设备上可用。

将所有数据（任务、心情、计时器状态）保存到 localStorage。

Claude 会生成完整的应用。Artifact 面板会自动打开，显示实时运行的仪表盘。

第 2 步：测试它

直接在 Claude 中与 Artifact 交互：

• 添加三个任务。勾选一个。观察它移至底部并带删除线。
• 点击计时器的开始按钮。观察倒计时。
• 点击一个心情表情符号。观察高亮效果。

注意任何与你预期不完全相符的地方。

第 3 步：迭代

要求 Claude 修复或改进特定方面。以下是一些你可以使用的示例后续提示词：

视觉优化：

“各个部分的卡片感觉间距太大。减少三个部分之间的间距。另外把任务输入框调高一点——感觉太挤了。”

添加功能：

“在任务列表标题下方添加一个柔和的进度条，显示今日任务完成的百分比。随着任务被勾选，用青色填充它。”

修复行为：

“计时器结束时，用 Web Audio API 播放一个简短的哔哔声——只需一个 0.5 秒的简单音调。”

设计升级：

“在仪表盘顶部添加一个日期头，显示今天的星期和日期（例如‘2025年5月21日 星期四’），字体大而浅色。让它感觉像一份每日计划页面。”

第 4 步：发布并分享

当你对结果满意时：

• 点击 Artifact 面板中的发布按钮。
• Claude 生成一个公共 URL。
• 在新浏览器标签页中打开，它完全独立于 Claude 运行。
• 与他人分享该 URL。

第二部分：本周可以构建的六个 Artifacts

每个都引入了一种新模式。按顺序构建可以获得自然的技能进阶。

Artifact 2：词汇闪卡应用

教授内容： 卡片翻转动画、间隔重复逻辑、分数追踪。

起始提示词：

构建一个用于学习词汇的 HTML 闪卡应用。

• 我可以通过一个输入表单添加单词对（术语 + 定义）
• 学习模式：每次显示一张卡片，背面朝上，术语可见
• 点击卡片使其以平滑的 3D 旋转翻转，显示定义
• 看到答案后，我点击“掌握了”（绿色）或“还在学”（红色）
• “还在学”的卡片稍后再次出现；“掌握了”的卡片移至末尾
• 显示进度条：已学卡片 / 总卡片
• 将所有卡片保存到 localStorage
• 干净的白色卡片，带柔和阴影，按钮用青色强调色

Artifact 3：带图表的预算追踪器

教授内容： 解析用户数据、图表库、筛选。

起始提示词：

构建一个 HTML 预算追踪器应用。

• 我可以添加收入或支出条目：描述、类别（下拉菜单：住房、食品、交通、娱乐、健康、其他）、金额、收入/支出切换
• 顶部用大号文字显示当前余额（正数为绿色，负数为红色）
• 使用 Chart.js（CDN）显示一个圆环图，按类别细分支出，带有图例
• 我可以按当月或所有时间筛选条目
• 每个条目显示在列表中，带删除按钮
• 将所有数据保存到 localStorage
• 简洁极简设计——深炭灰色标题，白色卡片主体

Artifact 4：交互式测验构建器

教授内容： 多步骤流程、分数计算、回顾页面。

起始提示词：

构建一个 HTML 测验应用，有两种模式：创建和游玩。

创建模式：

• 我可以添加问题，最多 4 个答案选项，并标记正确选项
• 我可以在列表视图中删除问题

游玩模式：

• 问题一次显示一个

• 我点击一个答案——正确答案高亮为绿色，错误答案高亮为红色（并显示正确选项）

• 进度条显示第 X 题，共 Y 题

• 结束时：显示得分（X/Y 正确）、百分比，以及每个问题的完整回顾，包括我的答案对比正确答案

• 将测验问题保存到 localStorage

• 一个切换按钮在创建和游玩模式之间切换

• 简洁设计，青色标题，白色问题卡片

Artifact 5：带月历的习惯追踪器

教授内容： 日期处理、日历网格生成、连续天数计算。

起始提示词：

构建一个 HTML 习惯追踪器应用。

• 我可以添加最多 8 个习惯（仅名称）
• 每个习惯显示一个 30 天日历网格——过去 30 天的每个小方块
• 我可以点击任意一天的方块来切换完成（填充青色）或未完成（保持灰色）
• 在每个习惯的网格下方显示当前连续天数和最长连续天数
• 今天的方块有柔和的高亮边框
• 我可以删除习惯
• 将所有数据保存到 localStorage
• 极简设计——习惯垂直列出，日历网格在每个名称下方全宽显示

Artifact 6：链接聚合页构建器

教授内容： 实时预览渲染、导出/下载功能、主题定制。

起始提示词：

构建一个 HTML 链接聚合页构建器，采用分栏布局。

左面板（编辑器）：

• 姓名输入
• 简短个人简介输入（最多 100 字符）
• 头像图片 URL 输入
• 最多 8 个链接：每个都有标签和 URL 字段、拖动手柄用于重新排序、删除按钮
• 3 个颜色主题按钮：简约（白/黑）、温暖（米色/青色）、暗色（炭灰/金色）

右面板（实时预览）：

• 随着我输入实时更新
• 显示完成的链接聚合页，就像访问者看到的那样

导出：

• 一个“下载页面”按钮，将预览导出为独立的 HTML 文件，我可以托管在任何地方

简洁设计，桌面端分栏比例为 40/60，移动端上下堆叠。

Artifact 7：呼吸练习指南

教授内容： 动画时序、CSS 关键帧、顺序状态机。

起始提示词：

构建一个 HTML 呼吸练习应用。

• 我可以选择三种呼吸模式：

  • 盒式呼吸：4 秒吸气 / 4 秒屏气 / 4 秒呼气 / 4 秒屏气
  • 4-7-8：4 秒吸气 / 7 秒屏气 / 8 秒呼气
  • 深度平静：5 秒吸气 / 2 秒屏气 / 7 秒呼气

• 中心有一个大的动画圆：

  • 吸气时缓慢扩大
  • 屏气时保持静止
  • 呼气时缓慢收缩

• 圆下方显示当前阶段（吸气 / 屏气 / 呼气）和倒计时秒数

• 会话计数器：“第 3 轮，共 5 轮”

• 开始/暂停按钮

• 平静的配色方案：柔和的蓝绿色渐变，白色文字，无刺眼颜色

• 平滑的 CSS 过渡——圆形动画应感觉冥想般平静

第三部分：常见错误及如何修复

错误 1：Artifact 没有出现

Claude 只有在检测到请求是用于可视化或交互式内容时才会生成 Artifact——而不是聊天答案。

如果 Claude 用文本回复而没有打开 Artifact 面板，请在提示词中添加：“将其构建为 Artifact 中一个完整的交互式 HTML 应用。”

错误 2：刷新后数据消失

Claude 默认不会添加 localStorage，除非你要求。务必在初始提示词中包含**“使用 localStorage 保存所有数据”。如果忘记了，可以问：“添加 localStorage 持久化，以便所有数据在页面刷新后依然存在。”**

错误 3：应用在 Claude 中看起来不错，但在移动端有问题

Claude 默认以桌面端优先。在提示词中加入**“完全响应式——在 375px 移动屏幕上干净地工作”。对于已有的 Artifact，可以要求：“使其完全响应式以适应移动端。在 600px 以下布局应垂直堆叠，并带有舒适的触摸目标。”**

错误 4：Claude 不断更新错误的元素

经过几次迭代后，Claude 有时会搞不清你具体指的是哪个部分。要具体说明：“只更改任务列表部分——具体是复选框样式。不要更改其他任何内容。”“只”这个词很有用。

错误 5：复杂逻辑崩溃或行为不一致

复杂的 JavaScript 逻辑——尤其是日期处理、拖放或多步骤流程——有时候在第一个版本中存在错误。

不要试图通过模糊描述错误来修复它。

描述确切的失败情况：“当我添加一个任务、勾选它、然后刷新页面时，已完成的任务重新显示为未勾选，即使我使用了 localStorage。请只修复这个特定的错误。”

第四部分：高级 Artifact 模式

模式 1：AI 驱动的 Artifact

你可以将 Claude 自身的能力嵌入到 Artifact 中，创建一个在底层使用 AI 的工具。

示例提示词：

构建一个 HTML 语法和写作检查工具。

两个文本区域并排：

• 左侧：我粘贴文本的位置
• 右侧：在我点击“改进写作”后显示 AI 改进后的版本

使用 Claude API（我会在顶部的设置面板中输入我的 API 密钥）。

该工具应：修正语法、提高清晰度、保持原意，并用不同颜色在右侧面板中高亮显示更改的内容。

在右侧面板下方包含一个“复制结果”按钮。

这创建了一个由 Claude 驱动的独立语法工具——你可以分享给任何拥有自己 API 密钥的人。

模式 2：数据优先的 Artifact

将原始数据随提示词一起粘贴到 Claude，并要求它围绕该特定数据构建可视化。

示例提示词：

这是我每月的支出