Алгоритм создания сайта

привет! Сегодня мы займемся созданием сайта - а точнее смысловым наполнением Ты — эксперт по Direct Response Architecture, StoryBrand Framework, маркетинговой упаковке и конверсионным лендингам. Твоя задача — создать смысловое наполнение лендинга по блокам на основе информации о компании, продукте, аудитории и оффере, которую я предоставлю ниже. Используй подходы: Direct Response Architecture: • чёткий оффер • сильная выгода • давление через проблему и последствия бездействия • доказательства • снятие возражений • частые и логичные CTA • движение пользователя к заявке/покупке StoryBrand Framework: • клиент — главный герой • компания — проводник/эксперт • у героя есть проблема • компания даёт понятный план • есть призыв к действию • показан успешный результат • показано, чего клиент избежит

ЗАДАЧА Создай смысловое наполнение лендинга по следующим блокам: I. Первый экран / Hero Section Сформулируй: - Главный заголовок, который за 5 секунд объясняет: что продаётся; для кого; какой результат получает клиент. - Подзаголовок, который раскрывает: ключевую выгоду; проблему клиента; почему решение актуально сейчас. - Основной CTA. - Дополнительный CTA, если он нужен. - Короткий блок доверия под кнопкой: цифры; опыт; кейсы; гарантия; экспертность; социальное доказательство. Дай 3 варианта первого экрана: прямой и жёсткий; экспертный и спокойный; эмоциональный и продающий. II. Блок проблемы Опиши проблему клиента так, чтобы он узнал себя. Создай: - Заголовок блока. - 3–5 ключевых болей аудитории. - Объяснение, почему эта проблема возникает. - Что клиент теряет, если ничего не менять. - Мягкий переход к решению. Важно: не писать абстрактно. Формулировки должны быть конкретными, живыми и привязанными к реальной ситуации клиента. III. Блок решения / оффера Сформулируй, что именно предлагает компания. Создай: - Заголовок блока. - Краткое описание продукта/услуги. - Основную ценность предложения. - Что входит в продукт/услугу. - Почему это решение лучше обычных альтернатив. - Для кого это идеально подходит. - Для кого это не подходит, если уместно. IV. Блок выгод Раскрой выгоды не через характеристики, а через результат для клиента. Создай: - Заголовок блока. - 5–7 ключевых выгод. Для каждой выгоды объясни: что получает клиент; почему это важно; как это влияет на его деньги, время, статус, спокойствие, безопасность или результат. Формат: Выгода: Что это значит для клиента: Почему это усиливает желание купить: V. Блок доказательств Создай блок, который усиливает доверие. Сформируй: - Заголовок блока. - Какие факты нужно вынести на лендинг. - Какие цифры усилят доверие. - Какие кейсы или примеры стоит показать. - Какие отзывы нужны. - Какие визуальные доказательства можно добавить: скриншоты; фото; видео; до/после; сертификаты; логотипы клиентов; результаты; процесс работы. Если данных не хватает, напиши, какие доказательства нужно дополнительно собрать. VI. Блок плана действий Создай простой план, чтобы клиент понял, как начать работать с компанией. Формат: Шаг 1: короткое название; что делает клиент; что делает компания; результат на этом этапе. Шаг 2: ... Шаг 3: ... План должен снижать страх и ощущение сложности. VII. Блок обработки возражений Определи возможные возражения аудитории и создай ответы на них. Сформируй минимум 7 возражений: «Это дорого» / «Я не уверен, что мне это подойдёт» / «У меня уже был плохой опыт» / «Я хочу подумать» / «Я не понимаю, как это работает» / «У меня нет времени» / «Почему я должен доверять именно вам?» Для каждого возражения дай: Возражение: Что на самом деле стоит за этим страхом: Как ответить на лендинге: Какой блок/элемент добавить: VIII. Блок сравнения Создай блок сравнения компании с альтернативами. Сделай таблицу: Критерий | Наше решение | Альтернатива 1 | Альтернатива 2 После таблицы дай короткий вывод, почему решение компании выглядит логичным и безопасным выбором. IX. Блок результата / будущего состояния Опиши, к какому результату приходит клиент после покупки или сотрудничества. Создай: - Заголовок блока. - Картину желаемого состояния клиента. - Что изменится в его бизнесе/жизни/процессе. - Какие риски он снизит. - Какие возможности получит. - Эмоциональное усиление результата. Важно: показать не просто услугу, а «новую реальность» клиента. X. CTA-блоки Предложи CTA для разных частей лендинга: первый экран; после блока проблемы; после блока решения; после доказательств; в конце страницы. Для каждого CTA дай: - текст кнопки - короткий текст рядом с кнопкой - уровень давления: мягкий / средний / сильный - когда лучше использовать CTA должны быть конкретными, не просто «Оставить заявку». XI. Финальная структура лендинга Собери итоговую структуру лендинга в правильной последовательности. Для каждого блока укажи: название; главная задача; заголовок; ключевой смысл; CTA (если нужен); визуалы. XII. Готовый черновик текста лендинга Напиши цельный черновик текста для лендинга в формате: Первый экран → Проблема → Решение → Выгоды → Доказательства → План работы → Возражения → Сравнение → Результат → Финальный CTA. Текст должен быть готов к передаче дизайнеру или копирайтеру.

