#视觉理解MCP #GLM我的编码搭子

视觉理解 MCP - 智谱AI开放文档https://docs.bigmodel.cn/cn/coding-plan/mcp/vision-mcp-server

---

每次写智谱，我都有种跟不上的感觉，他们今年发力力度真的很大，速度很快，疾风暴雨般。

无论是模型本身的能力，还是活动力度，以及后续的多模态增强，都来得快又猛。

上个月他们补上了联网搜索、读取的能力：

智谱 GLM 网页读取MCP：你能立即上手的4个小而美的AI实战技巧-CSDN博客

最近又推出了语音输入法

不打字的输入法 - 智谱 AI 输入法 Voice Coding 使用体验 -CSDN博客

视觉理解 MCP

通过上面两个动作，智谱弥补了获取即时信息和“听”的能力，现在通过视觉MCP，GLM也可以“看”了。

不止能看图，还可以看视频！

安装 zai-mcp-server

如果是新用户，一条命令即可

claude mcp add -s user zai-mcp-server --env Z_AI_API_KEY=your_api_key -- npx -y "@z_ai/mcp-server"

your_api_key  替换为你在控制台中 API Key 页面中创建的key，点击这里一键直达API KEY 页面

但如果之前安装使用过，需要删除后重新安装

claude mcp remove zai-mcp-server

如果安装成功，通过 mcp list 命令可以看到 mpc 状态 

claude mcp list

Checking MCP server health...

web-search-prime: https://open.bigmodel.cn/api/mcp/web_search_prime/mcp (HTTP) - ✓ Connected
web-reader: https://open.bigmodel.cn/api/mcp/web_reader/mcp (HTTP) - ✓ Connected
zai-mcp-server: npx -y @z_ai/mcp-server - ✓ Connected

看到最后一行 zai-mcp-server: npx -y @z_ai/mcp-server - ✓ Connected 就表示安装成功了。

“看看”怎么样？

接下来，我们就看看 zai-mcp-server “看”得怎么样。

我们以 z.ai 官网订阅页面为例，又在搞圣诞促销了 ：）

截屏后，让 GLM 去识别页面，并生成一个静态仿制的页面，提示词：

Prompt > 作为一个资深前端工程师，请分析 @screen\z.ai.png 这张 UI 截图的布局、配色，使用 HTML+CSS 复刻这个页面。要求代码结构清晰，响应式布局。请调用 ui_to_artifact 工具，代码生成到src 目录下。

zai-mcp-server 去调用 ui_to_artifact 工具分析并实现页面了，让我们看下效果

惊艳了！虽然诸多细节上还是有差别，但整体风格已经极度相似 👍

不仅如此，我们还可以让它来对比页面风格差异：

黑科技：UI 差异对比 (ui_diff_check)

为了能让对比更明显，我手动修改了页面背景色，去除了页面中的两个元素

考验的时候到了

Prompt: 现在实现了这个设计，请读取当前目录下的 @screen\z.ai.png（原稿）和 @screen\index1.png （当前的实现），使用  ui_diff_check 工具对比两者的视觉差异，并以 JSON 格式输出具体的差异点（如颜色、位置、漏掉的元素）。

让我们看看它的输出结果：

