关键词

网页分析UI设计评估截图AI设计建议可视化编辑

这是一个强大的后台服务，基于Model Context Protocol (MCP)，为LLM客户端提供了一系列网页分析和UI优化工具。

项目简介

PixelPolish AI辅助UI分析服务器集成了网页抓取、DOM/CSS分析、设计启发式检查、截图以及AI视觉评估等功能。它允许LLM客户端以标准化的方式触发这些复杂的分析任务，获取结构化数据、视觉报告和AI驱动的优化建议。此外，它还能启动一个Web界面供用户进行交互式编辑，并将用户提交的数据传回给客户端。

主要功能点

  • 全面网页分析：深入分析网页的DOM结构、计算样式、布局、排版、颜色等。
  • 设计质量评分：运行预定义的启发式规则，对网页设计进行190点评分，识别潜在问题。
  • 智能视觉评估：结合AI视觉模型（如GPT-4V、Claude），评估网页的整体视觉效果、颜色协调性、布局平衡等，并提供具体的改进建议。
  • 高质量网页截图：捕获指定URL的完整网页截图，支持AI视觉分析。
  • 交互式界面支持：能够启动一个独立的Web界面（PixelPolish UI Portal），供用户在浏览器中进行实时DOM操作和AI辅助编辑，并将用户的修改数据通过API提交到服务器。

安装步骤

要安装并运行MCP服务器部分，请按照以下步骤操作：

  1. 克隆仓库: 使用 Git 克隆 PixelPolish 仓库到你的本地机器。
  2. 进入服务器目录: 打开命令行终端，进入仓库中的 'mcp_typescript' 目录。
  3. 安装依赖: 运行 'npm install' 或 'yarn install' 安装所有必要的库。
  4. 配置AI API密钥: 在 'mcp_typescript' 目录下创建一个名为 '.env' 的文件，并在其中添加你的AI服务提供商的API密钥。例如，使用OpenAI: 'OPENAI_API_KEY=你的OpenAI密钥'；使用Anthropic: 'ANTHROPIC_API_KEY=你的Anthropic密钥'。
  5. 构建项目: 运行 'npm run build' 来编译 TypeScript 代码。这将在 'dist' 目录下生成可执行的 JavaScript 文件。

服务器配置（供MCP客户端使用）

MCP客户端需要知道如何启动并连接到PixelPolish服务器。以下是标准的MCP配置格式所需的信息：

  • 服务器名称 ('serverName'): 'pixelpolish-mcp-server'
  • 启动命令 ('command'): 'node'
  • 启动参数 ('args'): '["dist/index.js"]'
  • 参数注释: 'dist/index.js' 是构建后服务器主程序的路径。

MCP客户端通常会在其配置 JSON 文件中包含类似以下结构的部分来定义如何启动和连接PixelPolish服务器：

{
  "serverName": "pixelpolish-mcp-server",
  "command": "node",
  "args": ["dist/index.js"],
  "comment": "用于启动 PixelPolish AI辅助UI分析MCP服务器的配置"
}

请将上述信息添加到你的MCP客户端的相应配置文件中，而不是直接执行这些命令。

基本使用方法

PixelPolish MCP服务器一旦启动，MCP客户端就可以通过标准协议与其交互。

  1. 列出工具: MCP客户端可以调用 'list_tools' 工具来获取服务器提供的所有功能列表及其详细说明。
  2. 调用分析工具: 使用 'call_tool' 请求调用如 'analyze_url', 'capture_screenshot', 'analyze_dom_structure', 'run_heuristics_analysis' 等工具，并提供相应的参数（如 'url'），服务器将执行分析并返回结果。
  3. 启动UI界面: 调用 'serve_vite_app' 工具可以启动PixelPolish UI Portal的HTTP服务，并在浏览器中自动打开该界面，加载指定的URL进行可视化编辑。
  4. 接收UI数据: 调用 'wait' 工具可以暂停LLM的执行，并监听UI Portal通过 '/api/submit' 端点提交的修改数据。一旦UI提交数据，'wait' 工具将返回这些数据供LLM处理。

通过这些工具，LLM客户端可以利用PixelPolish强大的分析能力理解网页设计，获取改进建议，甚至通过与用户的UI交互来收集和应用修改。

信息

分类

开发者工具

访问项目