Итоговый экзамен курса «Система дизайна ЮАИ»

В тесте девять глав, по три вопроса. Верный ответ — 2 балла, наполовину верный — 1, остальные — 0. Максимум 54.

Глава 1. Понимание основ

1.1. Что такое система дизайна ЮАИ относительно руководства по стилю и библиотеки шаблонов?

1. Руководство по стилю и библиотека шаблонов и есть вся система. Дальше достаточно копировать макеты страниц.2. Руководство по стилю и библиотека шаблонов — отправная точка, но не единственные части системы. Система ещё задаёт философию стиля и то, как мелкие части складываются во все уровни — от атома до биосферы.3. Система дизайна ЮАИ шире одного стиль-гида: это ещё и договор, как атомы собираются в молекулы, органы и целые носители. Но начинать всё равно удобнее с готовой главной страницы, а детали подобрать потом.4. Настоящая система дизайна — только код и токены. Философия стиля и биологическая лестница — обёртка для новичков, взрослый специалист сразу рисует организм и дробит его на части по необходимости.

1.2. Что происходит с молекулой, которую собрали в визуальном редакторе ЮАИ?

1. Молекула остаётся «как нарисовали». В код её разбирать не нужно: редактор уже и есть система дизайна.2. Молекулу можно оставить в редакторе, если макет красивый. В атомы разбирают только то, что пойдёт на сайт. Баннер и сертификат в атомы не переводят.3. Молекулу непременно разбирают на атомы — превращают в код по строению атомов. Без правил экспорта она не входит в систему ЮАИ.4. Молекулу разбирают в атомы, чтобы её можно было повторно собирать на разных уровнях. Редактор без экспорта в атомы даёт заготовку, а не часть системы.

1.3. С чего по сути атомарного дизайна ЮАИ начинается разработка продукта?

1. С макета главной страницы. Атомы и молекулы подгоняют потом под уже утверждённый экран.2. С более мелких деталей — атомов, из которых поэтапно собирают молекулы, органеллы, органы и дальше. Главная — один из организмов, не начало системы.3. С атомов и повторно используемых частей, чтобы дизайн был цельным в любой биосфере. Макет страницы при этом можно считать равным атому: это тоже «маленькая деталь».4. С организма. В нормальной инженерии всегда идут сверху вниз: сначала целый продукт, потом декомпозиция. Атомарность «снизу вверх» — учебная схема, на живом проекте её переворачивают.

Глава 2. Терминология

2.1. Что верно про классы .bg0 и .c0 в светлой теме ЮАИ?

1. .c0 — тёмный текст. .bg0 — поверхность страницы и берёт --c10. Номер класса фона и номер токена цвета не совпадают: это грамматика, не ошибка.2. .bg0 и .c0 — один и тот же цвет, просто один для фона, другой для текста. Ноль всегда значит «самый тёмный».3. .c0 — тёмный текст, .bg0 — светлая поверхность. На тёмной теме оба просто инвертируются местами вместе с номерами классов: bg0 станет тёмным текстом.4. Ноль в имени класса всегда самый тёмный канал. Это стандарт шкал. Кто пишет иначе — путает новичков, в нормальной системе bg0 = c0 = почти чёрный.

2.2. Чем айдентика ЮАИ отличается от системы дизайна?

1. Ничем. Профессионалы не дробят бренд на полки: айдентика, система и брендбук — три имени одного файла.2. Айдентика — лицо: знак, характер, образцы. Система — как этим лицом пользоваться на любом носителе. Логотип — часть айдентики, не вся система.3. Айдентика отвечает «это мы?», система отвечает «как собрать?». На сайте достаточно системы, айдентика нужна только типографии.4. Айдентика — логотип и фирменные цвета сайта. Система — CSS-файл. Всё, что не сайт, в термины ЮАИ не входит.

2.3. Чем токен отличается от класса и что такое мутация?

