Claude Code 新插件 Playground:拯救来回掰扯

和AI打交道的时候是不是觉得他总是无法准确理解你的意思，是你的表达能力不够还是AI笨笨的呢？现在这些都不重要了因为借助Playground插件画出来、拖一拖就明白了！

痛点：和 AI 聊半天也说不清楚

用 Claude Code 的时候，你有没有遇到过这种情况：

• • 想调整一个 UI 组件的布局，来回描述了 10 轮
• • 想看清楚项目的架构，Claude 输出了一堆文字看得头大
• • 想调一堆参数，但不知道改了会怎样

文字的表达效率是有极限的。

Anthropic 官方显然也意识到了这个问题，于是推出了 Playground 插件。

Playground 是什么？

官方定义：

Playground 是一个独立的 HTML 文件，让你可以可视化地和 Claude 交互。

简单说就是：Claude 帮你生成一个可交互的网页，你可以在浏览器里拖、点、调，实时看到效果。

调完之后，底部会自动生成一段 prompt，复制回 Claude Code，它就能帮你把代码改了。

整个流程变成：看 → 调 → 生成指令 → Claude 改代码。闭环了。

几个实际场景

场景 1：UI 布局调不明白

以前的对话：

我：把按钮往右移一点Claude：好的，已调整我：太多了，往回一点Claude：好的我：间距再大一点Claude：...（重复 10 轮）

现在：Claude 生成一个布局调整器，你自己拖到满意为止，底部自动出 prompt。

一轮搞定。

场景 2：看不懂项目结构

让 Claude 画架构图，以前输出一堆文字，看得头大。

现在生成一个可交互的架构图：

• • 点某个模块，可以加备注、提问
• • 比如「这个 Repository 为什么要这样设计？」
• • Claude 针对你点的那个地方回答

Review 代码的时候特别好用。

」。

现在让 Claude 生成一个配置面板：

• • 所有参数变成滑块
• • 拖一下就能看到效果变化
• • 调完底部直接出配置更新的 prompt

对于不想看代码的人来说，这个功能简直是福音。

怎么装

两行命令：

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

怎么用

装完之后，跟 Claude 说一句就行：

画架构图：

用 playground 给我画一下这个项目的架构

调整布局：

用 playground 帮我调整这个组件的布局

它会生成一个 HTML 文件，在浏览器里打开就能操作。

最后

这个插件的思路其实很简单：

有些东西文字聊不清楚，画出来、拖一拖就明白了。

对我来说最大的价值是——不用再跟 Claude 来回描述了。直接看到、直接调、直接出指令。

如果你也在用 Claude Code，建议装上试试。让 Claude 给你当前的项目生成一个 Playground，你可能会发现：原来还能这么玩。

你平时有没有遇到过「跟 AI 聊半天也说不清楚」的场景？欢迎评论区聊聊。