# Claude Code Playground：生成可交互参数面板，把调整结果导出为下一轮提示词

## 执行范围

已在真实浏览器调整控件并导出当前参数提示词；HTML是作者参考实现，Claude Playground技能会话未运行。

## 输入与目标

有四种卡片预设的颜色、间距与文字样例

交付：可离线HTML、导出的自然语言修改提示与修改前后图

## 运行

在 reference 目录执行；先按文件 requirements.txt / package.json 或原生工具文档安装依赖。浏览器练习需 `npx playwright install chromium`；也可设置 `PLAYWRIGHT_EXECUTABLE_PATH` 为自己的 Chrome 路径。

```sh
npm install
npm run verify
```

## 目录

- fixtures：作者原创输入，不包含用户真实资料。
- starter：读者待完成任务。
- reference：作者完成参考。
- results：作者实际运行所得或明确标注的待运行输入/预期合同。

## 七步

1. **限定面板任务**

把知识卡的颜色、内边距和圆角列为可调项，正文事实保持固定。原始brief不要求模型重新编造内容。

2. **调用原生技能**

在自己的Claude会话使用Playground技能生成单文件离线HTML。要求参数控件和预览共用状态，导出提示词不得靠另一套固定常量。

3. **观察默认预览**

打开playground.html，核对海蓝、24px留白和16px圆角。真实浏览器截图记录默认状态，避免只检查HTML里存在控件。

4. **调节三个参数**

切换梅紫，将留白改为48px、圆角28px。查看卡片真实样式和数值标签同步改变，不只改控件旁的文字。

5. **导出当前选择**

点击导出提示词，回读textarea实际value。本题实际输出含#7c3f58、48px和28px，可复制为下一轮任务。

6. **排查陈旧导出**

先改参数再立即导出；若提示词仍是24px，回到状态来源修复。自动验证对颜色和留白做真实断言。

7. **保存离线成果**

保存单文件HTML、前后截图与提示词文本。下一轮AI任务使用这份当前选择；作者页面不是Claude产品界面的截图。

## 来源

- https://raw.githubusercontent.com/anthropics/claude-plugins-official/main/plugins/playground/skills/playground/SKILL.md