1. Токен — имя роли (--1s, --c4). Класс — слово в HTML (.pad, .rounded). Мутация — величина в переменной меняется под экран, тему и носитель. Свой px и hex мутировать не умеют.2. Токен и класс — одно и то же: оба пишут в class="". Мутация — когда дизайнер чуть меняет макет «на глаз».3. Токен — CSS-переменная на экране. Класс её вызывает. Мутация — то же, что морфинг: любое изменение под носитель, в том числе новая палитра «под этот баннер».4. Токен существует только в CSS. На бумаге и на сцене токенов нет, там работают миллиметры и краска. Кто тащит --1s в печать — путает веб с жизнью.

Глава 3. Создание системы дизайна

3.1. Что в ЮАИ значит «полная автоматика»?

1. Автоматика — это когда нейросеть сама рисует светлую, тёмную и печатную версии. Систему для этого можно не учить.2. Автор собирает блок классами и органами системы. Тема, шаг --1s, сетка, острота .rounded, печать и базовая доступность подстраиваются сами. Выпал из классов — автоматика на блоке кончается.3. Система сама перекрашивает тему и считает шаг. Печать и доступность при этом всё равно готовят отдельной вёрсткой: автоматика касается только экрана.4. Автоматика значит, что кастомный CSS в редакторе больше не нужен никогда, даже на черновике. Кто открыл поле стилей — уже сломал устав.

3.2. Какой старт ломает создание системы ЮАИ?

1. Старт с атомов и устава. Это академическая задержка. Рынок требует сразу главный экран и охваты.2. Старт с макета главной. Если главная красивая, остальные носители потом «подтянут».3. Главная не должна быть хозяином системы — это верно. Но первый рабочий шаг всё равно «экран сайта», бумагу и бота описывают после релиза.4. Старт с пустой папки без границ поля: сначала нарисуем, потом решим, кто зритель и какой носитель.

3.3. Появилась новая памятка для родителей. Как её заводят в систему?

1. Открывают пустой файл и собирают «как получится», потом прикручивают классы, если останется время.2. Спрашивают: какой это орган, какие клетки уже есть, чего не хватает. Если роли нет на двух носителях — это ещё не токен, собирают из словаря. В редактор отдают фрагмент, не сайт целиком.3. Ищут готовый орган и собирают из словаря. Если чего-то не хватает, сразу заводят новый токен «под эту памятку», чтобы не тормозить.4. Настоящий продакшен не ходит по лестнице. Берут референс конкурента и перекрашивают в цвета ЮАИ — система подхватит.

Глава 4. Анализ существующего дизайна

4.1. Как смотрят натуру ЮАИ?

1. Ставят оценку «нравится / не нравится» и оставляют то, что набрало лайки в ленте.2. Спрашивают: какие атомы уже общие, где язык ломается, жива ли автоматика, что умеет только этот носитель, кто это собрал.3. Ищут общие атомы и поломки языка. Тепловые карты и A/B сайта при этом важнее сертификата и сцены: натуру снимают там, где есть аналитика.4. Анализ — это UX-исследование с респондентами. Пока нет интервью, смотреть баннер и форму бессмысленно: это не данные.

4.2. По какому признаку носитель выпал из системы?

1. У него другой формат: бумага не сайт, значит выпал автоматически.2. Чужой hex, свой радиус, другой знак, форма без post, текст спрятан в JS, второй акцент «с глаз». Тема и печать этот блок уже не ведут.3. Чужой CSS и свой hex — тревожный знак. Если блок при этом «почти в цветах ЮАИ», его можно оставить: расхождение косметическое.4. Выпал тот носитель, где меньше охватов. Система должна следовать за эффективным каналом, а не наоборот.

4.3. Что значит карта «уже атом / маскарад / не описан»?

1. Атом — общее и слушается темы. Маскарад — похоже, но другая кожа. Не описан — носителя нет в словаре органов.2. Атом — всё, что на сайте. Маскарад — всё печатное. Не описан — бот и сцена.3. Атом — слушается темы. Маскарад — похож, но выпал. «Не описан» можно не трогать: чего нет в гайде, того как будто нет в биосфере.4. Это канбан продакшена: атом — готово, маскарад — в работе, не описан — бэклог маркетинга. К дизайн-системе таблица отношения не имеет.

Глава 5. Создание языка дизайна

5.1. Как язык ЮАИ держит узнаваемость на разных носителях?

