如何让AI更高效的做网站设计

我们在用 AI 做网页，有一种修改意见最难落地：“不太对，在给我改一下。”

我们发给AI的参考图片里面的卡片呀，布局弄得很紧凑。然后他给我们生成的页面却空了很大一堆。但是我们有时候就是只会给他说一些紧凑一些，但是AI也不知道去修改卡片宽度啊，还是修改内容啊。我们不懂前端的就很容易卡在这里。

所以能不能把这个参考图，还有实际的UI界面，我们都交给AI，让他去给我们做判断，让他自己去改

百灵 Ling-3.0-flash-VL 的官方演示，展示的就是这条流程。下面说的是对这段演示的拆解，以及自己的复现一部分流程。

这个版本加入了视觉理解和视觉代理能力。在演示中，用户给它截图或设计参考，它生成网页，再通过浏览器渲染、截图，与参考图对照后更新代码。视频也把参考页面和生成结果并排展示，布局、文字和配色可以直接对着看。

我更关心其中的是：代码写完之后，模型还能拿到页面真正打开的样子，接着判断哪里需要调整。

想照这个思路做，可以用 Claude Code + Ling-3.0-flash-VL + Playwright MCP。这是依据官方接入文档组合的复现方案，我自己去复现出来的方案，当然视频中的可能有更好的方案，后面可以看百灵这边会不会公开。

• Ling-3.0-flash-VL 负责看图、生成代码和分析差异。
• Claude Code 负责读写文件、运行项目和调用工具，实际模型选择 Ling。
• Playwright 负责打开浏览器、刷新页面和截图。

百灵已经提供了在 Claude Code 中接入 VL 的说明，模型可以通过 API 调用。接入教程

第一次尝试，我建议把任务压到一个作品集首屏：一段介绍、几张作品卡片、一个联系按钮。准备好参考图和需要用到的素材，再给它一条明确要求：

按参考图完成页面，打开浏览器并截图。把当前截图与参考图一起查看，先找出最明显的三个差异，再逐项修改。每轮保留代码和截图，最多修改三轮，最后把第一版和最终版并排展示。

这里有两个细节要盯住。

截图的页面宽度要一致，否则标题换行和卡片排列本来就可能不同。截图也必须真的交回模型查看，只读取页面文字、检查有没有报错，还不足以判断样式是否接近参考图。

至于改得怎么样，就看留下来的几张图：那块多余的空白有没有缩小，卡片有没有对齐，原来正常的部分有没有被改乱。让结果回答，比一句“还原度很高”具体得多。

对用 AI 做作品集、产品介绍页的人来说，这提供了一个值得尝试的修改方式：把“看着不太对”变成两张可以直接对照的图，再把找差别、改代码的步骤交给模型。

这边也可以看到只用了18秒就给我们生成好第一版了，第一版之后，给它看页面，再让它改页面。

大家可以来体验一下，现在还可免费体验

Hugging Face：https://huggingface.co/inclusionAI/Ling-3.0-flash-VL ModelScope：modelscope.cn/models/inclusi…

官方介绍：x.com/AntLingAGI/sta…