Layra MCP

Layra MCP：用户体验工程顾问

Layra是一个模型上下文协议（MCP）工具，可帮助工程师优化其UI的转换和可用性。它充当“UX Linter”，分析您的 源代码 （React AST）和你的 运行应用程序 （视觉启发式+GPT-4o视觉）提供基于证据的优化建议。

🚀 特性

• 混合分析：

- 启发式（免费）： 即时Playwright扫描DOM结构、布局和对比度。 - AI视觉（付费/可选）： GPT-4o集成用于复杂模式检测（例如，“信任信号”、“视觉层次结构”）。

• 基于证据的建议： 不仅仅是猜测，它还提供数据点（对比度、元素维度）来支持每一个建议。
• 转换优化： 专注于推动指标（投资回报率、点击率、表单完成率）的可操作改进。
• 信任第一设计： 透明日志、本地执行和用户控制的AI使用。

🛠 安装

先决条件

• Node.js v18+
• 光标IDE
• OpenAI API密钥（可选，用于视觉功能）

设置

1. 克隆和构建：

   git clone  layra-mcp
   cd layra-mcp
   npm install
   npm run build

1. 在游标中注册：

- 打开 光标设置 (Cmd + , 或 Ctrl + ,). - 导航至 特性 -> 主控程序. - 点击 +添加新的MCP服务器. - 姓名： layra-mcp - 类型： stdio - 命令： node （或到节点的绝对路径） - 论据： /absolute/path/to/layra-mcp/dist/index.js - 环境变量： （单击添加） - OPENAI_API_KEY: sk-... （您的OpenAI密钥）

💡 如何使用

在Cursor中打开任何React项目并启动本地开发服务器（例如。， localhost:3000).

1.基本扫描（免费/启发式）

检查代码结构、对比度和布局规则。

@optimize_ux src/components/SignupForm.tsx localhostUrl=http://localhost:3000/signup

2.高级视觉扫描（付费/AI）

使GPT-4o能够“查看”您的页面并判断视觉层次结构和信任度。

@optimize_ux src/components/SignupForm.tsx localhostUrl=http://localhost:3000/signup enableVision=true

示例输出

💡 低对比度动作 问题： 按钮“浏览文件”的背景颜色与其容器相同。 证据： - 按钮背景： #ffc300 - 容器背景： #ffc300 - 对比度：~1:1（失败） 建议： 提高对比度。使用不同的背景颜色。 💰 投资回报率： 可访问性和CTR（符合WCAG AA标准）

💡 🧠 混乱的层次结构（AI视觉） 问题： “取消”按钮在视觉上比“提交”更突出。 证据： 来源：GPT-4o视觉分析 建议： 反转样式。将“Submit”设置为纯色。

🏗 建筑

1. 工具： optimize_ux （入口点）
2. 扫描仪：

- UIScanner （剧作家）-DOM和启发式。 - VisionAnalyzer （OpenAI）-语义视觉理解。

1. 分析器： ASTParser （TypeScript）-React组件分析。
2. 逻辑： PatternDetector -合并代码+启发式+人工智能模式。

🛣 路线图

• V1（电流）： 混合分析（启发式+人工智能）、基于证据的模式、对比度检查。
• V1.1： 增强的模式库和排版层次结构。
• V2： 用于系统用户体验分析的“Spidergram”依赖图。

📜 许可证

麻省理工学院