用 Claude Code 制作 Playgrounds

要点速览

• Anthropic 发布了一个新的 Claude Code 插件 playground，用于让 Claude 生成可独立运行的 HTML playground。
• 这类 playground 特别适合处理纯文本不擅长表达的交互场景，例如架构可视化、组件设计调整、布局探索或游戏数值平衡。
• 使用方式很直接，只需安装插件，再用自然语言提示 Claude 生成特定用途的 playground。
• 好的 playground 设计关键在于先想清楚“你希望如何与模型交互”，再让模型把这种交互方式具体表达出来。

原文链接 原文：English Original 作者：Thariq (@trq212)，Anthropic Claude Code 开发者

用 Claude Code 制作 Playgrounds

我们发布了一个新的 Claude Code 插件，叫 playground，它能帮助 Claude 生成 HTML playground。这些 playground 是独立的 HTML 文件，你可以借此把某个问题可视化、与之交互，并获得一段可以粘贴回 Claude Code 的输出提示。

我发现，这种方式非常适合处理那些并不适合单靠文本来和模型交互的场景，例如：

• 可视化代码库架构
• 调整某个组件的设计
• 头脑风暴布局与设计方案
• 微调一款游戏的平衡性

快速开始

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

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

我最喜欢的一些 Playgrounds

下面是我做过的一些最喜欢的 playground：

修改 Claude Code 中 AskUserQuestion Tool 的设计

prompt: "Use the playground skill to create an playground that helps me explore new layout changes to the AskUserQuestion Tool"

批注你的写作并生成回复

prompt: "Use the playground skill to review my SKILL.MD and give me inline suggestions I can approve, reject or comment"

微调一个 Remotion 视频片头

prompt: "Use the playground skill to tweak my intro screen to be more interesting and delightful"

查看架构图，并让用户对节点发表评论

prompt: "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"

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

prompt: "Use the playground skill to help me balance the 'Inferno' hero's deck"

提示

很期待看到大家会怎么探索这个方向！我对创建有趣 playground 的建议是：先想一种独特的、与模型交互的方式，然后让模型把这种方式表达出来。你可能会发现，结果会出乎意料。如果你做出了很酷的东西，欢迎分享！

Related Documents

• 原文：English Original