# @brotskyllc/prompt-this-spot 中文文档

规范地址：https://npmcn.com/package/%40brotskyllc/prompt-this-spot/

版本：0\.1\.0
npm 元数据更新时间：2026-10-05T21:53:24.184Z
中文译文更新时间：2026-11-08T16:08:07.476Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brotskyllc/prompt-this-spot
原文对照：https://npmcn.com/package/%40brotskyllc/prompt-this-spot/?lang=original
项目主页：https://github.com/AEGIS-Security-Investigations/prompt-this-spot#readme
源码仓库：https://github.com/AEGIS-Security-Investigations/prompt-this-spot

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：441 kB，112 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：@codemirror/view ^6\.0\.0，@uiw/react-codemirror ^4\.21\.0，lucide-react \>=0\.400\.0，react ^19\.0\.0，react-dom ^19\.0\.0
- 首次发布：2026-10-05T21:53:23.689Z
- 最新版本发布：2026-10-05T21:53:24.040Z
- 近 30 天下载量：70923（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 1 个）

## 中文简介

指向一个 React app 中的某个点,捕捉到它,并交给一个 AI 编码代理一个现成的快件——或者把它作为用户反馈归档.

## 安装

```sh
npm install @brotskyllc/prompt-this-spot
```

也可以使用：`pnpm add @brotskyllc/prompt-this-spot`、`yarn add @brotskyllc/prompt-this-spot`、`bun add @brotskyllc/prompt-this-spot`

## README

# 即时 - 此位点: 单击您的 React app 中的任何元素并获得一个 AI 编码代理的即时快捷

**提示这个点** 是一个开源 React 组件库,将“ 此按钮” 转换为精确的 AI 编码代理, 如 Claude Code, Cursor 或 GitHub Copilot 。 您单击您想要更改的页面部分, 键入您想要的, 它会写出一个提示, 通过可见的文本、 HTML 标记、 属性、 CSS 类和 DOM 路径来命名每个元素, 并附上一个截图链接 。 相同的抓取核心还赋予一个应用中的权力 **用户反馈部件** 有截图和错误报告.

-   **许可证 :** 麻省理工学院
-   **工作单位:** React 19, Next.js, Tailwind CSS v3 and v4, shadcn/ui, 和没有 Tailwind的应用程序通过预建的样式表
-   **输出 :** plain-text 提示您可以粘贴到任何 AI 编码助手, 加上网络上的 Claude Code 和 Claude 代码桌面和 CLI 应用程序的一击链接
-   **后端 :** 未包含; 您插入您自己的截图存储和反馈端点

## 目录

-   [为什么这么快](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-why-prompt-this-spot)
-   [特征](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-features)
-   [示例提示](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-example-prompt)
-   [如何运作](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-how-it-works)
-   [安装](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-install)
-   [解决问题](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-troubleshooting)
-   [配置](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-configuration)
-   [不断更新应用程序](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-keeping-apps-up-to-date)
-   [财务问题](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-faq)
-   [发展中国家](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-developing)

## 为什么这么快

AI编码代理擅长更改代码,但不能猜测你指的是UI的哪一部分. "让升级按钮更大"让代理在右页搜索代码库右键. proogle-this-spot 给代理商提供了缺失上下文:路径,精确元素,其类和测试ID,其位置位于DOM中,以及其相片. 代理人可以直接去组件而不是猜测.

它帮助了两组人:

-   **开发者、设计者和产品审查员** 做视觉QA,想将UI更改交给AI代理,而不以文字描述页面.
-   **您应用程序的用户** 他们想要报告一个错误 或者通过指点它来建议改进。 他们的报告在到达时 已经写了同样的AI准备的快件, 所以分解可以直接去一个代理.

## 特征

它运送两个工具 共享一个捕获核心:

