Claude Code 官方今天刚出的 Playground，有点东西

用户4242

2月1日修改

原创 AI陪我笨拙前行 AI陪我笨拙前行 AI陪我笨拙前行2026年1月31日 00:04  北京​

大家好，我是小四。

上篇文章我给大家介绍了我做的『给自己做个访谈』的skills，这几天一直在做另一个skills，让AI基于自己的画像，给我准备一个完美匹配我的每日信息简报。​

这个skills还一直在调试，AI基于我的画像，给我确认的信息源差不多确认了，有youtube、X、Hacker News、product hunt、reddit等等吧（下面有图片介绍），每一个信息源都是不同的抓取方式，调试起来非常麻烦...​

今天看到 Claude Code 官方发了个新东西，叫 Playground 。简单说就是： 让 Claude 生成一个可交互的 HTML 文件，在浏览器里操作 。​

我第一时间，就使用了这个功能，让其基于我的这个未完成的skill帮我出一个交互页面。结果发现真是太方便了，下面放一张我这个skills的页面截图看看。​

PS：下面有这个的详细案例

Playground 是什么

官方的描述是这样的：

Playground 是一个独立的 HTML 文件，让你可以可视化地和 Claude 交互，适合那些"纯文字聊不清楚"的场景。​

什么叫"文字聊不清楚"？

比如：

•
你想调整一个 UI 组件的布局​

•
你想看清楚一个项目的架构​

•
你想调一堆参数，但不知道改了会怎样​

这些事儿，用文字描述来描述去，效率很低。Playground 的思路是： 生成一个可视化界面，让你自己拖、点、调 。​

三个实际案例

案例 1：AskUserQuestion 布局调整

如果你用过 Claude Code，大概率见过这个弹窗——就是 Claude 问你问题时弹出来的那个选择框。​

官方用 Playground 做了一个布局调整器，你可以直接拖拽、调整间距、换颜色，实时预览效果。​

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

案例 2：代码架构图

这个我觉得特别实用——让 Claude 把你的项目架构画成一张图。​

不是那种静态的图，而是 可交互的 ：你可以点击某个节点，在上面加评论、提问题。比如"这个模块为什么要这样设计？"，Claude 会针对你点的那个地方回答。​

Claude Code 官方今天刚出的 Playground，有点东西​