Воркшоп №6

Сайт за вечер:
дизайн, визуал, деплой

На этом воркшопе вы научитесь превращать текстовое ТЗ на лендинг в работающий сайт с дизайном, фото, анимациями – и публиковать его в интернете за один вечер.

🛠 Инструменты модуля
Claude Code Nano Banana Pro FlowWith Grok Vercel ChatGPT Google Docs
🎯 Зачем этот воркшоп

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
Ты здесь
Лендинги
7
7
Агенты
8
8
Vibe Coding

Модуль 1 – стек. Модуль 2 – мышление. Модуль 3 – ассистенты. Модуль 4 – research. Модуль 5 – маркетинг и оффер. Модуль 6 – превращаешь все это в работающий сайт за один вечер.

💡 Этот воркшоп никуда не пропадает. Возвращайся и повторяй любое упражнение пошагово. Главный принцип: не идеально → а внедрено.
Воркшоп №6

Workflow:
от HTML до сайта

Каждый шаг дает конкретный результат. Результат предыдущего шага – входные данные для следующего.

Задача
Инструмент
Результат
1
Подготовить основу
📁 HTML + Claude Code
Рабочая среда
2
Добавить интерактив
🧩 Claude Code
Калькулятор / квиз
3
Создать дизайн
🎨 Референс + Claude
Стильный лендинг
4
Сгенерировать фото
📸 Gemini / NanoBana
Уникальные изображения
5
Добавить анимации
Claude Code
Живой сайт
6
Подключить ссылки
🔗 Claude Code
Рабочие CTA
7
Опубликовать
🚀 Vercel
Сайт в интернете
OUTPUT
Ценный конечный продукт
Работающий лендинг в интернете:
• Дизайн по референсу (Behance / Dribbble)
• Интерактивные элементы (калькулятор, квиз, форма)
• AI-сгенерированные фото для Hero и блоков
• Анимации и эффекты
• Подключенные CTA (Telegram, оплата)
• Рабочая ссылка на Vercel
🛠 Инструменты
💻 Claude / Claude Code
Основной инструмент для написания кода и дизайна
Gemini / Google AI Studio
Генерация изображений, озвучка текста (Text-to-Speech)
📸 NanoBana Pro
Продвинутая генерация фотографий для сайта
🧠 Flowith
AI-агент для сложных задач и генерации контента
🚀 Vercel
Бесплатный хостинг для публикации сайта
🎨 Behance
Поиск референсов дизайна
🧩 21st.dev
Готовые UI-компоненты и анимации для копирования
📐 BentoGrids / Dribbble
Дизайн-вдохновение: 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
🧩 Промпт: Подобрать интерактив под вашу нишу
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-интерактивы
Claude Code

Если хотите добавить элементы с искусственным интеллектом – персональный анализ, AI-консультант, диагностика. Используют Gemini API (бесплатно).

Промт: AI-интерактивы для лендинга
Ты – продуктовый дизайнер и 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 понимает задачу лучше живого дизайнера. И правки можно вносить бесконечно и когда угодно.
🔧 Claude Code 🔧 Behance 🔧 Dribbble 🔧 BentoGrids 🔧 SlidesGo
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
Референс → Цифровой ключ рекомендуем
Найдите дизайн, который нравится, на Dribbble, Behance или Bento Grids. Сделайте скриншот и скормите Claude с промптом ниже.
3
Готовые промпты с дизайнерских сайтов
На сайтах типа Bento Grids и 21st.dev есть кнопка Copy Prompt – скопируйте и вставьте в Claude Code.
4
Свой брендбук
Загрузите фирменный стиль, логотип или слайды – Claude извлечет «цифровой ключ» и применит к лендингу.
5
Стырить готовые компоненты и блоки конструктор
Не делайте с нуля — берите готовые карточки, анимации, 3D-сцены, иконки. Это не референс, а реальные компоненты, которые вставляются в лендинг как есть. Скажите Claude: «Возьми компонент с {ссылка} и встрой в мой лендинг».
⚡ Компоненты и UI-киты
🤖 AI-конструкторы дизайна
✨ Вдохновение и каталоги
📦 Библиотеки (установить локально)
JS-библиотека анимаций для лендингов (плавные переходы, скролл-анимации, жесты).
npm install motion
📋 Промпты под каждый способ
🎯 Метапромпт: Дизайн под вашу нишу и аудиторию
Claude Code

