Как концептить интерфейсы через GLM-5.2: агент кодит, дизайнер направляет
Основной чат
Чат для вайбкодеров: новости, гайды, поиск исполнителей, маркетплейс и разбор реальных кейсов.
Почему GLM-5.2 для этого подходит
По независимым бенчмаркам Code Arena: Frontend, GLM-5.2 занял первое место среди всех открытых моделей — обойдя в том числе все версии Claude Opus на задачах фронтенд-кодирования.
Модель строилась под реальные задачи разработки: кодирование, использование инструментов, многошаговое рассуждение, анализ репозиториев и долгосрочные агентные воркфлоу — не под чат-ботовую модель.
Для дизайнера это означает конкретное: GLM-5.2 понимает что значит «сделать красиво». Он знает CSS-паттерны для glassmorphism, neon-glow эффектов, game HUD эстетики. Он пишет анимации. Он понимает визуальную иерархию и зачем нужны z-index. Многие языковые модели кодят рабочий интерфейс, но выглядит он как что-то из 2010-х — GLM-5.2 чаще понимает что такое «выглядит хорошо» в 2026.
Ключевое отличие от предыдущих версий — контекстное окно в 1 миллион токенов. Для концептинга это значит: можно держать весь разговор с историей итераций, референсами, описанием системы — и агент не «забывает» что было в начале диалога.
Как устроен воркфлоу
Три элемента входят в каждую сессию концептинга:
Текстовое описание — что за интерфейс, для чего, какая эстетика, какие элементы.
Референсы — скриншоты, ссылки, названия игр или продуктов чей стиль берётся за основу. GLM-5.2 понимает референсы через описание (если грузишь как текст) или напрямую как изображения.
Итерации в диалоге — результат появился, смотришь что работает, что нет, просишь поправить конкретные детали. Агент помнит весь контекст.
На выходе — HTML/CSS файл (иногда с JavaScript для анимаций и интерактива) который открывается прямо в браузере. Не Figma-файл, не PDF, не картинка — живая страница которую можно покрутить, посмотреть как анимируется, проверить как выглядит на разных размерах окна.
Базовая структура запроса
Плохой запрос: «Сделай игровой интерфейс».
Хороший запрос строится из четырёх блоков:
1. КОНТЕКСТ
Что за интерфейс, для чего, кто пользователь
2. ВИЗУАЛЬНАЯ ЭСТЕТИКА
Стиль, референсы, настроение, цветовая схема
3. КОНКРЕТНЫЕ ЭЛЕМЕНТЫ
Что именно должно быть на экране, с примерными надписями
4. ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ
Анимации / без анимаций, статика / прототип, размер, особенностиЧем точнее каждый блок — тем меньше итераций потребуется. Но это не значит писать роман. 5–8 предложений с конкретикой работают лучше одного абстрактного абзаца.
Примеры запросов: от простого к сложному
Простой UI-концепт — карточки продукта
Сделай концепт экрана каталога для мобильного приложения доставки еды.
Стиль: тёмный фон, акцентный цвет — тёплый оранжевый #FF6B35.
Минималистичный, современный. Референс по настроению — Uber Eats dark mode.
На экране:
- Верхняя строка: поиск + иконка фильтра
- Горизонтальный скролл категорий (Пицца, Суши, Бургеры, Паста...)
- Сетка карточек блюд: фото, название, цена, рейтинг, кнопка добавить
- Нижняя навигация: Главная, Поиск, Заказы, Профиль
HTML/CSS, мобильный размер 375x812px, без JavaScript.Игровой HUD — RPG
Концепт игрового HUD для фэнтезийной RPG в тёмном стиле.
Эстетика: тёмное фэнтези, магические руны, свечение.
Референсы: Dark Souls, Elden Ring — минималистичный но атмосферный HUD.
Элементы:
- Левый нижний угол: полоска HP красная + полоска маны синяя,
красивые органические формы, числа "847 / 1000"
- Правый нижний: хотбар из 6 слотов с иконками способностей,
циферки кулдауна на каждом
- Сверху по центру: имя врага "ANCIENT DRAGON" + его HP-бар
- Правый верхний: маленькая минимап-зона, круглая
Тёмный фон (полупрозрачный, как в игре поверх геймплея),
золотые/янтарные акценты, готический шрифт для цифр.
Сделай с CSS-анимацией: HP-бар пульсирует когда меньше 20%,
иконки слегка светятся при hover.Cyberpunk интерфейс с анимациями
Cyberpunk dashboard для мобильного приложения — полный прототип.
Стиль: neo-noir, neon, тёмный.
Референсы: интерфейсы из Cyberpunk 2077, Blade Runner aesthetic.
Цвета: фон #0a0a0f, акцент cyan #00f5ff, magenta #ff0080.
Экран содержит:
- Заголовок "NEURAL LINK — ACTIVE" с мигающим индикатором
- 3 статус-карточки: "THREAT LEVEL: LOW", "CREDITS: 8,847", "IMPLANTS: 7/12"
- Радар угроз — круглый, медленно вращается, 4 точки-противника
- Список активных задач с приоритетами и прогресс-барами
- Нижняя панель: Quick Actions — большие иконки действий
Обязательно: scanlines-эффект поверх всего, glitch-анимация на заголовке,
неон-свечение на карточках, анимированный радар.
HTML/CSS/JS, высота 812px, полная интерактивность при клике на карточки.SaaS Dashboard
Концепт аналитического дашборда для B2B SaaS-продукта.
Стиль: профессиональный, чистый, светлая тема.
Референс: Linear, Notion — минималистичный enterprise design.
Структура:
- Sidebar слева: лого "DataFlow", навигация с иконками,
раздел "Analytics" активен
- Шапка: заголовок страницы, дата-picker, кнопка Export
- KPI-карточки в ряд: "Revenue $284K ↑12%", "Users 12,847 ↑3%",
"Churn 2.1% ↓0.3%", "NPS 47 ↑5"
- Линейный график "Revenue over time" с подписями месяцев
- Таблица последних транзакций с аватарами, именами, суммами, статусами
Шрифт Inter, серая палитра + синий акцент #4d79ff.
Тени лёгкие, бордеры тонкие. Никаких тяжёлых декоративных элементов.Режимы GLM-5.2: High vs. Max
GLM-5.2 имеет два режима рассуждения: High и Max.
Для концептинга интерфейсов это выбор между скоростью и качеством:
High mode — быстрый концепт за 1–2 минуты. Подходит для первого варианта, черновика, проверки направления. Если нужно за час сделать 5–6 разных концептов — сюда.
Max mode — агент «думает» дольше (3–7 минут), но результат значительно качественнее. Лучший выбор когда нужен один конкретный концепт с детальной анимацией и полной интерактивностью, или когда несёшь на показ клиенту.
Практически: начинай в High для поиска направления, переключайся в Max для финального концепта.
Как работать с референсами
GLM-5.2 на z.ai принимает изображения. Это меняет процесс.
Скриншот существующего продукта
Грузишь скриншот интерфейса который нравится + пишешь:
Вот референс по стилю [скриншот].
Сделай похожую эстетику для [описание твоего интерфейса].
Возьми: цветовую схему, подход к карточкам, типографику.
Не копируй структуру — это другой продукт: [описание].Несколько референсов
Два референса по стилю:
[скриншот 1] — возьми отсюда: цвета и общую тёмную атмосферу
[скриншот 2] — возьми отсюда: подход к типографике и карточкам
Задача: концепт [описание].Скетч от руки
Сфоткай набросок на бумаге, загрузи:
Вот мой скетч структуры экрана [фото скетча].
Реализуй эту раскладку в HTML/CSS в стиле [описание эстетики].
Текст на кнопках и надписи — придумай сам, смотри по контексту.Описание без изображений
Если нет скриншотов — называй конкретные продукты или игры как стилевые референсы. «В стиле Figma» GLM-5.2 понимает лучше чем «минималистичный профессиональный». «Эстетика Cyberpunk 2077 HUD» точнее чем «тёмный технологичный».
Итерационный процесс: как правильно
Первый результат редко финальный — это нормально. Важно итерировать эффективно.
Что просить конкретно
После первого результата не пиши «улучши это». Пиши конкретно что изменить:
✅ "Увеличь карточки, сейчас они слишком маленькие.
Шрифт заголовков сделай жирнее.
Цвет кнопок поменяй с синего на янтарный #FF9500."
❌ "Сделай покрасивее."✅ "Анимация появления карточек — пусть они появляются
снизу вверх с задержкой 0.1s между каждой.
Добавь hover-эффект на кнопки: небольшой scale(1.05)."
❌ "Добавь анимации."Сохраняй что работает
Агент помнит контекст диалога. Когда просишь изменить — уточняй что оставить:
"Цветовую схему и типографику оставь как есть.
Измени только раскладку: вместо сетки 2 колонки сделай список."Когда результат совсем не то
Иногда проще начать новый разговор с более точным первым запросом, чем итерировать плохой концепт. Используй то что узнал из первого прогона — какие детали надо было указать явно.
Особенности для игровых интерфейсов
Игровой UI — самое интересное что умеет GLM-5.2 в этом контексте. Несколько специфических приёмов.
Указывай конкретные игры как референсы
Модель хорошо знает стилистику популярных игр:
- «В стиле HUD из Elden Ring» — минималистичный тёмный
- «Как интерфейс Hades» — яркий, stylized, энергичный
- «Dark Souls inventory screen» — таблица с иконками, тёмный, атмосферный
- «Diablo IV UI» — тёмное фэнтези с красным акцентом
- «League of Legends HUD» — competitive, читабельный, синяя схема
- «Dead Space diegetic UI» — встроенный в мир, минималистичный
- «Persona 5 menus» — яркий, графичный, анимированный
Описывай технику, а не только эффект
✅ "Scanlines эффект через CSS ::after pseudo-element с
повторяющимся градиентом, 2px полосы, 10% opacity"
✅ "Glitch эффект на тексте — CSS animation с clip-path,
смещение ±3px по X, срабатывает каждые 3 секунды"
❌ "Сделай как в играх про хакеров"Просить отдельные компоненты
Вместо «сделай весь игровой UI» — концептить по частям:
Только HUD: полоски здоровья + хотбар + миникарта
→ Только экран инвентаря
→ Только главное меню
→ Только экран паузыПотом можно соединить всё в одну HTML-страницу с навигацией между экранами.
Пример запроса для полного игрового концепта
Сделай концепт полного интерфейса для мобильной roguelike игры.
Стиль: pixel art не нужен — хочу modern stylized 2D, тёмная тема,
фиолетово-синяя палитра. Референс по настроению: Hades.
Нужно 3 экрана на одной HTML-странице, переключение кнопками:
ЭКРАН 1 — Main Menu:
Фоновый арт (gradient как замена), название игры "VOID RUNNER" крупно,
кнопки: NEW RUN, CONTINUE, ACHIEVEMENTS, SETTINGS
ЭКРАН 2 — Gameplay HUD:
Верх: счётчик монет, уровень "Floor 3", таймер
Низ-центр: хотбар 5 слотов с иконками
Низ-лево: HP "67/100" с анимированной полоской
Низ-право: специальная способность с кулдауном
ЭКРАН 3 — Run Complete:
Итоги забега: время, монеты, враги, рекорд
Карточки найденных предметов
Кнопки: PLAY AGAIN, MAIN MENU
Анимации: появление экранов с fade-in, пульсация HP при низком здоровье,
частицы в фоне главного меню (CSS только).Что указывать всегда
Несколько параметров которые стоит добавлять в каждый запрос — они сильно влияют на результат:
Размер viewport:
Мобайл: 375x812px (или 390x844 для iPhone 15)
Десктоп: 1440x900px или 1280x800px
Игровой HUD: 1920x1080pxТема:
Явно: "тёмная тема" или "светлая тема"
Без указания — выбирает сам, и это непредсказуемоУровень интерактивности:
"Только статика" — если нужен просто вид
"С hover-эффектами" — базовый интерактив
"Полный прототип с анимациями и кликабельными элементами"Шрифты:
Указывай конкретно: "Inter", "Space Grotesk", "Orbitron для sci-fi".
Без указания подключит что-то дефолтное.
Для кириллицы: убедись что шрифт поддерживает —
например "Roboto" или "Inter" поддерживают, "Orbitron" — нет.Типичные проблемы и как их решать
Проблема: интерфейс выглядит как 2015 год
Агент иногда делает «функциональный но некрасивый» результат. Добавь в запрос:
"Современный дизайн 2025/2026 года.
Используй: CSS custom properties для цветов, backdrop-filter для blur-эффектов,
smooth border-radius, тонкие shadows вместо грубых."Проблема: текст не читается на фоне
"Убедись что весь текст имеет достаточный контраст.
Для тёмного фона — белый или светлый текст.
Используй text-shadow для улучшения читаемости на сложном фоне."Проблема: анимации тормозят или работают странно
"Используй только CSS-анимации через @keyframes.
Для движения — transform и opacity (GPU-accelerated).
Избегай анимаций width, height, top, left — они медленные."Проблема: мобильный интерфейс не помещается на экран
"Весь контент должен помещаться в 375x812px без скролла.
Используй flexbox/grid для адаптивного расположения элементов.
Нижняя навигация — position: fixed, bottom: 0."Проблема: агент теряет стиль при итерациях
Это бывает при долгих сессиях. Решение — в начале итерационного запроса явно напоминать:
"Сохрани цветовую схему (тёмный фон #0a0a0f, акцент #00f5ff),
шрифт (Inter), и общую эстетику предыдущего результата.
Измени только: [конкретное изменение]."Воркфлоу для командной работы
Если результат из GLM-5.2 идёт дальше в работу команды:
→ Дизайнер в Figma
Экспортируй HTML-концепт как reference. Сделай скриншоты каждого экрана/состояния. В Figma они идут как reference frame рядом с финальным дизайном.
Можно попросить GLM-5.2 выгрузить CSS-переменные:
"Выведи все CSS-переменные которые используются в этом концепте:
цвета, отступы, радиусы, шрифты — в виде :root { } блока."Дизайнер переносит их в Figma Variables как отправную точку.
→ Разработчик
HTML-концепт — это уже рабочий код. Разработчик может взять его как основу, убрать декоративные элементы, заменить захардкоженные данные на компоненты.
"Перепиши этот концепт как React-компонент с TypeScript.
Все тексты и данные — через props.
Стили через CSS Modules."→ Клиент / стейкхолдер
HTML-файл можно загрузить на любой статический хостинг (GitHub Pages, Vercel, Netlify) за 2 минуты и дать ссылку. Клиент открывает в браузере и видит живой прототип — не картинку, не PDF.
Слаги к статьям
Для обеих последних статей:
PageSpeed / Lighthouse / Core Web Vitals:
pagespeed-lighthouse-core-web-vitals-audit
GLM-5.2 концептинг интерфейсов:
glm-52-interface-concepting-workflow
Чеклист перед отправкой запроса
- Контекст: что за интерфейс и для чего
- Эстетика: стиль, референсы (конкретные игры/продукты), цвета
- Элементы: что должно быть на экране, с примерными надписями
- Размер viewport указан явно
- Тёмная или светлая тема указана явно
- Уровень интерактивности: статика / hover / полный прототип
- Шрифт указан (особенно если нужна кириллица)
- Режим: High для быстрого черновика, Max для финального концепта
Примеры запросов которые работают стабильно
Несколько шаблонов проверенных в реальных сессиях.
Экран онбординга мобильного приложения
Концепт экрана онбординга для мобильного приложения [название/тип].
Шаг 2 из 4: "[название шага]"
На экране:
- Прогресс-бар вверху: 2 из 4 точек активны
- Большая иллюстрация по центру — [описание иконки/иллюстрации,
можно через CSS shapes или emoji с большим размером]
- Заголовок: "[текст заголовка]"
- Подзаголовок/описание: "[текст]"
- Кнопка "Продолжить" внизу, широкая
- Ссылка "Пропустить" серым цветом под кнопкой
Стиль: [описание]. Цвета: [описание].
Мобайл 375x812px. Светлая тема.Карточки с состояниями
Компонент карточки товара для маркетплейса — 3 состояния рядом:
1. Default: товар доступен
2. Hover: подсвечена, тень увеличена, кнопка видна
3. Out of stock: серый overlay, бейдж "Нет в наличии"
Содержание карточки:
- Фото товара (placeholder цветным блоком)
- Название "[Название товара]"
- Цена "[цена] ₽"
- Рейтинг ★★★★☆ + количество отзывов
- Кнопка "В корзину"
Показать все 3 состояния горизонтально на одном экране.
Стиль: [описание]. Размер карточки: 200x280px.Landing page секция
Секция "Features" для лендинга SaaS-продукта [описание].
Layout: три колонки, каждая — фича-карточка.
Карточка 1: иконка [описание], заголовок "[текст]", описание "[текст]"
Карточка 2: иконка [описание], заголовок "[текст]", описание "[текст]"
Карточка 3: иконка [описание], заголовок "[текст]", описание "[текст]"
Выше: надзаголовок "WHY CHOOSE US" серым,
заголовок секции "[текст]" крупный тёмный.
Стиль: [описание]. Ширина: 1440px.
При hover карточки: лёгкий подъём translateY(-4px), тень усиливается.Как использовать 1M контекст правильно
Большое контекстное окно GLM-5.2 — не просто техническая характеристика, это рабочий инструмент.
Загрузка дизайн-системы в контекст
Если у тебя есть Design System или Brand Guidelines — загрузи их текстом в начале сессии:
Вот наш дизайн-токены и brand guidelines:
Цвета:
--primary: #4d79ff
--primary-dark: #3560e0
--background: #ffffff
--surface: #f8f9fa
--text-primary: #1a1a2e
--text-secondary: #6b7280
Типографика: Inter, размеры 12/14/16/20/24/32/48px,
заголовки: font-weight 700, body: 400.
Компоненты: border-radius 8px для карточек, 4px для кнопок.
Тени: 0 1px 3px rgba(0,0,0,0.1) default, 0 4px 12px при hover.
Используй эти токены во всех компонентах которые буду просить.Теперь каждый последующий запрос автоматически следует системе.
История итераций как живой документ
В длинной сессии контекст хранит всю историю изменений. Это значит:
"Возьми компонент карточки из моего второго запроса,
но с цветовой схемой из четвёртого,
и добавь анимацию как в шестом."Это работает — агент помнит всё что было в диалоге.
Загрузка нескольких референсов
С 1M токенами можно загрузить 5–10 скриншотов референсов в один диалог и оперировать ими:
[скриншот 1] — это референс A, возьми отсюда типографику
[скриншот 2] — это референс B, возьми отсюда цветовую схему
[скриншот 3] — это референс C, возьми отсюда раскладку карточек
Теперь сделай экран каталога используя:
типографику из A, цвета из B, раскладку из C.Что делать с результатом
Концепт из GLM-5.2 — это отправная точка, не финал. Несколько путей куда он идёт:
Быстрое согласование. Загружаешь HTML на GitHub Pages или открываешь встречу с демонстрацией экрана — показываешь живой прототип. Клиент или тимлид кивает или говорит «вот это вот поменять». Экономишь 1–2 дня до первого согласования.
Reference для Figma. Скриншоты каждого экрана/состояния идут как reference-фреймы рядом с финальным дизайном. Дизайнер видит не «нарисуй что-нибудь с карточками» а «вот конкретное направление».
CSS как отправная точка. Попроси GLM-5.2 вывести CSS-переменные в :root{} блоке — цвета, отступы, типографику. Копируешь в Figma Variables или в базовый CSS файл проекта.
Передача в разработку напрямую. Для внутренних инструментов, MVP, admin-панелей — HTML-концепт иногда становится основой реального кода. Разработчик рефакторит, добавляет логику, заменяет на компоненты.