{
  "diff_analysis": {
    "summary": "实现版本（Implementation）与设计原稿（Design）在视觉风格上存在显著差异。主要体现在字体选择错误（使用了衬线体/等宽字体而非无衬线体）、背景色调过浅且缺乏质感、关键交互组件（计费周期切换）缺失，以及头部营销文案的遗漏。",
    "details": [
      {
        "id": 1,
        "category": "Global Styles",
        "element": "Background",
        "location": "Page Body",
        "expected": "深黑色/深灰色渐变背景，具有高端科技感的暗色氛围。",
        "actual": "纯灰色（约为 #555555）背景，色调过浅且扁平，缺乏深度。",
        "severity": "High"
      },
      {
        "id": 2,
        "category": "Typography",
        "element": "Main Title ('GLM Coding Plan')",
        "location": "Hero Section",
        "expected": "现代粗体无衬线字体（Sans-serif），白色，带有微妙的光影效果。",
        "actual": "打字机风格/等宽字体（Monospace/Courier），字体过细，风格不匹配。",
        "severity": "High"
      },
      {
        "id": 3,
        "category": "Missing Element",
        "element": "Promo Subtext",
        "location": "Header (Below Title)",
        "expected": "存在橙色/白色的营销文案 'Christmas Deal: 50% first-purchase + extra 10%/20% off! Learn More'。",
        "actual": "完全缺失。",
        "severity": "Medium"
      },
      {
        "id": 4,
        "category": "Missing Element",
        "element": "Billing Cycle Toggle",
        "location": "Pricing Section (Above Cards)",
        "expected": "存在 'Monthly / Quarterly / Yearly' 切换开关，且带有 '-55%' 和 '-60%' 的高亮标签。",
        "actual": "完全缺失。",
        "severity": "Critical"
      },
      {
        "id": 5,
        "category": "Component Style",
        "element": "Pricing Cards",
        "location": "Pricing Section",
        "expected": "卡片背景为深色渐变，边缘有微妙的高光/描边，具有立体感。",
        "actual": "卡片背景为扁平的深灰色，缺乏层次感和边框高光。",
        "severity": "Medium"
      },
      {
        "id": 6,
        "category": "Component Style",
        "element": "Discount Badges ('10% Extra')",
        "location": "Top left of Pricing Cards",
        "expected": "徽章背景透明或与卡片融合自然，显得精致。",
        "actual": "徽章带有明显的黑色矩形背景框，显得生硬突兀。",
        "severity": "Low"
      },
      {
        "id": 7,
        "category": "Layout/Positioning",
        "element": "Navbar Logo ('Z' icon)",
        "location": "Top Left",
        "expected": "Logo 背景融合在黑色 Header 中。",
        "actual": "Logo 也就是 'Z' 图标被放置在一个灰色的正方形块中，与背景未融合。",
        "severity": "Low"
      }
    ]
  }
}

改变的背景色、完全缺失的营销文案 'Christmas Deal: 50% first-purchase + extra 10%/20% off! Learn More'、完全缺失的"存在 'Monthly / Quarterly / Yearly' 切换开关，且带有 '-55%' 和 '-60%' 的高亮标签。",全都被揪了出来，其他页面风格布局细节也一一报告了差异细节。

报告总结：

• 致命错误 (Critical)： 缺失了 Christmas Deal 营销文案。

• 功能缺失 (High)： 漏掉了 Monthly/Yearly 的切换开关。

• 风格偏差： 字体使用了衬线体，与原稿的无衬线体不符。

这体现了模型“像素级”或“布局级”的细粒度理解能力，是普通多模态模型做不到的。

GLM-4.6V 将视觉能力工具化，使得 AI 不仅能“看”，还能进入工程化的 CI/CD 流程（比如自动视觉测试）。

想象一下，如果这段逻辑集成到 GitHub Actions 中：设计师上传 Figma，前端提交代码，GLM 自动运行 ui_diff_check。如果视觉还原度低于 90% 或关键组件缺失，自动阻止代码合并。这将彻底改变前端开发的验收流程。

不止于此

智谱的视觉理解 MCP，不仅仅是对图片的理解更为深刻细腻，甚至也可以分析视频，抓取关键帧！

能“看”之后，AI的世界就丰富多彩了，能力也得到了极大的释放，以后排查bug，不用把编译错误辅助来复制去，截屏、甚至录个小视频给它看，它就能更为深刻的理解bug成因，更为便捷的定位问题更远。

限于篇幅，就不再一一列举演示各类功能，请在官网视觉理解 MCP页面中探索挖掘！      

特别注意

要注意的是，图片在 Claude Code 中是可以直接黏贴的，但其他AI环境下，需要将其指引向本地图片文件：

除了 Claude Code 之外，直接在客户端粘贴图片无法调用此 MCP Server，客户端默认会将图片转码后直接调用模型接口。
最佳实践是将图片放到本地目录，通过对话的方式指定图片名称或路径来调用 Mcp Server。
例如: What does demo.png describe?

#视觉理解MCP #GLM我的编码搭子