1. Полным пиксельным клоном: кнопка сайта, плашка листовки и команда бота должны совпасть до отступа.2. По роли, не по клону. «Главное действие» остаётся одной молекулой: на сайте кнопка, на бумаге плашка, в боте короткая команда.3. По роли. Значит, на листовке можно оставить роль действия и заменить знак ЮАИ на «более летний», если так теплее.4. Узнаваемость даёт единый слоган. Визуальный язык можно менять хоть каждый сезон — бренд держит текст, не роли.

5.2. Какая подпись кнопки записи в смену на языке ЮАИ?

1. «Осуществить бронирование премиум-пакета в соответствии с регламентом».2. «Забронировать смену».3. «Забронировать смену!!! Успей, мест почти нет!!!» — глагол верный, срочность усиливает характер навигатора.4. «Submit form #camp_booking». Техническое имя поля честнее маркетинга и лучше для интерфейса.

5.3. Что входит в грамматику контента ЮАИ?

1. Мысль в section, ширина в container, текст в p, код через hljs, форма из редактора форм, в обычном режиме без второго h1. Это условие автоматики, не вкус.2. Можно любой валидный HTML5. Грамматика ЮАИ — про цвет и знак, не про теги.3. Section, container и p — да. Второй h1 в статье можно, если он визуально красивее метаданных.4. Грамматика контента — это Tone of Voice. Теги пусть ставит нейросеть как удобнее: семантика важнее служебных правил CMS.

Глава 6. Определение токенов

6.1. Почему в контенте нельзя писать цвет hex и радиус в px?

1. Потому что так некрасиво. Hex и px можно, если точно попасть в макет соляризатора.2. Hex и px не мутируют: тема и --1s их не знают. Класс держит роль, токен считает величину.3. Hex нельзя, px иногда можно: радиус 16px почти равен --1_5s, система «поймёт».4. Можно и нужно: токены для темы, а в контенте профессионал фиксирует значения, чтобы ничего не поехало. Мутация — риск.

6.2. Как устроены скругление и рамка?

1. .rounded даёт радиус var(--1_5s), острота едет с темой и --1s. Рамку включают .br, цвет края — .br0–.br10, пишут вместе: br br4.2. Достаточно .br4: цвет рамки включает и саму рамку. .rounded можно заменить на border-radius: 16px — это то же число.3. .rounded и связка br + br4 верны. На кастомной теме rounded лучше отключить и поставить свой радиус, чтобы не спорить с макетом.4. Скругление и бордер — декоративные утилиты. В серьёзной системе их не выносят в классы, а пишут в компонентном CSS модуля.

6.3. Зачем ЮАИ Соляризатор цвета Лето ЮАИ?

1. Чтобы скопировать понравившийся hex в style="" блока. Так палитра лета точно попадёт в контент.2. Это базовый алгоритм подбора схемы темы. На выходе шкала --c0…--c10. В контент значения не копируют — в контенте живут классы ролей.3. Соляризатор кормит тему. Полученные hex можно один раз прописать в статье «для якоря», если тема ещё не обновилась.4. Соляризатор — игрушка для презентаций. Взрослая тема собирается в Figma и переносится хексами вручную: так контролируемее.

Глава 7. Основные компоненты

7.1. Зачем смысловой блок оборачивают в <section> ?

1. Чтобы было больше тегов. На SEO section не влияет, редактору всё равно.2. Редактор ЮАИ сортирует, дублирует и удаляет контент по секциям. Страница без section — полотно, которое нельзя собрать как том.3. Section нужна. Её ставят одну на всю статью: так редактор видит «единый блок» и меньше путается.4. В нормальном HTML5 достаточно article. Section — лишняя сущность ЮАИ. Article уже есть у страницы, внутри него живут голые div.

7.2. Как собирают слайдер ЮАИ?

1. Подключают Swiper или аналог. Это отраслевой стандарт, платформенный слайдер — упрощение для новичков.2. Разметка .slider → .slides → .slide, кнопки .moveleft и .moveright. Свой JS карусели не пишут. Без скрипта слайды видны и листаются прокруткой.3. Класс .slider верный. Кнопки без своего скрипта бесполезны, поэтому минимальный JS карусели в контент всё равно кладут.4. Слайдер прячут в пустой контейнер и рисуют его JS-ом после загрузки. Иначе вспыхнет несобранная лента — так делают все лендинги.

