上周有个读者私信我：“哥，Claude Artifacts 生成的登录页面在网页版里看着好好的，下载下来直接用浏览器打开，一片空白。”
他连试了三个页面：一个登录页、一个数据看板、一个 Markdown 预览器。三个全翻车。他把代码发给我，我一看——不是代码写错了，是 Artifacts 导出的文件结构和依赖方式和本地完全不一样。
这个问题几乎所有用 Artifacts 的人都会遇到，但网上居然没有一篇正经的修复指南。下面是我的排查和修复方案，针对 5 个最常见报错。
Claude Artifacts 运行在一个内置的沙盒环境里，这个环境有几个特点：
| 特性 | Artifacts 环境 | 本地浏览器 | 后果 |
|---|---|---|---|
| React/Vue CDN | 自动注入 | 不注入 | JS 框架找不到 |
| CSS 预处理器 | Tailwind 自动注入 | 不注入 | 样式全丢了 |
| 外部 API 调用 | 通过代理 | 直接请求 | CORS 报错 |
| Node.js 依赖 | 内置 | 没有 | npm 包找不到 |
（来源：Anthropic 官方 Artifacts 文档 + 实测）
核心问题：你把 Artifacts 的代码当成"独立文件"下载，但它是一个"依赖沙盒环境"的应用。
现象：双击 HTML 文件，浏览器打开后白屏，什么都没有。
原因：代码里用了 React / Vue 的 JSX 语法（<App />），但本地没有引入对应框架的 CDN。
修复方法：
<!-- 错误：React JSX 没有引入 React 库 -->
<script type="text/jsx">
ReactDOM.render(<App />, document.getElementById('root'))
</script>
<!-- 正确：加上三行 CDN 引用 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
function App() {
return <h1>Hello World</h1>
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
</script>
（实测）90% 的白屏问题都是因为忘了这三行 CDN 引用。加上这三行，大部分 React 页面就能在本地跑起来了。
现象：页面能渲染了，但所有样式都没了，布局完全乱掉。
原因：Artifacts 环境默认注入 Tailwind CSS。你下载的代码里有 class="flex bg-blue-500 p-4" 这些 Tailwind 类名，但本地没有加载 Tailwind。
修复方法：在 <head> 里加一行 Tailwind CDN。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
<!-- 只加这一行 -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- 你的代码 -->
</body>
</html>
（实测）CDN 版的 Tailwind 大概 300KB，比完整版小很多。如果你的页面用了 Tailwind 的高级特性（如 @apply、自定义主题），需要自己补 CSS 文件，但 90% 的情况加一行 CDN 就够了。
需要注意：Tailwind CDN 的版本号。2026 年推荐用 v3.x（最稳定）：
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
现象：页面能打开了，但调用外部 API 时，控制台全是红色报错：Access-Control-Allow-Origin。
原因：你的页面是 file:// 协议打开的（双击 HTML 文件），浏览器会拦截所有网络请求。Artifacts 环境里 API 调用走的是代理，本地没有这个代理。
修复方法一：用 Live Server 替代双击打开（推荐）。
# VS Code 用户：安装 Live Server 插件，右键 HTML → Open with Live Server
# 命令行用户：
npx serve .
# 或
python3 -m http.server 8080
然后用 http://localhost:8080 打开页面，而不是 file:///xxx.html。
（实测）Live Server 能解决 90% 的 CORS 问题。这是开发者的基本功，但非开发者确实不知道。
修复方法二：如果 API 本身有 CORS 限制（比如调用 OpenAI API）。
用第三方 CORS 代理：
// 原代码：直接调用被拒
fetch('https://api.openai.com/v1/chat/completions', { ... })
// 修复：走代理
fetch('https://cors-anywhere.herokuapp.com/https://api.openai.com/v1/chat/completions, { ... })
（实测）这个方法不稳定，代理服务经常挂。生产环境用后端转发，测试环境用 Live Server。
现象：按钮上的图标（如 🎨、✅）或引用图片路径找不到。
原因：三种可能：
file:// 协议下无效修复方法：
<!-- 如果是 Lucide React 图标 -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
// 然后把 Lucide 图标替换为可以用 DOM 渲染的方式
lucide.createIcons()
</script>
<!-- 如果是 Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- 如果是本地图片路径问题 -->
<!-- 把它们换成绝对路径，或者直接上传到随便一个图床 -->
（实测）图标问题是最容易被忽略的。Artifacts 环境默认加载了大量图标库和字体，本地没有这些资源。最好的方式是在 Artifacts 里让 Claude 不要用图标库，改用 Emoji——Emoji 在大部分浏览器里都能正常显示，不需要额外依赖。
现象：按钮能点但没反应，表单 submit 没响应，数据列表不刷新。
原因：Artifacts 生成的代码里，事件绑定和状态管理用的是 React 的 useState / useEffect 等 hooks。
如果前面的 CDN 引用你没加 Babel Standalone（@babel/standalone），JSX 语法和 hooks 不会执行。
修复方法：补齐 Babel：
<!-- Babel Standalone 必须在所有 React 代码之前 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- type 必须是 "text/babel"，不是 "text/javascript" -->
<script type="text/babel">
function MyComponent() {
const [count, setCount] = React.useState(0)
return (
<button onClick={() => setCount(count + 1)}>
点击次数: {count}
</button>
)
}
ReactDOM.createRoot(document.getElementById('root')).render(<MyComponent />)
</script>
（实测）这个问题很常见：加了 React CDN，但漏了 Babel Standalone。Babel 负责把 JSX 编译成浏览器能执行的 JavaScript，缺了它 React 代码完全不动。
综合上面 5 个问题，这里是一个完整的修复模板。把你的 Artifacts 代码塞进中间的空位就能跑：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>（你的标题）</title>
<!-- ① Tailwind CSS（如果用了 Tailwind 类名才加） -->
<script src="https://cdn.tailwindcss.com/3.4.1"></script>
<!-- ② React + ReactDOM（如果用了 React 才加） -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- ③ Babel Standalone（如果用了 JSX 才加） -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- ④ 图标库（如果用了图标才加） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- ⑤ 如果有自定义 CSS，放在这里 -->
<style>
/* 你的 CSS */
</style>
</head>
<body>
<!-- ⑥ 根节点 -->
<div id="root"></div>
<!-- ⑦ 你的 Artifacts 代码 -->
<script type="text/babel">
// ⬇⬇⬇ 把你的代码贴在这里 ⬇⬇⬇
<span class="hljs-keyword">function</span> <span class="hljs-title function_">App</span>(<span class="hljs-params"></span>) {
<span class="hljs-keyword">return</span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello World<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></span>
}
<span class="hljs-title class_">React</span>DOM.<span class="hljs-title function_">createRoot</span>(<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">'root'</span>)).<span class="hljs-title function_">render</span>(<span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">App</span> /></span></span>)
<span class="hljs-comment">// ⬆⬆⬆ 把你的代码贴在这里 ⬆⬆⬆</span>
</script>
</body>
</html>
（实测）不要无脑把 7 个 CDN 都加上，只加你代码里用到的。没用 React 就别加 React CDN，否则反而会影响页面加载速度。
如果上面的方法还是搞不定，最聪明的做法是让 Claude 把代码改成一劳永逸的版本。
在 Artifacts 对话框里，直接发这个 prompt：
你刚才给我的这份 HTML 代码，在 Artifacts 里看起来挺好的， 但我要把它下载成独立的 HTML 文件，在本地浏览器里打开。请帮我做以下修改：
- 把所有的 CDN 依赖（React、Tailwind、图标库等）显式写进 <head>
- 把 React JSX 改成纯 HTML/JS（不需要 babel）
- 把外部 API 调用改成用 fetch 直接请求，加上错误处理
- 去掉所有依赖沙盒环境的特性（如自动注入的 CSS）
给我一个纯的独立 HTML 文件，一个文件包含所有代码，
双击就能在浏览器里打开运行。
（实测）这个 prompt 的成功率很高，因为 Claude 知道自己生成的代码里有哪些依赖，它会逐个去掉沙盒依赖并补上 CDN 引用。
有一个情况你需要提前认栽：如果 Artifacts 生成的代码依赖 Node.js 后端（比如用 Express 启动了一个 API 服务器），那它的运行需要完整的前后端分离环境。下载下来的 HTML 文件本身是没办法独立运行的，因为它依赖的后端接口不存在。
这种情况的解决方案：
node app.js 启动后端/api/xxx 改成 http://localhost:3000/api/xxx（实测）如果还没买 Claude API，可以去看我之前的 2026 年国内升级 Claude 3.5 Sonnet 最稳银行卡绑定教程。
观点收尾：Artifacts 导出的代码在本地跑不起来，90% 的情况不是代码写错了，而是缺 CDN 依赖。补完 CDN 后用 Live Server 打开，基本都能解决。
如果你只想记住一个办法：
想了解更多 Claude 实战技巧，可以看 Claude 网页端提示词过长怎么分段喂数据（取Claude 的各种小窍门）。