Этот промпт создаст вам персональное ТЗ на дизайн – с учетом вашей ниши, целевой аудитории, задач и эмоций, которые должен вызывать сайт.

Метапромт: Создание дизайн-концепции
Ты – арт-директор с 15-летним опытом в digital-дизайне. Создай детальную дизайн-концепцию для моего лендинга. КОНТЕКСТ ПРОЕКТА: - Ниша: [опиши свою нишу, например: "премиальный коучинг по финансам"] - Продукт: [что продаешь и за сколько] - Целевая аудитория: [кто, возраст, уровень дохода, что важно] - Главная боль ЦА: [чего боятся, от чего хотят избавиться] - Желаемый результат ЦА: [к чему стремятся, о чем мечтают] ЗАДАЧИ ДИЗАЙНА: 1. Какое первое впечатление должен создать сайт за 3 секунды? 2. Какие эмоции должен вызывать: [доверие / срочность / престиж / легкость / эксклюзивность / заботу – выбери нужные] 3. Какое действие должен совершить посетитель: [оставить заявку / купить / написать в Telegram] На основе этого контекста создай дизайн-концепцию: ВИЗУАЛЬНЫЙ СТИЛЬ: - Цветовая палитра (основной, акцентный, фоновый) – объясни ПОЧЕМУ эти цвета работают для этой аудитории - Типографика (характер шрифтов: строгие/мягкие/современные) – объясни как шрифт влияет на восприятие - Общий стиль (минимализм / насыщенный / премиум / теплый и др.) КОМПОЗИЦИЯ HERO SECTION: - Что слева, что справа (или по центру) - Главный визуальный акцент - Как расположить CTA-кнопку для максимальной заметности ЭМОЦИОНАЛЬНАЯ КАРТА ЛЕНДИНГА: - Блок 1 (Hero): какую эмоцию вызывает → какой визуальный прием - Блок 2 (Проблема): какую эмоцию → прием - Блок 3 (Решение): какую эмоцию → прием - Блок 4 (Социальное доказательство): какую эмоцию → прием - Блок 5 (CTA): какую эмоцию → прием ЧИТАЕМОСТЬ: - Контраст текста и фона (коэффициент не менее 4.5:1) - Размеры шрифтов (заголовки, подзаголовки, основной текст) - Длина строки (55-75 символов для комфортного чтения) - Воздух между блоками Теперь примени эту концепцию к моему лендингу. Работай поблочно, начиная с Hero section.
💬 Путь 1: Просто описать словами
Claude Code

Описываете словами, что хотите. Можете добавить скриншот понравившегося сайта или картинку с нужными цветами.

Пример промта
Сделай корпоративный дизайн в темных тонах для B2B сервиса. Минималистичный стиль, акцентный цвет – синий. Крупные заголовки, много воздуха между блоками.
🎨 Путь 2: Найти референс Рекомендуемый
Claude Code
1
Идете на Behance, Dribbble или SlidesGo
2
Скролите, ищете дизайн, который нравится
3
Делаете скриншот
4
Загружаете скриншот в Claude Code + промпт ниже
Промт: Дизайн по референсу
Из этой фотки определи стилистический ключ и сделай мой лендинг в этом стиле.
📋 Путь 3: По брендбуку / слайдам
Claude Code

Если у вас есть фирменный стиль, логотип или набор слайдов – загрузите изображения и используйте этот промпт для определения стилистического ключа:

Промт: Определение стилистического ключа
Мысли как art-директор. Посмотри на все эти слайды одной презентации. Твоя задача – найти ключевые, связующие вещи этой презентации: * где верстка, * где фирменный стиль, * где шрифты, * где фон, * где композиция, * как используются, * какие цвета, * какие шрифты, * какая компоновка. Мне нужно, чтобы ты составил карточку этого фирменного стиля полностью, как будто бы я его описание в ТЗ для дизайнера. Не используй никакие названия цветов, используй исключительно RGB или Hex. Не используй описание цветов, используй конкретное RGB или Hex. Мысли как art-директор, выведи карточку этого стиля в формате XML.
⚠️ Важно: Работайте поблочно: сначала Hero section, потом следующий блок. Не меняйте текст и структуру одновременно с дизайном – делайте по одному изменению.
Шаг 4 · Визуальный контент

Создание фотографий
для сайта

⏱ ~15 мин

Claude Code умеет создавать иконки и графику, но реалистичные фото – нет. Используем метод метапромтинга.

