Claude Code Playground 插件：可视化交互新方式

# 使用 Claude Code 创建 Playground

我们发布了一个名为 playground 的全新 Claude Code 插件，帮助 Claude 生成 HTML playground。这些独立的 HTML 文件让你能够与 Claude 共同可视化问题、进行交互，并生成一个输出提示词，供你粘贴回 Claude Code。

我发现这种方式非常适合以非文本形式与模型交互，例如：

- 可视化代码库的架构
- 调整组件的设计
- 头脑风暴布局与设计方案
- 平衡游戏数值

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

```
/plugin marketplace update claude-plugins-official
/plugin install playground@claude-plugins-official
```

以下是我制作的一些最喜欢的 playground 示例：

**修改 Claude Code 中 AskUserQuestion 工具的设计**
提示词："Use the playground skill to create an playground that helps me explore new layout changes to the AskUserQuestion Tool"

**评审写作内容并获取反馈**
提示词："Use the playground skill to review my SKILL.MD and give me inline suggestions I can approve, reject or comment"（https://skill.md/）

**调整 Remotion 视频片头**
提示词："Use the playground skill to tweak my intro screen to be more interesting and delightful"

**查看架构图并允许用户评论**
提示词："Use the playground skill to show how this email agent codebase works and let me comment on particular nodes in the architecture to ask questions, make edits, etc"

**平衡我正在制作的超级英雄 Rogue-like 游戏**
提示词："Use the playground skill to help me balance the 'Inferno' hero's deck"

期待看到大家的探索成果！

我的一个小技巧：想想一种独特的与模型交互的方式，然后让它将其表达出来。相信结果会让你感到惊喜。

如果你做出了有趣的东西，欢迎分享！