使用 Claude Code 构建 Playgrounds

@trq212
英语5个月前 · 2026年1月29日
861K
3.0K
298
127
5.5K

TL;DR

Claude Code 的全新 playground 插件支持生成用于交互式可视化的独立 HTML 文件,助力开发者进行 UI 设计、架构映射和游戏平衡调整。

我们发布了一个新的 Claude Code 插件,名为 playground,它可以帮助 Claude 生成 HTML 游乐场。这些是独立的 HTML 文件,让你可以可视化问题、与 Claude 交互,并得到一个输出提示,粘贴回 Claude Code。

我发现这对于无法用文本很好表达的场景尤其有效,例如:

  • 可视化代码库的架构
  • 调整组件的设计
  • 头脑风暴布局和设计
  • 微调游戏的平衡

要开始使用,在 Claude Code 中运行以下命令来安装插件:

**/plugin marketplace update claude-plugins-official

/plugin install playground@claude-plugins-official**

以下是我最喜欢的一些游乐场作品:

**

改变 Claude Code 中 AskUserQuestion 工具的设计

**提示:"使用 playground 技能创建一个游乐场,帮助我探索 AskUserQuestion 工具的新布局变化"

Thariq - inline image

**

评论你的写作并获取反馈

**提示:"使用 playground 技能查看我的 SKILL.MD,并给我可以批准、拒绝或评论的内联建议"

Thariq - inline image

**

调整 Remotion 视频开场

**提示:"使用 playground 技能调整我的开场画面,使其更有趣更讨喜"

Thariq - inline image

**

查看架构图并让用户评论

**提示:"使用 playground 技能展示这个邮件 Agent 代码库的工作原理,并让我在架构中的特定节点上评论、提问、修改等"

Thariq - inline image

**

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

**提示:"使用 playground 技能帮助我平衡 'Inferno' 英雄的牌组"

Thariq - inline image

0:24

很期待看到大家的探索!

我的建议:要创建有趣的游乐场,不妨想一种与模型交互的独特方式,然后让它表达出来。我觉得你可能会感到惊喜。

如果你做出了酷炫的东西,欢迎分享!

一键保存

使用 YouMind AI 深度阅读爆款文章

保存原文、追问细节、总结观点,并在一个 AI 工作空间里把爆款文章沉淀成可复用笔记。

了解 YouMind
写给创作者

把你的 Markdown 变成干净的 𝕏 文章

图片上传、表格、代码块,往 𝕏 上手动重排太痛苦。YouMind 把整篇 Markdown 一键转成干净、可直接发布的 𝕏 文章草稿。

试试 Markdown 转 𝕏

更多可拆解样本

近期爆款文章

探索更多爆款文章