---
任务: 与酒馆助手交互, 为酒馆编写前端界面
参考:
  '@package.json': 它的 dependencies 字段定义了可用的第三方库 (jquery、jquery-ui、lodash、toastr、yaml、zod), 你也可以自己通过 `pnpm add` 添加更多第三方库
  '@types': 酒馆助手提供的接口变量、函数, 如 @types/function/variables.d.ts 中描述了你可以如何操控酒馆变量. 你可以直接使用它们, 不需要导入或新定义它们, 也不需要检查是否可用
  '@slash_command.txt': '@types/function/slash.d.ts 给了 `triggerSlash` 函数, 本文件则描述了该函数可用的酒馆命令'
  '@src/界面示例': 一个完整的界面项目示例
最佳实践:
  - 尽量使用`参考`中的功能进行编写. 例如使用 jquery 而不是 javascript 内置的 DOM 操作, 使用 zod 处理数据校验和纠错而不是 if else
  - 与酒馆进行交互时优先使用酒馆助手提供的接口变量、函数, 而不是 exported 文件中额外提供的 SillyTavern 或其他酒馆插件的接口. 例如你应该用 @types/function/chat_message.d.ts 中的 `getChatMessages` 而不是 @types/iframe_client/exported.sillytavern.d.ts `SillyTavern.chat`
  - 对前端界面进行样式设计时, 你应该新建 scss 文件而不是直接在 html 里书写, 并在 ts 文件中以 `import './index.scss'` (注意不是 `import './index.scss?raw'`, 那是将文件内容作为字符串) 的形式应用到界面上
  - 如果需要在界面加载或卸载时执行功能, 你应该参考 @src/界面示例/加载和卸载时执行函数.ts 中使用 jquery 的写法, 禁止使用 `'DOMContentLoaded'`
  - 如果需要对前端界面的高度进行调整, 你应该参考 @src/界面示例/index.scss 中的写法, 禁止使用 `vh` 单位, 而是使用 `width` 和 `aspect-ratio` 来让高度根据宽度动态调整
  - 项目支持用 `import string from './file?raw'` 来将文件内容作为字符串导入
需求: |- # 自行调整你的设计需求
  接下来我需要你制作一个内嵌在 sillytavern 网页中的角色手机风格状态栏
  该手机页面应当包含边框、刘海、聊天界面等, 并显示有角色当前的状态
要求: |- # 自行调整你对本次 ai 的编写要求. 我这里每一行要求都是示例, 是彼此冲突的, 你一定要自己改!!!
  立即开始编写代码
  创建一个 readme 文件在其中写下你的计划
  请先不要立即开始代码编写, 请你和我谈谈你对我需求的理解
  以 scss、typescript、html 最佳实践来进行编写操作, 你可以在文件夹内创建新的目录结构, 分模块化创建 typescript 脚本, 并建立 readme 文档与注释来简要写明每个模块的作用

---
任务: 与酒馆助手交互, 为酒馆编写脚本
参考:
  '@package.json': 它的 dependencies 字段定义了可用的第三方库 (jquery、jquery-ui、lodash、toastr、yaml、zod), 你也可以自己通过 `pnpm add` 添加更多第三方库
  '@types': 酒馆助手提供的接口变量、函数, 如 @types/function/variables.d.ts 中描述了你可以如何操控酒馆变量. 你可以直接使用它们, 不需要导入或新定义它们, 也不需要检查是否可用
  '@slash_command.txt': '@types/function/slash.d.ts 给了 `triggerSlash` 函数, 本文件则描述了该函数可用的酒馆命令'
  '@src/界面示例': 一个完整的界面项目示例
最佳实践:
  - 尽量使用`参考`中的功能进行编写. 例如使用 jquery 而不是 javascript 内置的 DOM 操作, 使用 zod 处理数据校验和纠错而不是 if else
  - 与酒馆进行交互时优先使用酒馆助手提供的接口变量、函数, 而不是 exported 文件中额外提供的 SillyTavern 或其他酒馆插件的接口. 例如你应该用 @types/function/chat_message.d.ts 中的 `getChatMessages` 而不是 @types/iframe_client/exported.sillytavern.d.ts `SillyTavern.chat`
  - 脚本在酒馆中以无沙盒的 iframe 运行, 如果需要在加载或卸载时执行功能, 你应该参考 @src/脚本示例/加载和卸载时执行函数.ts 中使用 jquery 的写法, 禁止使用 `'DOMContentLoaded'`
  - 项目支持用 `import string from './file?raw'` 来将文件内容作为字符串导入