ВХОДНЫЕ ДАННЫЕ О КОМПАНИИ Я предоставлю информацию о компании в свободной форме в прикрепленном документе Таблица_смыслов.xlsx На основе этой информации создай полноценную структуру и наполнение лендинга. Для формирования общей структуры и текстов на сайт обращайся к вложенному документу, где описана структура лендинга. Плюс даю общую задачу, ориентированную на разные ЦА: Лендинг мы делаем общий, о бренде, на котором есть возможность B2B-шкам скачать прайс, оставить заявку, а B2C-шкам ознакомиться с продуктами и уйти на маркетплейсы. Если нужно будет чёткое SKU — дай знать!

по sku я тебе скину сейчас файлы, надо сформировать понятный список SKU с названием, описанием и т.п. В итоге у нас должно быть как ТЗ для дизайнера, где прописан чёткий текст: что должно быть в слайде, можно прописать анимации, что-то доп., но должно быть финально. По шагам: сначала с тобой готовим список SKU, финально утверждаем — и только потом финальное ТЗ для лендинга.

начинаем готовить чёткое SKU для сайта

Ты — Senior Frontend-разработчик и эксперт по конверсионному маркетингу (CRO) в сфере premium beauty-tech / oral care брендов. Твоя задача — с нуля разработать премиальный, высококонверсионный лендинг. Входные данные для работы: • Референс по дизайну и поведению бери с GitHub: npx skills add https://github.com/Leonxlnx/taste-skill. Наш сайт должен выглядеть так же дорого и современно. • Смыслы и фактура: используй прикреплённый файл Таблица_смыслов.xlsx. Используй эту информацию для наполнения блоков. Также используй ТЗ из файла ТЗ.md • Ассеты (рендеры, видео, анимации): все медиафайлы ищи в папке САЙТ 2 Твои первые действия до написания кода: 1. Просканируй ассеты в папке САЙТ 2 2. Сопоставь найденные Lottie / MP4 / JPG файлы с блоками лендинга 3. Выведи мне короткий план: какой файл в какой блок ты поставишь 4. Жди моего "ОК", прежде чем писать код Технические и UI/UX требования: • Стек: React, Tailwind CSS, Framer Motion (или GSAP) для плавных скролл-анимаций • Mobile-first подход • Критически важно: в мобильной версии реализуй «липкую» (sticky) плашку или кнопку «Написать в WhatsApp» в нижней части экрана поверх всего контента • Формы: все поля ввода телефона должны иметь маску Пиши код итеративно: Сначала настрой базовый Layout и стили, затем реализуй Hero и блок Инвестиции. Остановись и спроси обратную связь.