7.3. Как в ЮАИ появляется живая форма?

1. Нейросеть рисует красивые input, выдумывает data-xform-id и action. Главное — чтобы поля были.2. Форму собирают в редакторе форм: .xform, поля .xform-field, method="post". Без редактора ответы в ЮАИ не едут. Скрипт не заменяет отправку.3. Редактор форм — правильный путь. На черновике можно собрать те же поля руками и потом «подвязать id»: для теста этого хватает.4. Живая форма — это fetch на свой endpoint. Нативный post устарел. Кто оставляет action, не умеет в современный фронт.

Глава 8. Инструментарий

8.1. Нейросеть вернула полный HTML с <style> и вторым h1. Что это?

1. Нормальный черновик. Стили потом вычистят, h1 можно оставить, если заголовок красивый.2. Брак. Нужен фрагмент внутренности: без оболочки, без article, без лишнего h1, без своего CSS. Такой ответ не правят — перегенерируют по промпту ЮАИ.3. Это брак по CSS, но второй h1 допустим: поисковик любит явные заголовки в контенте.4. Чем полнее HTML, тем профессиональнее модель. Оболочка страницы показывает, что вайбкодер «владеет вёрсткой», не только классами.

8.2. Какая роль у JavaScript в контенте ЮАИ?

1. Без JS страница не должна показываться: так защищают контент от копирования.2. Прогрессивное улучшение. Без скрипта текст виден, ссылки живые, форма уходит post. JS добавляет жесты и кнопки слайдера, не прячет смысл.3. JS — улучшение. Форму при этом можно оставить только на fetch: без скрипта заявка не нужна, заявки и так с компьютеров.4. Современный интерфейс всегда hydrатится. База без JS — миф доступности, на практике все с включёнными скриптами.

8.3. Что входит в ящик инструментов ЮАИ кроме CSS-файла?

1. Только yuaidesignsystem.css. Остальное — вкусовщина редакторов.2. Редактор контента с секциями, редактор форм, шаблоны лендингов, шаблоны органов на других носителях, доступ и версия атомов, промпт для вайбкодинга.3. Редакторы и шаблоны — да. Промпт для нейросети в ящик не кладут: это внешний сервис, не инструмент системы.4. Настоящий ящик — Figma, Storybook и npm-пакет. Всё, чего нет в репозитории компонентов, системой не считается.

Глава 9. Управление проектом

9.1. Кто имеет право менять атом и токен?

1. Любой, кто успел раньше. Так система живая и не бюрократическая.2. Хранитель атомов. Сборщик собирает органы из словаря. Редактор наполняет текстом. Вайбкодер генерирует HTML по промпту и кожу не изобретает.3. Хранитель меняет токены. Вайбкодер может добавить «маленький» токен в контент, если релиз горит.4. Токены меняет тот, у кого выше должность или больше подписчиков. Роли гайда — этикет, не механизм.

9.2. Когда заводят новый токен?

1. Когда роль уже повторилась на двух носителях и словаря мало. Пока решения нет — собирают из того, что есть.2. Когда нейросеть не нашла подходящий класс. Новый токен спасает срок.3. Когда роль повторилась дважды — да. Если очень красиво на одном баннере, токен тоже можно завести «про запас».4. Токены не заводят. Настоящая система замораживает шкалу навсегда: развитие — это уже другая система с другим именем.

9.3. Как брендбук ЮАИ связан с печатью?

1. Нужна отдельная печатная редакция тома. Сайт и бумага всегда живут разными файлами.2. Том — те же главы подряд. Если страница собрана классами системы, печать выводит её сама. Отдельную печатную вёрстку системного контента не держат.3. Печать автоматическая. Значит, можно не думать о .noprint и ролях: принтер «как-нибудь съест» кнопки слайдера.4. Брендбук печатают из PDF, свёрстанного в InDesign. HTML-том для бумаги не предназначен, автоматика печати — метафора.