Веб-дизайн *

«Закину промпт в ИИ, а через секунду получу готовый интерфейс, свой сайт или дашборд» — такая идея наверняка приходила каждому, кто не связан с дизайном или разработкой. ИИ-инструменты для этих сфер активно распространяются и обещают такие фантастические результаты, что закрадывается мысль: а что, если скоро дизайнеры будут не нужны?

Все же между картинкой и рабочим прототипом большая пропасть. Иерархия элементов на экране, адаптивность, доступность, логика сценариев и продуктовые метрики — это лишь ограниченный список пунктов, которые очень сложно уложить в один промпт. 

Забыла представиться: меня зовут Камила, я проектировщик интерфейсов в Selectel. Вместе с бумом ИИ коллеги чаще начали ко мне приходить с вопросами такого рода: «Мне ИИшка макет сделала, сделай ревью, пожалуйста». Так что я решила разобраться со своей дизайн-колокольни — где ИИ может помочь, а где создает привлекательную, но не самую работающую концепцию. 

Расположить иконку рядом с текстом — с этой задачей сталкивался каждый фронтенд-разработчик. Вроде бы ничего сложного.

Тогда почему с ней не могут справиться ни Apple, ни Microsoft, ни Google, ни другие техногиганты? 

Меня зовут Армен Аллахвердян, я фронтенд-разработчик из команды дизайн-системы Авито. В статье разберёмся, почему простая на первый взгляд задача вызывает столько проблем, и выясним, как надо и как не надо выравнивать иконки.

В вашей дизайн-системе могут быть особые требования к внешнему виду скроллбаров. К сожалению, нативные возможности стилизации весьма ограничены, поэтому, если вы сталкивались с подобными требованиями, единственный вариант — делать собственный компонент.

Для этого нам нужно решить несколько задач: понять, когда надо показывать ползунок, какого он должен быть размера и где находиться, обновлять положение при прокрутке и тому подобное.

Что, если я скажу вам, что в 2026 году JavaScript для всего этого нам больше не нужен?

В конце марта 2026 года Figma открыла канвас для AI-агентов. Claude Code, Codex и подобные инструменты получили возможность создавать и редактировать макеты через MCP-сервер Figma.

Я решил проверить, насколько хорошо Claude Code сможет перенести дизайн сайтов в макет и сколько это будет стоить. Для этого я выбрал несколько лендингов и попросил агента перенести их на канвас - пробовал давать ему либо скриншот, либо ссылку на сайт. Каждый раз я смотрел, какие шаги выполняет агент, сколько раз обращается к инструментам и сколько токенов (то есть денег) тратит.

Фирменный стиль может отлично работать в брендбуке и на рекламных носителях, а в интерфейсе довольно быстро начать мешать. Шрифт оказывается неудобным для таблиц, фирменному цвету не хватает контраста, выразительная графика превращается в шум после десятого повторения, а между макетом в Figma и браузером появляются состояния и ограничения, которых раньше вообще не было. В этой статье разберу, что происходит с айдентикой при переносе в цифровой продукт и почему интерфейс почти всегда заставляет пересобирать часть исходных решений.

Казалось бы, что может пойти не так с легковесными векторными анимациями? Вектор в Lottie, JSON весит копейки. Но тестирование на реальном телефоне закончилось фиаско: через пару минут скролла чип раскалился до 42 °C, а интерфейс ушёл в троттлинг.

Оказалось, что покадровый пересчёт кривых Безье в JS на мобильных экранах быстро превращает телефон в печку.

В кейсе разбор того, как мы перешли на аппаратно декодируемые видео‑спрайты, почему IntersectionObserver втихую крутил видео под непрозрачными модалками и как в итоге удалось сбить температуру обратно до стабильных 30 °C.

Прошел уже год, как начали действовать новые штрафы в области защиты персональных данных. Однако до сих пор я встречаю в своей практике нарушения у предпринимателей, которые могут повлечь за собой миллионные штрафы, если эти нарушения первым обнаружит Роскомнадзор. Поэтому в этой статье расскажу о часто встречаемых мной нарушениях и дам рекомендации, как их устранить и сохранить свою прибыль в 2026 г.

