使用说明
Layra MCP：用户体验工程顾问
Layra是一个模型上下文协议（MCP）工具，可帮助工程师优化其UI的转换和可用性。它充当“UX Linter”，分析您的 源代码 （React AST）和你的 运行应用程序 （视觉启发式+GPT-4o视觉）提供基于证据的优化建议。
🚀 特性
- 混合分析：
- 启发式（免费）： 即时Playwright扫描DOM结构、布局和对比度。
- AI视觉（付费/可选）： GPT-4o集成用于复杂模式检测（例如，“信任信号”、“视觉层次结构”）。
- 基于证据的建议： 不仅仅是猜测，它还提供数据点（对比度、元素维度）来支持每一个建议。
- 转换优化： 专注于推动指标（投资回报率、点击率、表单完成率）的可操作改进。
- 信任第一设计： 透明日志、本地执行和用户控制的AI使用。
🛠 安装
先决条件
- Node.js v18+
- 光标IDE
- OpenAI API密钥（可选，用于视觉功能）
设置
-
克隆和构建：
git clone <your-repo-url> layra-mcp cd layra-mcp npm install npm run build -
在游标中注册：
- 打开 光标设置 (
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”设置为纯色。
🏗 建筑
- 工具：
optimize_ux（入口点） - 扫描仪：
UIScanner（剧作家）-DOM和启发式。VisionAnalyzer（OpenAI）-语义视觉理解。
- 分析器：
ASTParser（TypeScript）-React组件分析。 - 逻辑：
PatternDetector-合并代码+启发式+人工智能模式。
🛣 路线图
- V1（电流）： 混合分析（启发式+人工智能）、基于证据的模式、对比度检查。
- V1.1： 增强的模式库和排版层次结构。
- V2： 用于系统用户体验分析的“Spidergram”依赖图。
📜 许可证
麻省理工学院
