How to Concept Interfaces with GLM-5.2: Agent Codes, Designer Directs
Main chat
A chat for vibe coders: news, guides, live cases, marketplace, and finding executors.
Why does GLM-5.2 work
According to independent benchmarks Code Arena: Frontend, the GLM-5.2 took first place among all open models - bypassing including all versions of the Claude Opus on front-end coding tasks.
The model was built for real development tasks: coding, using tools, multi-step reasoning, analysis of repositories and long-term agent workshops - not under the chat-bot model.
For a designer, this means something specific: GLM-5.2 understands what it means to make beautiful. He knows CSS patterns for glassmorphism, neon-glow effects, game HUD aesthetics. He writes animations. He understands visual hierarchy and why z-index is needed. Many language models code the work interface, but it looks like something from the 2010s – GLM-5.2 is more likely to understand what it looks like in 2026.
The key difference from previous versions is the context window of 1 million tokens. For conceptualization, this means that you can keep the whole conversation with the history of iterations, references, description of the system – and the agent does not “forget” what happened at the beginning of the dialogue.
How workflow works
Three elements are included in each concept session:
Text description - what kind of interface, for what, what aesthetics, what elements.
References – screenshots, links, games or products whose style is taken as a basis. GLM-5.2 understands references through description (if loaded as text) or directly as images.
** Iterations in the dialogue** - the result appeared, you see what works, what does not, ask to correct specific details. The agent remembers the context.
The output is an HTML/CSS file (sometimes with JavaScript for animations and interactive) that opens directly in the browser. Not a Figma file, not a PDF, not a picture - a live page that you can spin, see how it is animated, check how it looks on different window sizes.
Basic structure of the request
Bad query: Make a game interface.
A good request is made up of four blocks:
1. CONTEXT
What is the interface for what, who is the user
2. Visual aesthetics
Style, references, mood, color scheme
3. Specific Elements
What exactly should be on the screen, with approximate inscriptions
4. Technical requirements
Animations / no animations, statics / prototype, size, featuresThe more accurate each block, the fewer iterations will be needed. But that doesn't mean writing a novel. 5-8 sentences with specifics work better than one abstract paragraph.
Examples of queries: from simple to complex
Simple UI Concept – Product Cards
Make a directory screen concept for a mobile food delivery app.
Style: dark background, accent color - warm orange #FF6B35.
Minimalist, modern. Reference: Uber Eats dark mode.
On screen:
Top line: search + filter icon
Horizontal scrolling categories (Pizza, Sushi, Burgers, Pasta...)
- Grid of cards of dishes: photo, name, price, rating, button add
- Lower navigation: Home, Search, Orders, Profile
HTML/CSS, mobile size 375x812px, without JavaScript.Game HUD - RPG
HUD game concept for fantasy RPG in dark style.
Aesthetics: dark fantasy, magical runes, glow.
Dark Souls, Elden Ring is a minimalistic but atmospheric HUD.
Elements:
Lower left corner: HP strip red + mana strip blue
Beautiful organic forms, the numbers "847 / 1000"
Lower right: hotbar of 6 slots with icons of abilities,
kuldown
Top in the center: the enemy's name "ANCIENT DRAGON" + his HP bar
Upper right: small minimap zone, round
Dark background (semi-transparent, as in the game over the gameplay),
gold/amber accents, gothic font for numbers.
Do it with CSS animation: HP bar pulsates when less than 20%.
The icons light up slightly when hover.Cyberpunk interface with animations
Cyberpunk dashboard for mobile application is a full prototype.
Style: neo-noir, neon, dark.
Interfaces from Cyberpunk 2077, Blade Runner aesthetic.
Colors: background #0a0a0f, accent cyan #00f5ff, magenta #ff0080.
The screen shall contain:
Header "NEURAL LINK - ACTIVE" with flashing indicator
3 status cards: "THREAT LEVEL: LOW", "CREDITS: 8,847", "IMPLANTS: 7/12"
- Threat Radar - round, slowly rotating, 4 enemy points
List of active tasks with priorities and progress bars
Bottom panel: Quick Actions – big action icons
Must: scanlines effect on top of everything, glitch animation on the title,
Neon glow on the cards, animated radar.
HTML/CSS/JS, 812px height, full interactivity when clicking on cards.SaaS Dashboard
Analytic Dashboard Concept for B2B SaaS Product
Style: professional, clean, bright theme.
Linear, Notion is a minimalist enterprise design.
Structure:
- Sidebar on the left: logo "DataFlow", navigation with icons,
"Analytics" section is active
Header: page title, data picker, Export button
- KPI cards in a row: "Revenue $284K ^12%", "Users 12,847 ^3%",
"Churn 2.1% ↓0.3%," "NPS 47 ^5."
Linear chart "Revenue over time" with month signatures
Table of recent transactions with avatars, names, amounts, statuses
Inter font, grey palette + blue accent #4d79ff.
Shadows are light, borderers are thin. No heavy decorative elements.Modes GLM-5.2: High vs. Max Max
GLM-5.2 has two modes of reasoning: High and Max.
For interface concept, it is a choice between speed and quality
High mode is a fast concept in 1-2 minutes. Suitable for the first option, draft, direction check. If you need to make 5-6 different concepts in an hour – here.
Max mode - the agent "thinks" longer (3-7 minutes), but the result is much better. The best choice is when you need one specific concept with detailed animation and full interactivity, or when you bring it to a customer show.
Start at High to find direction, switch to Max for the final concept.
How to work with references
GLM-5.2 on z.ai receives images. It changes the process.
Screenshot of an existing product
Download a screenshot of the interface you like + write:
Here's the style reference [screenshot].
Do a similar aesthetic for [the description of your interface].
Take: color scheme, approach to cards, typography.
Don't copy the structure - it's another product: [description].Several references
Two style references:
[screenshot 1] Take from here: Colors and the overall dark atmosphere
[screenshot 2] - take it from here: approach to typography and card n
Task: concept [description].Handmade sketch
Take a picture of the sketch on the paper, download:
Here's my sketch of the structure of the screen.
Implement this layout in HTML/CSS style [description of aesthetics].
Text on buttons and inscriptions - think it yourself, look at the context.Description without images
If there are no screenshots, name specific products or games as style references. "Figma-style" GLM-5.2 understands better than "minimalistic professional." The Cyberpunk 2077 HUD aesthetic is more accurate than the dark tech aesthetic.
Iterative process: how to correctly
The first result is rarely final - that's normal. It is important to iterate effectively.
What to ask specifically
After the first result, do not write “improve it”. Write specifically what to change:
"Increase the cards, they're too small now."
Make the headline font bolder.
Change the color from blue to amber #FF9500.
"Make it more beautiful."Animation of the appearance of cards - let them appear
from the bottom up with a delay of 0.1s between each.
Add the hover effect to the buttons: small scale(1.05).
"Add animation."Keep what works
The agent remembers the context of the dialogue. When you ask for a change, specify what to leave:
“Leave the color scheme and typography as is.
Change the layout: instead of a grid of 2 columns, make a listWhen the result is not at all
Sometimes it’s easier to start a new conversation with a more accurate first query than iterating a bad concept. Use what you learned from the first run - what details should have been stated explicitly.
Features for game interfaces
Gaming UI is the most interesting thing GLM-5.2 can do in this context. A few specific techniques.
Specify specific games as references
The model knows the style of popular games:
- "HUD Style from Elden Ring" - Minimalist Dark
- “Like a Hades interface” – bright, stylized, energetic
- "Dark Souls inventory screen" - Icon table, dark, atmospheric
- Diablo IV UI is a dark fantasy with a red accent
- "League of Legends HUD" - competitive, readable, blue scheme
- Dead Space diegetic UI – built-in, minimalist
- "Persona 5 menus" - bright, graphic, animated
Describe the technique, not just the effect
Scanlines effect through CSS ::after pseudo-element with
repeated gradient, 2px bands, 10% opacity
Glitch effect on text - CSS animation with clip-path,
offset ±3px over X, triggered every 3 seconds"
"Do it like in a hacker game."Ask for individual components
Instead of “do the whole game UI” – conceptualize in parts:
HUD only: health strips + hotbar + minicard
→ Just the inventory screen.
→ Only the main menu.
→ Just a pause screenThen you can combine everything into one HTML page with navigation between screens.
Example of query for full game concept
Make a full interface concept for mobile roguelike games.
Style: pixel art is not needed - I want modern stylized 2D, dark theme
Purple blue palette. Mood reference: Hades.
You need 3 screens on one HTML page, switch buttons:
ECRAN 1 - Main Menu:
Background art (gradient as a replacement), the name of the game "VOID Runner" is large,
buttons: NEW RUN, CONTINUE, ACHIEVEMENTS, SETTINGS
ECRAN 2 - Gameplay HUD:
Top: coin counter, level "Floor 3", timer
Downtown: hotbar 5 slots with icons
Low-left: HP "67/100" with animated strip
Low-right: Special ability with cooldown
ECRAN 3 - Run Complete:
Results of the race: time, coins, enemies, record
Cards of found items
Buttons: Play Gain, Main Menu
Animations: the appearance of screens with fade-in, the pulsation of HP in low health,
particles in the background of the main menu (CSS only).What to say always
Several parameters that should be added to each request – they greatly affect the result:
** Viewport size:**
Mobile: 375x812px (or 390x844 for iPhone 15)
Desktop: 1440x900px or 1280x800px
Game HUD: 1920x1080px** Theme:**
Clearly: "dark theme" or "bright theme"
Without instructions, he chooses himself, and it is unpredictable** Interactivity level:**
"Statics only" - if you just need a view
"With hover effects" - basic interactive
Full prototype with animations and clickable elements** Fonts:**
Specify "Inter", "Space Grotesk", "Orbitron for sci-fi".
Without instructions, it will connect something defaulting.
For Cyrillic, make sure the typeface supports --
For example, Roboto or Inter support, Orbitron does not.Typical problems and how to solve them
Problem: The interface looks like 2015
The agent sometimes makes a "functional but ugly" result. Add to the request:
"Contemporary Design 2025/2026".
Use: CSS custom properties for colors, background-filter for blur effects,
smooth border-radius, thin shadows instead of roughProblem: text cannot be read in the background
“Make sure that the whole text has sufficient contrast.
For a dark background, white or light text.
Use text shadow to improve readability on a complex background*Problem: Animations slow down or work strangely *
Use only CSS animations through @keyframes.
Transform and opacity (GPU-accelerated)
Avoid width, height, top, left animations – they are slowProblem: The mobile interface does not fit on the screen
“All content must be 375x812px without scrolling.
Use flexbox/grid for adaptive arrangement.
Lower navigation – position: fixed, bottom: 0Problem: Agent loses style in iterations
This happens with long sessions. Solution - at the beginning of the iterative request, explicitly remind:
Save the color scheme (dark background #0a0a0f, accent #00f5ff),
Inter, and the overall aesthetics of the previous result.
Change only: [specific change].”Workflow for teamwork
If the result from GLM-5.2 goes further than the team:
** Designer at Figma**
Export the HTML concept as a reference. Take screenshots of each screen/state. In Figma, they go as a reference frame next to the final design.
You can ask GLM-5.2 to unload the CSS variables:
“Infer all CSS variables used in this concept:
colors, indentations, radii, fonts - in the form of :root { } blockThe designer brings them to Figma Variables as a starting point.
** Developer**
The HTML concept is already working code. The developer can take it as a basis, remove decorative elements, replace hard-cut data with components.
Rewrite this concept as a React component with TypeScript.
All texts and data are through props.
Styles through CSS ModulesCustomer/stakeholder
HTML-file can be downloaded to any static hosting (GitHub Pages, Vercel, Netlify) in 2 minutes and give a link. The client opens in the browser and sees a live prototype - not a picture, not a PDF.
Slugs to articles
For both recent articles:
PageSpeed / Lighthouse / Core Web Vitals:
pagespeed-lighthouse-core-web-vitals-auditXX
GLM-5.2 concept interfaces:
glm-52-interface-concepting-workflowXX
Checklist before sending the request
- Context: what is the interface and why
- Aesthetics: style, references (specific games/products), colors
- Elements: What should be on the screen, with approximate inscriptions
- Viewport size is clearly indicated
- A dark or light topic is clearly indicated
- Interactivity level: static / hover / full prototype
- The font is indicated (especially if you need Cyrillic)
- Mode: High for quick draft, Max for final concept
Examples of queries that work consistently
Several templates tested in real sessions.
Screen onboarding mobile application
Onboarding screen concept for mobile application [name/type].
Step 2 of 4: "[step name]"
On screen:
Progress bar at the top: 2 out of 4 points active
- Large illustration in the center - [description of the icon / illustration,
You can use CSS shapes or emoji with a large size.
- Heading: “[heading text]”
- Subtitle/description: “[text]”
- Continue button at the bottom, wide
- Link "skip" in gray under the button
Style: [Description]. Colors: [Description].
Mobile 375x812px. Good subject.Status cards
Component of the product card for the marketplace - 3 states nearby:
1. Default: Product Available
2. Hover: illuminated, shadow enlarged, button visible
3. Out of stock: grey overlay, badge "Not available"
Content of the card:
Photo of the product (placeholder color block)
- Title “[Name of goods]”
- Price "[price] а"
- Rating ★★★★★ов + number of reviews
- The basket button.
Show all 3 states horizontally on one screen.
Style: [Description]. Card size: 200x280px.Landing page section
Section "Features" for landing SaaS-product [description].
Layout: three columns, each a feature card.
Card 1: icon [description], title "[text]", description "[text]"
Card 2: icon [description], title "[text]", description "[text]"
Card 3: icon [description], title “[text]”, description “[text]”
Above: "WHY CHOOSE US" in gray,
The title of the section "[text]" is large dark.
Style: [Description]. Width: 1440px.
When hover cards: light lift translateY(-4px), the shadow is amplified.How to Use 1M Context Properly
GLM-5.2 is not just a technical feature, it is a working tool.
Loading a design system into context
If you have a Design System or Brand Guidelines, download the text at the beginning of the session
Here are our design tokens and brand guidelines:
Colors:
--primary: #4d79f f
--primary-dark: #3560e0
--background: #ffffffffffffff
--surface: #f8f9fa
--text-primary: #1a1a2e
--text-secondary: #6b7280
Typography: Inter, dimensions 12/14/16/20/24/32/48px,
Font-weight 700, body: 400.
Components: border-radius 8px for cards, 4px for buttons.
Shadows: 0 1px 3px rgba(0.0.0.0.1) default, 0 4px 12px at hover.
Use these tokens in all the components I ask for.Each subsequent request automatically follows the system.
History of iterations as a living document
In a long session, the context stores the entire history of change. It means:
“Take the card component from my second request,
But with the color scheme of the fourth,
And add the animation as in the sixthIt works -- the agent remembers everything in the conversation.
Loading multiple references
With 1M tokens, you can upload 5-10 screenshots of references into one dialog and operate on them:
[screenshot 1] is reference A, take typography from here.
[screenshot 2] is the reference B, take the color scheme from here.
[screenshot 3] is a C reference, take the card layout from here.
Now make a catalog screen using:
Typography from A, colors from B, layout from C.What to do with the outcome
The GLM-5.2 concept is a starting point, not a finale. A few ways he's going:
Fast matching. You upload HTML to GitHub Pages or open a screen demo to show a live prototype. The client or team leader nods or says, “This is a change.” Save 1-2 days before the first approval.
Reference for Figma. Screenshots of each screen/state go as reference frames next to the final design. The designer sees not “draw something with cards” but “this is a specific direction.”.
CSS as a starting point. Ask GLM-5.2 to output CSS variables in the :root{} block - colors, indentations, typography. Copy in Figma Variables or in the basic CSS file of the project.
For internal tools, MVPs, admin panels, the HTML concept sometimes becomes the basis of real code. Developer refactors, adds logic, replaces components.
