使用 Claude Code 构建 Playgrounds

我们发布了一个新的 Claude Code 插件，名为 playground，它可以帮助 Claude 生成 HTML 游乐场。这些是独立的 HTML 文件，让你可以可视化问题、与 Claude 交互，并得到一个输出提示，粘贴回 Claude Code。

我发现这对于无法用文本很好表达的场景尤其有效，例如：

• 可视化代码库的架构
• 调整组件的设计
• 头脑风暴布局和设计
• 微调游戏的平衡

要开始使用，在 Claude Code 中运行以下命令来安装插件：

**/plugin marketplace update claude-plugins-official

/plugin install playground@claude-plugins-official**

以下是我最喜欢的一些游乐场作品：

**

改变 Claude Code 中 AskUserQuestion 工具的设计

**提示："使用 playground 技能创建一个游乐场，帮助我探索 AskUserQuestion 工具的新布局变化"

**

评论你的写作并获取反馈

**提示："使用 playground 技能查看我的 SKILL.MD，并给我可以批准、拒绝或评论的内联建议"

**

调整 Remotion 视频开场

**提示："使用 playground 技能调整我的开场画面，使其更有趣更讨喜"

**

查看架构图并让用户评论

**提示："使用 playground 技能展示这个邮件 Agent 代码库的工作原理，并让我在架构中的特定节点上评论、提问、修改等"

**

平衡我正在制作的超级英雄 Roguelike 游戏

**提示："使用 playground 技能帮助我平衡 'Inferno' 英雄的牌组"

0:24

很期待看到大家的探索！

我的建议：要创建有趣的游乐场，不妨想一种与模型交互的独特方式，然后让它表达出来。我觉得你可能会感到惊喜。

如果你做出了酷炫的东西，欢迎分享！