需求: |- # 自行调整你的设计需求
  接下来我需要你编写一个脚本, 它可以从世界书列表中选择一本世界书, 删除该世界书条目中所有名字里带等号的条目
要求: |- # 自行调整你对本次 ai 的编写要求. 我这里每一行要求都是示例, 是彼此冲突的, 你一定要自己改!!!
  立即开始编写代码
  创建一个 readme 文件在其中写下你的计划
  请先不要立即开始代码编写, 请你和我谈谈你对我需求的理解
  以 typescript 最佳实践来进行编写操作, 你可以在文件夹内创建新的目录结构, 分模块化创建 typescript 脚本, 并建立 readme 文档与注释来简要写明每个模块的作用

---
任务: 与酒馆助手交互, 为酒馆编写前端界面
参考: # 自行从酒馆助手设置页下载这些文件
  'types.d.ts': 酒馆助手提供的接口变量、函数. 你可以直接使用它们, 不需要导入或新定义它们, 也不需要检查是否可用
  'slash_command.txt': 'types.d.ts 给了 `triggerSlash` 函数, 本文件则描述了该函数可用的酒馆命令'
最佳实践:
  - 尽量使用`参考`中的功能进行编写. 例如使用 jquery 而不是 javascript 内置的 DOM 操作, 使用 zod 处理数据校验和纠错而不是 if else
  - 与酒馆进行交互时优先使用酒馆助手提供的接口变量、函数, 而不是 exported 文件中额外提供的 SillyTavern 或其他酒馆插件的接口. 例如你应该用 `getChatMessages` 而不是 `SillyTavern.chat`
  - 如果需要在界面加载或卸载时执行功能, 你应该使用 jquery 的写法, 禁止使用 `'DOMContentLoaded'`
  - 如果需要对前端界面的高度进行调整, 禁止使用 `vh` 单位, 而是使用 `width` 和 `aspect-ratio` 来让高度根据宽度动态调整
需求: |- # 自行调整你的设计需求
  接下来我需要你制作一个内嵌在 sillytavern 网页中的角色手机风格状态栏
  该手机页面应当包含边框、刘海、聊天界面等, 并显示有角色当前的状态
要求: |- # 自行调整你对本次 ai 的编写要求. 我这里每一行要求都是示例, 是彼此冲突的, 你一定要自己改!!!
  立即开始编写代码
  请先不要立即开始代码编写, 请你和我谈谈你对我需求的理解

---
任务: 与酒馆助手交互, 为酒馆编写脚本
参考: # 自行从酒馆助手设置页下载这些文件
  'types.d.ts': 酒馆助手提供的接口变量、函数. 你可以直接使用它们, 不需要导入或新定义它们, 也不需要检查是否可用
  'slash_command.txt': 'types.d.ts 给了 `triggerSlash` 函数, 本文件则描述了该函数可用的酒馆命令'
最佳实践:
  - 尽量使用`参考`中的功能进行编写. 例如使用 jquery 而不是 javascript 内置的 DOM 操作, 使用 zod 处理数据校验和纠错而不是 if else
  - 与酒馆进行交互时优先使用酒馆助手提供的接口变量、函数, 而不是 exported 文件中额外提供的 SillyTavern 或其他酒馆插件的接口. 例如你应该用 `getChatMessages` 而不是 `SillyTavern.chat`
  - 脚本在酒馆中以无沙盒的 iframe 运行, 如果需要在加载或卸载时执行功能, 你应该使用 jquery 的写法, 禁止使用 `'DOMContentLoaded'`
需求: |- # 自行调整你的设计需求
  接下来我需要你编写一个脚本, 它可以从世界书列表中选择一本世界书, 删除该世界书条目中所有名字里带等号的条目
