Menü
通过 Chrome DevTools MCP + ST REST API 端到端调试角色卡。当用户要求调试卡片、测试卡片、导入卡到 ST、查看卡渲染效果、ST 端到端测试时使用。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
设计完全前端化的 SillyTavern 角色卡。当用户要求设计完全前端卡、全前端卡、前端游戏卡、自定义界面卡、HTML 卡时使用。
编写 SillyTavern 卡内世界书条目的完整格式规范。当用户要求编写世界书、lorebook 条目、character_book entries 时使用。
编写在 SillyTavern 原生交互框架内嵌入前端 UI 的角色卡。当用户要求写嵌入式前端卡、MVU 变量卡、状态栏卡、EJS 动态提示词卡时使用。
| name | st-card-debug |
| description | 通过 Chrome DevTools MCP + ST REST API 端到端调试角色卡。当用户要求调试卡片、测试卡片、导入卡到 ST、查看卡渲染效果、ST 端到端测试时使用。 |
通过 MCP (Chrome DevTools) + ST REST API 实现角色卡的端到端调试：启动 ST → 导入卡片 → 浏览器打开 → 交互验证 → 查看日志。
用户要求：调试卡片、测试卡片、端到端测试、导入卡到 ST、查看卡渲染效果、ST 调试。
以下操作无法自动化，必须提醒用户手动完成：
为什么需要提醒用户？ 端到端调试的核心是验证 AI 调用链路是否畅通。如果 API 未连接或渲染器未开启，调试无法覆盖完整链路。
# 检查 ST 是否运行
curl -s -o /dev/null -w "%{http_code}" http://localhost:8000/
# 如果未运行，启动 ST 并将日志导出到文件
cd /path/to/SillyTavern && nohup node server.js --port 8000 > /tmp/st.log 2>&1 &
SillyTavern 的 API 有 CSRF 保护，所有写操作需要两步认证。
# 第一步：获取 session cookie
curl -s -c /tmp/st_cookie -b /tmp/st_cookie http://localhost:8000/ > /dev/null
# 第二步：获取 CSRF token
CSRF=$(curl -s -c /tmp/st_cookie -b /tmp/st_cookie http://localhost:8000/csrf-token | jq -r '.token')
之后所有请求都需要携带 cookie 和 CSRF header：
curl -b /tmp/st_cookie -H "X-CSRF-Token: $CSRF" ...
# 导入 card.json（V2 Spec）
curl -s -b /tmp/st_cookie \
-H "X-CSRF-Token: $CSRF" \
-F "avatar=@card.json;type=application/json" \
-F "file_type=json" \
http://localhost:8000/api/characters/import
curl -s -b /tmp/st_cookie \
-H "X-CSRF-Token: $CSRF" \
-F "avatar=@character.png;type=image/png" \
-F "file_type=png" \
http://localhost:8000/api/characters/import
curl -s -b /tmp/st_cookie \
-H "X-CSRF-Token: $CSRF" \
-F "avatar=@character.charx;type=application/zip" \
-F "file_type=charx" \
http://localhost:8000/api/characters/import
curl -s -b /tmp/st_cookie \
-H "X-CSRF-Token: $CSRF" \
-H "Content-Type: application/json" \
-X POST http://localhost:8000/api/characters/all -d '{}'
返回 JSON 数组，每个元素包含 name、avatar、description 等字段。
成功时返回：
{"file_name": "CharacterName.png"}
使用 MCP 工具与 ST 浏览器界面交互，实现可视化调试。
1. navigate_page → 打开 ST (http://localhost:8000/)
2. take_screenshot → 确认页面已加载、API 已连接
3. take_snapshot → 获取页面元素 uid
4. click(uid) → 点击角色卡进入聊天
5. take_screenshot → 查看卡片渲染效果
6. list_console_messages → 检查 JS 错误和日志
mcp__chrome-devtools__navigate_page(type: "url", url: "http://localhost:8000/")
刷新页面（如需触发自动连接）：
mcp__chrome-devtools__navigate_page(type: "reload")
mcp__chrome-devtools__take_screenshot()
检查要点：
mcp__chrome-devtools__take_snapshot()
返回带 uid 的 a11y 树，用于定位可点击元素（角色卡头像、按钮等）。
从 snapshot 中找到角色卡的 image 或 text 元素 uid，然后：
mcp__chrome-devtools__click(uid: "1_19")
等待 2 秒后截图查看渲染效果。
对于完全前端卡，可以点击卡内的按钮：
take_snapshot() 获取 iframe 内元素的 uidclick(uid) 点击按钮take_screenshot() 查看交互结果mcp__chrome-devtools__list_console_messages(types: ["error", "warn"])
常见问题诊断：
[object Event] 加载失败 → 构建产物路径错误（检查 import depth）TavernHelper is not defined → 不在 iframe 环境中（检查渲染器是否开启）mcp__chrome-devtools__evaluate_script(expression: "document.querySelector('#chat .mes').textContent")
可用于读取卡片状态、检查 DOM 结构等。
ST 启动时将日志导出到文件后，可以实时查看：
# 查看最新日志
tail -50 /tmp/st.log
# 实时跟踪
tail -f /tmp/st.log
服务端日志包含：API 请求路由、扩展加载、文件操作等信息。
□ 提醒用户：配置 API Key + 勾选自动连接 + 开启代码块渲染器
□ 启动 ST（日志导出到 /tmp/st.log）
□ 通过 REST API 导入卡片
□ MCP navigate 到 ST
□ 截图确认 API 已自动连接（底部有输入框）
□ 点击角色卡进入聊天
□ 截图验证渲染效果
□ 检查 console 有无错误
□ 测试卡内交互（点击按钮等）
□ 如果卡有 AI 调用，发送消息验证 AI 链路
卡片修改后重新导入的流程：
# 1. 构建卡片
cd cards/my-card && npm run build
# 2. 重新获取 CSRF（token 可能过期）
curl -s -c /tmp/st_cookie -b /tmp/st_cookie http://localhost:8000/ > /dev/null
CSRF=$(curl -s -c /tmp/st_cookie -b /tmp/st_cookie http://localhost:8000/csrf-token | jq -r '.token')
# 3. 重新导入（会覆盖同名卡片）
curl -s -b /tmp/st_cookie \
-H "X-CSRF-Token: $CSRF" \
-F "avatar=@dist/card.json;type=application/json" \
-F "file_type=json" \
http://localhost:8000/api/characters/import
# 4. MCP 刷新页面查看效果
然后在浏览器端：
navigate_page(type: "reload") → take_screenshot() → 验证更新
| 现象 | 原因 | 解决方案 |
|---|---|---|
| "Not connected to API" | 未配置 API 或未勾选自动连接 | 提醒用户手动配置 |
| 卡导入 403 | CSRF token 过期 | 重新获取 cookie + token |
| 前端卡显示源码不渲染 | 未开启代码块渲染器 | 提醒用户开启 |
扩展加载失败 [object Event] | JS 构建产物 import 路径错误 | 检查 ST_IMPORT_DEPTH |
| 卡内按钮无响应 | DOMPurify 剥离了 script | 确认 HTML 包裹在 ```html 代码块中 |
| AI 调用超时 | API 未连接或 Key 无效 | 检查 API 连接状态 |