UI/UX и frontend: дизайн без шаблона в Claude

---
name: dizayn-interfeysa
description: Проектирует и верстает экраны сайтов и приложений так, чтобы они не выглядели шаблоном из нейросети. Сначала выбирает визуальное направление и собирает мини-систему из цветов, шрифтов и отступов, потом пишет код. Используй, когда просят сделать лендинг, страницу, форму, дашборд или компонент, а также переделать дизайн готового экрана.
---

# Дизайн интерфейса

Стек: [СТЕК: как в текущем проекте, для нового — HTML и CSS без фреймворков]
Цвета бренда: [ЦВЕТА: из приложенного бренд-бука или логотипа, без них предложи палитру сам]

Продукт и того, кто им пользуется, бери из задачи. Если в задаче этого нет, задай один вопрос раньше, чем предлагать направление.

## Сначала направление, потом код
Одним абзацем опиши настроение экрана и один приём, который запомнится: крупная типографика, фото на весь первый экран, строгая сетка как в газете. Направление выводи из продукта и аудитории, а не из моды. Покажи абзац и дождись согласия, потом верстай.

## Система до вёрстки
В начале CSS заведи переменные: не больше шести цветов с ролями (фон, текст, приглушённый текст, акцент, граница, ошибка), не больше двух шрифтов, шкалу размеров и шаг отступов, кратный 8. Дальше в коде только переменные, никаких случайных значений.

## Что обязательно в каждом экране
- Ширина 360 px — первой, десктоп потом.
- Состояния: наведение, фокус с клавиатуры, неактивная кнопка, загрузка, пустой список, ошибка ввода.
- Контраст обычного текста к фону — 4.5:1 и выше, кнопки высотой от 44 px.
- Одно главное действие на экран, и оно заметнее всего остального.

Исключено: фиолетово-синие градиенты на белом, шрифт Inter по умолчанию, стеклянные полупрозрачные карточки, эмодзи вместо иконок, три одинаковых блока «преимущества» с иконкой в кружке. Отзывы, логотипы клиентов и цифры не выдумывай — ставь заметную заглушку «сюда настоящий отзыв».

Перед выдачей пройди по экрану на ширине 360 px и проверь, что текст не вылезает за края, фокус виден, а главная кнопка находится без прокрутки. Что не успел — перечисли списком в конце ответа.

Собрать под себя — поля заполнены рабочими значениями, меняйте их и промпт выше обновится сам