Frontend UI Generation Showdown: GLM 4.7 vs Claude Opus vs Gemini vs Minimax — Who Wins?

A Fair Frontend UI Generation Test

GLM 4.7 and Minimax M2.1 were released on the same day, once again reshaping the competitive landscape of AI coding. Following community suggestions, a tech blogger conducted a systematic head-to-head comparison of four major AI models' frontend UI generation capabilities. The contestants: Claude Opus 4.5, Gemini 3 Pro, GLM 4.7, and Minimax M2.1.

The testing conditions were completely uniform: identical prompts, identical requirements, five frontend tasks covering different scenarios. The results were quite surprising — one model fell behind across the board, not only being the slowest and most expensive, but generating UI that couldn't even function properly.

Test Setup & Methodology

To ensure fairness, all models (except Gemini) were tested in Cloud Code without MCP, plugins, or any additional tools. Cloud Code is Anthropic's command-line AI coding tool that allows developers to interact with models directly in the terminal for code generation tasks. The deliberate exclusion of MCP (Model Context Protocol — an open standard that allows AI models to connect to external data sources and tools, essentially giving models "hands and feet") and IDE plugin auto-completion capabilities was designed to measure the models' raw code generation ability. Gemini 3 Pro was run in Google's official Anti-gravity code sandbox environment, which serves a similar function to Cloud Code, ensuring roughly equivalent testing conditions.

The five test tasks covered the most common frontend development scenarios:

1. Architecture firm landing page (conversion-oriented)
2. SaaS analytics dashboard (dark mode)
3. Sneaker shopping app mobile UI
4. UI designer portfolio website
5. Food delivery app interface

Each task recorded completion time and token consumption, with total costs calculated at the end to enable judgment across three dimensions: quality, speed, and cost. Tokens are the basic units that large language models use to process text — one English word typically corresponds to 1-2 tokens, while each Chinese character usually maps to 1-2 tokens. AI model APIs charge separately for input and output tokens, with output token pricing often 3-5x higher than input. In frontend UI generation tasks, token consumption directly reflects a model's code generation efficiency — some models produce large amounts of redundant code or repetitive comments, causing token counts to spike without increasing useful content.

Detailed Results Across Five Frontend UI Generation Tasks

Test 1: Architecture Firm Landing Page

The prompt required creating a conversion-oriented landing page for an architecture firm, including a name and email collection form, with an overall modern and clean aesthetic. In conversion-oriented landing page design, the Hero section (the large visual area users see on first screen load, typically containing the main headline, subtitle, and call-to-action button) carries the critical task of "capturing user attention within 3 seconds," while subsequent sections like service descriptions, client testimonials, and pricing plans drive users toward conversion actions.

• Opus 4.5: Clean design but lacking image assets, includes testimonials, service descriptions, and featured projects — though the content volume isn't sufficient to truly drive conversions.
• Gemini 3 Pro: Hero section had excellent visual impact (using Nanobanana-generated background images), but page content was severely insufficient, looking unfinished. This perfectly exposes a typical problem with AI-generated frontend pages — models can often generate visually striking first screens, but struggle in areas below that require large amounts of structured content, resulting in "top-heavy" pages.
• GLM 4.7: Impressive performance with the most complete content, covering project showcases, testimonials, workflow processes, and multiple other sections.
• Minimax M2.1: Design leaned toward an AI aesthetic, but was fully functional.

In terms of speed, Claude and Minimax tied for fastest (1 minute 38 seconds), GLM was slowest but produced the richest content. Minimax consumed the fewest tokens.

Test 2: SaaS Analytics Dashboard (Dark Mode)

SaaS (Software as a Service) analytics dashboards are among the most complex frontend scenarios in B2B products, requiring the display of numerous data visualization components within limited screen space — line charts, bar charts, pie charts, data cards, tables, etc. Dark mode further increases design difficulty: it requires proper color contrast ratios to ensure data readability, theme adaptation for charting libraries, and subtle layering of borders and dividers. For AI models, this task demands simultaneous handling of complex CSS Grid/Flexbox layout nesting, data visualization library calls (such as Chart.js, Recharts, etc.), and interaction state management — a comprehensive test of multi-task coordination.

All four models performed relatively close on the dashboard task:

• Opus 4.5: Excellent interaction effects and visual presentation.
• Gemini 3 Pro: Acceptable but unremarkable.
• GLM 4.7: Winner of this round — hover effects and chart displays were outstanding, fastest speed, and token consumption of only 23,000 — far below Gemini and Claude.
• Minimax M2.1: Dashboard design felt AI-generated, and emoji usage made it look unprofessional.

Test 3: Sneaker Shopping App Mobile UI

Mobile UI generation presents unique challenges for AI coding models. Unlike desktop web pages, mobile interfaces must strictly follow touch interaction specifications — minimum tappable area for buttons (typically 44×44 pixels), fixed positioning of bottom navigation bars, inertial scrolling effects for scroll lists, etc. How well these details are handled directly determines the usability of generated results.

This round showed clear differentiation:

