Golden Screen: один эталонный экран который защищает дизайн от деградации в AI-генерации

Откройте любой проект, где дизайн делается с помощью AI хотя бы пару месяцев. Сравните экран из первой недели и экран из этой. Скорее всего, увидите дрейф: отступы поплыли, радиусы стали чуть другими, серый превратился в три разных серых, кнопка получила тень которой не было, а заголовки незаметно сменили вес с 600 на 500.

Никто этого специально не делал. Просто каждый промпт чуть-чуть тянет систему в сторону. AI генерирует «похоже», а не «точно так же». И через сто итераций «похоже» превращается в «другой продукт».

Golden Screen — это техника, которая ломает этот дрейф. Один экран, который вы заранее объявили эталоном и от которого считается всё остальное. Не Figma-библиотека, не дизайн-токены, не Storybook (всё это тоже нужно, но работает иначе). Именно один экран — собранный, выверенный, замороженный — на который AI смотрит каждый раз, когда генерирует новое.

## Почему дизайн-системы не спасают от AI-дрейфа

Дизайн-система — это правила. AI неплохо следует правилам, но плохо чувствует контекст их применения. Он знает что есть токен spacing-md = 16, но не знает что в карточке товара между ценой и кнопкой исторически используется spacing-lg, а не md. Формально оба варианта валидны. По факту — один соответствует продукту, второй нет.

### Что именно ломается без эталона

• Микро-отступы внутри компонентов (8 vs 12, 12 vs 16)
• Иерархия типографики, когда есть три «почти заголовка»
• Радиусы у вложенных контейнеров (карточка 12, кнопка внутри 8 или 6?)
• Состояния: hover, disabled, loading — AI часто додумывает их «как обычно»
• Плотность интерфейса в целом — она почти всегда уезжает в сторону «воздушнее»

Дизайн-система описывает части. Golden Screen описывает как эти части собраны вместе в живой продукт.

## Что такое Golden Screen на практике

Это один экран продукта, выбранный как эталон визуального и структурного качества. Он содержит максимум типичных паттернов: навигацию, заголовки, основной контент, второстепенный контент, действия, состояния. И он зафиксирован — в Figma как frozen frame, в репозитории как референсный скриншот, в промптах как прикладываемое изображение.

Когда AI генерирует новый экран, он не работает «по описанию системы». Он работает «в стиле этого экрана». Разница огромная.

### Признаки хорошего Golden Screen

• Реальный экран продукта, а не выдуманная витрина
• Содержит 60-80% типичных компонентов, которые встретятся в других экранах
• Включает крайние случаи: длинный текст, пустое состояние, ошибку
• Имеет и десктоп, и мобильную версию (или хотя бы две ключевые ширины)
• Зафиксирован версией: Golden v1, v2 — без неотслеживаемых правок

### Анти-паттерны при выборе эталона

• Берут самый красивый маркетинговый лендинг. Он не отражает продуктовую плотность.
• Берут экран который «вот-вот переделаем». Через месяц эталон устаревает.
• Берут пустой шаблонный экран без данных. AI не видит как ведёт себя реальный контент.
• Делают эталоном Figma-страницу со 20 фреймами. Эталон должен помещаться в один взгляд.

## Как Golden Screen меняет работу с AI

Без эталона промпт звучит как «сделай экран профиля по нашему дизайн-гайду». AI собирает что-то правдоподобное, и каждый раз чуть по-разному.

С эталоном промпт звучит как «сделай экран профиля в стилистике вот этого экрана: плотность, ритм, типографика, состояния — отсюда». AI получает плотный визуальный якорь, а не текстовую интерпретацию правил.

### Сценарий: новый экран в существующем флоу

1. Берём Golden Screen ближайшего по смыслу раздела
2. Прикладываем к промпту как изображение
3. В тексте описываем только отличия: какие данные, какие действия, какие состояния
4. Сгенерированный результат сравниваем визуальным diff'ом с эталоном
5. Если плотность или ритм уехали — возвращаемся к шагу 2, а не правим вручную

### Вопросы для ревью сгенерированного экрана

• Совпадает ли вертикальный ритм с эталоном (расстояния между блоками)?
• Совпадает ли иерархия: главное действие выглядит так же главно?
• Не появились ли новые визуальные приёмы, которых нет на эталоне?
• Сохранилась ли плотность или экран стал «воздушнее/плотнее»?
• Состояния (loading, empty, error) соответствуют тому, как они сделаны на Golden?

