Frontend Design

Frontend Design — это редакционный навык для создания выразительного и осмысленного визуального направления интерфейса. Его задача — помочь команде уйти от безличного шаблонного AI-дизайна и принимать конкретные решения о композиции, типографике, цвете, плотности и движении. Он применим как к новой странице, так и к редизайну существующего продукта. Источник предлагает относиться к дизайну как к работе небольшой студии с собственной точкой зрения: у экрана должна быть узнаваемая причина выглядеть именно так, а не набор случайно выбранных эффектов. Первый шаг — заземлить решение в предмете. Если brief не объясняет, что за продукт перед нами, нужно самостоятельно назвать конкретный предмет, его аудиторию и единственную главную задачу страницы. Дальше визуальный язык строится из реального мира этого предмета: его материалов, инструментов, артефактов и профессиональной лексики. Такой подход не даёт подменить содержание универсальным hero-блоком. Hero должен формулировать тезис страницы и открывать наиболее характерную для продукта вещь: это может быть текстовый тезис, изображение, интерактивная демонстрация или другой момент, но выбранный формат должен служить содержанию. Типографика в этом workflow — не нейтральный контейнер. Для display и body ролей предлагается осознанно подобрать разные, но совместимые лица, задать ясную шкалу размеров, веса и ширины и использовать типографический характер как часть идентичности. Структура тоже должна кодировать факты: номера уместны там, где есть настоящая последовательность, а разделители, подписи и метки не должны быть декоративными пустышками. Анимация оправдана только тогда, когда она помогает предмету: один хорошо поставленный момент сильнее россыпи hover-эффектов. Для минимального направления нужна точность отступов и деталей; для максимального — соответствующая сложность исполнения, а не случайное нагромождение. Перед кодом skill предлагает двухпроходный процесс. Сначала формируется короткий дизайн-план: палитра из четырёх–шести названных hex-цветов, типографические роли, концепция layout с простым wireframe и один signature-элемент, по которому страницу запомнят. Затем план проверяется против brief. Если решение получилось таким же, как для любого похожего запроса, его нужно пересмотреть и заменить свободное место более конкретным выбором. Только после этой проверки план переводится в код. При написании CSS важно следить за специфичностью селекторов: общие классы и element-based правила не должны незаметно отменять друг друга. Текст рассматривается как материал интерфейса, а не как декор. Он должен помогать понять действие и навигацию, называться языком пользователя и не описывать внутреннюю реализацию вместо управляемого результата. Рекомендуется активный залог, одинаковое название действия в кнопке и последующем сообщении, sentence case и отсутствие filler-фраз. Ошибки должны объяснять, что произошло и как исправить проблему; пустое состояние должно направлять к следующему действию. Метка, пример и CTA выполняют по одной функции и не должны тихо подменять друг друга. При подготовке копии учитываются hook, структура, voice, substance и closing. Вступление быстро обещает пользу или формулирует узнаваемую проблему. Структура ведёт читателя и не смешивает несовместимые схемы. Voice остаётся единообразным по словарю, тону и длине предложений; чтение вслух помогает заметить искусственные формулировки. Substance требует конкретных деталей, примеров, честных компромиссов и собственной точки зрения вместо заполнения объёма общими словами. Closing отвечает на вопрос, открытый в начале, или предлагает следующее действие. Для редактуры сначала читают весь материал и сохраняют то, что уже работает, затем исправляют структуру, содержание и доказательность, а только после этого отдельные предложения. Финальная проверка включает последовательность заголовков, внутренние ссылки, alt-тексты изображений и согласованность title, meta description и slug. Качество исполнения должно включать responsive-поведение, видимый keyboard focus и уважение prefers-reduced-motion. Источник не обещает, что любой выбранный шрифт, цвет или эффект автоматически улучшит продукт: навык задаёт процесс выбора и критерии критики, а не подменяет знание аудитории, реальные тексты, доступность и проверку готового интерфейса. Его полезный результат — компактное, защищаемое визуальное решение, в котором каждый заметный элемент связан с предметом и задачей страницы.