# @codeandfunction/pixelnotperfect 中文文档

规范地址：https://npmcn.com/package/%40codeandfunction/pixelnotperfect/

版本：5\.0\.3
npm 元数据更新时间：2026-10-24T11:52:51.371Z
中文译文更新时间：2026-11-10T09:34:48.305Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40codeandfunction/pixelnotperfect
原文对照：https://npmcn.com/package/%40codeandfunction/pixelnotperfect/?lang=original
项目主页：https://pixelnotperfect.dev/

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

- 包体积（解压后）：376 kB，8 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- Node.js 要求：\>=20
- 运行依赖：11 个
- 首次发布：2026-10-06T17:37:57.276Z
- 最新版本发布：2026-10-24T11:52:51.074Z
- 近 30 天下载量：1811（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 22 个）

## 中文简介

MCP服务器用于视觉回归和交互式设计审查.

## 安装

```sh
npm install @codeandfunction/pixelnotperfect
```

也可以使用：`pnpm add @codeandfunction/pixelnotperfect`、`yarn add @codeandfunction/pixelnotperfect`、`bun add @codeandfunction/pixelnotperfect`

## README

# 像素不完美

检查你的编码代理的工作 与设计, 下到像素.

Pixel Not Perfect 是一款MCP服务器,它可以将一个渲染的页面与您的设计参考进行比较,无论是截图,Figma导出,PDF还是活的URL,并显示代理完全不同的哪个区域. 当轮到你时,打开Chrome的页面, 固定需要工作的东西, 批准或拒绝每个固定.

与任何支持MCP的编码代理工作. 没有账户,没有锁住.

学习更多 [像素不完美 。 dev](https://pixelnotperfect.dev/)。 。 。 .

* * *

## 开始

惠璶 **节点.js 20** 或以后,或 **谷歌颜色**。 。 。 .

### 1\. 安装服务器

在您的编码代理中添加像素不完美, 并带有一个命令, 然后选择添加到哪个代理 。 您的代理下载并运行软件包; 没有其他可安装的内容 .

```bash
npx add-mcp @codeandfunction/pixelnotperfect --env "PIXELNOTPERFECT_ALLOWED_ROOTS=~/Designs" -g
```

设定 `PIXELNOTPERFECT_ALLOWED_ROOTS` 转到您所持有的参考图像和 PDF 文件夹。 代理可以读取您列出的每一个文件夹,所以保持其狭义.

要用手设置, 请添加到您的 MCP 客户端的配置中 :

```json
{
  "mcpServers": {
    "pixelnotperfect": {
      "command": "npx",
      "args": ["-y", "@codeandfunction/pixelnotperfect"],
      "env": {
        "PIXELNOTPERFECT_ALLOWED_ROOTS": "~/Designs"
      }
    }
  }
}
```

### 2\. 请您的代理人比较

> 比较 `http://localhost:3000/login` 与 `~/Designs/login.png` 并解决分歧.

代理制作页面,比较,修正代码并重复,直到页面达到阈值.

### 3\. Chrome的审查

安装 [像素不完美扩展](https://chromewebstore.google.com/detail/gjbnnagcebaiafccfelfomjnnigjedjd) 从Chrome网络商店。 询问您的代理商进行视觉审查, 打开页面, 然后单击 **检查此标签**。在页面上提供反馈,与代理商讨论每个项目,并批准或拒绝在捕获前后的每个固定.

服务器启动时会连接到扩展名. 设定 `PIXELNOTPERFECT_HOST_REGISTRATION=off` 把它关掉.

* * *

## 报告脆弱性

电子邮件 [支持@ codeandfunction.com](mailto:support@codeandfunction.com) 还有细节 在这一问题得到解决之前,请不要公开披露.

* * *

## 许可证

自由使用,包括在商业项目中使用 [欧盟LA](https://pixelnotperfect.dev/license)。你不能转售、再分配或重新命名它.

代码和函数。 版权所有.

## 常见问题

### @codeandfunction/pixelnotperfect 是什么？

MCP服务器用于视觉回归和交互式设计审查\.

### 如何安装 @codeandfunction/pixelnotperfect？

在项目目录运行 npm install @codeandfunction/pixelnotperfect，或使用 pnpm add / yarn add / bun add。它还提供命令行工具 pixelnotperfect、pixelnotperfect-native-host，可以用 npx pixelnotperfect 直接运行。

### @codeandfunction/pixelnotperfect 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codeandfunction\_\_pixelnotperfect 是否存在。

### @codeandfunction/pixelnotperfect 支持 ESM 还是 CommonJS？

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

### @codeandfunction/pixelnotperfect 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @codeandfunction/pixelnotperfect 可以商用吗？

@codeandfunction/pixelnotperfect 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @codeandfunction/pixelnotperfect 的下载量有多少？

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

### @codeandfunction/pixelnotperfect 还在维护吗？

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