-   **启动此位置** (Element spector for AI poils):工程师点击他们想要更改的页面部分,打出他们想要的,并获得一个AI编码代理的提示. 提示描述每个元素(DOM路径,可见文本,样式)并链接其截图. 他们可以复制快件,在网络上用克洛德代码打开快件,或者用当地的克洛德代码安装来打开快件. 键盘快捷键为QQ/Ctrl + Shift + P.
-   **发送反馈** (In-app反馈和bug report 部件):应用程序在出错时的用户,添加截图,选择一个类别并描述问题. 报告在你的后端 和已经组装好的AI提示一样 所以有人可以直接把它交给特工.

这两个工具还:

-   一次选择数个元素,甚至跨页面导航,并以一个编号的快取来描述它们.
-   在浏览器中抓取元素和全页截图 `modern-screenshot`,每个上有一个可选的注释.
-   在发送前将任意截图标出箭头,框,自由行和文本标签. 被标记的相片取代了平面相片,被提示者告诉代理被标记是用户的,而不是应用程序的一部分.
-   以左手抽屉的形式打开,将喷出物推到一边,因此页面保持可见并可点击.
-   在打开的对话框、 弹出和菜单中选择元素 .
-   提供可被拖至任何角落并记住其位置的发射器.
-   支持光和暗模式,并通过Tailwind类的超标取出你的品牌颜色.
-   不被允许使用它们的用户(按要求的重码负载)不要加入捆绑.

## 示例提示

点击“ 升级计划” 按钮 `/settings/billing` 输入请求后产生此提示 :

```text
Repository: your-org/your-repo
Page URL: https://app.example.com/settings/billing?tab=plans

In our app on the page "/settings/billing", I'm pointing at this element:

- What it shows: "Upgrade plan"
- Element: <button> data-testid="upgrade-plan"
- Classes: btn btn-primary
- Location (DOM path): button[data-testid="upgrade-plan"]

What I want changed here: Make this button full width on mobile
```

仓库来自 `repoSlug`,且页面 URL 是该元素被选中时浏览器中的一个,因此代理可以区分出两个具有相同路由的应用程序,或者本地开发的预览部署. URL中的秘密(证书、令牌、 API 密钥、 OAuth 代码、 签名- URL 签名、 查询或碎片) 被替换为 `REDACTED` 在显示或存储 URL 之前。 当点点来自不同的页面时,每个点都携带自己的URL. 抽屉显示当前页面的URL,并在应用程序导航时不断更新.

当屏幕截图打开时,每个元素也会得到一个公共截图 URL 代理可以打开. 一个可选的复选框附加了对单位和端到端测试覆盖的请求.

## 如何运作

1.  **选.** Pick 模式突出光标下的元素。 点击可以直接记录元素的描述,从而在元素卸载后幸存(例如,当其对话框关闭后).
2.  **抓起来.** 该软件包在浏览器中制作元素及其周围的截图,并将PNG交给您的上传功能,该功能返回了公共URL.
3.  **相会相会.** 它从寄存器、页面 URL 、 元素描述、 截图链接和请求中构建一个纯文本提示 .
4.  **手拿开.** "Prompt this spoint"复制了快取或用克洛德码打开. "发送反馈"通过,连同报告的其余部分,到你 `submitFeedback` 函数.

包裹船作为TypeScript源. 它使用 React 19, Tailwind CSS 类, shadcn/ui 主题符号, Radix 原始和 `modern-screenshot`。 它没有后端: 您的应用程序通过一个提供者提供不同应用程序( 应用程序可能使用每个工具, 截图存储, 反馈发送) 的部件 .

## 安装

在 React app 中添加 prot- this-spot 需要六步 。 例子使用 Next.js 与 App 路由器和 Bun; 其他设置需要相同的部件.

-   [ ] [1\. 增加包件](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-1-add-the-package)
-   [ ] [2\. 让你的捆绑者编集](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-2-let-your-bundler-compile-it)
-   [ ] [3\. 让Tailwind看到自己的班级](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-3-let-tailwind-see-its-classes)
-   [ ] [4\. 增加提供者部分](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-4-add-a-provider-component)
-   [ ] [5\. 在您根部布局中挂起](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-5-mount-it-in-your-root-layout)
-   [ ] [6\. 添加后端路线](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-6-add-the-backend-routes)

