可交互网页原型
web-artifacts-builder · Anthropic制作包含多组件、路由或状态的 React 原型，并打包成单个 HTML 文件，便于演示和分享。
- 输出
- React 原型与单个 HTML
- 需要
- Node.js 18+、Bash 与项目依赖
ZIP · 33 KB · Apache-2.0
用途与边界
- 准备什么
- 原型需要的页面、交互流程、示例内容与视觉方向。
- 运行条件
- 能执行终端命令、读写文件的 AI 工具，Node.js 18+、Bash，以及安装前端依赖的网络连接。
- 使用边界
- 原作者工作流面向 Claude HTML artifacts。输出是交互原型，不包含正式部署、后端或真实支付；脚本会初始化项目并安装依赖。
试一个设计任务
技能加载后，复制任务并替换为你的需求。
使用 web-artifacts-builder，在新的原型目录做一个三步课程预约演示：选课程、选日期、确认选择。使用示例数据，不接真实支付或提交。补齐返回、禁用和空状态，并适配手机。最后打包成单个 HTML 文件，说明如何打开查看。安装说明
适用于 Claude 的 Code／项目入口；聊天和 Cowork 的技能在账户设置中管理。
放入技能目录，或使用安装命令
下载并解压，保留完整的 web-artifacts-builder 文件夹，放入项目的 .claude/skills/ 目录。
或在项目终端运行命令，需要 Node.js / npx。命令获取作者最新版本，可能与下载包不同。
查看原作者安装说明npx skills add anthropics/skills --skill web-artifacts-builder --agent claude-code确认技能已加载
重新打开工具，在技能列表中确认 web-artifacts-builder 可用。若没有出现，请按原作者说明检查安装目录。
检查结果
- 打包后的 HTML 能打开，样式和脚本完整。
- 主要流程、返回操作与空状态可用。
- 示例数据标记清楚，不发生真实交易或提交。