Чтобы улучшить дизайн сайта с помощью Codex, выберите один экран и объясните, какое действие на нём должно стать удобнее. Затем сравните результат с исходной версией. Фраза «сделай как Apple» задаёт настроение, но не объясняет, что исправлять.
Проблема может быть конкретной: мелкая подпись, незаметная кнопка, лишний блок или ошибка без понятного следующего действия.
Как составить задание на дизайн
Сохраните снимок экрана и укажите главное действие посетителя. Используйте Промпт: Подготовить правила дизайна, чтобы записать правила в DESIGN.md: порядок внимания, цвета, размеры текста, состояния и ограничения.
Название файла не заменяет хорошее задание. Проверьте, что правила помогают оценить результат. Например, человек должен видеть главную кнопку, понимать текст ошибки и читать подписи на мобильном экране.
Если нужен дизайн-навык, начните с одного инструмента под задачу. Для Impeccable в базе есть отдельная карточка с источником и условиями. Способ установки проверяйте по текущей инструкции автора, а не по старому скриншоту.
Как сравнить варианты
Оставьте одинаковый текст и состав блоков. Попросите несколько направлений через Промпт: Сравнить направления дизайна, затем дорабатывайте выбранное. Иначе красивый новый текст может скрыть неудобную структуру.
Меняйте выбранный экран по сохранённым правилам. Не распространяйте правки на весь проект без необходимости.
Как принять результат
Используйте Промпт: Проверить интерфейс по действиям. Проверьте главное действие, ошибку, узкий экран и клавиатуру. Пройдите реальный сценарий, а не только посмотрите на первый экран.
Это снимок учебной формы, не результат применения Impeccable. Сравните свой экран: подписи не обрезаны, поля идут в одну колонку, кнопка не перекрывает сообщение. На телефоне отдельно проверьте прокрутку и экранную клавиатуру.
Если страница стала эффектнее, но действие труднее найти, пересмотрите решение. Если каждый блок выглядит одинаково, выделите главное. Сокращайте длинные подписи, сохраняя условия и смысл.
Как проверить анимации на готовом сайте
Проверяйте не только новый макет, но и страницу, которой уже пользуются. Откройте меню и попробуйте выбрать пункт, пока оно появляется. Закройте его до окончания анимации, затем снова откройте. Интерфейс не должен игнорировать действие или требовать второго нажатия.
Нажмите главную кнопку мышью, коснитесь её на телефоне и активируйте клавиатурой. Убедитесь, что видна реакция на нажатие, действие выполняется один раз, а движение элементов не уводит кнопку из-под пальца. Не путайте визуальную реакцию с выполнением действия: отправку формы нельзя запускать только потому, что человек начал нажимать кнопку.
Запишите найденные проблемы в порядке влияния: сначала невозможность выполнить действие, затем задержки и непонятную обратную связь, после этого декоративные детали. Исправьте одну проблему и повторите тот же сценарий.
Рекомендации Apple об анимации советуют не заставлять человека ждать окончания движения. Это полезный ориентир, но правила для приложений Apple не являются готовой проверкой любого сайта. Идею аудита уже готовой страницы дополняет короткий разбор Nick Puru. Упомянутый там сторонний навык здесь не установлен и не проверен.
Для возврата нужна сохранённая версия проекта. Удаление навыка не возвращает прежний дизайн автоматически. Если используете Impeccable, сверяйте установку с официальной инструкцией. Снимок учебной формы выше не показывает результат его работы.
Промпт для первого шага
Задача интерфейса: [кто и что должен сделать].
Референсы: [ссылки или приложенные изображения с пояснениями].
Материалы бренда: [собственные цвета, шрифты, логотип и тексты].
Прочитай текущий проект и существующие правила дизайна.
Подготовь DESIGN.md: что выделить первым, шрифты, цвета, отступы,
компоненты, размеры экранов, состояния формы и правила анимации.
Для неоднозначных референсов предложи одно согласованное направление.
Не придумывай отзывы и результаты бизнеса. Не копируй чужие материалы.
Если DESIGN.md существует, сохрани его полезные правила.
Пока интерфейс не меняй. Покажи решения, которые влияют на результат.
Промпты к материалу
Задача интерфейса: [кто и что должен сделать].
ПромптыПроверь текущий интерфейс по DESIGN.md и основному пользовательскому пути.
ПромптыУстанови Impeccable только для текущего учебного проекта Codex.