Claude мыслит как арт-директор и предложит концепции, которые вы сами не придумаете.
🧠 Claude 🔧 Google AI Studio 🔧 NanoBana Pro ⚡ Higgsfield
🧠 Метод метапромтинга
1
Загружаете фото человека (скриншот, фото с камеры)
2
Описываете идею: тема, контекст, стиль
3
Просите Claude создать промты для генератора изображений
4
Копируете промты в Gemini или NanoBana Pro
📋 Промпт: Метапромтинг для фото
Claude
Промт: Метапромтинг для фото
Создай 4 промта для генератора изображений: - 2 промта по моей идее - 2 промта по твоей собственной идее Контекст: [ОПИСАНИЕ ПРОДУКТА/УСЛУГИ] Стиль: гиперреализм, 4K, профессиональная фотография Назначение: Hero section лендинга Максимально продающее визуальное решение для этой услуги.
📸 Три инструмента для генерации
Gemini – бесплатная генерация
Бесплатно
1
Заходите в Google AI Studio → инструмент «Создание изображений»
2
Загружаете фото человека + вставляете промт от Claude
3
Подходит для базовых задач – бесплатно
📸 NanoBana Pro – продвинутый уровень
$300 бесплатно

• Выбор разрешения (2K, форматы 16:9 и 9:16)

• Генерирует несколько вариантов параллельно

• Не нужно ждать – пока делается первый промт, вставляете второй и третий

Рекомендуем

AI-агент для сложных задач и генерации контента. Пакетная генерация: на один промт 2+ варианта, можно параллельно поставить 6–8 фотографий.

Настройки: Nano Banana Pro, разрешение 2K, формат 16:9 или 9:16, 2 варианта на промт.

Higgsfield — фото из терминала
CLI / MCP

То же, что Nano Banana Pro — только генерация фото идёт прямо из Claude Code, без переключения в браузер. Несколько моделей изображений на выбор (Soul, Flux, Seedream).

Используем только для фото — пишем в чате что нужно, фото появляются на диске.

npm i -g @higgsfield/cli
🖼 Как вставить фото в сайт
1
Скачиваете нужное фото
2
Перетаскиваете в чат Claude Code
3
Пишете: «Вставь это изображение как фоновую картинку для Hero section»
4
Если картинка перекрывает текст – говорите: «Текст налазит на изображение, добавь отступы»
🎬 Анимация фото через Grok

Статичные фото можно «оживить» – превратить в короткую анимацию или видео через Grok (xAI).

1
Загружаете готовое фото (сгенерированное или свое) в Grok
2
Просите: «Анимируй это фото – плавное движение камеры, легкий параллакс»
3
Grok создает короткое видео/GIF из статичного изображения
4
Используете как фон Hero section или как элемент блока на лендинге
🎬 Grok (xAI) ↗
Лайфхак: для Hero section всегда указывайте в промте, что ключевой объект должен быть справа (слева будет текст). Для мобильной версии нужна отдельная картинка – объект по центру.
Шаг 5 · Оживляем сайт

Добавление
анимаций

⏱ ~5 мин

Находите красивую анимацию на специализированных сайтах → копируете код/промт → вставляете в Claude Code.

🔧 Claude Code 🔧 21st.dev 🔧 SuperDesign
✨ Как добавить анимации
1
Находите красивую анимацию на сайте с коллекциями
2
Нажимаете «Copy prompt» (кнопка есть на таких платформах)
3
Вставляете промт в Claude Code: «Добавь вот эту анимацию на заглавный экран»
🎭 Примеры анимаций
🌊
Волны на фоне
Синие, сиреневые и другие цвета
📜
Анимация при скролле
Текст появляется, блоки съезжают
👀
Следит за курсором
Персонаж, который следит за мышкой
Плавное появление
Элементы появляются при загрузке
📐
Bento-grid
Раскладки с анимированными карточками
✨ 21st.dev – компоненты ↗ 🎯 SuperDesign ↗
📋 Промпт: ТЗ на анимацию для Hero section
Claude Code

Если хотите анимировать фото для Hero section – попросите Claude написать промт для Grok.

