Claude Artifacts React 实战（2026）：10 个 Prompt、发布与安全边界

开始前：确认你用的是哪一种 Artifact

普通 Claude Artifacts、Claude-powered artifacts、Claude Code Artifacts 和 Claude Cowork live artifacts 的可用套餐、分享范围与数据能力不同。本文的 10 个 Prompt 面向 Claude 网页端/桌面端中的交互式应用 Artifact。

如何启用、创建和发布

1. 在 Claude 的 Settings → Capabilities 打开 Code execution and file creation。
2. 描述目标用户、输入、输出、界面和失败状态，让 Claude 先生成可运行草稿。
3. 逐项验证交互、空状态、错误状态和移动端布局，再要求修改。
4. Free / Pro / Max 可使用 Publish；Team / Enterprise 使用组织内 Share。
5. 需要嵌入网站时，在发布后的嵌入设置里显式填写允许嵌入的域名。

取消发布不是普通的临时开关：当前帮助中心说明，同一个 Artifact 取消发布后不能再次发布； 如果它使用持久化存储，取消发布还会永久删除相关存储数据。操作前先导出需要保留的内容。

通用 Prompt 模板

高质量 Artifacts 的 prompt 应该包含：

帮我做一个 [功能描述] 的 React 组件：

界面：
- [UI 布局描述]
- 用 Tailwind CSS 样式，风格 [简洁/卡片式/暗色]

功能：
- [核心功能 1]
- [核心功能 2]
- [数据验证或边界情况]

技术要求：
- 用 shadcn/ui 的 [Button/Input/Card 等组件]
- 图表用 Recharts（如需要）
- 代码注释简洁

案例 1：销售数据看板

帮我做一个销售数据看板 React 组件：

界面：
- 顶部 4 个 KPI 卡片（总销售额、订单数、客单价、环比增长）
- 下方左侧月度趋势折线图，右侧品类分布饼图
- 整体暗色风格，数字用大字体突出

功能：
- 点击月份可以切换查看不同月的数据
- KPI 卡片有趋势箭头（上升绿/下降红）

数据：用模拟数据，6 个月，3 个品类

案例 2：个人记账工具

做一个个人记账 React 应用：

功能：
- 添加收入/支出记录（金额、分类、备注）
- 支出分类：餐饮、交通、购物、娱乐、其他
- 顶部显示本月收支余额
- 下方列表显示所有记录，可删除
- 用 useReducer 管理状态

界面：
- 卡片式，顶部绿色余额区，下方白色列表
- 添加按钮浮动在右下角

案例 3：多时区世界时钟

做一个世界时区时钟组件：
- 默认显示 6 个时区（北京、东京、伦敦、纽约、洛杉矶、迪拜）
- 每张卡片显示城市名、当地时间（实时更新）、与北京时差
- 可以点击添加自定义时区（从下拉列表选）
- 时差超过 12 小时的卡片背景淡蓝色

案例 4：BMI + 健康评估器

做一个 BMI 计算器和健康评估器：
- 输入身高（cm）、体重（kg）、年龄、性别
- 实时计算 BMI，显示分级（偏瘦/正常/超重/肥胖）
- 用 Recharts 显示 BMI 标尺，标出当前位置
- 下方给出基础代谢率（BMR）和每日所需热量
- 用不同颜色区分健康分级

案例 5：颜色系统生成器

做一个品牌色彩系统生成器：
- 输入一个主色（HEX 值）
- 自动生成 10 个明度梯度的色阶（50-900）
- 旁边生成互补色、类似色、三元色方案
- 每个色块显示 HEX / RGB / HSL 值，点击复制
- 复制后出现"已复制"提示

案例 6：Pomodoro 番茄计时器

做一个番茄工作法计时器：
- 工作 25 分钟 → 短休 5 分钟 → 每 4 轮长休 15 分钟
- 圆形进度条显示剩余时间
- 开始/暂停/重置按钮
- 顶部显示当前第几个番茄，今日完成数
- 时间到播放声音提示（用 Web Audio API 生成简单提示音）

案例 7：密码生成器与强度检测

做一个密码生成器：
- 滑块设置长度（8-64）
- 勾选项：大写字母、小写字母、数字、特殊符号
- 实时生成密码，显示强度条（弱/中/强/极强）
- 强度基于熵值计算（展示位数）
- 一键复制，可生成多个备选

案例 8：Markdown 编辑器 + 预览

做一个分栏 Markdown 编辑器：
- 左侧输入框，右侧实时预览
- 支持完整 Markdown 语法（标题、粗斜体、列表、代码块、表格）
- 顶部工具栏：加粗、斜体、标题、代码块按钮（点击插入语法）
- 字数统计，阅读时间估算
- 暗色/亮色主题切换

案例 9：汇率换算器

做一个货币换算工具：
- 支持 10 种主要货币（CNY/USD/EUR/JPY/GBP/HKD/SGD/AUD/CAD/CHF）
- 两个输入框互相换算（改左边右边实时更新）
- 显示当日汇率表格（用模拟固定数据，2026-04-24 汇率）
- 历史汇率趋势折线图（30 天模拟数据）

案例 10：JSON 格式化 + 校验工具

做一个 JSON 工具箱：
- 左侧输入原始 JSON（支持粘贴）
- 实时解析，有语法错误时红色高亮错误位置并给出错误提示
- 右侧显示格式化后的 JSON，有语法着色
- 功能按钮：格式化、压缩、复制、清空
- 底部显示 key 数量、层级深度、字节大小

迭代技巧

第一版出来后，这样迭代效果最好：

• 具体指出修改点："把计时器的圆形进度条改成顺时针，颜色从红色渐变到绿色"
• 请求 Claude 解释："为什么用 useRef 而不是 useState 来存 intervalId？" — 边用边学
• 导出到项目：复制代码后先核对依赖、组件 API、样式配置和许可证，再放入你的 React 工程
• 风格系统提示：在 Project 里写 "所有组件用 Inter 字体，主色 #6366f1，圆角 8px"，之后所有 Artifacts 自动保持风格统一

发布前安全清单

• 删除 prompt、示例数据和日志里的 API Key、邮箱、客户数据与内部 URL。
• 把外部 Artifact 代码视为不可信代码；复制到自己的对话或项目之前先审查。
• 确认 Artifact 使用个人存储还是共享存储，并在界面中向使用者解释。
• 发布前测试匿名访问；组织内分享还要测试无项目权限成员看到的结果。
• AI-powered app 不让创建者承担访客的模型费用，但使用者仍受自己的 Claude 用量限制。
• 需要长期运营时，把原型迁移到受控代码库，补上鉴权、数据备份、监控与安全更新。

常见问题