像素不完美

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

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

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

学习更多 像素不完美 。 dev。 。 。 .

开始

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

1. 安装服务器

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

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

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

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

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

2. 请您的代理人比较

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

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

3. Chrome的审查

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

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

报告脆弱性

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

许可证

自由使用,包括在商业项目中使用 欧盟LA。你不能转售、再分配或重新命名它.

代码和函数。 版权所有.