用 agent-screenplay 让编码 Agent 自己写分镜、录制并剪出演示视频：init 接入 MCP、scenario JSON 与 check/record/render 实操

# 进入你要做演示的项目目录
cd my-demo

# 安装：下载 Chromium、注册 MCP server、写入 guide
npx agent-screenplay init

# 可选：全局安装。包名 agent-screenplay，装好后的命令名叫 screenplay
npm i -g agent-screenplay

# 动手前核对版本，避免照抄旧示例
npm view agent-screenplay version

{
  "url": "https://app.example.com/inbox",
  "style": { "background": "dawn" },
  "steps": [
    { "title": "人工接管，只需一次点击", "subtitle": "New in 2.4" },
    { "click": "text=Camille Laurent",
      "say": "当 AI 智能体卡住时，会话会落到你的收件箱。" },
    { "callout": "role=button[name='Take over']",
      "text": "从 AI 智能体手里接管" },
    { "click": "role=button[name='Take over']" },
    { "type": "Hi Camille, I'm on it.",
      "into": "placeholder=Write a reply…" },
    { "highlight": "text=Assigned to you",
      "text": "同事会看到这单归你" },
    { "end": "所有套餐现已可用" }
  ]
}

# 打印写分镜的指南
npx agent-screenplay guide

# 快速执行步骤、不录制（桌面场景下屏幕 pill 会显示 rehearsing）
npx agent-screenplay check demo.json

# 打印完整 scenario JSON Schema
npx agent-screenplay schema

# 拍摄 + 剪辑，产出 demo.mp4 与 demo.storyboard.png
npx agent-screenplay record demo.json

# 浏览器里调外观，保存后可直接重剪
npx agent-screenplay style demo.json

# 只重剪（改样式 / 缩放 / 文字 / 旁白），不重新拍摄
npx agent-screenplay render demo.json

# 也可以手写样式，存进 scenario 的 style 字段
{
  "style": {
    "background": { "gradient": ["#0ea5e9", "#6366f1"], "angle": 135 },
    "padding": 96,
    "radius": 20,
    "shadow": true
  }
}

# 打开浏览器窗口手工登录，登录后关掉窗口（终端里按 Enter 亦可）
npx agent-screenplay login https://app.example.com

# scenario 顶层引用会话文件
"auth": { "storageState": ".screenplay/auth.json" }

# 登录步骤：占位符从环境变量读取，密码步骤加 secret 遮蔽
{ "type": "${EMAIL}", "into": "label=Email" }
{ "type": "${PASSWORD}", "into": "label=Password", "secret": true }

# 桌面场景：用 app 代替 url；screen 拍整屏；open 启动或置前应用
"app": "Notes"          # 官方文档写作 "app": "<name>"
"screen": true
{ "open": "Notes" }
"surface": "menubar"    # 也可 menu / sheet / popover / alert
"hideOthers": true      # macOS 隐藏其他应用