GLM-5V-Turbo接入Claude Code，我再也不用为页面布局抓狂了

最近在折腾 AI 编程的人应该不少吧。

这东西确实挺狠的。

就拿现在知名度最高的 Claude Code 来说，一个命令行工具，把“写代码”这件事变成了“对话”。你只要说清楚想做什么，它就能一路帮你把项目往前推。

尤其像 Web 前端这类开发工作，过去要花不少时间来调整布局摆放。现在丢给 AI，去倒杯咖啡回来就给你搞定了。

但用着用着，很快就会发现一个问题：

AI 对于视觉效果的理解有缺陷。

换句话说：大模型它看不见！

有人要说了，现在各家大模型不都支持多模态，可以识别图像了吗，很多也都可以根据提供的设计稿或截图来写代码。

这确实没错，之前我也用过好几家模型，“看图写代码”的能力已经具备，尤其像K2.5、豆包，能出活儿，页面的大结构都能把握得蛮好。美中不足的是在一些细节上，比如渐变色、透明层级、圆角、间距等等，就经常会差点意思。

这背后的原因，是目前绝大多数的实现其实还是先通过多模态模型将图像翻译成文字描述，再让大模型根据文字描述去编写代码。本质上还是通过文本来传递信息，那么这中间产生必然会产生偏差，也会遗漏很多图像上的细节。

直到我这两天看到了一个新模型—智谱刚出的 GLM-5V-Turbo，又一次刷新了我对此的认知。

这么说吧，如果想干前端活儿，比如根据设计稿出页面，或者复刻一个已有网站的设计，那它是我目前看到过做得最精准最利索的。

闲话不多说，我们直接来实际测一测，让 GLM-5V-Turbo 复刻一个线上网站，看看还原度能有多高。

先配置一下模型的接入。以 Claude Code 为例，假设你的电脑已经装好了 cc。

官方提供了一个工具，直接命令行运行：

npx @z_ai/coding-helper

根据提示填上你在智谱上的 API Key，就会自动帮你把环境变量和配置都处理好。

你也可以直接修改 用户目录/.claude/settings.json，设置模型和接口地址。

{
  "env": {
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-5v-turbo",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-5v-turbo",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5v-turbo",
    "hasCompletedOnboarding": true,
    "ANTHROPIC_AUTH_TOKEN": "<替换成你的api-key>",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "API_TIMEOUT_MS": "3000000",
    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1
  }
}

配置完之后，终端里敲一句 claude，就能用了。

在 claude 里也可以手动切换模型：

/model glm-5v-turbo

接下来，就可以直接让 cc 开始干活了。

我找了一个挺有设计感的工艺品电商网站 abask.com 作为参考。现在有很多人在做出海电商，搞线上独立站销售。这种需求还挺多的，看看 GLM-5V-Turbo 能不能给我们复刻一个。

以前，我们需要先向 AI “描述一个网站”；

现在，我们可以直接“把网站丢给 AI”：

帮我1:1复刻这个网站：abask.com，用vue架构，代码放在 ./abask 目录下

我只是提供了一个网站链接，然后告诉它所用开发框架以及代码的存放目录，其他功能和设计细节一概没提，它就吭哧吭哧自己开始分析网站进行搭建了。

页面开发完成之后，它还帮我运行起来，方便直接查看效果：

对比一下，左边是原网站，右边是 GLM-5V-Turbo 生成的“复制品”。

不能说完全一模一样吧，但也是以假乱真了。这么简单的提示词，一轮生成就达到这么高的还原度，属实非常厉害了。甚至包括鼠标移动到图片上的交互效果也复刻了。

这水准直接上线我觉得也是OK的。

当然也不是完全没问题，比如原版网站导航栏这个鼠标移上去展开的效果就没有实现。

那也没关系，我们就把截图提供给 GLM-5V-Turbo，让它继续有针对性地修改完善一下。

最终效果：

完美！

之前的大模型也不是做不到这种程度，只是经常需要用多轮对话一点点去“纠偏”：

“这个阴影再淡一点”、“这个间距再小一点”……写着写着自己都觉得很抽象。

而现在对于要修改的地方，直接附上局部图，让大模型对照图片自行“对齐颗粒度”，效率明显要高不少，通常一两轮就收敛得差不多，不需要来回反复很多次。

尤其像圆角、阴影、间距这些用文字较难描述的东西，会更容易得到接近设计稿的效果。

比如我又测了个例子：让 GLM-5V-Turbo 根据一张截图来复刻页面的元素样式。

原截图

生成网页

是不是很有原版的味道了？

能达到这种效果，很重要的一点是，GLM-5V-Turbo 并不是单纯的视觉模型，而是在引入视觉能力的前提下，依然保证了原有纯文本代码生成的能力。就好比是一个懂设计的程序员。

进一步了解后发现，GLM-5V-Turbo 其实不只是写前端更方便。

当它接到 Agent 的工作流里之后，更像是一个“视觉入口”：

• 看到 PDF 里的图表，可以直接拆解数据进行分析；
• 看到一张图，可以顺着去查资料、做标注、补上下文；
• 更厉害的是把它接入龙虾，让它成为龙虾的“眼睛”。这样龙虾就不再只是根据屏幕坐标盲操，而是能看懂网页和GUI元素布局，自主完成复杂的操作任务。智谱官方还专门提供了一组相关skills来发挥其在龙虾场景下的优势。

也就是说，输入不再只是语言，而是环境本身。

最后说一个很主观的感受：

用了 GLM-5V-Turbo 之后，我开始懒得在提示词里描述需求了，更多的是想着去找一张图丢给它，告诉它“按图上的xx效果来实现”。或许纯文本 Agent，本就是一个过渡形态。当大模型有了视觉能力，才开始接近最终形态。

在前端“看图写代码”这个高频场景里，GLM-5V-Turbo 现在的体验，确实已经到了一个比较顺手的阶段，能快速批量产出达到商业水准的页面，像过去那种为了一个布局反复调来调去的情况大大减少了，相应的开发时间和所耗费的 token 也就大幅降低。

最近智谱还上线了面向长任务 GLM-5.1，可以很好地实现Web后端功能。这两个模型结合，开发网站的门槛和成本就变得非常低了。这也是我现在开发 Web 项目的第一选择。

如果你也想体验前端出图一把梭的感觉，那快来试下 GLM-5V-Turbo 的“视觉编程”吧。