Menü
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/buda-ai/bunny-agent --skill artifactDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
SKILL.md wird angezeigt
Basierend auf der SOC-Berufsklassifikation
| name | artifact |
| description | 将生成的游戏文件展示在用户界面的 Artifact 面板中，供用户查看和下载 |
重要: 这个 skill 让你生成的游戏文件显示在用户的浏览器界面中，用户可以直接下载！
当你创建游戏文件后，用户无法直接访问沙箱内的文件。你必须通过 artifact 系统将文件内容发送到前端 UI：
space-shooter.html）artifact.json 清单，列出要展示的文件没有 artifact.json = 用户看不到你生成的文件！
${CLAUDE_SESSION_ID}tasks/${CLAUDE_SESSION_ID}/artifact.json# 创建单文件 HTML 游戏
cat > "space-shooter.html" << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>太空射击游戏</title>
<style>
/* CSS 样式 */
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
// 所有游戏代码
</script>
</body>
</html>
EOF
关键点：
.html 扩展名space-shooter.html，而不是 game.html）# 创建 task 目录（如果还不存在）
mkdir -p "tasks/${CLAUDE_SESSION_ID}"
# 创建 artifact.json，列出游戏文件
cat > "tasks/${CLAUDE_SESSION_ID}/artifact.json" << 'EOF'
{
"artifacts": [
{
"id": "space-shooter-game",
"path": "space-shooter.html",
"mimeType": "text/html",
"description": "太空射击游戏 - 双击即可在浏览器中运行"
}
]
}
EOF
重要字段说明：
id: 唯一标识符（可选，通常用文件名）path: 文件路径，相对于当前工作目录mimeType: 必须是 text/html 用于 HTML 游戏description: 显示在 UI 中的描述文字✅ 游戏已生成完成！
📦 游戏文件已添加到右侧 Artifact 面板
🎮 如何游玩:
1. 点击右侧面板中的 "space-shooter.html"
2. 点击"Download"按钮下载到本地
3. 双击下载的文件，在浏览器中打开即可游玩
🎯 控制说明:
- WASD: 移动飞船
- 空格: 发射子弹
- ESC: 暂停游戏
💡 提示: 这是单文件 HTML 游戏，无需安装任何工具！
{
"artifacts": [
{
"id": "game-html",
"path": "my-game.html",
"mimeType": "text/html",
"description": "完整的单文件 HTML 游戏，双击即可运行"
}
]
}
关键点：
mimeType 必须是 text/htmlpath 是相对于当前工作目录的路径description 应该说明这是可以直接运行的游戏如果你还想包含其他文件（如 README、截图等）：
{
"artifacts": [
{
"id": "game-html",
"path": "space-shooter.html",
"mimeType": "text/html",
"description": "太空射击游戏"
},
{
"id": "readme",
"path": "tasks/${CLAUDE_SESSION_ID}/README.md",
"mimeType": "text/markdown",
"description": "游戏说明文档"
}
]
}
| 文件类型 | MIME Type | 说明 |
|---|---|---|
| HTML 游戏 | text/html | 最重要 - 单文件游戏 |
| JavaScript | text/javascript | JS 代码文件 |
| Markdown | text/markdown | 说明文档 |
| JSON | application/json | 配置文件 |
| 纯文本 | text/plain | 文本文件 |
{
"artifacts": [
{
"path": "game", // 错误！
"mimeType": "text/html"
}
]
}
✅ 正确：
{
"path": "space-shooter.html", // 包含 .html
"mimeType": "text/html"
}
❌ "文件保存在 /workspace/game.html"
❌ "您可以在工作目录找到游戏文件"
✅ 正确：
✅ "游戏文件已添加到右侧 Artifact 面板"
✅ "点击右侧面板的 Download 按钮下载游戏"
如果你只创建了游戏文件但没有 artifact.json，用户将无法看到或下载你的文件！
#!/bin/bash
# 1. 创建游戏文件
cat > "my-awesome-game.html" << 'EOF'
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的游戏</title>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
// 完整的游戏代码
console.log('游戏启动！');
</script>
</body>
</html>
EOF
# 2. 创建 task 目录
mkdir -p "tasks/${CLAUDE_SESSION_ID}"
# 3. 创建 artifact.json
cat > "tasks/${CLAUDE_SESSION_ID}/artifact.json" << 'EOF'
{
"artifacts": [
{
"id": "awesome-game",
"path": "my-awesome-game.html",
"mimeType": "text/html",
"description": "我的超棒游戏 - 双击即可运行"
}
]
}
EOF
echo "✅ 游戏文件已添加到 Artifact 系统"
game.html 而不是 gametext/html遵循这些步骤，用户就能在 UI 中看到你的游戏文件并下载游玩！🎮