P

playground

playground

github.com/paulrberg设计与 UI10491 次安装今天更新

关于 playground

Playground Builder 是用于制作独立交互式 HTML 探索器的技能，包含控件、实时预览和可复制的自然语言提示词。它引导模板选用、实现，以及对渲染效果、交互和键盘操作的检查。

主要功能

01构建单文件 HTML 探索器
02提供控件和实时预览
03生成可复制的自然语言提示词
04改编六种指定模板之一
05检查交互、状态和键盘操作

适用场景

01交互式探索产品或设计选项
02根据模板创建数据探索器
03在浏览器中评审概念或文档差异

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/paulrberg/agent-skills --skill playground

安装后在 Claude Code 中输入/playground确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/

openai.yaml

templates/

code-map.md

concept-map.md

data-explorer.md

design-playground.md

diff-review.md

document-critique.md

详细介绍

Playground 构建器

构建一个自包含的交互式 HTML 探索器，包含控件、实时预览和可复制的自然语言提示词。

工作流

推断产品背景、受众、要探索的决策和所需状态。现有设计系统和明确的用户需求优先于此技能的视觉默认设置。
阅读最匹配的一个模板，并据此调整：
- templates/design-playground.md
- templates/data-explorer.md
- templates/concept-map.md
- templates/document-critique.md
- templates/diff-review.md
- templates/code-map.md
编写一个包含内联 CSS 和 JavaScript、且没有外部运行时依赖的 HTML 文件。
在浏览器中打开该文件，与每个控件和预设交互，检查具有代表性的视口尺寸，并验证实时预览、提示词输出、复制反馈、空状态／错误状态和键盘可用性。完成前修复渲染缺陷。

固定默认设置

如果产品背景没有另行说明，请采用以下设置：

控件位于实时预览旁，提示词输出置于下方；
精致的浅色主题、系统 UI 字体、等宽字体用于代码／值、简洁的界面装饰；
合理的非空初始状态，以及 3–5 个风格统一且有名称的预设；
一个状态对象、一条更新路径，并立即刷新预览／提示词；
按用途对控件分组，高级控件默认折叠；
提示词以自然语言说明期望结果，且只提及非默认选项。

不变量

不要添加“应用”按钮：相关更改应立即呈现。
即使不查看 Playground，提示词也应具备可执行性，且不能只是原始状态转储。
复制操作应提供可见的临时反馈，并在 Clipboard API 失败时提供可用的备用方案。
预设应一致地更新控件、预览和提示词。
不要添加不会影响预览或生成提示词的控件。

完成要求包括自包含文件以及渲染后的交互检查证据；仅打开文件而不进行实际操作并不足够。

评论

支持 Markdown

登录后评论