Web Design
@web-design
Design and build web pages — landings, site mockups, sections and UI blocks in clean HTML/CSS. Runs the stages: brief → moodboard → structure → wireframe → hi-fi → responsive → dev-handoff. Use for «сделай лендинг/landing», «спроектируй сайт/страницу», «веб-макет», «UI-блок», «hero-секция», «прототип». Do NOT use for a fixed-size ad banner (ad-creatives), a logo (brand-identity), or a standalone image (image-studio).
Who the «Web Design» skill is for
- Startups and launch teams — a product landing or offer and pricing pages, ready for development.
- Marketers — a campaign landing page with message match: the headline mirrors the ad offer.
- Solo experts and small business — a service page or one-page landing in clean HTML/CSS.
- Designers and PMs — a wireframe and hi-fi mockup of a section or UI block to hand to the team.
What you can design
- A landing — structure, hero section, benefit blocks, social proof, CTA.
- A full site — home, about, pricing or offer page.
- A single section — hero, advantages block, CTA section, UI block.
- A wireframe / prototype — page structure and skeleton before visuals.
Principle: a page is HTML/CSS
The page is assembled directly in code, not as a flat picture. Text is real — readable, selectable and accessible to screen readers; images are real <img> with width/height against CLS. glm_generate_image is used surgically — only for the hero background, illustrations and photo content. The structure is agreed before hi-fi, so changes don't get expensive.
Conversion fundamentals, applied by default
One CTA per screen, repeated after major sections; above the fold — an offer headline + benefit + CTA + trust. Text contrast from 4.5:1 (WCAG AA), base font ≥16px, line-height ≥1.5, a grid in multiples of 4/8px. Mobile-first: 375px first, then scale up to desktop.
Related skills: ad creatives, brand identity — and the AI Designer agent that unites all three.
Ready to design a landing? Describe the goal and audience — launch the «Web Design» skill.
Is it an image of a page or working code?
Working HTML/CSS, not a flat picture. The text is real — selectable and readable by screen readers, images are real <img>, and the markup is semantic and responsive. glm_generate_image is used only for the hero background and illustrations.
What stages does the work go through?
Brief → moodboard and references → structure (IA) → wireframe → hi-fi mockup in HTML/CSS → images → responsive → developer handoff. The structure is agreed before visuals so changes don't get expensive.
Is the mobile version considered?
Yes, mobile-first: 375px first, then scaling up to 768, 1024 and 1440. The CTA sits in the thumb zone (≥44×44px), with vertical rhythm and readability in the thumbnail.
What do I get as output?
A self-contained HTML/CSS page, design tokens (tokens.json / CSS variables: colours, fonts, spacing, shadows), a list of sections and components, and image prompts — everything ready for developer handoff.
Is this an ad banner?
No. The skill builds whole pages: a landing, a home page, an offer or pricing page. For a fixed-size banner (1080×1080 etc.) use ad-creatives; for a logo use brand-identity.
Веб-дизайн: лендинги и макеты
Проектируем веб-страницу целиком и сразу собираем её в рабочем HTML/CSS — не в виде плоской картинки. Пользователь получает страницу, которую можно открыть в браузере, показать команде и отдать в разработку.
Главный принцип
Веб-страница — это HTML/CSS, не изображение. Текст должен быть настоящим
(читаемым, выделяемым, доступным для скринридеров), картинки — настоящими
<img>, вёрстка — семантической и адаптивной. kling_text_to_image (фоллбэк —
glm_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 kling_text_to_image (~0,028 $/вызов; фоллбэк — glm_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-фон, иллюстрации, фото продукта — через kling_text_to_image (фоллбэк —
glm_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 $/каждое).