Artifacts React 的能力边界

先明确 Artifacts 能做什么、不能做什么：

能做 ✅不能做 ❌
React 组件（含 hooks、state）访问外部 API（网络请求被沙盒限制）
Tailwind CSS 样式读写本地文件系统
shadcn/ui 组件库持久化存储（刷新后数据消失）
Recharts 图表使用 npm 安装的第三方包（只有预装库）
Lucide React 图标WebSocket / 实时数据
本地 state 管理（useState/useReducer）部署到生产（仅用于原型）

通用 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？" — 边用边学
  • 导出到项目：点 Artifact 右上角 Copy，粘贴到你的 React 项目，装好 shadcn/ui 和 Recharts 就能用
  • 风格系统提示：在 Project 里写 "所有组件用 Inter 字体，主色 #6366f1，圆角 8px"，之后所有 Artifacts 自动保持风格统一

Artifacts 是 Claude Pro 和 Max 内置的功能，订阅后直接可用。 国内用户通过 ClaudeMax ¥210/月订阅 Pro，即可在 claude.ai 里使用以上所有案例。