Промт: Анимация для Hero section
Сделай мне 3 разных промпта для оживления этого фото для Hero section сайта. Нужно, чтобы анимация была: – Комфортной для глаз и зацикленной – Подходила для фонового видео на лендинге – Не отвлекала от текста поверх нее
💡 Альтернатива без фото: если не хотите делать фотосессию, можно скопировать анимированный элемент с дизайнерских сайтов (Bento Grids, 21st.dev) через кнопку Copy Prompt и добавить его на Hero Section вместо фото.
💡 Совет: не пытайтесь с первого раза сделать идеальную анимацию. Накидывайте разные варианты, смотрите, что нравится, итерируйте.
Шаг 7 · Публикация

Публикация сайта
(деплой на Vercel)

⏱ ~3 мин

Три слова «Опубликуй на Vercel» – и сайт в интернете с рабочей ссылкой.

🔧 Vercel
🚀 Пошаговая инструкция
1
Зайти на vercel.com и пройти бесплатную регистрацию
2
Вернуться в Claude Code и написать: «Опубликуй на Vercel»
3
Claude попросит авторизацию → откроется браузер → логинитесь → подтверждаете
4
Claude автоматически загружает сайт и выдает готовую ссылку
5
Можете попросить поменять название: «Поменяй название сайта на [нужное]»
🚀 Vercel (бесплатно) ↗ 🌐 Netlify (альтернатива) ↗
⚠️
Важно
Сначала доведите сайт до нужного вида локально, убедитесь что все работает, и только потом публикуйте. Так не потратите бесплатные кредиты на исправление багов.
Результат
Рабочий сайт с дизайном, фото, анимациями и интерактивом – доступный по ссылке, которой можно делиться с клиентами, друзьями и в соцсетях.
💡 Про домены: Vercel дает бесплатный субдомен (ваш-проект.vercel.app). Позже можно подключить свой домен. Подробнее – на Q&A в четверг.
Шаг 8 · Продвинутый уровень

AI-ассистент
на сайте

⏱ ~30 мин

Продвинутый уровень: добавляем на лендинг виджет с живым AI-ассистентом через Gemini API.

🔧 Claude Code 🔧 Google AI Studio
🤖 Как встроить 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 часов. Людям неинтересно читать лендинг, но интересно узнавать про себя.
Итоги

Ключевые
инсайты

1
Не нужно читать код
Красное и зеленое в Claude Code – просто нажимаете «Разрешить» и идете дальше.
2
Говорите как с человеком
«Подвинь картинку правее», «Сделай шрифт покрупнее», «Кнопка некрасивая, переделай».
3
Метод тыка – это нормально
Картинка налезла на текст → попросили исправить → налезла на другое → снова исправили. Так работают все.
4
Не деплойте сырой сайт
Сначала доведите до нужного вида локально. Иначе потратите бесплатные кредиты на баги.
5
Воровать как художник – легально
Найти сайт конкурента, скопировать структуру и адаптировать под свой оффер – стандартная практика.
6
6 лендингов = $3,000 экономии
6 лендингов за 1.5 часа по рыночным ценам дизайнеров. Умножьте на свои задачи.
Практика

Задание
для внедрения №6

Не «домашка». Сделать свой лендинг и прислать ссылку в чат.

🗺 Алгоритм
1
Берете ваше ТЗ на лендинг
Загрузите текстовый прототип (HTML или Google Doc) в Claude Code. Если его нет – создайте с нуля: опишите свой продукт, аудиторию и оффер.
2
Добавляете один интерактивный элемент
Калькулятор, квиз или форма – выберите то, что подходит вашему офферу.
3
Находите референс дизайна
На Dribbble или Behance – найдите стиль, который вам нравится.
4
Делаете дизайн через Claude
Используйте «цифровой ключ» из референса или скилл Frontend Design.
5
Генерируете хотя бы одно фото для Hero section
Gemini (бесплатно), AI Studio (Nano Banana Pro) или FlowWith – любой из трех способов.
6
Публикуете на Vercel
Одна команда в 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 пунктов.

🤖 Промпт для быстрого аудита перед деплоем
Claude Code
Промт: Аудит перед деплоем
Проведи полный аудит моего лендинга перед публикацией. Проверь: 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. Красных ошибок не должно быть. Желтые предупреждения допустимы, красные – надо исправлять.
→ Промпт: «Открой консоль браузера на моем сайте, найди все красные ошибки и исправь их»
18–20 ✅
Готово к деплою
14–17 🟡
Почти готово
10–13 🟠
Нужна доработка
< 10 🔴
Не публиковать
⚠️ Важно: Пункты 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) Если не может научиться – научись учиться. Трех промптов достаточно для любой задачи.