在日常前端开发和原型构思时，部分大模型在网页 UI 设计和视觉排版上展现出了很强的表现力。这次我挑选了 5 个在设计方面各具特色的模型，在统一的环境下使用相同的简短提示词生成不同风格的网页，观察它们在不给过多设计约束的情况下，单轮能做出怎样的视觉排版与交互创意。
参与测试的 5 个模型与测试方法
这次对比一共挑选了 5 个模型：
- Gemini 3.1 Pro：发布时间相对较早，但在排版构思和交互创意上依然很有特点。
- GLM 5.3 Flash：智谱推出的模型，代号 OX-Alpha，也就是社区里讨论较多的“牛来”模型。
- GLM 5.3：智谱的基础模型，使用成本较低，设计风格取向与 Flash 版本相近。
- Grok 4.6：xAI 的主力模型之一。
- Kimi K3：月之暗面的模型，在设计质感与排版创造力上表现尤为突出。
测试准备了 5 个提示词。每一个提示词都保持简短，不添加任何风格上的具体限制，只说明网站需要实现的基础功能和核心内容。测试环境使用 OpenCode，统一让模型在 Agent 模式下单轮生成，中间不给任何调试反馈，直接观察第一轮编写出的实际页面。
场景一：官网落地页
第一个场景是制作一个官网的落地页。
Gemini 3.1 Pro 的生成结果很克制，没有像很多通用模型那样在页面里塞满繁杂的卡片与元素。整体风格非常清爽，在文字排版、字体搭配以及渐变配色的运用上都很舒适。虽然首屏文字辨识度稍显偏弱，但它能很大胆地突破常规排版布局，没有机械套用单调的圆角容器。
GLM 5.3 Flash 制作了一个名为“十字堂”的文艺风格页面。首屏带有轻量的微动效，背景融入了装饰性文字，行高经过细致调整后文字可读性很强。不同模块的背景带有纸质纹理与主题色点缀，页面顶部配备了滚动进度条。更亮眼的是它设计了一个交互字板，鼠标悬停在文字上方时会像印章一样亮起（例如“快不得也省不得”），旁边还搭配了竖排文字的小细节。
GLM 5.3 的取向与 Flash 版本相近，同样偏向文字与文艺质感，不过版面更为规整。页面中的图形均由模型通过 SVG 绘制，包含了文字与乐器相关的图案，卡片在滚动时还实现了吸顶（sticky）效果。
Kimi K3 在这个场景下的表现非常亮眼。首屏的视觉质感很强，不同模块之间没有使用常规的分隔线或渐变切分，而是做成了类似纸张撕开的边缘效果。背景点缀了“卷一”等装饰文字，用 SVG 绘制了水里搅浆的图形，底部还设计了不同材料的展示区与放大镜交互。排版很大胆，印章文字的细节和整体创造力都比其他模型更进一步。
场景二：复杂后台 UI
第二个场景是测试一个复杂的后台管理界面。
Gemini 3.1 Pro 生成的后台相对规整，提供了交互图表与表单。不过受限于较早版本的训练倾向，界面带有一定的模板感。布局上也出现了一点小瑕疵：某些区域偏短而右侧留白过大，菜单或弹层展开后还会遮挡上方的界面元素。
GLM 5.3 Flash 生成的后台虽然也包含了交互图表，但整体视觉稍显杂乱，页面纵向滚动时不够顺畅。
GLM 5.3 的表现优于 Flash 版本，排版更加规整。不过在多次测试中会发现其风格略有趋同：倾向于使用偏暖的配色方案搭配衬线字体。尽管文字可读性良好，也没有死板的组件拼接感，但在严肃后台场景下依然会套用这种固定的暖色衬线风格。
Grok 4.6 同样使用了偏金色、暖色的配色与衬线字体，做出的界面类似医学类后台，带有表格详情展开与表单。但这种偏文艺的暖色风格，放在严谨的医疗管理场景下并不完全适配。
Kimi K3 在复杂后台中的交互布局表现最符合实际业务直觉。它设计了一个业务中台界面，上方为核心指标看板，下方为详细数据列表，左侧带有筛选栏并按优先级做好了分类。各个功能模块划分清晰，符合真实业务系统的操作习惯。
场景三：通用 Agent 对话交互界面
第三个场景是设计一个通用的 Agent 对话界面。
Gemini 3.1 Pro 在这个场景下的效果很有新意。它在左侧使用 SVG 绘制了一个模拟生命体的图形。当我们在右侧输入框发送消息时，左侧的生命体会根据交互状态切换形状、动效和颜色（例如蓝色、红色、绿色），模拟出一种正在思考的状态。Gemini 虽然指令遵循并不总是最严格的，但经常能做出这种超出预期且富有创意的动态交互。
GLM 5.3 Flash 延续了暖色调与衬线字体的排版风格，文字可读性依然良好。设计中最出彩的地方在于它构建了一个“把问题扔进池塘”的交互，水池中的锦鲤游动得很生动，创意十足。
GLM 5.3 在左侧设计了支持切换话题的会话栏，主区域绘制了一只狐狸。虽然这只狐狸的 SVG 图案稍显潦草，不如 Flash 版本的锦鲤精致，但它加入了一个细节：狐狸的眼睛会跟随鼠标指针移动。
Grok 4.6 用 SVG 绘制了一只苍鹭，发送消息时苍鹭同样会做出交互响应。
Kimi K3 在界面中绘制了一只水鸟。发送消息时，水鸟会低头啄水，并支持待命、聆听、寻找、踱步等多种状态切换。展开左侧栏后，整体排版清爽舒适。
在这个场景中，国内模型普遍偏好暖色调与清爽排版，而 Gemini 的生命体动效与 GLM 5.3 Flash 的锦鲤池塘交互是两个最有创意的设计。
场景四：狼人杀游戏 UI
第四个场景是让模型设计一个狼人杀游戏的界面。
Gemini 3.1 Pro 在这个场景下的表现中规中矩，界面排布较为常规，缺少更强烈的游戏氛围。
GLM 5.3 Flash 设计了卡片入场动效，并自主实现了黑夜与白天的切换动效（在提示词中并未对此做强制要求）。不过它的太阳图标绘制较为简略；在交互层面，它没有为真实玩家留出清晰的发言与操作区域，体验更接近于旁观几个 AI 自动对弈。
GLM 5.3 与 Flash 版本的构思相近，同样制作了发牌、翻牌的卡片动效以及昼夜切换。虽然角色头像绘制比较随意，但它的操作逻辑比 Flash 版本更明确，用户更容易理解游戏推进的流程。
Grok 4.6 界面文案使用了“上车入席”，但单轮生成的代码出现了一些排版问题，底部布局错乱，角色区域定位不准，整体实现不够稳定。
Kimi K3 省略了发牌动画，直接进入游戏对局，界面元素相对紧凑。它的特点在于充分考虑了真实玩家的操作交互，提供了使用毒药、保留解药等具体的决策按钮，并支持昼夜状态切换。综合来看，发牌与翻牌的视觉动效是 GLM 做得更好，而实际操作的交互逻辑则是 Kimi K3 更完善。
场景五：WebGL 杂志风页面
最后一个场景是结合 WebGL 技术实现 3D 效果或特殊材质质感，制作一个杂志风格的页面。
Gemini 3.1 Pro 制作了一个 3D 石柱，石柱可以跟随鼠标指针移动旋转，整体设计克制，杂志质感很强。这也是 Gemini 的特点：虽然对复杂代码规范遵循一般，但经常能做出很有自身想法的视觉交互。
GLM 5.3 Flash 依然采用暖色搭配衬线字体的排版风格。首屏通过 WebGL 实现了流动波纹效果，鼠标移动时会产生扰动，视觉冲击力很强，不过在一定程度上略微影响了正文的可读性（若将波纹透明度适度调高会更易读）。向下滚动时，波纹会随着页面延伸变化形态，搭配“海面之下 光在排队”等文案、自定义图表以及“双缝之外”的微交互，整体视觉效果很有表现力。
GLM 5.3 以“光”为设计主题，文案包含了“300300 年”等内容，试图模拟棱镜分光与渐变效果。页面中的光源投射阴影支持交互，但整体的 3D 表现偏少，更接近常规的平面杂志排版。
Grok 4.6 生成的是一份常规排版的杂志页面，缺少独特的微交互与 WebGL 效果，在这个场景下的设计表现不如 Gemini 和 GLM。
Kimi K3 着重演示了材质与纹理质感。它围绕“颗粒是图像的体重”等主题，探讨了噪点、显影、流动以及褶皱等材质效果，整体排版干净舒适。
在实际开发中的工作流配合
综合这几个场景来看，上述模型在网页排版和交互设计上都展现出了很强的表现力。它们不会死板地套用通用组件或单调的圆角卡片，而是能够很大胆地做出具有创造性的排版与微交互。
但在实际工程落地中，我们要注意区分能力边界：这些模型的视觉构思和排版很有灵气，但在复杂工程架构、业务状态管理与深层逻辑处理上，并不一定比专门的 Coding 模型更稳妥。
因此在实际开发中，更高效的做法是在项目立项初期，用它们来完成「视觉打底」。比如在构思一个新的个人网站或产品落地页时，先用简短提示词让这些设计感较强的模型生成两到三套 HTML 原型，挑选出视觉质感最满意的方案；随后把这份设计原型代码交给 Claude Code 或 Codex 这类工程能力更扎实的 Coding Agent，让它们在保留良好视觉底子的基础上，继续推进业务逻辑、状态流转与工程化实现。
我平时做项目经常采用这种多模型协同的方式。例如我之前开发的 VibeHub 网站，最初的视觉底子就是先由 Kimi K3 生成原型打底；我个人网站最初的首屏排版和字体细节，也是借助 Kimi 生成的原型启发逐步迭代出来的。