Веб-дизайн
@web-design
Проектирование и сборка веб-страниц — лендингов, макетов сайтов, отдельных секций и UI-блоков на чистом HTML/CSS: бриф, мудборд, структура, wireframe, hi-fi макет, адаптив, передача в разработку.
Кому подходит навык «Веб-дизайн»
- Стартапам и командам запуска — лендинг продукта или страницы оффера и тарифов, готовые к разработке.
- Маркетологам — посадочная под рекламную кампанию с message match: заголовок = оффер рекламы.
- Экспертам и малому бизнесу — страница услуги или лендинг-визитка на чистом HTML/CSS.
- Дизайнерам и продактарам — wireframe и hi-fi макет секции или UI-блока под передачу в команду.
Что можно спроектировать
- Лендинг — структура, hero-секция, блоки выгод, социальное доказательство, CTA.
- Сайт целиком — главная, about, страница тарифов или оффера.
- Отдельная секция — hero, блок преимуществ, CTA-секция, UI-блок.
- Wireframe / прототип — структура и скелет страницы до визуала.
Принцип: страница — это HTML/CSS
Веб-страница собирается сразу в коде, а не как плоская картинка. Текст настоящий — читаемый, выделяемый и доступный скринридерам; картинки — настоящие <img> с width/height против CLS. generate_image применяется точечно — только для hero-фона, иллюстраций и фото-контента. Структура согласовывается до hi-fi, чтобы правки не стали дорогими.
Конверсионные основы по умолчанию
Один CTA на экран, повторённый после крупных секций; above-the-fold — заголовок с оффером + выгода + CTA + доверие. Контраст текста от 4.5:1 (WCAG AA), базовый шрифт ≥16px, line-height ≥1.5, сетка кратно 4/8px. Mobile-first: сначала 375px, потом масштабирование до десктопа.
Связанные навыки: рекламные креативы, фирменный стиль — и агент ИИ-дизайнер, объединяющий все три.
Готовы спроектировать лендинг? Опишите цель и аудиторию — запустите навык «Веб-дизайн».
Это картинка страницы или рабочий код?
Рабочий HTML/CSS, а не плоская картинка. Текст настоящий — выделяемый и читаемый скринридером, картинки — настоящие <img>, вёрстка семантическая и адаптивная. generate_image используется только для hero-фона и иллюстраций.
По каким этапам идёт работа?
Бриф → мудборд и референсы → структура (IA) → wireframe → hi-fi макет в HTML/CSS → изображения → адаптив → передача в разработку. Структура согласовывается до визуала, чтобы правки не стали дорогими.
Учитывается ли мобильная версия?
Да, подход mobile-first: сначала 375px, затем масштабирование до 768, 1024 и 1440. CTA в зоне большого пальца (≥44×44px), вертикальный ритм и читаемость в миниатюре.
Что я получу на выходе?
Self-contained HTML/CSS-страницу, дизайн-токены (tokens.json / CSS-переменные: цвета, шрифты, отступы, тени), список секций и компонентов, а также промпты для изображений — всё готово к передаче в разработку.
Это рекламный баннер?
Нет. Навык делает целые страницы: лендинг, главную, страницу оффера или тарифов. Для баннера фиксированного размера (1080×1080 и т.п.) используйте ad-creatives, для логотипа — brand-identity.
Веб-дизайн: лендинги и макеты
Проектируем веб-страницу целиком и сразу собираем её в рабочем HTML/CSS — не в виде плоской картинки. Пользователь получает страницу, которую можно открыть в браузере, показать команде и отдать в разработку.
Главный принцип
Веб-страница — это HTML/CSS, не изображение. Текст должен быть настоящим
(читаемым, выделяемым, доступным для скринридеров), картинки — настоящими
<img>, вёрстка — семантической и адаптивной. generate_image используем только
для hero-фона, иллюстраций и фото-контента.
Когда использовать
- «сделай лендинг / посадочную страницу»
- «спроектируй сайт / главную / страницу оффера / тарифов / about»
- «нарисуй структуру/мокап страницы», «wireframe», «прототип»
- «сделай hero-секцию / блок преимуществ / CTA-секцию»
- «адаптируй под мобилку», «сделай responsive»
Когда НЕ использовать
- Рекламный баннер фиксированного размера (1080×1080 и т.п.) →
ad-creatives. - Логотип, палитра, фирменный стиль →
brand-identity. - Презентация/слайды → навык
presentations. - Чистая картинка без вёрстки →
image-studio.
Что на выходе
- HTML/CSS-страница (один self-contained файл или набор) — открывается в браузере.
- Design tokens (
tokens.json/ CSS-переменные) — цвета, шрифты, отступы, тени. - Список компонентов/секций — что на странице, в каком порядке.
- Промпты для изображений — для hero/иллюстраций, если генерировали.
Инструменты
| Задача | Инструмент |
|---|---|
| Hero-фон, иллюстрации, фото | MCP generate_image (~0,015 $/вызов) |
| Референсы / чужие лендинги / тренды | MCP web_search, web_reader |
| Проверить макет скриншотом | design-renderer → scripts/render.js (опционально, для превью) |
| Сохранить файлы | встроенные write |
Рабочий процесс
Шаг 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 $/каждое).