Если хотя бы на два вопроса ответ «нет» — это не правка вручную, это сигнал перегенерировать с уточнением промпта.

Golden Screen не отменяет дизайн-систему. Он делает её исполняемой для AI: вместо абстрактных правил даёт конкретный эталон, от которого считается всё остальное.

## Как встроить Golden Screen в реальный рабочий процесс

Эталон, который лежит на отдельной странице Figma и о котором помнит только автор — это не Golden Screen, это памятник. Чтобы он работал, его нужно встроить в три точки: генерацию, ревью и обновление. Если выпадает хотя бы одна — система деградирует за пару спринтов.

### Где физически живёт эталон

• В Figma — отдельный файл Golden / v3, защищённый от правок, с явной датой и версией в названии
• В репозитории — PNG/WebP в /design/golden/, чтобы его можно было приложить к промпту через MCP или вручную
• В описании компонентной библиотеки — ссылкой, а не копией (копии всегда расходятся)
• В шаблоне промпта для AI — как обязательное вложение, а не «по желанию»

Версия меняется не когда дизайнеру скучно, а когда продукт реально сдвинулся: новая сетка, новая типографика, новая логика плотности. Между версиями — заморозка.

## Диагностика: как понять что эталон перестал работать

Golden Screen разрушается тихо. Никто не приходит и не говорит «всё, он мёртв». Просто на ревью всё чаще звучит «ну вроде ок, но как-то не наше».

### Признаки что эталон устарел

• Сгенерированные экраны формально совпадают с эталоном, но в продукте смотрятся чужеродно
• Дизайнеры начинают «дорабатывать руками» каждый AI-результат на одни и те же 10-15%
• В команде спорят какой из двух экранов считать эталонным
• Эталон не содержит паттернов, которые появились в продукте за последние месяцы (новые типы карточек, табы, фильтры)
• Мобильную версию эталона никто не открывал с момента создания

Если узнали себя в двух пунктах — пора версию v+1, а не латать старую.

### Признаки что эталон выбран неправильно изначально

• На нём почти нет данных — только заголовки и плейсхолдеры
• Это самый новый экран, который ещё не прошёл проверку реальным использованием
• Это экран фичи, которой пользуется 5% аудитории
• На нём нет ни одного состояния кроме «всё хорошо»

## Типичные ошибки при работе с Golden Screen

### Эталон как украшение, а не как инструмент

Команда выбрала эталон, повесила на стену в Figma, и продолжила работать как раньше. AI-промпты пишутся без вложения, ревью идёт «на глаз». Через месяц никто не помнит зачем это было.

Лечится одним правилом: промпт без приложенного эталона не уходит в работу. Это видно в шаблоне, это видно в PR с дизайн-ассетами.

### Слишком много эталонов

«У нас Golden для онбординга, Golden для настроек, Golden для дашборда, Golden для пустых состояний…» В итоге их семь, и они начинают противоречить друг другу. Дизайнер не понимает на какой смотреть, AI получает миксованные сигналы.

Здоровая норма — один основной Golden плюс максимум один-два специализированных (например, отдельный для плотных таблиц, если они радикально отличаются по ритму).

### Эталон правят без версии

Кто-то «чуть-чуть подкрасил» кнопку на эталоне в четверг. В пятницу другой дизайнер генерирует экран и получает результат, который не совпадает ни с прод-кодом, ни с памятью команды. Эталон должен быть либо заморожен, либо явно перевыпущен новой версией с changelog'ом из 3-5 строк.

### Эталон без edge-кейсов

На Golden всё красиво: короткие имена, аккуратные суммы, заполненный аватар. AI запоминает именно это и в новых экранах тоже рисует идеальный мир. Реальные длинные строки, переносы, пустые состояния — ломаются.

## Как применять эталон в макете и продукте

### При проектировании нового экрана

1. Открыть Golden рядом со стартовым фреймом
2. Скопировать сетку и базовые отступы напрямую, а не «на глаз»
3. Сначала собрать структуру из тех же блоков, что и на эталоне, потом адаптировать под задачу
4. Прогнать через те же состояния (loading, empty, error) — даже если по ТЗ они «не нужны сейчас»

### При генерации через AI

1. Приложить Golden как изображение
2. В промпте указать только разницу: данные, действия, контекст
3. Не описывать словами то, что уже видно на эталоне (плотность, ритм, типографику)
4. Полученный результат класть рядом с Golden, а не оценивать в одиночку

### При ревью

Короткий чеклист на 30 секунд:

