Воркшоп №6
Сайт за вечер:
дизайн, визуал, деплой
На этом воркшопе вы научитесь превращать текстовое ТЗ на лендинг в работающий сайт с дизайном, фото, анимациями – и публиковать его в интернете за один вечер.
🛠 Инструменты модуля
🎯 Зачем этот воркшоп
6 лендингов за 1.5 часа = экономия $3,000 на дизайнерах.
Меньше перфекционизма – быстрее результат.
✅ Если научитесь
✓ 6 лендингов за 1.5 часа суммарно
✓ Экономия $3,000+ на дизайнерах
✓ Полный контроль без подрядчиков
✓ Мгновенные правки без доплат
✓ Запуск MVP за один вечер
❌ Если не научитесь
✕ $500–1,000 за каждый лендинг дизайнеру
✕ 2–4 недели ожидания
✕ Платные правки за каждую итерацию
✕ Зависимость от подрядчиков
✕ Идея умирает, пока ждете сайт
📍 Навык на выходе
🖥
Лендинг за 2–4 часа
С дизайном, интерактивными элементами и анимациями – без единой строчки кода вручную.
📸
Визуал без дизайнера
AI-фотосессия, генерация изображений под ваш стиль и нишу – без фотографа и стоковых фото.
🚀
Публикация за 5 минут
Бесплатный деплой на Vercel – рабочая ссылка, которой можно делиться с клиентами.
📍 Прогресс
Модуль 1 – стек. Модуль 2 – мышление. Модуль 3 – ассистенты. Модуль 4 – research. Модуль 5 – маркетинг и оффер. Модуль 6 – превращаешь все это в работающий сайт за один вечер.
💡
Этот воркшоп никуда не пропадает. Возвращайся и повторяй любое упражнение пошагово. Главный принцип: не идеально → а внедрено.
Воркшоп №6
Workflow:
от HTML до сайта
Каждый шаг дает конкретный результат. Результат предыдущего шага – входные данные для следующего.
Задача
Инструмент
Результат
1
Подготовить основу
Рабочая среда
↓
2
Добавить интерактив
Калькулятор / квиз
↓
3
Создать дизайн
Стильный лендинг
↓
4
Сгенерировать фото
Уникальные изображения
↓
5
Добавить анимации
Живой сайт
↓
6
Подключить ссылки
Рабочие CTA
↓
7
Опубликовать
Сайт в интернете
OUTPUT
Ценный конечный продукт
Работающий лендинг в интернете:
• Интерактивные элементы (калькулятор, квиз, форма)
• AI-сгенерированные фото для Hero и блоков
• Анимации и эффекты
• Подключенные CTA (Telegram, оплата)
🛠 Инструменты
Основной инструмент для написания кода и дизайна
Генерация изображений, озвучка текста (Text-to-Speech)
Продвинутая генерация фотографий для сайта
AI-агент для сложных задач и генерации контента
Бесплатный хостинг для публикации сайта
Готовые UI-компоненты и анимации для копирования
Дизайн-вдохновение: bento-сетки и макеты
Шаг 1 · Рабочая среда
Подготовка и настройка
Claude Code
⏱ ~10 мин
Скачиваем десктопное приложение, создаем папку проекта и загружаем HTML-файл с текстом лендинга.
Ваш компьютер по факту становится сервером. Раньше нужно было покупать хостинг – теперь это не нужно на этапе разработки.
🔧 Claude Code
💻 Как запустить Claude Code
1
Скачать и установить десктопное приложение Claude Code
2
При первом запуске вы увидите вкладку Local – работа на вашем компьютере
3
Создать папку под проект (например, «Мой сайт»)
4
Закинуть в эту папку ваш HTML-файл с текстом лендинга
💻 Скачать Claude Code ↗
🎯 Какую модель выбрать
Sonnet 4.6 (основная)
Для большинства задач. Работает отлично, экономит токены.
Opus 4.6 (тяжелая артиллерия)
Если Sonnet несколько итераций подряд «тупит» и не справляется.
💡
Совет
Начинайте с Sonnet. Если после 3–4 попыток результат не устраивает – переключайтесь на Opus.
📊 Про лимиты и токены
$20/мес
Есть лимит токенов, сессия сбрасывается раз в 4 часа
$100/мес
Больше токенов, меньше ограничений
$200/мес
Максимальная, для нескольких проектов параллельно
⚡
Лайфхак
Сервис
Perplexity за $10 позволяет выбирать модель Claude и задавать там «лишние» вопросы, экономя токены основного аккаунта для реального кодинга.
🛡 Режим разрешений
В настройках Claude Code есть переключатель Ask Permissions – перед каждым действием Claude будет спрашивать разрешение. Это безопасный режим: ничего лишнего не произойдет без вашего подтверждения.
⚠️
Для продвинутых: можно переключить на режим Auto-accept, чтобы ставить задачи наперед (например, перед сном) и получать готовый результат. Но новичкам рекомендуем оставить Ask Permissions.
Шаг 2 · Добавляем ценность
Интерактивные элементы
для лендинга
⏱ ~5 мин
Интерактив повышает конверсию – человек сразу видит ценность продукта в цифрах или получает персональный результат.
Программисту на ту же задачу раньше требовался 1–2 часа. С Claude – 5 минут.
🔧 Claude Code
Этот промпт учитывает вашу нишу и аудиторию, и подбирает 2–5 вариантов интерактивных элементов: калькуляторы, квизы, конфигураторы, слайдеры и другие фишки.
Ты – продуктовый дизайнер и frontend-разработчик. Твоя задача – придумать 2-5 интерактивных элементов для лендинга, которые повысят вовлеченность и конверсию.
КОНТЕКСТ ПРОЕКТА:
- Ниша: [опиши свою нишу, например: "онлайн-школа по инвестициям"]
- Продукт/услуга: [что продаешь, например: "курс по криптовалютам за $500"]
- Целевая аудитория: [кто твой клиент, например: "предприниматели 25-40 лет, хотят диверсифицировать доход"]
- Главная боль клиента: [чего боится / что мешает, например: "боятся потерять деньги, не понимают с чего начать"]
- Желаемый результат клиента: [к чему стремится, например: "пассивный доход $1000/мес из крипты"]
ЗАДАЧА:
Предложи от 2 до 5 интерактивных элементов, которые можно встроить в лендинг. Это чистый frontend: калькуляторы, квизы, визуализации, конфигураторы.
ТИПЫ ИНТЕРАКТИВОВ (для вдохновения):
- Калькулятор (ROI, прибыли, экономии, окупаемости, декомпозиция цели)
- Мини-квиз / тест ("Какой тип инвестора ты?", "Готов ли ты к...")
- Сравнительная таблица (до/после, с тобой/без тебя, тарифы)
- Конфигуратор / конструктор (собери свой пакет, выбери формат)
- Прогресс-бар / таймлайн (путь клиента, этапы результата)
- Слайдер "что если" (двигаешь ползунок – видишь результат)
- Счетчик / таймер (мест осталось, до повышения цены)
ДЛЯ КАЖДОГО ИНТЕРАКТИВА НАПИШИ:
1. Название и тип (например: "Калькулятор ROI за 6 месяцев")
2. Что делает пользователь (какие данные вводит, что двигает, что выбирает)
3. Что видит в результате (конкретный output)
4. Почему это работает для этой аудитории (какую боль/желание цепляет)
5. Где разместить на лендинге (после какого блока)
Начни с самого конверсионного.
Пример: калькулятор декомпозиции выручки
Человек вводит количество контактов, средний чек, конверсию в поднятие трубки (ползунок 40–60%), конверсию в продажу (ползунок 2–20%) → видит потенциальную выручку. Занимает 5 минут вместо 1–2 часов программиста.
Если хотите добавить элементы с искусственным интеллектом – персональный анализ, AI-консультант, диагностика. Используют Gemini API (бесплатно).
Ты – продуктовый дизайнер и AI-инженер. Твоя задача – придумать 2-5 интерактивных AI-элементов для лендинга, которые используют искусственный интеллект для персонализации и вовлечения.
КОНТЕКСТ ПРОЕКТА:
- Ниша: [опиши свою нишу]
- Продукт/услуга: [что продаешь]
- Целевая аудитория: [кто твой клиент]
- Главная боль клиента: [чего боится / что мешает]
- Желаемый результат клиента: [к чему стремится]
ЗАДАЧА:
Предложи от 2 до 5 интерактивных элементов с AI, которые можно встроить в лендинг. Эти элементы используют языковую модель (Gemini API, бесплатно) для генерации персонализированных ответов.
ТИПЫ AI-ИНТЕРАКТИВОВ (для вдохновения):
- AI-консультант / мини-бот ("Задай вопрос – получи ответ по теме")
- Персональный анализ ("Опиши ситуацию – AI даст рекомендацию")
- AI-генератор (стратегий, планов, идей, заголовков под нишу клиента)
- Персональный прогноз ("Расскажи о себе – AI спрогнозирует результат")
- AI-диагностика ("Ответь на 3 вопроса – AI определит твой уровень / тип / проблему")
- Демо-продукта ("Попробуй как работает AI-ассистент прямо сейчас")
- AI-аудит ("Вставь ссылку/текст – AI проанализирует и даст обратную связь")
ДЛЯ КАЖДОГО AI-ИНТЕРАКТИВА НАПИШИ:
1. Название и тип (например: "AI-аудит рекламного текста")
2. Что делает пользователь (что вводит, какие данные дает)
3. Что генерирует AI (конкретный формат ответа)
4. Системный промт для AI (краткое описание роли и ограничений бота)
5. Почему это работает для этой аудитории (какую боль/желание цепляет)
6. Где разместить на лендинге (после какого блока)
Техническая реализация: кнопка на лендинге → модальное окно → Gemini API (бесплатный ключ). Бот знает контекст продукта и мягко ведет к покупке.
Начни с самого конверсионного.
Шаг 3 · Визуальный стиль
Создание
дизайна
⏱ ~15 мин
Три способа создать дизайн: описать словами, найти референс или использовать брендбук.
Claude понимает задачу лучше живого дизайнера. И правки можно вносить бесконечно и когда угодно.
6 способов получить дизайн
0
Нейронка сама придумает
Просто скормите ТЗ и скажите «сделай лендинг». Быстро, но результат посредственный – подходит для внутренних задач, где дизайн не критичен.
1
Готовые скиллы дизайна
Загрузите скилл в Claude Code и скажите: «Используй скилл … и сделай дизайн». Внутри — готовые стили, шрифты, палитры и UI-паттерны.
Frontend Design
40+ готовых UI-паттернов, рекомендованные шрифты, проверенные дизайны.
UI/UX Pro Max скачать
67 стилей, 96 палитр, 57 шрифтовых пар, 25 типов чартов, 13 стеков (React/Next/Vue/Svelte/SwiftUI/RN/Flutter/Tailwind/shadcn).
git clone https://github.com/yasikvlad/ui-ux-pro-max ~/.claude/skills/ui-ux-pro-max
2
Референс → Цифровой ключ рекомендуем
3
Готовые промпты с дизайнерских сайтов
На сайтах типа
Bento Grids и
21st.dev есть кнопка
Copy Prompt – скопируйте и вставьте в Claude Code.
4
Свой брендбук
Загрузите фирменный стиль, логотип или слайды – Claude извлечет «цифровой ключ» и применит к лендингу.
5
Стырить готовые компоненты и блоки конструктор
Не делайте с нуля — берите готовые карточки, анимации, 3D-сцены, иконки. Это не референс, а реальные компоненты, которые вставляются в лендинг как есть. Скажите Claude: «Возьми компонент с {ссылка} и встрой в мой лендинг».
🤖 AI-конструкторы дизайна
📦 Библиотеки (установить локально)
JS-библиотека анимаций для лендингов (плавные переходы, скролл-анимации, жесты).
npm install motion
📋 Промпты под каждый способ
Этот промпт создаст вам персональное ТЗ на дизайн – с учетом вашей ниши, целевой аудитории, задач и эмоций, которые должен вызывать сайт.
Ты – арт-директор с 15-летним опытом в digital-дизайне. Создай детальную дизайн-концепцию для моего лендинга.
КОНТЕКСТ ПРОЕКТА:
- Ниша: [опиши свою нишу, например: "премиальный коучинг по финансам"]
- Продукт: [что продаешь и за сколько]
- Целевая аудитория: [кто, возраст, уровень дохода, что важно]
- Главная боль ЦА: [чего боятся, от чего хотят избавиться]
- Желаемый результат ЦА: [к чему стремятся, о чем мечтают]
ЗАДАЧИ ДИЗАЙНА:
1. Какое первое впечатление должен создать сайт за 3 секунды?
2. Какие эмоции должен вызывать: [доверие / срочность / престиж / легкость / эксклюзивность / заботу – выбери нужные]
3. Какое действие должен совершить посетитель: [оставить заявку / купить / написать в Telegram]
На основе этого контекста создай дизайн-концепцию:
ВИЗУАЛЬНЫЙ СТИЛЬ:
- Цветовая палитра (основной, акцентный, фоновый) – объясни ПОЧЕМУ эти цвета работают для этой аудитории
- Типографика (характер шрифтов: строгие/мягкие/современные) – объясни как шрифт влияет на восприятие
- Общий стиль (минимализм / насыщенный / премиум / теплый и др.)
КОМПОЗИЦИЯ HERO SECTION:
- Что слева, что справа (или по центру)
- Главный визуальный акцент
- Как расположить CTA-кнопку для максимальной заметности
ЭМОЦИОНАЛЬНАЯ КАРТА ЛЕНДИНГА:
- Блок 1 (Hero): какую эмоцию вызывает → какой визуальный прием
- Блок 2 (Проблема): какую эмоцию → прием
- Блок 3 (Решение): какую эмоцию → прием
- Блок 4 (Социальное доказательство): какую эмоцию → прием
- Блок 5 (CTA): какую эмоцию → прием
ЧИТАЕМОСТЬ:
- Контраст текста и фона (коэффициент не менее 4.5:1)
- Размеры шрифтов (заголовки, подзаголовки, основной текст)
- Длина строки (55-75 символов для комфортного чтения)
- Воздух между блоками
Теперь примени эту концепцию к моему лендингу. Работай поблочно, начиная с Hero section.
Описываете словами, что хотите. Можете добавить скриншот понравившегося сайта или картинку с нужными цветами.
Сделай корпоративный дизайн в темных тонах для B2B сервиса. Минималистичный стиль, акцентный цвет – синий. Крупные заголовки, много воздуха между блоками.
2
Скролите, ищете дизайн, который нравится
4
Загружаете скриншот в Claude Code + промпт ниже
Из этой фотки определи стилистический ключ и сделай мой лендинг в этом стиле.
Если у вас есть фирменный стиль, логотип или набор слайдов – загрузите изображения и используйте этот промпт для определения стилистического ключа:
Мысли как art-директор. Посмотри на все эти слайды одной презентации.
Твоя задача – найти ключевые, связующие вещи этой презентации:
* где верстка,
* где фирменный стиль,
* где шрифты,
* где фон,
* где композиция,
* как используются,
* какие цвета,
* какие шрифты,
* какая компоновка.
Мне нужно, чтобы ты составил карточку этого фирменного стиля полностью, как будто бы я его описание в ТЗ для дизайнера.
Не используй никакие названия цветов, используй исключительно RGB или Hex.
Не используй описание цветов, используй конкретное RGB или Hex.
Мысли как art-директор, выведи карточку этого стиля в формате XML.
⚠️
Важно: Работайте поблочно: сначала Hero section, потом следующий блок. Не меняйте текст и структуру одновременно с дизайном – делайте по одному изменению.
Шаг 4 · Визуальный контент
Создание фотографий
для сайта
⏱ ~15 мин
Claude Code умеет создавать иконки и графику, но реалистичные фото – нет. Используем метод метапромтинга.
Claude мыслит как арт-директор и предложит концепции, которые вы сами не придумаете.
🧠 Метод метапромтинга
1
Загружаете фото человека (скриншот, фото с камеры)
2
Описываете идею: тема, контекст, стиль
3
Просите Claude создать промты для генератора изображений
Создай 4 промта для генератора изображений:
- 2 промта по моей идее
- 2 промта по твоей собственной идее
Контекст: [ОПИСАНИЕ ПРОДУКТА/УСЛУГИ]
Стиль: гиперреализм, 4K, профессиональная фотография
Назначение: Hero section лендинга
Максимально продающее визуальное решение для этой услуги.
📸 Три инструмента для генерации
✨
Gemini – бесплатная генерация
Бесплатно
2
Загружаете фото человека + вставляете промт от Claude
3
Подходит для базовых задач – бесплатно
• Выбор разрешения (2K, форматы 16:9 и 9:16)
• Генерирует несколько вариантов параллельно
• Не нужно ждать – пока делается первый промт, вставляете второй и третий
AI-агент для сложных задач и генерации контента. Пакетная генерация: на один промт 2+ варианта, можно параллельно поставить 6–8 фотографий.
Настройки: Nano Banana Pro, разрешение 2K, формат 16:9 или 9:16, 2 варианта на промт.
То же, что Nano Banana Pro — только генерация фото идёт прямо из Claude Code, без переключения в браузер. Несколько моделей изображений на выбор (Soul, Flux, Seedream).
Используем только для фото — пишем в чате что нужно, фото появляются на диске.
npm i -g @higgsfield/cli
🖼 Как вставить фото в сайт
2
Перетаскиваете в чат Claude Code
3
Пишете: «Вставь это изображение как фоновую картинку для Hero section»
4
Если картинка перекрывает текст – говорите: «Текст налазит на изображение, добавь отступы»
🎬 Анимация фото через Grok
Статичные фото можно «оживить» – превратить в короткую анимацию или видео через Grok (xAI).
1
Загружаете готовое фото (сгенерированное или свое) в
Grok
2
Просите: «Анимируй это фото – плавное движение камеры, легкий параллакс»
3
Grok создает короткое видео/GIF из статичного изображения
4
Используете как фон Hero section или как элемент блока на лендинге
⚡
Лайфхак: для Hero section всегда указывайте в промте, что ключевой объект должен быть справа (слева будет текст). Для мобильной версии нужна отдельная картинка – объект по центру.
Шаг 5 · Оживляем сайт
Добавление
анимаций
⏱ ~5 мин
Находите красивую анимацию на специализированных сайтах → копируете код/промт → вставляете в Claude Code.
✨ Как добавить анимации
1
Находите красивую анимацию на сайте с коллекциями
2
Нажимаете «Copy prompt» (кнопка есть на таких платформах)
3
Вставляете промт в Claude Code: «Добавь вот эту анимацию на заглавный экран»
🎭 Примеры анимаций
🌊
Волны на фоне
Синие, сиреневые и другие цвета
📜
Анимация при скролле
Текст появляется, блоки съезжают
👀
Следит за курсором
Персонаж, который следит за мышкой
✨
Плавное появление
Элементы появляются при загрузке
📐
Bento-grid
Раскладки с анимированными карточками
Если хотите анимировать фото для Hero section – попросите Claude написать промт для Grok.
Сделай мне 3 разных промпта для оживления этого фото для Hero section сайта.
Нужно, чтобы анимация была:
– Комфортной для глаз и зацикленной
– Подходила для фонового видео на лендинге
– Не отвлекала от текста поверх нее
💡
Альтернатива без фото: если не хотите делать фотосессию, можно скопировать анимированный элемент с дизайнерских сайтов (Bento Grids, 21st.dev) через кнопку Copy Prompt и добавить его на Hero Section вместо фото.
💡
Совет: не пытайтесь с первого раза сделать идеальную анимацию. Накидывайте разные варианты, смотрите, что нравится, итерируйте.
Шаг 6 · Подключаем
Подключение ссылок
и кнопок (CTA)
⏱ ~5 мин
Подключаем Telegram, оплату и формы заявок – все через простые команды в чате.
✈️ Telegram-ссылки
Формат ссылки: t.me/никнейм
Прикрути ссылку t.me/[ВАШ_НИКНЕЙМ] ко всем кнопкам, где написано "Получить расчет в Telegram".
💳 Подключить оплату
Если у вас есть ссылка на оплату (WayForPay, LiqPay, Stripe и др.):
Когда человек нажимает кнопку "Оплатить", перенаправляй на эту ссылку: [ССЫЛКА_НА_ОПЛАТУ]
🤖 Telegram-бот для заявок
Альтернатива форме заявки: кнопка ведет в Telegram-бот → человек попадает в воронку с кнопками, оплатой. Просто и не требует базы данных.
💡
Позже можно заменить на форму сбора контактов, оплату, ссылку на запись. Сейчас важно, чтобы сайт был рабочим и люди могли связаться с вами.
Шаг 7 · Публикация
Публикация сайта
(деплой на Vercel)
⏱ ~3 мин
Три слова «Опубликуй на Vercel» – и сайт в интернете с рабочей ссылкой.
🚀 Пошаговая инструкция
1
Зайти на
vercel.com и пройти бесплатную регистрацию
2
Вернуться в Claude Code и написать: «Опубликуй на Vercel»
3
Claude попросит авторизацию → откроется браузер → логинитесь → подтверждаете
4
Claude автоматически загружает сайт и выдает готовую ссылку
5
Можете попросить поменять название: «Поменяй название сайта на [нужное]»
⚠️
Важно
Сначала доведите сайт до нужного вида локально, убедитесь что все работает, и только потом публикуйте. Так не потратите бесплатные кредиты на исправление багов.
Результат
Рабочий сайт с дизайном, фото, анимациями и интерактивом – доступный по ссылке, которой можно делиться с клиентами, друзьями и в соцсетях.
💡
Про домены: Vercel дает бесплатный субдомен (ваш-проект.vercel.app). Позже можно подключить свой домен. Подробнее – на Q&A в четверг.
Шаг 8 · Продвинутый уровень
AI-ассистент
на сайте
⏱ ~30 мин
Продвинутый уровень: добавляем на лендинг виджет с живым AI-ассистентом через Gemini API.
🤖 Как встроить AI-ассистента
Бонус
Идея
Кнопка «Протестировать бота» на сайте. Человек нажимает → вводит данные → автоматически генерируется персонализированный результат → озвучивается голосом.
Техническая реализация:
1
Claude Code пишет код виджета на сайте
2
В код вставляется API-ключ от Gemini (Google AI Studio)
3
Gemini генерирует контент на основе данных пользователя
4
Gemini Text-to-Speech озвучивает результат
5
Браузер распознает голос пользователя для интерактива
Где взять API-ключ Gemini (бесплатно):
1. Зайти на
Google AI Studio
2. Раздел Build → API Keys
3. Скопировать ключ
4. Дать ключ Claude: «Используй этот ключ Gemini для виджета»
⚠️
Важно
API-ключ в коде сайта виден всем. Для боевого сайта храните ключ в переменных среды: на Vercel это Settings → Environment Variables. Спросите у Claude, как настроить.
Next Level
Квиз-воронки:
геймифицированные лендинги
Лендинг-полотно – это 2025 год. Тренд 2026 – гиперперсонализированные квиз-воронки, где посетитель получает контент порционно, индивидуально под себя.
🎮 Что такое квиз-воронка
Вместо длинного лендинга, который нужно скроллить, посетитель проходит интерактивный опрос. Каждый ответ меняет то, что он увидит дальше. В конце – персонализированный результат и предложение.
Обычный лендинг
Одинаковый для всех посетителей.
Нужно скроллить до конца.
Человек может уйти, не дочитав.
Квиз-воронка
Персонализируется под ответы.
Порционная подача – вовлечение.
Квалифицирует лида до продажи.
🔧 Скилл Quiz Funnel
Готовый скилл, который превращает ваш ТЗ + ДНК клиента в интерактивную квиз-воронку. Устанавливается одной командой в Claude Code.
Quiz Funnel
скилл для Claude Code
github ↗
4 формата: Диагностика, Типология, Скрининг, Калькулятор-шоккер. Создаёт интерактивную квиз-воронку из ТЗ и ДНК клиента.
git clone https://github.com/yasikvlad/quiz-funnel ~/.claude/skills/quiz-funnel
1
Установите скилл командой выше (в терминале) — либо скачайте из
Каталога скиллов.
2
Перезапустите Claude Code — скилл подхватится автоматически.
3
Загрузите в чат два документа: ДНК клиента и ТЗ на лендинг.
4
Скажите: «Примени скилл Quiz Funnel. Создай интерактивную квиз-воронку на основе ДНК клиента и оффера. Задеплой на Vercel.»
🔥
Результат из практики: квиз-воронка в нише онлайн-коучинга – 2000 пользователей, среднее удержание 32 минуты. Некоторые проводили в квизе больше 2 часов. Людям неинтересно читать лендинг, но интересно узнавать про себя.
Итоги
Ключевые
инсайты
Красное и зеленое в Claude Code – просто нажимаете «Разрешить» и идете дальше.
2
Говорите как с человеком
«Подвинь картинку правее», «Сделай шрифт покрупнее», «Кнопка некрасивая, переделай».
3
Метод тыка – это нормально
Картинка налезла на текст → попросили исправить → налезла на другое → снова исправили. Так работают все.
Сначала доведите до нужного вида локально. Иначе потратите бесплатные кредиты на баги.
5
Воровать как художник – легально
Найти сайт конкурента, скопировать структуру и адаптировать под свой оффер – стандартная практика.
6
6 лендингов = $3,000 экономии
6 лендингов за 1.5 часа по рыночным ценам дизайнеров. Умножьте на свои задачи.
Практика
Задание
для внедрения №6
Не «домашка». Сделать свой лендинг и прислать ссылку в чат.
🗺 Алгоритм
1
Берете ваше ТЗ на лендинг
Загрузите текстовый прототип (HTML или Google Doc) в Claude Code. Если его нет – создайте с нуля: опишите свой продукт, аудиторию и оффер.
2
Добавляете один интерактивный элемент
Калькулятор, квиз или форма – выберите то, что подходит вашему офферу.
3
Находите референс дизайна
4
Делаете дизайн через Claude
Используйте «цифровой ключ» из референса или скилл Frontend Design.
5
Генерируете хотя бы одно фото для Hero section
6
Одна команда в Claude Code: «Задеплой на Vercel».
7
Ссылку – в чат группы
Скиньте ссылку на готовый сайт в чат AI Ковчега.
⚡ Минимум / 1–2 часа
Загрузите ТЗ в Claude Code, скажите «сделай лендинг» (без дизайна). Добавьте ссылки на Telegram. Задеплойте на Vercel.
Результат: рабочий сайт, пусть простой.
🎯 Стандарт / 2–4 часа
Полный алгоритм из 7 шагов: интерактив + дизайн по референсу + AI-фото + деплой.
Результат: лендинг, который не стыдно показать клиентам.
🚀 Максимум / 4–6 часов
Все из стандарта + анимация через
Grok + квиз-воронка через скилл Quiz Funnel + конверс-аудит.
Результат: высококонверсионный лендинг уровня 2026.
На Q&A в четверг
Разбор ваших сайтов и подробные инструкции по корректировкам с шаблонами промтов.
Полезные материалы
Чеклист перед
публикацией сайта
20 пунктов, которые нужно проверить перед деплоем. Не публикуйте сайт, пока не отмечено минимум 18 из 20 пунктов.
Проведи полный аудит моего лендинга перед публикацией.
Проверь:
1. Все ли кнопки и ссылки работают (нет ли # заглушек)
2. Нет ли Lorem ipsum и placeholder-текста
3. Есть ли CTA на каждом экране при прокрутке
4. Корректна ли мобильная версия (375px)
5. Оптимизированы ли изображения
6. Нет ли ошибок в консоли
Составь список найденных проблем и исправь все критичные.
🔗 Раздел 1. Ссылки и кнопки
Пункты 1–5 · Самые критичные – без рабочих ссылок сайт бесполезен
1
Все CTA-кнопки ведут куда надо
Нажмите каждую кнопку на странице вручную. «Записаться», «Получить разбор», «Связаться» – каждая должна открывать правильную ссылку или мессенджер.
→ Промпт: «Найди все кнопки и ссылки на сайте, которые ведут в никуда (#), и замени на t.me/ВАШ_НИК»
2
Telegram-ссылка работает корректно
Формат: t.me/никнейм – без пробелов, без @ перед именем. Проверьте, что открывается именно ваш профиль или бот.
→ Правильно: t.me/username | Неправильно: t.me/@username или telegram.me/username
3
Форма заявки отправляет данные
Если на сайте есть форма – заполните ее и отправьте тестовую заявку. Убедитесь, что данные доходят до вас (email, Telegram-бот или CRM).
→ Если форма не нужна – замените на прямую Telegram-ссылку (проще и конвертирует лучше)
4
Ссылки в навигации работают
Меню сайта: каждый пункт кликните и убедитесь, что скролл или переход происходит правильно. Якорные ссылки (#section) не должны давать 404.
5
Внешние ссылки открываются в новой вкладке
Ссылки на соцсети, партнеров, сторонние ресурсы – должны открываться в новой вкладке (target="_blank"), чтобы человек не уходил с вашего сайта.
→ Промпт: «Все внешние ссылки добавь атрибут target=_blank»
📱 Раздел 2. Мобильная версия
Пункты 6–9 · Более 60% трафика приходит с телефонов – проверьте обязательно
6
Сайт корректно открывается на телефоне
Откройте ссылку на своем телефоне. Все должно умещаться по ширине, без горизонтального скролла и вылезающих за экран элементов.
→ Промпт: «Сделай сайт полностью адаптивным. Проверь на 375px (iPhone), 768px (iPad), 1440px (десктоп)»
7
Текст читаемый – не слишком мелкий
Основной текст на мобильном должен быть не менее 16px. Заголовки – крупнее. Проверьте, не нужно ли щуриться, чтобы прочитать.
→ Промпт: «Увеличь размер шрифта на мобильных до минимум 16px для основного текста»
8
Кнопки удобно нажимать пальцем
Минимальный размер кликабельной зоны – 44×44px. Кнопки не должны быть рядом друг с другом так, чтобы можно было промахнуться.
→ Промпт: «Увеличь все кнопки до минимум 44px высоты, добавь достаточные отступы между кликабельными элементами»
9
Фото Hero Section правильно обрезается на мобильном
На телефоне фото обрезается иначе, чем на десктопе. Голова не должна быть отрезана, ключевой объект должен быть виден.
→ Промпт: «Для мобильной версии Hero Section центрируй фото по вертикали, добавь object-position: center top»
📝 Раздел 3. Тексты и контент
Пункты 10–13 · Placeholder-текст и ошибки разрушают доверие мгновенно
10
Нет Lorem Ipsum и placeholder-текстов
Проверьте каждый блок сайта на наличие тестового текста: «Lorem ipsum», «Ваш заголовок здесь», «Текст кнопки», «Имя клиента». Их быть не должно.
→ Промпт: «Найди весь placeholder-текст на сайте (Lorem ipsum, [текст], заглушки) и удали или замени»
11
Нет пустых блоков и незаполненных секций
Прокрутите весь сайт – не должно быть пустых белых или темных прямоугольников без контента. Если блок не готов – уберите его.
12
Заголовок Hero Section содержит конкретный результат
Не «Услуги по инвестированию», а «Первый зарубежный актив за 21 день». Нет слов: профессиональный, качественный, опытный, надежный.
→ Промпт: «Переписай заголовок Hero Section – добавь конкретный результат и срок, убери абстрактные прилагательные»
13
Нет орфографических ошибок в заголовках
Хотя бы заголовки, подзаголовки и текст кнопок – проверьте на опечатки. Ошибка в главном заголовке – это красный флаг для любого посетителя.
→ Промпт: «Проверь все тексты на сайте на орфографические ошибки и опечатки, исправь»
🎯 Раздел 4. Конверсия и CTA
Пункты 14–17 · Сайт должен продавать, а не просто информировать
14
На каждом экране есть призыв к действию
При прокрутке сайта – на каждом «экране» (видимой области) должна быть кнопка или ссылка для связи. Посетитель не должен искать, куда нажать.
→ Промпт: «Добавь CTA-кнопку в каждый блок сайта. Используй разные формулировки: Записаться / Получить разбор / Написать»
15
CTA-кнопки используют сильные глаголы
«Получить», «Записаться», «Считать выгоду», «Узнать стоимость» – не «Отправить», не «Ок», не «Нажми сюда».
→ Правило: кнопка описывает ЧТО получит человек, а не что он делает
16
Есть элемент доверия с конкретными цифрами
«47 закрытых сделок», «12 стран», «97% клиентов рекомендуют» – конкретные цифры. Не «большой опыт» и не «профессиональная команда».
17
Нет юридического текста под кнопками
Текст «нажимая кнопку, вы соглашаетесь с обработкой персональных данных» прямо под CTA убивает конверсию. Переместите в footer.
→ Промпт: «Перенеси весь юридический текст про ФЗ-152 и cookies в самый низ страницы»
⚡ Раздел 5. Техническое качество
Пункты 18–20 · Скорость и базовые технические требования
18
Сайт загружается за 2–3 секунды
Откройте сайт на мобильном интернете (не Wi-Fi). Если загрузка занимает дольше 3 секунд – теряете половину посетителей до того, как они что-то увидели.
→ Промпт: «Оптимизируй все изображения, переведи в WebP, добавь lazy loading для картинок ниже первого экрана»
19
Анимации не агрессивные и не мешают читать
Если добавляли анимации – проверьте, что они не отвлекают от чтения. Одна тонкая анимация при загрузке лучше десяти мигающих эффектов.
→ Промпт: «Оставь только одну анимацию появления заголовка при загрузке, все остальные анимации убери»
20
Сайт открывается без ошибок в консоли
Откройте DevTools (F12) → вкладка Console. Красных ошибок не должно быть. Желтые предупреждения допустимы, красные – надо исправлять.
→ Промпт: «Открой консоль браузера на моем сайте, найди все красные ошибки и исправь их»
⚠️
Важно: Пункты 1 (ссылки), 6 (мобайл) и 10 (Lorem Ipsum) – критичные. Если хотя бы один из них не выполнен, не публикуйте сайт вне зависимости от общего счета.
Полезные материалы
FAQ: частые ошибки
Vibe Coding
18 ошибок и как их исправить. Используйте как справочник – находите свою ситуацию и копируйте готовый промпт.
🔴 Раздел 1. Токены и лимиты
Ошибка #1 – «Вы достигли лимита. Сброс через N часов»
Claude Code останавливается и отказывается выполнять задачи. Чаще всего происходит при работе с моделью Opus на сложных задачах.
Почему: Модель Opus потребляет токены в 5–10 раз быстрее Sonnet. Токены выдаются порциями на 4-часовую сессию, а не на весь день. Несколько параллельных задач быстро опустошают запас.
✅ Решение: Подождите окончания 4-часовой сессии – лимит сбросится автоматически. В следующий раз начинайте с модели Sonnet. Разбивайте крупные задачи на несколько сессий.
💡 Модель Sonnet отлично справляется с лендингами. Opus нужен только для очень сложных структурированных задач.
Ошибка #2 – Токены заканчиваются прямо во время работы
Claude начал создавать сайт, сделал половину – и остановился на середине. Файл создан, но неполный или битый.
✅ Решение: Проверьте, что уже создано – откройте папку проекта. После сброса лимита скажите: «Продолжи с того места, где остановился» и приложите текущий файл. Следующий раз: разбивайте задачу на этапы.
💡 Перед большой задачей проверьте в Settings → Billing & Usage остаток токенов.
Ошибка #3 – Не понимаю, сколько токенов осталось
✅ Решение: Settings → Billing & Usage – там показан расход за текущую сессию. Используйте Sonnet для рутины и Opus только для финального «полировочного» прогона.
💡 Ориентир: на Sonnet один полный лендинг с интерактивом занимает примерно 20–30% четырехчасового лимита. За одну сессию можно сделать 3–4 полноценных итерации.
🟡 Раздел 2. Проблемы с Claude Code
Ошибка #4 – Claude Code не запускается или зависает при старте
✅ Решение: При первом запуске нажмите «Select Folder» и выберите папку. Перезапустите приложение полностью. Проверьте обновления. На Mac: Системные настройки → Безопасность → разрешите запуск.
💡 Создайте отдельную папку для Claude Code в Документах – например «claude-projects».
Ошибка #5 – Файл создан, но я не могу его найти
✅ Решение: Спросите Claude: «В какую папку ты сохранил файл? Дай полный путь». Попросите переместить: «Перемести все созданные файлы в папку [путь]». В следующей сессии явно укажите рабочую папку.
💡 В начале каждой сессии говорите: «Мы работаем в папке [путь]. Все файлы создавай только туда.»
Ошибка #6 – Claude делает одно и то же по кругу и не движется вперед
✅ Решение: Напишите STOP и опишите, чего именно вы хотите одним четким предложением. Попросите объяснить: «Что именно не получается?». Начните новую сессию. Используйте паттерн: «Научись делать [задача]».
💡 Если Claude завис в петле – задача слишком большая. Разбейте: сначала структура HTML, потом CSS-стили, потом JavaScript-логика.
Ошибка #7 – Claude постоянно спрашивает разрешения и тормозит работу
✅ Решение: Нажмите на кнопку разрешений → «Allow all» или «Auto-approve». Или нажмите «Yes to all» при первом запросе.
💡 Режим «Allow all» безопасен, если вы работаете в отдельной рабочей папке. Claude не может навредить другим файлам за пределами указанной директории.
Ошибка #8 – После перезагрузки ноутбука Claude не видит прошлую работу
Claude Code не хранит память между сессиями – каждая сессия начинается с нуля.
✅ Решение: Откройте New Session, выберите ту же папку. Скажите: «Изучи файлы в этой папке и расскажи, что уже сделано». Для крупных проектов создавайте файл README.md с описанием.
💡 В конце каждой сессии просите: «Напиши краткое резюме того, что мы сделали и что нужно сделать дальше». Сохраняйте в notes.md.
🟢 Раздел 3. Дизайн и генерация фото
Ошибка #9 – Сайт выглядит некрасиво / «дешево» без явного дизайна
✅ Решение: Скажите: «Примени Frontend Design Skill и переделай дизайн». Найдите красивый сайт-конкурент, дайте 3 скриншота: «Сделай дизайн в этом стиле». Опишите эмоцию: «Премиальный, черный фон, золотые акценты, минимализм».
💡 Одно слово меняет все: добавьте «премиум», «минимализм», «технологичный», «теплый» – и Claude сразу поменяет направление.
Ошибка #10 – Сгенерированное фото не похоже на меня
✅ Решение: Используйте четкое фото: хорошее освещение, лицо смотрит прямо. Переключитесь на AI Studio → Nano Banana Pro. Генерируйте 6–8 вариантов сразу. В промпт добавьте описание: цвет волос, глаз, возраст.
💡 Сделайте 5-минутную фотосессию на телефон при дневном свете. 10–15 фото дадут лучший результат, чем один скриншот видеозвонка.
Ошибка #11 – Фото обрезается или плохо вписывается в Hero Section
✅ Решение: При генерации выбирайте формат 16:9 для десктопа, 9:16 для мобильной версии. В промпте пишите: «человек расположен справа, левая треть кадра пустая для текста». Скажите Claude: «Адаптируй Hero Section – текст слева, фото справа».
💡 Генерируйте фото с «пустым пространством» для текста изначально. Это называется negative space.
Ошибка #12 – Анимации слишком агрессивные или не работают
✅ Решение: Скажите: «Оставь только одну тонкую анимацию при загрузке страницы, все остальное убери». Открывайте сайт через локальный сервер или загрузите на Vercel. Попросите использовать только CSS-анимации.
💡 Правило одной анимации: один хороший эффект работает лучше, чем десять средних. Меньше – значит профессиональнее.
Ошибка #13 – Не нравится результат, но не знаю, как объяснить что именно
✅ Решение: Найдите 3 сайта, которые нравятся, и дайте скриншоты. Используйте конкретные прилагательные: «холодные цвета», «больше воздуха», «крупнее шрифт». Скажите: «Что в этом дизайне выглядит непрофессионально? Предложи топ-3 правки».
💡 Попросите Claude сыграть роль строгого арт-директора и самому раскритиковать сделанный дизайн.
🔵 Раздел 4. Публикация и работа сайта
Ошибка #14 – Деплой на Vercel не работает / требует верификацию
✅ Решение: Зарегистрируйтесь на vercel.com заранее (через Google). Когда Claude откроет браузер – подтвердите авторизацию вручную. Если просит установить CLI – разрешите. Альтернатива: перетащите папку с файлами прямо на vercel.com.
💡 Первый деплой всегда требует ручного подтверждения. Последующие – полностью автоматические.
Ошибка #15 – Сайт открывается, но кнопки никуда не ведут
Ссылки созданы как заглушки (#) и не были заменены на реальные.
✅ Решение: Дайте Claude свою ссылку: «Все кнопки должны вести на t.me/ваш_ник». Попросите аудит: «Найди все кнопки, которые ведут в никуда, и замени». Проверьте каждую кнопку вручную.
Ошибка #16 – На телефоне сайт выглядит сломанным
✅ Решение: Скажите: «Сделай сайт полностью адаптивным для мобильных. Проверь все блоки на экране 375px». Попросите добавить viewport meta-тег. Проверьте: F12 → режим мобильного устройства.
💡 Всегда проверяйте на трех размерах: 375px (iPhone), 768px (планшет), 1440px (десктоп).
Ошибка #17 – Сайт очень долго загружается
✅ Решение: Попросите оптимизировать изображения: «Сожми все изображения, используй WebP формат». Скажите: «Проверь сайт на производительность и убери все лишнее». Добавьте lazy loading.
💡 Сайт должен загружаться за 2 секунды. Если дольше – вы теряете половину посетителей.
Ошибка #18 – Хочу свой домен, но не знаю как подключить
✅ Решение: Купите домен на reg.ru, namecheap.com или godaddy.com (от $5–15 в год). В панели Vercel: Settings → Domains → Add Domain. Vercel покажет DNS-записи – скопируйте их в настройки домена у регистратора. Подождите 15–60 минут.
💡 Для курсовых проектов домен не обязателен – ссылка на vercel.app работает отлично и бесплатно.
⚡ Быстрые решения – шпаргалка
Скопируйте нужный промпт и вставьте в Claude Code.
Завис в петле
STOP. Что конкретно не получается? Опиши проблему одним предложением, потом предложи решение.
Файл не найден
В какую папку ты сохранил последний файл? Дай полный путь до файла.
Дизайн плохой
Сыграй роль строгого арт-директора. Найди 3 главные проблемы этого дизайна и исправь их.
Не адаптивен
Сделай сайт полностью адаптивным. Проверь отображение на 375px, 768px и 1440px.
Кнопки не работают
Найди все кнопки и ссылки, которые ведут в никуда (#). Замени их на t.me/[мой ник].
Продолжить работу
Вот файл моего проекта. Изучи его и расскажи, что уже сделано и что нужно доделать.
Токены кончаются
Заверши текущую задачу минимальными изменениями. Что еще нужно доделать после сброса лимита?
Не нравится, не знаю что
Предложи мне 3 разных варианта этого блока. Каждый должен сильно отличаться по стилю.
Анимации мешают
Убери все анимации кроме одной – самой тонкой и профессиональной.
Медленная загрузка
Проверь сайт на производительность. Найди все, что замедляет загрузку, и оптимизируй.
✅ Делайте так
Начинайте с модели Sonnet – переходите на Opus только при необходимости.
Разбивайте задачи на шаги: структура → дизайн → интерактив → фото → деплой.
Давайте конкретные референсы, а не абстрактные описания.
Проверяйте результат после каждого шага, не в самом конце.
Сохраняйте README.md с историей работы.
Тестируйте сайт на мобильном до публикации.
Нажимайте каждую кнопку перед отправкой ссылки другим.
❌ Не делайте так
Не запускайте все одновременно на Opus – токены закончатся в середине работы.
Не оставляйте задачу как «сделай красивый сайт» без референса и контекста.
Не игнорируйте петлю повторений – остановитесь и переформулируйте задачу.
Не публикуйте сайт не проверив ссылки и мобильную версию.
Не ждите идеального результата с первого промпта – итерация это норма.
Не используйте Opus для простых правок стилей и текста.
Воркшоп №7
Что
дальше
На следующем воркшопе – AI-агенты: автоматизация бизнеса 24/7. Покажем, как создать AI-сотрудника с памятью и расписанием, который работает, пока вы спите.
⚡ Модуль 7 – AI-агенты: автоматизация бизнеса 24/7
🤖
OpenClaw
AI-сотрудник с памятью и расписанием. Заметки + долгосрочная память + семантический поиск.
⏰
Cron-задачи
«Каждое утро в 9:00 – сводка в Telegram». Автоматические задачи по расписанию.
🔗
25 000+ скиллов
CRM, почта, мессенджеры – подключаете к агенту готовые интеграции без программиста.
🛠 Инструменты модуля 7
OpenClaw
Claude API
OpenAI API
Telegram
Gmail
Google Drive
Fireflies
Результат модуля 7
AI-агент в Telegram + карта автоматизации + cron-задачи. Агент работает, пока ты спишь. Telegram, Gmail, CRM – без программиста.
📌 Не забудьте до четверга
1. Сделать лендинг и прислать ссылку в чат.
2. Пройтись по чеклисту перед публикацией (минимум 18 из 20 пунктов).
3. Установить скилл Quiz Funnel, если хотите попробовать квиз-воронку.
4. Вопросы → @kovcheg_support1 в Telegram.
🔑
Принцип вайб-кодинга: 1) Сделай это. 2) Если не может – научись делать это. 3) Если не может научиться – научись учиться. Трех промптов достаточно для любой задачи.