礛 [检查它是否有效](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-check-that-it-works)如果有问题,请看 [解决问题](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-troubleshooting)。 。 。 .

**在你开始之前**,你的应用需要回放19。 使用 Tailwind CSS (v3 或 v4) 软件包的类会与您的应用程序的其余部分一起编译; 没有它, 请导入预建的样式表( 见步骤 3) 。 不需要阴影/ 介质 .

### 让一个AI编码代理安装它

你可以把全部工作交给克洛德代码或其他编码代理商. 在您的应用程序仓库中粘贴此提示 :

```text
Install the prompt-this-spot package in this app by following the Install
section of https://github.com/AEGIS-Security-Investigations/prompt-this-spot#install.
Pin it to the newest commit on main. Show "Prompt this spot" to admins only and
"Send feedback" to every signed-in user, using this app's existing auth and toast
helpers. Store screenshots in the object storage this app already uses. Save
feedback where this app keeps similar records, or ask me if there is no obvious
place. Then run the app's typecheck, lint and tests.
```

改变谁看到每个工具适合你的应用.

### 1\. 增加包件

Npm 软件包名称为 `@brotskyllc/prompt-this-spot`。在首次发布后,安装被绑定的版本 `npm install --save-exact @brotskyllc/prompt-this-spot@0.1.0`。 。 。 .

对于来自 GitHub 的源安装, 标出一个承诺, 这样每个安装都得到相同的代码 :

```bash
# Find the newest commit on main
git ls-remote https://github.com/AEGIS-Security-Investigations/prompt-this-spot refs/heads/main

# Add the package pinned to that commit
bun add github:AEGIS-Security-Investigations/prompt-this-spot#<commit-sha>

# Add the peer dependencies your app doesn't already have
bun add lucide-react @uiw/react-codemirror @codemirror/view
```

npm, pnpm和Yarn也一样 `github:owner/repo#sha` 谱. 承诺也让 [更新工作流程](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-keeping-apps-up-to-date) 当此寄存器更改时, 打开拉动请求 .

将一个承诺绑起 `main`。当一个拉动请求的分支被删除后,它会消失,然后每次安装都失败。 更新工作流程中也拒绝移动这样的接角.

一旦一个版本在npm上, 取决于这个, 准确的绑住: `bun add @brotskyllc/prompt-this-spot@<version> --exact`。 。 。 .

### 2\. 让你的捆绑者编集

包船作为TypeScript源,所以你的捆绑者必须编译. 在下一个.js中:

```js
// next.config.js (or next.config.mjs / next.config.ts)
module.exports = {
  transpilePackages: ["@brotskyllc/prompt-this-spot"],
};
```

### 3\. 让Tailwind看到自己的班级

尾风只生成扫描文件中的类,而不扫描 `node_modules` 默认。 将软件包添加到扫描中 :

```js
// Tailwind v3: tailwind.config.js
content: [
  // ...
  "./node_modules/@brotskyllc/prompt-this-spot/src/**/*.{ts,tsx}",
],
```

```css
/* Tailwind v4: your global stylesheet. The path is relative to this file. */
@source "../../node_modules/@brotskyllc/prompt-this-spot/src";
```

