Просьба «сделай красиво» не объясняет, что должно стать заметнее, какой текст нужно прочитать первым и какое действие ожидается от посетителя. Я начинаю с этих решений. Шрифты, цвета и анимация выбираются после них.
В учебной форме из главы 9 заголовок объясняет назначение страницы, подписи остаются видимыми, а после отправки появляется результат. Эти элементы можно проверить. Наличие модного градиента само по себе не даёт критерия приёмки.
Покажите образец и объясните, что нравится
Референс означает образец, на который вы хотите ориентироваться. Выберите несколько экранов и подпишите, что нравится: плотность таблицы, расположение навигации, размер заголовка, способ показа ошибки. Если референсы конфликтуют, выберите одно направление до реализации.
Не поручайте агенту копировать чужую страницу целиком. Выберите нужные принципы и используйте собственные тексты, изображения и названия. Образец не даёт права на чужие материалы.
Затем запишите правила в DESIGN.md. Это обычный документ проекта. Попросите Codex прочитать его перед работой над интерфейсом. В Awesome DESIGN.md собраны примеры таких документов; репозиторий распространяется по MIT. Его лицензия не передаёт права на визуальную идентичность брендов, из которых взяты наблюдения.
Промпт: Подготовить правила дизайна
Запишите конкретные условия: основной текст читается без увеличения, длинное имя не ломает карточку, предупреждение не передаётся только цветом, движение можно уменьшить. Не заполняйте файл десятками запретов, которые никак не относятся к вашему продукту.
Проверить удобство до украшений
Для формы подпись должна быть связана с полем. В HTML один из способов: label с атрибутом for, совпадающим с id поля. Подсказка внутри пустого поля, или placeholder, исчезает при вводе. Поэтому постоянная подпись всё равно нужна. Эти правила описаны в руководстве W3C по полям форм.
WCAG 2.2 AA содержит правила доступности сайтов. Одно из них касается контраста: насколько хорошо текст отличается от фона. Для обычного текста нужен показатель не ниже 4.5:1, для крупного текста предусмотрен порог 3:1. Сравнивать следует исходное вычисленное значение, без округления вверх. Прохождение этого критерия не означает прохождение всего стандарта. W3C: контраст текста.
Для учебной формы отдельно рассчитан контраст трёх пар цветов из её CSS: белый текст кнопки на #0071e3 даёт 4.6967:1, основной текст #1d1d1f на #f5f5f7 даёт 15.4568:1, текст ошибки #a01414 на белом даёт 8.0618:1. Все три пары проходят порог обычного текста. Это расчёт указанных цветов, а не измерение всех состояний страницы и не полный аудит доступности.
Проверьте экран на коротких и длинных данных. Пройдите форму клавишами Tab и Shift+Tab, посмотрите, видна ли рамка или другая отметка выбранного поля, можно ли отправить её с клавиатуры и прочитать сообщение об ошибке. Настоящий пользователь может пользоваться увеличением текста или экранным диктором; одного мобильного скриншота для этого недостаточно.
Промпт: Проверить интерфейс по действиям
Анимацию добавляйте там, где она объясняет изменение: раскрытие раздела, появление результата, переход между состояниями. Длинное движение перед отправкой заявки увеличивает время ожидания и требует отдельного решения.
Impeccable: точный пакет вместо неизвестного архива
На дату проверки пакет impeccable в npm, каталоге программ для Node.js, имеет версию 4.1.0, требует Node.js не ниже 22.18.0 и указывает Apache-2.0. Репозиторий совпадает с pbakaus/impeccable. Здесь проверены сведения о пакете. Сама установка ещё не выполнена. Пакет npm, официальный репозиторий.
Документация предлагает установщик npx impeccable install; чтобы повторять опыт с той же версией, указываем её в команде: npx impeccable@4.1.0 install. Установщик предлагает выбрать программу, с которой вы работаете, и место установки: в проект или для всех проектов. В Codex документирован вызов $impeccable. Команду /plugin marketplace add из инструкции Claude не переносим в Codex. Инструкция Impeccable.
Это команды для подготовленной среды с Node.js и npm. Вход, дополнительные компоненты и настройка клиента могут потребовать ручного действия. Не обещаю установку одним нажатием на любой машине.
Промпт: Подготовить и установить Impeccable в учебном проекте
Для применения после обнаружения навыка можно попросить: «Используй Impeccable, проверь экран заявки по нашему DESIGN.md и сначала покажи найденные проблемы». Текст этого запроса также ещё не испытан в отдельной сессии.
Открытая лицензия пакета не покрывает платные вызовы моделей и генерацию изображений. Режим live требует отдельной проверки. README, файл с описанием проекта, сообщает: при автоматических правках запускается программа проверки из вашего проекта. Не запускайте такой режим в незнакомом проекте без чтения скрипта. Для уже опубликованной страницы документация предлагает отдельную проверку, а не перенос локального помощника на публичный сайт.
Источник идеи выбора DESIGN.md и Impeccable: byivansergeev, 8 октября 2026. Количество правил детектора в рекламе не используется как показатель качества. Сравнивайте один экран до и после правки по одинаковым критериям.
Figma, Canva, анимация и 3D
Из Figma передавайте нужный экран и пояснение, что должно работать. Прежде чем писать код, проверьте доступ к выбранному файлу, шрифты и изображения. Наличие макета не подтверждает работу формы. Официальное подключение Figma MCP имеет собственную настройку. Figma MCP.
Материалы Canva можно использовать в доступном формате или через подключение, если оно предоставляет нужную операцию. Проверьте условия выбранных изображений и шрифтов. Не обещайте редактирование любого файла только по наличию названия сервиса.
Liquid Glass означает визуальный подход с прозрачностью и эффектами стекла. Он не обязателен для хорошего интерфейса. Если на таком фоне плохо читается текст, сначала решите читаемость. Для 3D и анимации проверьте загрузку на слабом устройстве и отсутствие помех основному действию.
Промпт: Перенести собственный макет в проект
Самостоятельные инструкции к главе
Промпты к материалу
Задача интерфейса: [кто и что должен сделать].
ПромптыПроверь текущий интерфейс по DESIGN.md и основному пользовательскому пути.
ПромптыУстанови Impeccable только для текущего учебного проекта Codex.
ПромптыМакет: [доступный файл или ссылка]. Экран: [конкретный экран].