Vibe
通过向量化画布实现LLM对浏览器游戏与应用的视觉化调试
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Vibe。 它的用途是：通过向量化画布实现LLM对浏览器游戏与应用的视觉化调试 完整的 Skill 内容见：https://321skill.com/skills/vibe-vibe-eyes/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我检查这个网页游戏里，角色跳跃后落地时，血条UI的显示位置是否正确。” 它会通过Vibe服务器获取当前游戏画面的向量化表示，分析血条UI元素相对于角色模型的坐标，并判断其位置是否符合设计预期，最后给出调整建议。或者，当你说：“这个Canvas动画在移动端卡顿，帮我分析下每一帧的渲染耗时和元素变化。” AI可以利用Vibe捕捉连续帧的视觉差异，辅助定位性能瓶颈。
介绍
Vibe（Eyes MCP服务器）旨在解决LLM（大语言模型）在理解和调试具有复杂图形界面的浏览器应用（尤其是游戏）时面临的“视觉盲区”问题。传统的文本日志和DOM树难以描述动态的图形状态，导致LLM无法有效协助处理图形渲染、UI交互或游戏逻辑相关的bug。
该Skill通过提供一个向量化画布，将浏览器窗口的视觉内容（如游戏画面、应用界面）转换为LLM可以理解和处理的向量表示。开发者或测试人员可以启动该服务器，让LLM“看到”屏幕上的像素级变化、元素位置和视觉状态，从而进行更精准的分析和指令生成。
它特别适合前端开发、游戏开发、测试工程师以及任何需要让AI代理理解并操作图形化Web界面的智能体开发者。当您需要AI协助排查一个只在特定视觉状态下出现的UI Bug，或者让AI学习并复现某个游戏操作时，这个工具能建立关键的视觉认知桥梁。
使用建议：确保您的目标应用或游戏可以在浏览器中运行。调试时，明确您希望LLM关注的视觉区域或元素（如某个按钮的颜色、角色的位置）。由于涉及视觉信息处理，可能会增加一定的Token消耗，建议在关键调试步骤中启用。
核心特点
与多数仅提供DOM操作或网络请求监控的调试工具不同，Vibe的核心在于为LLM提供了“视觉能力”，使其能直接理解和分析浏览器画布中的图形元素与动态变化，这对于调试高度依赖图形渲染的游戏、Canvas应用或复杂动画的Web应用至关重要。
注意事项
不适合纯后端API调试或无需视觉交互的文本/数据处理场景。
常见问题
Vibe能用来做什么？
主要用于让LLM“看到”并调试浏览器中的游戏画面或复杂Web应用的视觉界面，帮助定位图形渲染、UI布局或交互逻辑问题。
需要编程基础吗？
需要一定的开发基础，主要用于集成到MCP工作流中，供AI代理调用以增强其视觉调试能力。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/vibe-vibe-eyes/raw/index.md 读取 Vibe 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/vibe-vibe-eyes/raw/index.md（查看排版版本）