网页产物构建
让 Agent 产出可独立打开的 HTML/React 小应用、交互演示时使用。
安装
**Claude Code（推荐）**
```bash
git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills
mkdir -p ~/.claude/skills
cp -r /tmp/anthropic-skills/skills/web-artifacts-builder ~/.claude/skills/
```
重启 Claude Code 后，在 MrWhale 网关下用中文描述任务即可。
**Cursor 项目级**
```bash
mkdir -p .cursor/skills
curl -L -o .cursor/skills/web-artifacts-builder.md \
https://raw.githubusercontent.com/anthropics/skills/main/skills/web-artifacts-builder/SKILL.md
```
Skill 正文
## 这个 Skill 做什么
按规范构建 **Web Artifacts**（单文件或小型前端产物），适合 Claude 画布/聊天内预览的交互页面。
## 你可以用它完成
- **交互式计算器、图表、小工具** 网页
- 结构清晰的 **单页 HTML** 或轻量 React
- 带样式、可部署的 **完整小应用**
## 你怎么跟 Agent 说（示例）
- 「做一个 ROI 计算器网页，输入预算和转化率，实时算结果」
- 「把这份数据做成可筛选的交互表格页面」
## 说明
与 frontend-design 互补：本 Skill 偏 **产物结构与交付**，前者偏审美。