• Сетка и контейнеры совпадают с эталоном
• Вертикальный ритм между блоками — тот же
• Иерархия действий читается так же, как на Golden
• Новых визуальных приёмов не появилось
• Состояния отрисованы по тем же правилам
• Мобильная версия проверена, а не «потом адаптируем»

Если хотя бы один пункт красный — это не «поправим в проде», это возврат на шаг генерации.

## Короткий итог

Golden Screen не работает как артефакт. Он работает как часть процесса: приложен к промпту, открыт рядом с макетом, виден на ревью, перевыпущен по версии. Уберите любую из этих опор — и через месяц у вас снова дизайн, который AI собрал «правдоподобно», но не «по-вашему».

## Продвинутые сценарии: когда один Golden становится тесным

В какой-то момент в крупном продукте одного эталона перестаёт хватать. Не потому что подход сломался, а потому что в продукте сосуществуют принципиально разные типы поверхностей: маркетинговый лендинг, плотная админка, мобильное приложение, дашборд аналитика. Пытаться втиснуть их в один Golden — это как сделать одну сетку для постера и для Excel.

Хороший признак что пора расширяться: на ревью регулярно звучит «ну тут же другой контекст, эталон не очень подходит». Если это слышно от двух дизайнеров на разных задачах — это не отговорка, это сигнал.

### Семейство Golden Screens

Здоровая конфигурация выглядит примерно так:

• Один основной Golden — самая частая поверхность продукта
• Один эталон для плотных данных (таблицы, аналитика)
• Один эталон для мобильного, если мобайл живёт своей жизнью
• Один эталон для маркетинговых страниц, если они есть

Больше четырёх — почти всегда перебор. Каждый дополнительный Golden должен отвечать на вопрос: «какие решения я принимаю иначе, глядя именно на него?». Если ответа нет — это не отдельный эталон, это вариация основного.

### Между Golden Screen и дизайн-системой

Часто звучит вопрос: зачем эталон, если есть библиотека компонентов? Дизайн-система отвечает на «какие кирпичи». Golden отвечает на «как из них сложен дом». Из одних и тех же компонентов можно собрать аккуратный экран и визуальный мусор — система это не ловит, эталон ловит.

Поэтому Golden живёт рядом с библиотекой, а не вместо неё. В практике это два разных файла: компоненты — отдельно, эталоны — отдельно, со ссылками друг на друга.

## AI-контекст: как эталон удерживает генерацию

### Что именно AI считывает с Golden

Модель не «понимает» дизайн так же как дизайнер, но она хорошо ловит ритм, плотность, иерархию и общий характер. Поэтому эталон работает там, где словами объяснить тяжело: «нужна вот такая спокойная плотность», «акценты вот такого веса», «воздух распределён вот так».

Слова при этом всё ещё нужны — но не для описания внешнего вида, а для описания задачи: какие данные, какие действия, какой сценарий. Внешний вид считывается с картинки.

### Анти-паттерны промптов с эталоном

• Приложили Golden и при этом текстом описывают цвета, отступы, шрифты — модель получает два источника правды и выбирает их вперемешку
• Приложили сразу три эталона «для контекста» — генерация усредняется и теряет характер
• Приложили эталон в низком разрешении — теряются тонкие детали, остаётся только общая композиция
• Используют эталон одного типа экрана, чтобы сгенерировать радикально другой (по Golden дашборда просят настройки) — лучше взять близкий по жанру или собрать руками

### Что делать когда AI «почти попал»

На практике это самый частый случай: результат похож, но что-то не так. Здесь полезно не докручивать промпт, а наложить результат поверх Golden в полупрозрачности. Сразу видно: где-то уехал ритм, где-то акцент стал тяжелее, где-то поплыла сетка. Это в разы быстрее, чем словами описывать «сделай поспокойнее».

## Как объяснять Golden Screen команде

Подход легко воспринимается дизайнерами и труднее — менеджерами и инженерами. Им важно не «почему это красиво», а «почему это экономит время и снижает риск».

### Аргументы для продакта

• Меньше расхождений между макетом и продом — меньше переделок в спринте
• AI-генерация перестаёт быть лотереей, прогноз по срокам становится точнее
• Новые дизайнеры быстрее выходят на нужное качество
• Решения на ревью принимаются по эталону, а не по вкусу — меньше затяжных дискуссий

### Аргументы для разработки

• Один источник правды по плотности и ритму — меньше «а как тут должно быть на самом деле»
• Состояния (loading, empty, error) описаны на эталоне — не приходится допридумывать
• Поведение на узких экранах задано — меньше переписки в PR

