把 Claude Artifacts 跑在本地:免安装的 HTML 导出路线(2026)
每个 Claude Artifact 都是一个自带全部依赖的单文件 HTML。本攻略完整演示导出流程——复制代码、存成 .html、双击打开,应用就在你自己的浏览器里跑起来;文末还附上 Artifact 自带的下载按钮捷径,以及 React Artifact 的 Vite 本地方案。
30 秒速览
- Claude Artifact 本质上是一个单文件 HTML:左边是对话,右边是完整代码面板——把它搬到 Claude 之外运行所需的一切,已经在屏幕上了。
- 复制路线:全选代码,粘进一个新建文本文件,把扩展名改成 .html 保存,然后双击——Artifact 会直接在你的默认浏览器里打开。
- 下载路线:Claude 的 Artifact 卡片自带 Download 按钮,一键就能把 .html 文件存进电脑的下载文件夹,连复制粘贴都省了。
- 盯紧扩展名:记事本默认存成 .txt,而浏览器不会把 .txt 当网页渲染——「另存为 .html」这一步才是真正让它跑起来的开关。
Make an HTML File from a Claude.ai Game File
频道:Karl Kapp1:53
本攻略把视频里演示的操作流程改写成原创的分步图文;截图取自该录屏,每张都附了对应时刻的直达链接。
FAQ 中提到的 Vite + React + shadcn/ui 路线出自 Matt Palmer 的「Editing Claude Artifacts locally with Vite, React, and Shadcn/ui」,已作为第二来源署名。
一步一步,把 Artifact 跑在 Claude 外面
- 1
展开 Artifact 的代码面板
在 Claude 里打开包含 Artifact 的对话,展开代码面板,让对话和源码左右并排。你要找的是一份从头到尾连续的 HTML 文档——样式和脚本都打包在内,因为这一个文件就是整个应用。
左边对话,右边 Artifact 的 HTML 源码——这一个文件就是全部。在 0:02 观看 - 2
认准代码面板上的 Copy 按钮
代码面板顶部显示 Artifact 名称,旁边标着 HTML,再往右就是 Copy 按钮。点一下就能复制当前版本的全部源码,不需要手动划选。
一次 Copy,拿走当前版本的完整代码。在 0:08 观看 - 3
导出之前先试玩一遍
切到预览页,把应用真的玩一遍——本例是一个收集光点、躲避敌方圆圈的答题小游戏,带计分板和弹题机制。确认当前版本的手感符合预期;预览里跑成什么样,导出去就是什么样。
预览跑的就是你即将复制的那一版——先在这里试玩。在 0:20 观看 - 4
完整复制整份 HTML 源码
在代码面板里从开头的 DOCTYPE 一路滚到结尾的脚本标签,确认内容完整,然后全部复制。如果粘贴之后跑不起来,第一嫌疑就是没复制全。
从 DOCTYPE 到最后一个脚本标签——复制必须完整。在 0:30 观看 - 5
在桌面新建一个文本文档
在 Windows 桌面空白处右键,选「新建」,再选「文本文档」。一个空白文件就位,专门用来接代码——不用装任何编辑器,记事本足够。
右键桌面 → 新建 → 文本文档,这条路线只需要记事本。在 0:47 观看 - 6
用记事本打开这个空文件
双击新建的文档,记事本会打开一个空文件,光标停在第 1 行第 1 列。让 Claude 的标签页留在后台——接下来一分钟你会在两者之间来回切换。
第 1 行第 1 列的空白记事本,Claude 在后面随时待命。在 0:55 观看 - 7
把 Artifact 代码粘进文件
把复制的内容全部粘贴进来。文件会立刻被 HTML 和 JavaScript 填满——本例里是画布游戏的绘制辅助函数和主循环。如果看起来粘了一半,回到第 4 步重新复制。
整个 Artifact 现在就住在你电脑上的一个纯文本文件里。在 0:57 观看 - 8
以 .html 扩展名保存
打开「文件 → 另存为」,给文件起一个以 .html 结尾的名字。对话框里的「保存类型」仍然显示文本文档——没关系,起决定作用的是你敲进文件名的那个 .html,因为浏览器只渲染它认得的 HTML 页面。
文件名决定一切:game.html 能跑,game.txt 不行。在 1:01 观看 - 9
遇到替换提醒就换个名字
如果 Windows 提示文件已存在,选「否」,换一个新名字——视频里之前存过 game.html,于是这次导出改名 game2.html。不同的名字让每个版本的 Artifact 都留在磁盘上,互不覆盖。
对替换说「否」,改名 game2.html,之前的导出原封不动。在 1:07 观看 - 10
双击文件,开玩
在桌面找到保存好的文件,双击它。它会通过 file:/// 地址在你的默认浏览器里打开——游戏的开始画面、计分、敌方圆圈,全都和 Claude 里一模一样地跑起来,不需要服务器,也不需要 claude.ai 的标签页。
file:///...Desktop/game2.html——Artifact 从此完全跑在你自己的电脑上。在 1:32 观看 - 11
捷径:直接用 Claude 自带的 Download 按钮
手动复制不是唯一的路。Claude 会在 Artifact 卡片下方给出 Download 按钮——有时旁边还跟着第二个文件(比如搭建指南)和一个 Download all 选项。点一下,.html 就直接进下载文件夹,全程用不到记事本。
Artifact 卡片上的 Download 一键存下 .html——连复制粘贴都省了。在 1:44 观看 - 12
确认下载到了什么
浏览器的下载列表会列出导出的文件——这里是约 20 KB 的 DKapp_Game_Revised.html。双击其中任意一个,按第 10 步的方式在本地运行;或者用文本编辑器打开,直接读源码。
下载列表里 20 KB 的 .html——整个 Artifact,离线可跑。在 1:50 观看