У вас бывает такое чувство, когда вы при выполнении работы упёрлись в какую-то проблему и что-то внутри подсказывает, что не может такого быть, чтобы у неё не было решения? Когда кажется, что уже всё пропало и мы столкнулись с фундаментальным ограничением реальности, но отказ принять это продолжает вести вас в дебри спецификаций, беседы на Github 10 летней давности и изучение статей гигантов уже прошедших этот путь и поделившихся с нами своими результатами? И вот спустя многие часы напряжённого скрипа извилин вы дописали очередную строчку, обновили страницу и вот оно, то, что вы хотели получить смотрит на вас с экрана? Это ощущение успеха, наверное, в той или иной степени знакомо каждому инженеру. В такие моменты мне, обычно, очень хочется поделиться результатом с коллегами и, по возможности, написать статью если это может быть полезно кому-то ещё. В этой записи я собрал 3 подобных ситуации, где в рамках нашей работы возникли решения, которые, насколько мне известно, довольно уникальны и в полной мере не были описаны раньше. Приглашаю вас разделить со мной радость обнаружения решения, которое казалось невозможным!

Работая над очередным проектом, я хотел сделать его визуально интересным. Работаю в соло от момента идеи до выкладки на продакшен. Я не разработчик, не верстальщик, не дизайнер, не бэкендер, не системный аналитик, но всё равно создаю свои продакшен-реди проекты. Я обычный пользователь нейро-агентов.

В этом есть своя прелесть и свои ограничения. С которыми я прямо столкнулся во время решения задачи.

Агент несколько раз писал «готово» или «да, теперь идеально!», но на экране оставались углы в воздухе, узкая колонка по центру и сетка вместо одной формы. По итогу у меня получился стресс-тест для моделей, с которыми они так и не справились.

Знакомая ситуация: продукт написан за выходные, гипотеза подтвердилась, кто‑то уже платит. Приходит дизайнер и просит файл.

Файла нет. 

Есть интерфейс, который существует только в виде кода. Кнопка там называется.btn‑primary,.btn‑add и.button‑save — три класса, одна кнопка, паддинги отличаются на пиксель. Серый цвет записан тремя способами, и один из них, судя по всему, опечатка. Отдать это дизайнеру нельзя. Нарисовать заново — значит выбросить полгода работы и начать спорить про радиусы. 

Мне стало интересно, что тут реально может AI. Не «сделай красиво», а честный замер: я собрал маленькое демо, намеренно заложил в него шестнадцать несогласованностей, записал их в отдельный файл и спрятал. Потом запустил на этом коде свежую сессию Claude Code, которая файла с ответами не видела.

В статье — что из этого вышло, с цифрами и с местами, где всё сломалось.

Я пишу на Хабре, в основном, про старое железо и игры, но периодически появляются статьи по моей основной специализации — интернет‑рекламе и аналитике. 

Август для меня традиционно пора проведения аудитов сайтов и кабинетов контекстной рекламы Яндекс.Директ. Поток писем и звонков с вопросами идет волнами.

Что интересно, до сих пор довольно большая часть корпоративных сайтов все еще не соответствуют требованиям Федерального закона от 27.07.2006 № 152-ФЗ «О персональных данных». А подавляющая доля тех, кто работает с контекстной рекламой, не знает о том, что Яндекс включает новые опции и инструменты автоматически, и сильно удивляются, почему проседает поток лидов.

Давайте обсудим, на что нужно обратить внимание.

Аптечный интернет-ритейл, несмотря на свою зарегулированность различными законами, актами и распоряжениями, демонстрирует приятную продуктовую архитектуру. Комфортный глазу дизайн сайтов и приложений, удобная навигация, не причиняющий боль пользовательский путь и даже элементы геймификации. Предела совершенству нет, главное – не переборщить.

О том, как мы в маркетплейсе здоровья «Здравсити.ру», одном из крупнейших аптечных интернет-сервисов, учились на ошибках и перестаралась с заботой о клиентах, но впоследствии смогли исправить ситуацию – в материале ниже.

Этот значок на компьютере моего коллеги выглядит лучше

Как-то я общался с коллегой у него за компьютером и заметил, что логотип выглядит не совсем так, как моём компьютере. На компьютере коллеги он казался тоньше и больше походил на исходное изображение. Он имел размер 15px; на картинке выше показана его увеличенная версия.

Примечание: показано не исходное изображение. Это было уже довольно давно, поэтому я создал новое изображение, чтобы продемонстрировать, в чём же проблема.

