为教程【正确使用酒馆助手】而设立的命令与提示词等内容的存放中心，并不是教程而是用于复制粘贴

✨ 络络命令仓库 ✨

常用命令与提示词

方便你忘记时候回来查询命令：

使用Winget批量安装软件: winget install Microsoft.VisualStudioCode Git.Git Python.Python.3.13 OpenJS.NodeJS.LTS pnpm.pnpm MikeFarah.yq LLVM.ClangFormat
设置PowerShell执行策略 set-executionpolicy remotesigned
安装依赖：pnpm install
config.yaml 中添加路径
launch.json 中修改酒馆网址
构建完整代码：pnpm build
MCP : npx @agentdeskai/browser-tools-server@latest
记忆银行：initialize memory bank

Curosr提示词模板

这里永远最新
注：花括号{ }之中是需要你（正在看教程的人类）需要自行修改的内容

⎗
✓
@tsconfig.json @package.json @slash_command.txt @types/function/index.d.ts @types/iframe_client/index.d.ts 

请你查看以上文件。
我们的项目支持jquery、jquery-ui、lodash、toastr、yaml 库，更多内容你可以访问package.json查询，但你不需要导入他们，他们是被全局支持的。
与LLM/SillyTavern互动的方法在function、iframe_client和slash_command文件中。
根据上方文件内容，你不需要在html中导入css/scss，也不需要导入脚本，这一切都由外部进行。你需要在index.ts中导入scss。
注意，由于这个特殊性，我们的界面高度不应当使用vh，请你使用宽度与aspect-ratio来让高度根据宽度动态调整。
再次提醒：永远不要在高度中使用vh，尽量不要设置高度而是使用宽度与aspect-ratio来实现。
如果需要在加载或卸载时执行功能，你应该参考 src/脚本示例/加载和卸载时执行函数.ts 中的写法，而不是使用 DOMContentLoaded

{这里替换成你的要求：
例如：接下来我需要你制作一个内嵌在一个模拟聊天界面中的一个角色状态栏。
网页是SillyTavern，其中新版本功能支持内嵌完整的html网页，我希望使用这个功能来制作一个角色的模拟的手机页面。
手机页面包括应当包含边框、刘海等。
简单的当前角色状态和简单的聊天界面。}

{如果你是比较大型的项目: 接下来我会请你以scss、TypeScript、html最佳实践来进行编写操作，你可以在文件夹内创建新的目录结构，分模块化创建TypeScript脚本，并建立Readme文档与注释来简要写明每个模块的作用。另外，不要使用.tsx文件}

{如果你是比小型的项目：请你评估我的需求是否真正需要脚本，如果需要，脚本请使用jQuery库来编写。你不需要将数据存在脚本里，而是直接制作一个界面，所有数据都在html文件中。}


{你可以在结尾增加上这一次要求cursor做的内容，比如：
- 立即开始编写代码
- 创建一个readme.md文件在其中写下你的计划
- 请先不要立即开始代码编写，请你和我谈谈你对我需求的理解。
上方是三个例子}

注意：花括号{ }之中是需要你（正在看教程的人类）需要自行修改的内容

请记得根据你的项目类型来选择其中的提示词，另外，你可以和AI发送你的需求，让他判断你的需求是否需要使用到脚本！
请你着重记得强调，告诉AI脚本可以使用jQuery和lodash，避免他忘记！
创建好的文件需要使用pnpm build来构建，如果你不知道pnpm build是什么或者没用过，请你好好看一遍教程吧><从安装好cursor的部分开始。

让Cursor能够查看浏览器的MCP

项目地址：https://github.com/AgentDeskAI/browser-tools-mcp
cursor填写的设置内容：

⎗
✓
{
  "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"
      ]
    }
  }
}

在终端输入的命令：npx @agentdeskai/browser-tools-server@latest

Figma .cursorrules提示词

⎗
✓
## 角色设定（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）
- 你的页面将嵌入在一个滚动容器中，需适配其布局特性，不得破坏宿主页面结构.
- 不允许设置任何可能干扰外部布局的高度逻辑，重点控制宽度并通过比例构建视觉块.
- 页面应自洽完整，不依赖任何外部资源或脚本.
- 开发中应保持代码整洁、性能优先、兼容性强.

如果你是手机用户，无法使用电脑

请告诉你的AI，我们的项目全局支持jquery、jquery-ui、lodash、toastr、yaml 库，请你尽可能的使用这些库来简化脚本代码

页面最后更新: [2025-6-10]