Claude Code 的可视化实验室！一个 Skill 把设计探索变成交互游戏

Claude Code 的「可视化实验室」是什么体验？

你有没有过这种感觉——想让 AI 帮你调一个配色方案，或者探索某种 UI 布局参数，光靠文字描述怎么都说不清楚？

「颜色再深一点」「圆角再大点」「阴影再柔和些」……这类模糊表达，来来回回好几轮，效率很低对吧。

Anthropics 官方出的这个 Playground Skill，就是来解决这个问题的。

它能做什么？

装上之后，Claude Code 可以帮你生成一个交互式 HTML 页面——左边是可视化控件，右边是实时预览，底部是一键复制的 prompt。

你拖动滑块、勾选选项，页面上的设计效果会即时更新。满意了，点一下复制，Claude 就收到了一个结构清晰的 prompt，直接照着做就行。

整个页面是一个纯 HTML 文件，CSS 和 JS 都内联，不依赖任何外部 CDN——断网也能用。

6 种现成模板，覆盖高频场景

• Design Playground：调颜色、字体、间距、阴影……设计师狂喜
• Data Explorer：SQL 查询、数据管道、API 参数配置
• Concept Map：知识图谱、学习路径、概念关系探索
• Document Critique：文档评审，支持「通过/修改/评论」工作流
• Diff Review：代码 diff review，逐行评论
• Code Map：代码库架构图，组件关系、数据流向可视化

每个模板都有 3~5 个预设组合，打开就有好看的默认状态，不用从零调。

为什么值得装？

本质上，它把「模糊探索」变成了一件可视化、可量化、可复制的事情。

以前你跟 AI 说「帮我弄个好看的卡片」，AI 给你一版，你不满意，再描述，再改，来回折腾。

现在你打开 Playground，拖一拖参数，看一看效果，觉得差不多了，复制 prompt 给 Claude，一次到位。

这才是 AI 时代该有的设计协作方式。

怎么装？

在 Claude Code 里直接说：

帮我安装这个 skill: https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground/skills/playground

装完之后，想生成一个 playground，直接用自然语言描述你的需求就行——比如「帮我做一个设计配色探索工具」或者「做个 SQL 查询参数配置的交互页面」。

GitHub 仓库：https://github.com/anthropics/claude-plugins-official

GitHub: https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground/skills/playground