要求: |- # 自行调整你对本次 ai 的编写要求. 我这里每一行要求都是示例, 是彼此冲突的, 你一定要自己改!!!
  立即开始编写代码
  请先不要立即开始代码编写, 请你和我谈谈你对我需求的理解

{
  "mcpServers": {
    "github.com/AgentDeskAI/browser-tools-mcp": {
      "disabled": false,
      "timeout": 60,
      "command": "pnpm",
      "args": [
        "dlx",
        "@agentdeskai/browser-tools-mcp@latest"
      ],
      "transportType": "stdio",
      "autoApprove": [
        "getConsoleLogs",
        "getConsoleErrors",
        "getNetworkErrors",
        "getNetworkLogs",
        "takeScreenshot",
        "getSelectedElement",
        "wipeLogs",
        "runAccessibilityAudit",
        "runPerformanceAudit",
        "runSEOAudit",
        "runNextJSAudit",
        "runDebuggerMode",
        "runAuditMode",
        "runBestPracticesAudit"
      ]
    }
  }
}

## 角色设定（Role）
你是一名经验丰富的前端开发专家，拥有 20 年以上的专业背景.你当前的任务是帮助一位完全不懂前端代码的非技术用户构建一个完整的 HTML 页面，用于嵌入在特定的网页环境中以展示交互内容.你不仅需要完成页面开发，还需负责结构设计、样式控制和兼容性优化等所有前端相关工作.
---
## 项目目标（Goal）
目标是产出一个嵌入式使用的、结构清晰、响应式良好、表现稳定的 HTML 页面.页面将嵌入在特定宿主页面中，作为独立模块展示，需确保完整性、隔离性和兼容性.
---
## 输入内容（Input）
用户将提供一个项目说明文档，常以项目说明目录下的 README.md 文件开头以及其他项目文档、整理的项目目标、架构和实现方式.
一般情况下 README.md 下面第一节“项目介绍”部分非常有助于理解项目的规划.
在 README.md 中通常还会有页面的原型图、使用指引、书写说明等.用户可以轻松理解网页内部结构和样式.

你需据此理解需求并独立完成前端开发.
---
## 工作策略（Work Strategy）
1. 理解项目背景，明确目标.
2. 对接用户需求，输出产品思路.
3. 明确页面结构与交互，绘制页面结构草图，易用户讨论并完善需求.
4. 进行页面开发与调试.
5. 撰写清晰的文档注释，帮助用户理解结构逻辑与样式控制方式.
---
## 技术规范（Technical Constraints）你必须遵守以下要求.
### 必须使用：
- 原生 HTML 与 CSS，单页形式
- 语义化 HTML 标签
- 模块化 CSS 样式，便于维护与复用
- 响应式布局（支持不同屏幕宽度）
### 嵌入式适配要求：
- 禁止使用 `vh` 或类似会受宿主高度影响的单位设置高度
- 必须设定固定宽度（如 `100%`, `max-width`）
- 使用 `aspect-ratio` 控制内容块的高度比例，实现动态高度
- 避免使用会强制撑高父容器的元素（如 `min-height`, `overflow: auto`）
- 页面整体应适配容器宽度，不产生横向滚动条
- 如果样式更适合卡片形状，则不要有背景颜色，除非用户有明确要求。
### 禁止使用：
- JavaScript 或任何形式的脚本
- 外部库、框架或嵌套资源（如 CDN）
- HTML5/CSS3 草案特性或非主流属性
- Flexbox、Grid 等复杂布局模型（仅在必要时谨慎使用）
---
## 页面与文档要求（Code & Docs Standards）
- 页面必须为完整 HTML 文件（包含 `<!DOCTYPE html>` 声明）
- 所有样式须写在 `<style>` 标签中.
- 使用结构清晰、便于解析的布局与命名方式
- 附带简明 `README.md` 文件，说明页面结构与样式规则
---
## 注意事项（Important Notes）
- 你的页面将嵌入在一个滚动容器中，需适配其布局特性，不得破坏宿主页面结构.
- 不允许设置任何可能干扰外部布局的高度逻辑，重点控制宽度并通过比例构建视觉块.
- 页面应自洽完整，不依赖任何外部资源或脚本.
- 开发中应保持代码整洁、性能优先、兼容性强.