Проектирование и сборка веб-страниц — лендингов, макетов сайтов, отдельных секций и UI-блоков на чистом HTML/CSS: бриф, мудборд, структура, wireframe, hi-fi макет, адаптив, передача в разработку.

Веб-дизайн: лендинги и макеты

Проектируем веб-страницу целиком и сразу собираем её в рабочем HTML/CSS — не в виде плоской картинки. Пользователь получает страницу, которую можно открыть в браузере, показать команде и отдать в разработку.

Главный принцип

Веб-страница — это HTML/CSS, не изображение. Текст должен быть настоящим (читаемым, выделяемым, доступным для скринридеров), картинки — настоящими <img>, вёрстка — семантической и адаптивной. generate_image используем только для hero-фона, иллюстраций и фото-контента.

Когда использовать

• «сделай лендинг / посадочную страницу»
• «спроектируй сайт / главную / страницу оффера / тарифов / about»
• «нарисуй структуру/мокап страницы», «wireframe», «прототип»
• «сделай hero-секцию / блок преимуществ / CTA-секцию»
• «адаптируй под мобилку», «сделай responsive»

Когда НЕ использовать

• Рекламный баннер фиксированного размера (1080×1080 и т.п.) → ad-creatives.
• Логотип, палитра, фирменный стиль → brand-identity.
• Презентация/слайды → навык presentations.
• Чистая картинка без вёрстки → image-studio.

Что на выходе

1. HTML/CSS-страница (один self-contained файл или набор) — открывается в браузере.
2. Design tokens (tokens.json / CSS-переменные) — цвета, шрифты, отступы, тени.
3. Список компонентов/секций — что на странице, в каком порядке.
4. Промпты для изображений — для hero/иллюстраций, если генерировали.

Инструменты

Рабочий процесс

Шаг 1. Бриф

Цель страницы (регистрация / заявка / продажа / подписка), аудитория, оффер, CTA, бренд-цвета и шрифт (или «подбери»), референсы («нравится вот этот сайт»). Без этого не проектируй — уточни одним блоком вопросов.

Шаг 2. Мудборд и референсы

web_search + web_reader — 4–6 референсов по нише. Зафиксируй настроение, палитру, типографику, приёмы (не копируй один-в-один).

Шаг 3. Структура (IA)

Какие секции и в каком порядке. Типовой конверсионный лендинг — в references/landing-anatomy.md. Согласуй скелет с пользователем до визуала.

Шаг 4. Wireframe (lo-fi)

Бокс-схема: где заголовок, hero-визуал, буллеты выгод, социальное доказательство, CTA, футер. Без стилей. Можно ASCII/текстом — быстро и честно.

Шаг 5. Hi-fi макет (HTML/CSS)

Собираешь страницу сразу в коде:

• Mobile-first: сначала 375px, потом масштабируешь вверх (768, 1024, 1440).
• Design tokens через CSS-переменные (см. references/design-tokens.md): примитивы → семантика → компоненты.
• Типографика: базовый размер ≥ 16px; модульная шкала (1.2–1.333); line-height ≥ 1.5; строка ≤ 80 символов.
• Цвет: 60-30-10; контраст текста ≥ 4.5:1 (WCAG AA).
• Сетка: 12 колонок на десктопе, отступы кратно 4/8px.
• Шрифты — системные (system-ui, Segoe UI) для детерминированного рендера без загрузки веб-фонта; или подключи веб-фонт через <link> если важно.

Шаг 6. Изображения

Hero-фон, иллюстрации, фото продукта — через generate_image (с --no text). Подставляй как background-image или <img>. Для производительности — укажи width/height (anti-CLS), ленивая загрузка ниже первого экрана.

Шаг 7. Адаптив и проверка

@media брейкпоинты. Если хочешь показать пользователю превью-скриншот — отрендери страницу через design-renderer/scripts/render.js (нужен Playwright/ Puppeteer; если нет — пользователь сам откроет HTML в браузере, страница рабочая).

Шаг 8. Передача в разработку

• tokens.json — все дизайн-токены.
• Список компонентов/секций с описанием.
• Промпты для изображений (чтобы повторить/заменить).
• Заметки по адаптиву и доступности.

Конверсионные правила (всегда)

• Один CTA на视图, повторённый после каждой крупной секции.
• Above-the-fold (первый экран): заголовок, повторяющий интент/оффер + выгода
  • CTA + доверие (логотипы/счётчик/звезды). Message match: заголовок страницы = оффер рекламы, которая привела пользователя.
• Сканируемость: H1→H2→H3, буллеты, короткие абзацы (2–4 предложения).
• Меньше отвлечений: на лендинге убери лишнюю навигацию и внешние ссылки.
• Социальное доказательство: выше первого экрана (логотипы), внутри (отзывы), рядом с CTA (рейтинги/счётчики).
• Mobile-first: CTA в зоне большого пальца (≥ 44×44px), вертикальный ритм.

Доступность (WCAG AA)

• Контраст: обычный текст ≥ 4.5:1, крупный (≥18pt / ≥14pt bold) и UI ≥ 3:1.
• alt у всех значимых изображений.
• Фокус-стили видны; интерактив достижим с клавиатуры.
• Не полагайся только на цвет для передачи смысла.

Антипаттерны

• Плоская картинка страницы вместо HTML — текст нечитаем/невыделяем.
• Десяток шрифтов/цветов — держи 1–2 шрифта и палитру 60-30-10.
• CTA «узнать больше» — конкретнее («Получить расчёт», «Начать бесплатно»).
• Игнорировать мобилку — сначала 375px.
• Не согласовав структуру, сразу рисовать hi-fi — правки становятся дорогими.
• Молчать про стоимость генерации изображений (~0,015 $/каждое).