Если прищуриться или отойти подальше, то изображение из Chrome выглядит толще. Это немного странно, но если заменить картинку на SVG, то проблема исчезнет. Однако мне всё равно стало любопытно: почему она вообще так рендерится?

Я провёл исследование и обнаружил в Chrome изящную оптимизацию, используемую для рендеринга JPEG в мелком масштабе.

Грязный макет — грязный код. Чистый макет — адекватный код и отсутствие вопросов «что тут имелось в виду»: разработка получает то, с чем можно работать.

Элементарщина, про которую забывают/не успевают, ведь это просто, примитивно, но страдают все… В СВОЙ Тех решили написать спецификацию по тому, в каком виде желательно отдавать макеты в разработку. Разработка получила аргументацию для возвращения макета. Потому в «сесть и сделать сразу хорошо» заинтересованы все — но это время, и его надо закладывать в процессы. Внутри — правила, советы, рекомендации и чек‑лист для краш‑теста, которые помогают собраться и сделать хорошо сразу.

Из элементарного строится бо́льшее...

90-е были для Интернета чем-то вроде эпохи Дикого Фронтира: никаких правил, никакой цензуры и никакого блёклого веб-дизайна от биг-корпов. Стремясь перетянуть на свою сторону ещё не слишком многочисленную онлайн-толпу, компании и стартапы пытались придумать что-то этакое — и порой создавали очень странные, но безумно интересные продукты.

Собрались однажды продакты, разработчики и отдел дизайна и решили: хватит терпеть жалобы на устаревший и запутанный интерфейс. Был сервис деск-лабиринт, стал продукт с умной навигацией — минус половина элементов, без боли адаптации, с добавлением привычных паттернов.

Привет, Хабр! Меня зовут Света, проектирую интерфейсы в ITSM 365. Мы с командой стояли у истоков дизайна первой версии системы, потом упростили его и распространили на новые продукты, сейчас запускаем интерфейс 2.0. Расскажу и покажу, что было раньше и как мы это изменили.

Пользователи не читают ваши страницы — они их сканируют. Взгляд прыгает по подзаголовкам, как по слоям пирога, и от того, что он там находит, зависит, останется человек или уйдёт. Разбираю паттерн layer-cake, F-паттерн и почему всё решается на этапе вёрстки, а не редизайном.

Почему ввод кода из смс раздражает, хотя занимает всего несколько секунд? Казалось бы, OTP-поле — простой элемент интерфейса, но именно на этом этапе пользователи часто сталкиваются с мелкими, на первый взгляд, проблемами: не срабатывает автоподстановка, неудобно вставляется код, теряется фокус, приходится заново вводить символы после ошибки. Каждая из этих деталей сама по себе кажется незначительной, но вместе они замедляют авторизацию, увеличивают количество ошибок и ухудшают пользовательский опыт.

Меня зовут Антонина, я дизайнер интерфейсов ЮMoney. Мы изучили десятки исследований — от Baymard Institute до Google web.dev. Единого документа с лучшими практиками не нашлось: источники противоречили друг другу или оказывались слишком общими.

Тогда мы провели собственное исследование: сопоставили авторитетные материалы, разобрали реальные кейсы и сформулировали практические рекомендации. В этой статье разберём самые распространённые проблемы проектирования OTP-полей — от базовых до менее очевидных, — объясним, почему те или иные решения работают и к чему приводят ошибки. А в конце соберём все рекомендации в удобный чек-лист, который поможет быстро проверить ваше решение.

Этот подход плзволяет избавиться от таких проблем, как: неактуальность макетов для разработки, долгий поиск макетов и задач в фигме, протухание информации в макетах, увеличение memory usage и долгая загрузка файлов.

Раньше для согласования интерфейса я собирал макет в Figma, описывал каждое поле, отдавал его дизайнеру, а потом отдельно объяснял логику фронтенд-разработчику.

В 2026 году тот же путь можно пройти быстрее: передать ИИ требования и за несколько итераций получить кликабельный прототип на HTML, CSS и JavaScript — с формами, модальными окнами, валидацией и тестовыми сценариями.

В статье рассказываю, где такой подход действительно помогает системному аналитику, когда он превращается в работу ради работы и почему прототип все равно нельзя считать готовой реализацией.