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

Claude Code 官方今天刚出的 Playground，有点东西 Claude Code 官方今天刚出的 Playground，有点东西 Modified February 1 PS：下面有这个的详细案例 Playground 是什么 官方的描述是这样的： Playground 是一个独立的 HTML 文件，让你可以可视化地和 Claude 交互，适合那些"纯文字聊不清楚"的场景。 什么叫"文字聊不清楚"？ 比如： • 你想调整一个 UI 组件的布局 • 你想看清楚一个项目的架构 • 你想调一堆参数，但不知道改了会怎样 这些事儿，用文字描述来描述去，效率很低。Playground 的思路是： 生成一个可视化界面，让你自己拖、点、调 。 三个实际案例 案例 1：AskUserQuestion 布局调整 如果你用过 Claude Code，大概率见过这个弹窗——就是 Claude 问你问题时弹出来的那个选择框。 官方用 Playground 做了一个布局调整器，你可以直接拖拽、调整间距、换颜色，实时预览效果。 调完之后，底部会生成一段 prompt，复制回 Claude Code，它就能帮你把代码改了。 案例 2：代码架构图 这个我觉得特别实用——让 Claude 把你的项目架构画成一张图。 不是那种静态的图，而是 可交互的 ：你可以点击某个节点，在上面加评论、提问题。比如"这个模块为什么要这样设计？"，Claude 会针对你点的那个地方回答。 看别人代码、review 项目结构的时候，这招很好用。 案例 3：我的 Daily Digest 配置探索器 说说我自己的体验。 我有一个叫 daily digest 的 Skill，用来每天聚合各种信息源、打分筛选、生成阅读清单。这个 Skill 挺复杂的： • 10 个信息源（Hacker News、Reddit、YouTube、播客……） • 4 个评分维度（产品启发、公众号价值、产品思维、技术认知） • 8 个来源加权倍率 • 4 个去重周期 以前想调个参数，得跟 Claude 来回描述："把产品启发的权重调高一点"、"YouTube 的倍率降一下"……聊半天也不一定对。 现在我让 Claude 给这个 Skill 生成了一个 Playground： 所有参数都变成了滑块和开关 。拖一下，立刻能看到评分变化；切换预设模式（均衡、产品导向、技术导向），直接对比效果。 甚至我还让他加了针对每一个信息源如何处理的详细解释，点开可查看： 最关键的是底部—— 自动生成配置更新的 prompt 。调完直接复制，贴回 Claude Code，它就能帮我改代码。 整个流程变成了： 看 → 调 → 生成指令 → Claude 改代码 。闭环了。 怎么装、怎么用 两行命令： Code block Plain Text Copy /plugin marketplace update claude plugins official /plugin install playground@claude plugins official 装完之后，跟 Claude 说一句就能生成： "用 playground skill 帮我可视化这个 skill 的配置" 或者更具体一点： "用 playground 给我画一下这个项目的架构图" 最后 说实话，这个东西不复杂，核心就一句话： 有些东西文字聊不清楚，画出来、拖一拖就明白了 。 对不懂或者不想看代码的人来说，不管是tool还是skills的调试以及学习都非常的方便。 如果你也在用 Claude Code 的 Skills，不妨装上试试。让 Claude 给你的 Skill 生成一个 Playground，你可能会发现——原来我的 Skill 长这样。 你平时有没有遇到过"跟 AI 聊半天也说不清楚"的场景？ 欢迎评论区分享，也看看大家都用 Playground 玩出了什么花样。 参考资料： • https://x.com/trq212/status/2017024445244924382 PS：下面有这个的详细案例 Playground 是什么 官方的描述是这样的： Playground 是一个独立的 HTML 文件，让你可以可视化地和 Claude 交互，适合那些"纯文字聊不清楚"的场景。 什么叫"文字聊不清楚"？ 比如： • 你想调整一个 UI 组件的布局 • 你想看清楚一个项目的架构 • 你想调一堆参数，但不知道改了会怎样 这些事儿，用文字描述来描述去，效率很低。Playground 的思路是： 生成一个可视化界面，让你自己拖、点、调 。 三个实际案例 案例 1：AskUserQuestion 布局调整 如果你用过 Claude Code，大概率见过这个弹窗——就是 Claude 问你问题时弹出来的那个选择框。 官方用 Playground 做了一个布局调整器，你可以直接拖拽、调整间距、换颜色，实时预览效果。 调完之后，底部会生成一段 prompt，复制回 Claude Code，它就能帮你把代码改了。 案例 2：代码架构图 这个我觉得特别实用——让 Claude 把你的项目架构画成一张图。 不是那种静态的图，而是 可交互的 ：你可以点击某个节点，在上面加评论、提问题。比如"这个模块为什么要这样设计？"，Claude 会针对你点的那个地方回答。 看别人代码、review 项目结构的时候，这招很好用。 案例 3：我的 Daily Digest 配置探索器 说说我自己的体验。 我有一个叫 daily digest 的 Skill，用来每天聚合各种信息源、打分筛选、生成阅读清单。这个 Skill 挺复杂的： • 10 个信息源（Hacker News、Reddit、YouTube、播客……） • 4 个评分维度（产品启发、公众号价值、产品思维、技术认知） • 8 个来源加权倍率 • 4 个去重周期 以前想调个参数，得跟 Claude 来回描述："把产品启发的权重调高一点"、"YouTube 的倍率降一下"……聊半天也不一定对。 现在我让 Claude 给这个 Skill 生成了一个 Playground： 所有参数都变成了滑块和开关 。拖一下，立刻能看到评分变化；切换预设模式（均衡、产品导向、技术导向），直接对比效果。 甚至我还让他加了针对每一个信息源如何处理的详细解释，点开可查看： 最关键的是底部—— 自动生成配置更新的 prompt 。调完直接复制，贴回 Claude Code，它就能帮我改代码。 整个流程变成了： 看 → 调 → 生成指令 → Claude 改代码 。闭环了。 怎么装、怎么用 两行命令： 装完之后，跟 Claude 说一句就能生成： "用 playground skill 帮我可视化这个 skill 的配置" 或者更具体一点： "用 playground 给我画一下这个项目的架构图" 最后 说实话，这个东西不复杂，核心就一句话： 有些东西文字聊不清楚，画出来、拖一拖就明白了 。 对不懂或者不想看代码的人来说，不管是tool还是skills的调试以及学习都非常的方便。 如果你也在用 Claude Code 的 Skills，不妨装上试试。让 Claude 给你的 Skill 生成一个 Playground，你可能会发现——原来我的 Skill 长这样。 你平时有没有遇到过"跟 AI 聊半天也说不清楚"的场景？ 欢迎评论区分享，也看看大家都用 Playground 玩出了什么花样。 参考资料： • https://x.com/trq212/status/2017024445244924382 🔗 原文链接： https://mp.weixin.qq.com/s/wnmaEqks... https://mp.weixin.qq.com/s/wnmaEqks... 原创 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的页面截图看看。