### Вопросы для ревью эталона раз в квартал

• Совпадает ли Golden с тем, что сейчас в продакшне на этом экране?
• Появились ли в продукте паттерны, которых нет на эталоне?
• Открывал ли кто-нибудь мобильную версию за последний месяц?
• Все ли состояния всё ещё актуальны?
• Есть ли поверхности, где эталон явно не помогает — может, нужен второй?

Если на два и более вопроса ответ «нет» или «не уверен» — назначайте перевыпуск. Лучше регулярная маленькая итерация, чем героический пересбор раз в год.

## Короткий итог сегмента

Эталон масштабируется не количеством, а ролью в процессе. Один основной Golden плюс редкие специализированные, чёткий протокол работы с AI, понятные аргументы для команды — и подход держится годами, не превращаясь ни в музей, ни в свалку.

## Полный чеклист: Golden Screen от создания до жизни в команде

Этот чеклист собирает практику в один список. По нему удобно проверить, действительно ли эталон работает, или существует только в Figma-файле, в который никто не заходит.

### Перед тем как делать эталон

• Выбран самый репрезентативный экран продукта, а не самый красивый
• Понятно, какие сценарии этот экран закрывает
• Согласовано с продактом и лидом разработки, что это будет точкой отсчёта
• Решено, где будет жить файл и кто его владелец
• Зафиксировано, как часто эталон пересматривается

### Во время сборки

• Экран собран из реальных компонентов библиотеки, без локальных переопределений
• Контент не «лорем ипсум», а правдоподобные данные нужной длины
• Показаны все ключевые состояния: пустое, загрузка, ошибка, успех
• Есть мобильная версия, не как мысль вдогонку
• Подписаны принципы: что здесь главное, что вторично, какой ритм
• Указано, чего на эталоне сознательно нет и почему

### Когда эталон уже живёт

• Ссылка на Golden есть в шаблоне задачи на дизайн
• Ссылка на Golden есть в инструкции по AI-генерации
• Новый дизайнер получает эталон в первый день, а не на третьей неделе
• На ревью звучит фраза «сравните с эталоном», а не «мне кажется»
• Раз в квартал кто-то ответственно открывает Golden и сверяет с продом

## Анти-паттерны, которые убивают подход

Большинство провалов с Golden Screen — не про дизайн, а про процесс. Ниже самые частые.

### Эталон как музейный экспонат

Файл собрали, презентовали, поставили на полку. Через полгода продукт ушёл вперёд, а Golden показывает интерфейс, которого уже нет. Лекарство — назначить владельца и календарный пересмотр, иначе эталон умирает тихо.

### Эталон как требование красоты

Дизайнер начинает подгонять каждый новый экран под Golden визуально, даже когда сценарий другой. Получается одинаковость вместо консистентности. Эталон задаёт характер и плотность, а не запрещает варьировать композицию под задачу.

### Эталон, в который добавили всё

Чтобы «было понятнее», на одном экране показали и таблицу, и карточки, и фильтры, и пустое состояние, и онбординг. Читать невозможно, AI считывает кашу. Лучше один экран с одним чётким посылом плюс отдельные миниатюры состояний.

### Эталон вместо обсуждения

Команда перестаёт спорить о решениях и просто говорит «делай как в Golden». Подход начинает тормозить продукт там, где нужны новые паттерны. Эталон — это база для разговора, а не способ его закрыть.

### Эталон, который знают только дизайнеры

Если разработка и продакт не в курсе, что есть Golden и зачем он, на ревью PR начинаются те же дискуссии, что и раньше. Подход работает, только когда о нём знают все три стороны.

## Вопросы для финального ревью подхода

Раз в полгода полезно сесть и честно ответить:

• Кто за последний месяц реально открывал Golden Screen и зачем?
• Сколько задач на дизайн ссылались на эталон в постановке?
• Сколько AI-генераций шло с приложенным Golden, а сколько без?
• Где эталон помог поймать расхождение до прода?
• Где, наоборот, эталон проигнорировали — и почему?
• Какие новые поверхности появились, для которых эталона нет?

Если ответы расплывчатые — подход существует на бумаге. Если конкретные — он живёт.

## Практический итог

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

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

Главное — не дать эталону застыть. Продукт меняется, Golden обновляется, команда сверяется. Пока этот цикл крутится, дизайн держит характер, сколько бы новых экранов и сколько бы новых инструментов вокруг ни появлялось.