展开本页目录
开始前准备什么
- 下载练习包，先阅读 README 中的依赖和运行范围。
- 使用独立练习目录；starter 是待完成任务，reference 是作者参考实现。
- 账号型功能须在自己的授权环境执行；本题不要求提供真实凭据。
- 限定面板任务
- 调用原生技能
- 观察默认预览
- 调节三个参数
- 导出当前选择
- 排查陈旧导出
- 保存离线成果
1. 限定面板任务
把知识卡的颜色、内边距和圆角列为可调项，正文事实保持固定。原始brief不要求模型重新编造内容。
2. 调用原生技能
在自己的Claude会话使用Playground技能生成单文件离线HTML。要求参数控件和预览共用状态，导出提示词不得靠另一套固定常量。
本题本地命令
bash
npm install
npm run verify3. 观察默认预览
打开playground.html，核对海蓝、24px留白和16px圆角。真实浏览器截图记录默认状态，避免只检查HTML里存在控件。
4. 调节三个参数
切换梅紫，将留白改为48px、圆角28px。查看卡片真实样式和数值标签同步改变，不只改控件旁的文字。
5. 导出当前选择
点击导出提示词，回读textarea实际value。本题实际输出含#7c3f58、48px和28px，可复制为下一轮任务。
6. 排查陈旧导出
先改参数再立即导出；若提示词仍是24px，回到状态来源修复。自动验证对颜色和留白做真实断言。
7. 保存离线成果
保存单文件HTML、前后截图与提示词文本。下一轮AI任务使用这份当前选择；作者页面不是Claude产品界面的截图。
怎样确认已经完成
- 无CDN
- 每项控件即时生效
- 提示只写偏离默认值的选择
- 已在真实浏览器调整控件并导出当前参数提示词；HTML是作者参考实现，Claude Playground技能会话未运行。
常见问题
怎样让 Claude 先生成可以调参数的预览面板？
用技能生成单文件HTML，让控件、预览和提示词导出读取同一组状态。本文作者页面已在浏览器验证，可作为你自己生成版本的对照。
Playground 调好的效果怎么变成下一轮提示词？
导出时读取当前控件状态，并把颜色、间距、圆角写成明确约束。本题点击后实际回读textarea，专门检查没有沿用旧值。
哪些功能已经实际执行？
已在真实浏览器调整控件并导出当前参数提示词；HTML是作者参考实现，Claude Playground技能会话未运行。