Перейти к руководству
Landing Page Designавтор elayadesign

Landing Page Design Skill.

Свяжите аргументацию страницы и её визуальные правила вокруг одной целевой конверсии.

  • Лендинги
  • Копирайтинг
  • Веб-дизайн
Обзор источника · Landing Page DesignSKILL.md
Задача Лендинги Результат • Структура страницы, текст первого экрана, преимущества, процесс работы и черновик FAQ. • Рекомендация по index/noindex с заголовком и описанием, где это уместно. • Реализация по разделам с использованием выбранного макета и визуальных правил. Перед началом Отдельная среда выполнения приложения не требуется; в примерах реализации используются значения Tailwind, IntersectionObserver и дополнительные инструменты анимации.
Редакционное резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

01 Возможности

Постройте лендинг вокруг одного действия

Спланируйте оффер, текст, структуру и SEO-подход, затем применяйте подробные визуальные правила источника там, где они подходят проекту.

Рабочий процесс на основе источникаНе тест выполнения

Как это работает

Landing Page Design начинается с одного оффера, одной аудитории и одного основного действия. Первая половина собирает цель конверсии, возражения, контекст трафика, доказательства и ограничения, затем предлагает последовательность разделов и текст до начала сборки. Вторая половина задаёт подробную визуальную систему: шрифты, отступы, радиусы, первые экраны, иконки, анимацию и состояния компонентов.

Это необычайно директивный навык, а не нейтральный чек-лист. Он включает ограниченный выбор шрифтов и отступов, обязательный раздел с раскрытием слогана и конкретные правила анимации. Эти решения могут противоречить устоявшейся системе бренда или требованиям доступности и не должны молча их переопределять. Заявленная высокая конверсия — намерение, а не доказательство измеренного роста конверсии.

Ожидаемые результаты

  • Структура страницы, текст первого экрана, преимущества, процесс работы и черновик FAQ.
  • Рекомендация по index/noindex с заголовком и описанием, где это уместно.
  • Реализация по разделам с использованием выбранного макета и визуальных правил.
Смотреть пример задания

От задания до проверки

  1. 01
    Уточните оффер

    Соберите за один приём аудиторию, действие, возражения, источник трафика и реальные материалы-доказательства.

  2. 02
    Выберите аргументацию

    Выберите классический первый экран, длинную историю, минимальную конверсионную страницу или сравнительную структуру и объясните выбор.

  3. 03
    Черновик до сборки

    Подготовьте структуру, текст, SEO-подход и рекомендацию по макету до реализации.

  4. 04
    Сборка и проверка по разделам

    Проходите страницу по порядку, проверяя состояния, ссылки, семантику, метаданные и ограничения бренда.

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

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

Отдельная среда выполнения приложения не требуется; в примерах реализации используются значения Tailwind, IntersectionObserver и дополнительные инструменты анимации.

Хорошо подходит

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

Ограничения, которые нужно проверить

  • Нет гарантии конверсииИсточник даёт правила дизайна и текста, а не результаты эксперимента на вашем оффере.
  • Правила бренда могут конфликтоватьПредписанные шрифты, градиенты, анимация и регистр текста не являются универсальными требованиями для существующих продуктов.
  • Доказательства должны быть настоящимиПравдоподобную статистику, имена клиентов или гарантии нельзя выдумывать как факты.

Что подготовить

  • Оффер и конверсияУкажите, что получают посетители и какое действие считается успехом.
  • Аудитория и возраженияОпишите контекст посетителей, источник трафика и реальные причины сомнений.
  • Доказательства и ограничения брендаПредоставьте утверждённые скриншоты, отзывы, данные, условия и требования к дизайн-системе.

03 Важные решения

Важные решения

  1. Сначала структура, потом декор

    Аргументация страницы выбирается до визуальных правил, что снижает риск полировать разделы без убеждающей роли.

  2. Важно намерение трафика

    Короткой странице загрузки для заинтересованной аудитории нужна иная аргументация, чем образовательному поисковому лендингу.

  3. Проверьте настройки по умолчанию

    Конкретика источника полезна, только если его сильные визуальные допущения подходят проекту.

04 Пример задания

Попробуйте целевое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте актуальный способ установки из репозитория и включите папку навыка целиком. Источник — набор дизайн-правил, а не размещаемый конструктор страниц.

Исходный файл в upstream
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md

Отдельная среда выполнения приложения не требуется; в примерах реализации используются значения Tailwind, IntersectionObserver и дополнительные инструменты анимации.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используйте landing-page-design, чтобы спланировать вечнозелёную страницу для нашего продукта design-review. Аудитория — небольшие агентства, действие — запрос демо. Используйте только предоставленные скриншоты и проверенные доказательства. До написания кода верните структуру, текст первого экрана, FAQ на основе возражений, рекомендацию по SEO и выбор макета. Сохраните наши существующие токены бренда и требования к уменьшению анимации (reduced-motion).

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Одно основное действие остаётся единым от первого экрана до финального призыва.
  • Каждый фактический довод подкреплён предоставленными данными.
  • Визуальные правила согласованы с существующим брендом и требованиями доступности.

OpenDesign предоставляет локальное дизайн-пространство для кодирующих агентов. Этот листинг не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника по ссылке ниже. Поведение и требования upstream могут измениться.

Владелец источника
elayadesign
Репозиторий
elayadesign/ai-design-skills
Лицензия
MIT
Просмотренная версия
2026-10-07 · 1c1e97cb9878
Редакционное резюме источника
Спланируйте оффер, текст, структуру и SEO-подход, затем применяйте подробные визуальные правила источника там, где они подходят проекту.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Он предназначен только для главных страниц?

Нет. Его ключевое различие: лендинг служит одному офферу и намерению, в отличие от главной страницы, обслуживающей несколько аудиторий или целей.

Нужно ли следовать каждой рекомендации на существующем сайте?

Нет. Его собственная область применения учитывает прямые указания пользователя, а конфликт с устоявшимся брендом или требованиями доступности нужно разрешать, а не молча перезаписывать.

Гарантирует ли добавление FAQ видимость в поиске?

Нет. Он рекомендует полезный контент в формате вопросов и ответов и подходящие метаданные; индексация и результативность в поиске остаются отдельными результатами.

OpenDesign

Освободите место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Исходный файл в upstream
https://github.com/elayadesign/ai-design-skills/blob/1c1e97cb9878e236552c772092dda7adcdddbcb2/skills/landing-page-design/SKILL.md