工具使用shadcn/ui主题符号(`bg-card`, (中文(简体) ), `text-muted-foreground`, (中文(简体) ), `bg-popover`, (中文(简体) ), `ring-ring`, (中文(简体) ), `bg-primary`, (中文(简体) ), `text-destructive`和 `tailwindcss-animate` 类别(`animate-in`, (中文(简体) ), `fade-in-0`, (中文(简体) ), `zoom-in-95`) (中文(简体) ). 如果您的应用程序使用 shadcn/ ui , 这些已经定义 。 如果没有,请定义您 Tailwind 主题中的颜色并添加 `tailwindcss-animate` (或 `tw-animate-css` 4号公路 暗模式遵循 `class` 战略`<html class="dark">`) (中文(简体) ).

#### 没有尾风? 导入预建的样式表

不运行 Tailwind 的 Apps 一次导入已编译的样式表, 例如在 root 版式中, 并跳过上面的内容扫描 :

```ts
import "@brotskyllc/prompt-this-spot/styles.css";
```

它只持有软件包使用的类,一个重设范围到工具本身的元素(所有标记 `data-inspect-ignore`),入出动画,并默认主题颜色的光和暗值. 它没有重新塑造你的应用程序的其余部分。 要改变主题颜色, 请设置其 `--pts-*` 例如,自定义属性 `:root { --pts-primary: #0f766e; }`属性为 `--pts-background`, (中文(简体) ), `--pts-foreground`, (中文(简体) ), `--pts-card`, (中文(简体) ), `--pts-card-foreground`, (中文(简体) ), `--pts-popover`, (中文(简体) ), `--pts-popover-foreground`, (中文(简体) ), `--pts-primary`, (中文(简体) ), `--pts-primary-foreground`, (中文(简体) ), `--pts-muted`, (中文(简体) ), `--pts-muted-foreground`, (中文(简体) ), `--pts-accent`, (中文(简体) ), `--pts-accent-foreground`, (中文(简体) ), `--pts-destructive`, (中文(简体) ), `--pts-border`, (中文(简体) ), `--pts-input` 财务报告和审定财务报表 `--pts-ring`。 。 。 .

不要在已经用 Tailwind 扫描软件包的应用程序中导入: 两者会两次定义相同的类.

#### 无树摇动的邦德勒斯( Expo web)

Metro, 博览会网络的捆绑器, 不树摇, 所以从 `@brotskyllc/prompt-this-spot` 将两种工具捆绑入您的第一个页面负载中, 即使对于从未看到它们的用户来说也是如此. 仅挂载“ 推动此点” 导入自 `@brotskyllc/prompt-this-spot/inspect-prompt` 换句话说 它有提供者, `createScreenshotUploader`、首选和发射装置-装订供应商以及 `InspectPromptToolGate`,它只会在门打开时装入工具本身.

### 4\. 增加提供者部分

创建一个客户端组件来包裹您的应用程序 。 它提供你的应用的适配器 并挂载两个工具:

```tsx
// src/components/PromptThisSpot.tsx
"use client";

import {
  createScreenshotUploader,
  FloatingLauncherStackProvider,
  InspectPromptPreferencesProvider,
  InspectPromptToolGate,
  type PromptThisSpotConfig,
  PromptThisSpotProvider,
  UserFeedbackToolGate,
} from "@brotskyllc/prompt-this-spot";
import { useMemo } from "react";

export function PromptThisSpot({ children }: { children: React.ReactNode }) {
  const { user } = useCurrentUser(); // your auth
  const { toast } = useToast(); // your toasts

  const config = useMemo<PromptThisSpotConfig>(
    () => ({
      notify: toast,
      repoSlug: "your-org/your-repo",
      uploadPromptScreenshot: createScreenshotUploader("/api/prompt-this-spot/screenshot"),
      uploadFeedbackScreenshot: createScreenshotUploader("/api/feedback/screenshot"),
      submitFeedback: async (submission) => {
        const res = await fetch("/api/feedback", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(submission),
        });
        if (!res.ok) throw new Error("Couldn't save your feedback.");
      },
    }),
    [toast]
  );

  return (
    <PromptThisSpotProvider config={config}>
      <InspectPromptPreferencesProvider>
        <FloatingLauncherStackProvider>
          <div data-app-push-root className="min-h-svh">
            {children}
          </div>
          <InspectPromptToolGate eligible={Boolean(user?.isAdmin)} />
          <UserFeedbackToolGate eligible={Boolean(user)} />
        </FloatingLauncherStackProvider>
      </InspectPromptPreferencesProvider>
    </PromptThisSpotProvider>
  );
}
```

每个部分都做什么:

-   `data-app-push-root` 标记抽屉打开时推到一边的元素。 把两道门放在门外 让抽屉固定在左边.
-   `eligible` 决定谁看到每个工具。 一个出闸直到它是真的,没有资格的用户从不下载工具的重码(截图渲染器,CodeMirror). 反馈工具还等其启动器上第一次点击,因为通常会向每个被签名的用户显示.
-   只挂起你想要的门。 一个只想要“发送反馈”的应用程序可以忽略 `InspectPromptToolGate` 财务报告和审定财务报表 `uploadPromptScreenshot`。 。 。 .
-   `repoSlug` 是 GitHub 寄存器“ 发送到克劳德代码” 按钮打开 。 它的名字也出现在每个快件的顶端 包括反馈报告 `promptText`。 。 。 .

### 5\. 在您根部布局中挂起

```tsx
// app/layout.tsx
import { PromptThisSpot } from "@/components/PromptThisSpot";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PromptThisSpot>{children}</PromptThisSpot>
      </body>
    </html>
  );
}
```

把它放在你的认证 和土司供应商 `useCurrentUser` 财务报告和审定财务报表 `useToast` 工作时.

### 6\. 添加后端路线

软件包从不谈论存储或数据库本身. 提供:

| 适配器 | 接收 | 必须返回 |
| --- | --- | --- |
| `uploadPromptScreenshot`, (中文(简体) ), `uploadFeedbackScreenshot` | a 巴布亚新几内亚 `data:` 網址 | `{ url, expiresAt? }`时 `url` 可公开阅读(一个AI代理从提示打开)和 `expiresAt` 是 ISO 日期,如果图像被保存则无效 |
| `submitFeedback` | (单位:千美元) `UserFeedbackSubmission` (消息、 分类、 路径名、 组装的提示、 选择、 截图、 视图) | 无; 丢出 `Error` 在抽屉中显示信件 |

`createScreenshotUploader(path)` 覆盖上传的客户端: 它 POST `{ dataUrl }` 作为JSON的路线,并返回JSON的响应. 访问者被允许的路由检查,解码PNG,将其存储在公共对象存储中,并回复 `{ url, expiresAt }`。在错误中返回 `{ error }` 并且抽屉里有信息 以下是Next.js的路线

```ts
// app/api/prompt-this-spot/screenshot/route.ts
import { put } from "@vercel/blob";
import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const user = await getCurrentUser(); // your auth
  if (!user?.isAdmin) {
    return NextResponse.json({ error: "Not allowed." }, { status: 403 });
  }

  const { dataUrl } = await request.json();
  const prefix = "data:image/png;base64,";
  if (typeof dataUrl !== "string" || !dataUrl.startsWith(prefix)) {
    return NextResponse.json({ error: "Expected a PNG." }, { status: 400 });
  }

  const png = Buffer.from(dataUrl.slice(prefix.length), "base64");
  const blob = await put(`@brotskyllc/prompt-this-spot/${crypto.randomUUID()}.png`, png, {
    access: "public",
    contentType: "image/png",
  });

  // Return an expiry date instead of null if you delete old screenshots.
  return NextResponse.json({ url: blob.url, expiresAt: null });
}
```

任何给回一个公共URL的存储都以同样的方式(S3, Cloudflare R2, Google Cloud存储等)工作. 反馈截图路由相同,检查改为"任何签入用户". 这个 `/api/feedback` 路径收到 `UserFeedbackSubmission` 作为JSON,并保存它 无论你的应用保存记录; `promptText` 是现成的AI提示.

屏幕截图URL是公开的,因此任何有链接的人都可以打开图像. 如果您的应用程序显示敏感数据, 请保持链接不可理解( 如上) , 并删除时间表中的旧截图 .

### 看有没有用

1.  以符合"Prompt this spoint"条件的用户身份签名并重新加载应用程序. 它的发射器出现在页面的一角.
2.  按QQ/Ctrl + Shift + P,点击页面上的一个按钮,键入请求并复制提示. 它应该命名页面和按钮.
3.  在抽屉里取个截图 它应当上传,其链接应当以新的标签打开.
4.  打开"发送反馈",指向某事,描述并发送. 报告应该送达你 `/api/feedback` 路线.
5.  切换到暗模式和一个电话宽的窗口,检查两个抽屉仍然读得很好.

### 解决问题

| 症状 | 修补 |
| --- | --- |
| 构建失败 `@brotskyllc/prompt-this-spot` | 将软件包添加到 `transpilePackages` (步骤2). |
| 抽屉或发射器没有样式、透明或奇怪的放置 | 尾风没有扫描包(第3步),或者阴影/取入颜色符号没有定义. 没有尾风, 导入 `@brotskyllc/prompt-this-spot/styles.css`。 。 。 . |
| 抽屉盖了页子 而不是推到一边 | 添加 `data-app-push-root` 以连接您的应用软件的元素, 并保持其门外( 第4步) . |
| 没有发射装置 | 检查 `eligible` 对已签名的用户来说是真实的。 "推进这个位置"发射装置也可以通过它的 `enabled` 首选项,存储于 `localStorage`; 读取或重置 `useInspectPromptPreferences()`。 。 。 . |
| Playwright 或 Cypress 缺少反馈启动器 | 自动浏览器不会看到它,除非 `sessionStorage` 键入 `feedbackE2eOptInStorageKey` 实值 `"1"` (见 [配置](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-configuration)) (中文(简体) ). |
| 屏幕截图因行出错而失败 | 消息来自您的上传路线 `{ error }` 反应。 检查路线的认证 检查和存储证书. |
| 图像或标志在截图中为空白 | 该图像来自另一个来源,没有CORS头,因此浏览器不会让它被复制到截图中. 让你的应用程序的源头 在存储桶或CDN. |
| “发送到克劳德代码”打开时没有选择仓库 | 设定 `repoSlug` 在配置中. |

## 配置

每一个领域 `PromptThisSpotConfig` 可选 :

| 外地 | 默认 | 它会做什么 |
| --- | --- | --- |
| `notify(toast)` | 无 -op | 显示 `{ title, description?, variant? }` 土司(阴影/井) `toast()` 适应) |
| `logError(message, context)` | `console.error` | 报告一个截图失败 |
| `repoSlug` | 无 | GitHub 图像 `owner/name` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}"送去克洛德代码"打开 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}这提示了名字 |
| `uploadPromptScreenshot` 编号 : `uploadFeedbackScreenshot` | 掷出 | 屏幕截图存储(见上文) |
| `promptScreenshotRetentionDays` | `7` | “ 推动此位置” 告诉代理服务器最后的截图链接多少天; 匹配您的存储内容 |
| `promptScreenshotsToggle` | `false` | 在"Prompt this spot"抽屉中显示一个“Capture 截图”复选框,用于没有自己设置的应用程序用于此偏好 |
| `submitFeedback` | 掷出 | 反馈存储(见上文) |
| `feedbackCategories` | 断/混淆/思想/颂/他 | `{ value, label }[]` 用于反馈表; 第一张预选 |
| `feedbackTheme` | 中性蓝色 | 任何部分反馈部件的尾风类覆盖(参见 `defaultUserFeedbackTheme`(中文(简体) ) |
| `feedbackE2eOptInStorageKey` | `prompt-this-spot:e2e-user-feedback` | 自动浏览器( A)`navigator.webdriver`除非这个 否则不要看到反馈发射器 `sessionStorage` 键为 `"1"` |

每个浏览器存储“ 推动此位置” 偏好 `localStorage`:发射器是否显示,其角,截图是否被捕获,以及即时是否要求测试覆盖. 读取并设定为 `useInspectPromptPreferences()` 来构建自己的设置.

### 匹配你的品牌

传递任意子集 `defaultUserFeedbackTheme`钥匙 未设置密钥保存默认值 :

```ts
feedbackTheme: {
  userFeedbackLauncher: "… your launcher classes …",
  userFeedbackPrimaryAction: "… your button classes …",
},
```

如果班级住在您的应用程序的源文件中, Tailwind已经扫描过它们.

## 不断更新应用程序

被绑在承诺上或者一个版本的应用程序本身不会产生变化. [`docs/consumer-update-workflow.yml`](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/docs/consumer-update-workflow.yml) 是一个 GitHub 动作工作流程, 您可以复制到应用程序中 `.github/workflows/`。在时间表上(以及当它重新发布时),它发现npm上的最新版本(对于一个版本的应用程序)或最新的承诺 `main` (对于一个任务上的应用程序),更新依赖和锁定文件,并打开一个显示更改的拉出请求. 你像其他公关一样审查并合并它.

工作流程只将依赖推进. 如果一个应用被绑定 一项承诺没有在 `main`,它失败了,留下了针 单独,而不是取而代之的是老的 `main`。它从不以旧版本取代版本.

为了在合并后把公关弄好 不只是在日程安排上 `CONSUMER_DISPATCH_TOKEN` 隐藏到此寄存器并列出应用程序 `.github/workflows/notify-consumers.yml`符号需要允许发送 `repository_dispatch` 这些应用程序的事件(对于一个精细的符号,内容读取和写出).

## 财务问题

### 什么是即时 -这个点?

一个反应库,允许您在运行中的网络应用程序中单击一个元素,并获得一个文字提示来描述该元素的AI编码代理. 它还包括一个应用中的反馈部件,将同样的快取和截图附加在用户错误报告上.

### 它与哪些AI编码代理?

任何接受文字的代理人. 提示是纯文本,所以可以将其粘贴到克洛德代码,Cursor,GitHub Copilot,Windsurf,ChatGPT或其他助手中. 也有一击按钮在网络上打开克洛德码中的提示(预选您的寄存器),或者在本地克洛德码安装中打开.

### 和Next.js合作吗?

对 将软件包添加到 `transpilePackages` 和 Tailwind 的内容扫描,如 [安装](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-install),它使用 Next.js 整个。 其它 React 19 设置也应该工作, 只要它们的捆绑器编译 TypeScript 从 `node_modules` 尾风扫描软件包的来源.

### 它需要后端还是付费服务?

未涉及主机服务. 您提供了您自己的两条小路线:一条是存储一个PNG并返回一个公共URL,另一条是保存反馈. `createScreenshotUploader` 操作上传的客户端.

### 终端用户能看到吗?

除非你让他们。 每个工具都有 `eligible` 旗下,因此可以向管理员或内部工作人员显示"Prompt this spot",向每个登录用户显示"发送回馈",也可以不显示.

### 截图拍得怎么样?

在浏览器中,没有扩展或屏幕记录权限. 软件包复制页面,每个计算样式都包含在 SVG 中 `<foreignObject>` 并有浏览器绘制它, 所以字体,阴影, `object-fit`,梯度,短发的文本和现代的色彩函数看起来和屏幕上一样. 粘贴头,固定条和滚动面板被绘制在用户看到的地方. 嵌入式相框和图像来自另一个来源,没有CORS头条显示为空白,提示器告诉了代理商.

### 用户可以绘制截图吗 ?

对 每个上传的截图都有 **标出** 按钮,可以打开一个编辑器,以四个颜色显示箭头、框、自由手和文本工具,加上反向和清晰。 与鼠相通,指相通或相通相通. 保存通过同一上传器上传标记的图像,以取代平原图像 。 原始的抓取会留在内存中,所以重新打开编辑器可以让用户更改或去掉更早的标记,而不会把它们画上. 较早的,未加标记的上传不被删除;在正常保留的情况下,上传过期.

### 是晚上吗?

公共 npm 软件包的名称 `@brotskyllc/prompt-this-spot`检查 `npm view @brotskyllc/prompt-this-spot version` ; 源安装可以使用被绑定的 GitHub 承诺(参见 [添加软件包](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/#readme-1-add-the-package)) (中文(简体) ). 可选 [发布工作流程](https://npmcn.com/package/%40brotskyllc/prompt-this-spot/.github/workflows/publish.yml) 启用时添加出处和 GitHub 释放 .

## 发展中国家

```bash
bun install
bun run check      # typecheck + biome + unit tests
bun run test:e2e   # Playwright, against the fixture app in e2e/fixture
```

端到端的规格需要铬:运行 `bunx playwright install chromium` 一次,或点 `PLAYWRIGHT_CHROMIUM_EXECUTABLE` 在铬你已经有.

如果您在其中添加或更改了 Tailwind 类 `src`,重建预建的样式表,并随更改(CI过期时失败)而承诺:

```bash
bun run build:css
```

### 释放

发表于 `NPM_PUBLISH` 仓库变量集为 `true`),每次合并为 `main` 谁 `version` 内 `package.json` 尚未发布 npm, 标记 `v<version>` 并在GitHub上发布,与该版本的 `CHANGELOG.md` 部分作为发布注释。 然后通知应用程序。 更改的拉动请求 `src`,预建的样式表或依赖关系必须提高 `version` 添加一个 `CHANGELOG.md` 条目,以及 CI 检查版本 : 修正的补丁, 新选项或导出的小补丁, 主要用于断开更改 .

时不发布 `NPM_PUBLISH` 是未设定的,无论触发工作流程。 手动运行 **发布到 npm** 除非它的“ publish” 输入也被勾选, 否则是干燥运行 。 如果无法分辨该版本是否已经在npm上,工作流程会停止,而不是发布.

在发布之前, 请检查究竟要上传什么 :

```bash
bun run check:package     # packs the tarball: allowlisted files only, no secrets
npm publish --dry-run --provenance=false   # uploads nothing
bun run test:consumer     # installs the tarball into a fresh Next.js app and builds it
```

CI每个拉拉请求都运行三个.

对于经批准的一次性发行,公布经审计的柏油球 `npm publish <tarball> --access public --provenance=false --registry=https://registry.npmjs.org/` 使用 npm 授权账户。 这个本地路线没有CI出处,也不通知消费者应用. 离开 `NPM_PUBLISH` 除非现行自动释放和消费者通知是分开的。 信任的出版可以在稍后由所有者配置;此手动发行不需要它.

### 尝试更改应用程序

要尝试在合并前更改一个应用程序, 请链接您的本地退出 :

```bash
# in this repo
bun link
# in the app
bun link @brotskyllc/prompt-this-spot
```

保持软件包的应用中性. 应用程序之间任何不同之处(自动、存储、复制特定产品、品牌颜色)都属于后面 `PromptThisSpotConfig`代码里没有 保留 `data-testid` 值稳定,因为应用程序的端到端测试选择在它们上.

## 许可证

麻省理工学院

## 常见问题

### @brotskyllc/prompt-this-spot 是什么？

指向一个 React app 中的某个点,捕捉到它,并交给一个 AI 编码代理一个现成的快件——或者把它作为用户反馈归档\.

### 如何安装 @brotskyllc/prompt-this-spot？

在项目目录运行 npm install @brotskyllc/prompt-this-spot，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@codemirror/view（^6\.0\.0）、@uiw/react-codemirror（^4\.21\.0）、lucide-react（\>=0\.400\.0）、react（^19\.0\.0）、react-dom（^19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brotskyllc/prompt-this-spot 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brotskyllc/prompt-this-spot 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @brotskyllc/prompt-this-spot 可以商用吗？

@brotskyllc/prompt-this-spot 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @brotskyllc/prompt-this-spot 的下载量有多少？

根据 npm 官方下载统计，@brotskyllc/prompt-this-spot 在 2026/10/09 – 2026/11/07 这 30 天内被下载 70,923 次，日均约 2,364 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brotskyllc/prompt-this-spot 还在维护吗？

最新版本 0\.1\.0 发布于 2026/10/06（1 个月前）；至今共发布 1 个版本，其中过去 12 个月发布了 1 个；首次发布于 2026/10/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。