• Opus 4.5: The orange color scheme was attractive, but there were element overlap issues at the bottom. This is a classic mobile development bug, typically caused by conflicts between fixed-position (position: fixed) bottom navigation bars and the padding/margin calculations of the page content area.
• Gemini 3 Pro: Complete failure — the first generation didn't even have CSS styles, and it was still unacceptable after fixes. Generating a page "without CSS styles" is a fairly basic error, indicating that the model decoupled HTML structure generation from CSS stylesheet generation, possibly omitting style code or placing it in the wrong location. While such issues are easy to fix in actual development, they represent a serious deduction when evaluating AI model reliability.
• GLM 4.7: Stable performance with a complete product detail page.
• Minimax M2.1: Best performance this round — beautifully designed detail page with complete functionality including descriptions and add-to-cart.

Interestingly, Gemini spent 4 minutes 25 seconds on this task (not counting retries) and consumed 47,000 tokens, yet produced the worst result.

Test 4: UI Designer Portfolio Website

This round challenged all models:

• Opus 4.5: Hero section seemed to be missing a background image, and the color scheme wasn't professional enough.
• Gemini 3 Pro: Disappointing once again — took 9 minutes, consumed 62,000 tokens, and the result was still poor.
• GLM 4.7: Similar style to Opus, slightly improved but still not impressive.
• Minimax M2.1: Won again, delivering smooth animation effects, a complete Hero section, and scroll effects — the most complete result among the four.

Test 5: Food Delivery App Interface

• Opus 4.5: Generated a modern design with a working cart feature, but category filtering was non-functional.
• Gemini 3 Pro: Decent visuals, but took 5 minutes and 42,000 tokens.
• GLM 4.7: The only model that implemented complete interaction logic — clicking a restaurant navigates to its menu page, which is exactly the user flow a food delivery app should have. Implementing this kind of multi-page navigation logic requires the model to understand frontend routing concepts and correctly handle state management and page transitions in code — technically far more complex than generating static single-page UI.
• Minimax M2.1: Functional but lacking design flair.

Comprehensive Cost & Efficiency Comparison of AI Frontend Generation

The aggregate data across five rounds reveals staggering differences:

Model	Total Token Consumption	Total Cost
Gemini 3 Pro	223,000	$0.72
Claude Opus 4.5	—	$1.27
GLM 4.7	—	$0.08
Minimax M2.1	Lowest	$0.05

Gemini 3 Pro consumed the most tokens (223,000), ranked second in cost, yet produced the worst quality output. Claude Opus 4.5 was the most expensive ($1.27) but at least maintained consistent output quality.

What's truly shocking is the performance of the two Chinese open-source models: GLM 4.7 cost only 8 cents, and Minimax M2.1 just 5 cents — less than 1/25th of Opus — while achieving better results in multiple tasks. This is hugely significant for budget-conscious indie developers and small teams.

There's deeper business logic behind this massive pricing gap. The parent companies of Claude and Gemini (Anthropic and Google) need API revenue to cover enormous training costs and operational expenses. Meanwhile, GLM 4.7 (developed by Zhipu AI, which has roots in Tsinghua University) and Minimax M2.1 (from Chinese AI startup MiniMax) both adopt open-source strategies with publicly available model weights that developers can self-deploy, with API pricing focused more on rapidly gaining market share and building developer ecosystems. From a technical perspective, it's not surprising that open-source models can match or even surpass closed-source models on "pattern-based" tasks like frontend UI generation — GitHub hosts massive amounts of high-quality open-source projects and component library documentation that can serve as training data. Once model scale reaches a certain threshold, training data quality and targeted optimization often matter more than raw parameter count.

Overall Assessment & AI Coding Model Selection Recommendations

Performance Summary of Four AI Coding Models

• Claude Opus 4.5: Stable but lacking surprises — consistent design quality but often insufficient content, highest price. Suitable for teams with high output stability requirements.
• Gemini 3 Pro: Fell behind across the board. Slowest speed, highest token consumption, non-trivial cost, and outright failures on multiple tasks. Hero sections always looked good, but subsequent content was severely lacking, even producing basic errors like missing CSS.
• GLM 4.7: Best overall performance — fast, high quality, fully functional across multiple rounds, with exceptional value for money. Particularly ahead in implementing interaction logic.
• Minimax M2.1: Highest token efficiency and lowest cost, outstanding on mobile UI and portfolio tasks, though some outputs had an overly AI-generated aesthetic.

Selection Recommendations

If budget isn't a concern, Claude Opus 4.5 remains a reliable choice. But if you're optimizing for value, GLM 4.7 is undoubtedly the current best option — 8 cents to complete five full frontend projects, with quality that frequently surpasses competitors priced 15x higher.

A worthwhile combination strategy: use GLM 4.7 as your primary coding model for rapid first-draft generation, then bring in Claude for fixes and refinement when detail issues arise. This pairing controls costs while ensuring final delivery quality. This "dual-model collaboration" workflow is becoming an increasingly popular practice among developers — using a low-cost model to handle 80% of routine workload, and a high-precision model for the remaining 20% of difficult problems, keeping overall costs below 1/5 of exclusively using premium models.

As for Gemini 3 Pro, at least in the domain of frontend UI generation, it still needs significant improvement. Taking 9 minutes to generate a subpar page makes it hard for developers to build trust.