Перейти к руководству
Landing Page Generatorавтор Alireza Rezvani

Landing Page Generator Skill.

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

  • Посадочные страницы
  • Копирайтинг
  • Фронтенд
Обзор источника · Landing Page GeneratorSKILL.md
Задача Посадочные страницы Результат • Секции посадочной страницы на React или Next.js в TSX со стилями Tailwind • Варианты текстов, выстроенные вокруг выбранной структуры сообщения • Заготовки для title, description, canonical и структурированных данных Перед началом Нужен совместимый проект на React или Next.js с Tailwind; упомянутые UI-компоненты и дополнительные инструменты анализа бренда могут требовать отдельной настройки.
Редакционное резюме · источник просмотрен 2026-10-07 · не сгенерированный пример

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

Черновик посадочной страницы на React по брифу продукта

Процесс от брифа продукта до TSX, объединяющий структуры текстов, секции посадочных страниц и чек-листы по SEO и производительности.

Процесс на основе источникаНе результат тестового запуска

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

Landing Page Generator объединяет маркетинговые структуры текстов с шаблонами секций React или Next.js и стилями Tailwind. Он собирает данные об аудитории, проблеме, выгоде, ценах и направлении дизайна, затем пишет черновик текста и только после этого компонует страницу. В источнике есть шаблоны hero, преимуществ, цен, FAQ и CTA; ненужные секции опускаются, а не заполняются автоматически.

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

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

  • Секции посадочной страницы на React или Next.js в TSX со стилями Tailwind
  • Варианты текстов, выстроенные вокруг выбранной структуры сообщения
  • Заготовки для title, description, canonical и структурированных данных
Смотреть пример брифа

От брифа до проверки

  1. 01
    Соберите факты о продукте

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

  2. 02
    Сначала напишите сообщение

    Выберите нарратив «проблема — решение» или «до — после», подходящий продукту, затем решите, какие секции действительно нужны.

  3. 03
    Соберите и проверьте

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

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

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

Нужен совместимый проект на React или Next.js с Tailwind; упомянутые UI-компоненты и дополнительные инструменты анализа бренда могут требовать отдельной настройки.

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

  • Черновики для запуска продуктаПолезно, когда факты о продукте известны и нужна цельная первая реализация.
  • Варианты сообщенияПодходит для поиска разных заголовков и CTA при неизменном проверенном предложении.

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

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

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

  • Продукт и аудиторияОпишите реальное предложение, целевого клиента и основную задачу, которую должна поддерживать страница.
  • Предложение и подтвержденияПредоставьте актуальные цены и любые утверждённые отзывы, метрики или гарантии; укажите, каких доказательств нет.
  • Ограничения проектаУкажите настройку React или Next.js, правила бренда и общие SEO-соглашения сайта.

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

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

  1. Сначала текст, потом компоненты

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

  2. SEO уже в черновике

    Метаданные, canonical и семантическая структура учитываются вместе с кодом страницы, а не откладываются до передачи работы.

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

Попробуйте узкий бриф

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

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

Загрузите полный Skill и адаптируйте его примеры компонентов под репозиторий. Не считайте, что импорты из примеров или общесайтовые SEO-файлы уже существуют.

Исходный файл в апстриме
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md

Нужен совместимый проект на React или Next.js с Tailwind; упомянутые UI-компоненты и дополнительные инструменты анализа бренда могут требовать отдельной настройки.

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

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

Пример брифа
Используйте landing-page-generator, чтобы по предоставленному брифу составить страницу Next.js для нашего продукта планирования. Используйте только указанные мной цены и выгоды, опустите отзывы и гарантии, так как ничего из этого не утверждено, и сохраните наши токены бренда. Сначала напишите варианты заголовка и CTA, затем соберите нужные секции. Добавьте метаданные и только обоснованные структурированные данные, а измеренную производительность указывайте отдельно от целевых показателей.

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

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

  • Каждое утверждение и каждая деталь цены соответствуют утверждённым входным данным.
  • У страницы есть чёткое основное действие и удобные мобильные секции.
  • Метаданные и структурированные данные отражают видимое содержимое, а результаты производительности помечены статусом измерения.

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

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

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

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

Владелец источника
Alireza Rezvani
Репозиторий
alirezarezvani/claude-skills
Лицензия
MIT
Просмотренная версия
2026-10-07 · 19392f7a0826
Редакционное резюме источника
Процесс от брифа продукта до TSX, объединяющий структуры текстов, секции посадочных страниц и чек-листы по SEO и производительности.

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

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

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

Гарантирует ли он лучшую конверсию?

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

Должна ли каждая страница содержать отзывы и цены?

Нет. Процесс прямо позволяет пропускать неуместные секции, а необоснованные доказательства выдумывать не следует.

Являются ли цифры производительности подтверждёнными результатами?

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

OpenDesign

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

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

Исходный файл в апстриме
https://github.com/alirezarezvani/claude-skills/blob/19392f7a08264ed00486a251f5b2098321771f94/product-team/skills/landing-page-generator/SKILL.md