ui-design

UI Design — это skill для создания и переработки production-ready фронтенд-интерфейсов непосредственно в коде. Его центральная идея — сначала определить выразительное визуальное направление, а затем последовательно реализовать его в проекте, чтобы страница не выглядела случайным набором стандартных блоков. В описании skill по умолчанию выбран Next.js, если пользователь не задал другой фреймворк. Подход подходит для новой страницы, отдельного экрана, пользовательского сценария, секции или компонента, когда важны не только работающий интерфейс, но и цельность композиции, адаптивность и качество состояний. Перед реализацией нужно зафиксировать минимальный brief: что именно должно быть создано, на каких устройствах это будет работать, какие фреймворк и ограничения действуют, какие состояния и взаимодействия обязательны, а также какие есть требования к бренду, цвету, типографике и тону текста. После этого skill предлагает определить направление дизайна до написания кода. В него входят цель и аудитория, тон и эстетика, стратегия раскладки и иерархии, типографическая и цветовая система, стратегия движения и один запоминающийся отличительный элемент. Такая последовательность помогает принимать решения по интерфейсу целиком, а не исправлять несвязанные визуальные детали после верстки. Для вдохновения используется узкий, а не массовый поиск референсов: 21st.dev допускается только для конкретного компонента, которому действительно нужен внешний пример, с последующим созданием собственного решения по найденным паттернам. Skill прямо запрещает широкие проходы по вдохновению и клонирование. Если требуемые возможности захвата скриншотов или веб-поиска недоступны, этот этап нельзя имитировать: workflow должен остановиться и сообщить о недостающей возможности. Это ограничение защищает от выдуманных ссылок на референсы и от копирования интерфейса без понимания его задачи. На этапе реализации рекомендуется сначала переиспользовать существующие компоненты и соглашения проекта, поддерживать responsive-поведение и доступные состояния, а также избегать типовой структуры, отступов и стилизации, которые создают безликий AI-визуальный шаблон. Важна согласованность с выбранным направлением, а не добавление эффекта ради эффекта. Для Next.js есть отдельный security gate: до работы нужно проверить установленную версию и не продолжать на версиях, затронутых CVE-2025-55182; в источнике перечислены безопасные patch-уровни для соответствующих веток. Это не заменяет актуальную проверку зависимостей проекта и не является разрешением игнорировать другие уязвимости. Финальная проверка должна включать релевантные тесты, lint или build для изменённых файлов, проверку адаптивного поведения и критических состояний взаимодействия, а также сверку реализации с объявленным направлением. В результате полезно явно назвать выбранное направление и его отличительный элемент, отметить компоненты, для которых использовались точечные референсы, указать фреймворк, перечислить изменённые файлы и описать фактически выполненные проверки. Skill предназначен для реализации интерфейса в проекте, а не для отдельного декоративного mockup: если нужен только дизайн без кода, это должно быть явно задано пользователем.