Конспект – Воркшоп 3

Воркшоп 3 · Вайбкодинг — Конспект

01 · Вводная

Что заберёте сегодня

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

шагов создания любого продукта

практики с нарастающей сложностью

видов интерактивных элементов

∞

артефактов — теперь сами

✅

Чек-лист воркшопа — отмечайте по ходу

0 / 7

Настроил помощника-наставника в Claude

Написал вайб-бриф и получил первую версию артефакта

Добавил интерактивность — шаги 4 и 5

Добавил картинки через imgbb.com или base64

Опубликовал артефакт — получил ссылку

Проверил страницу с телефона и компьютера

Понимаю что делать дальше и куда идти за помощью

🤖

Помощник-наставник — остаётся с вами

После воркшопа у вас в проекте Claude будет личный помощник который знает 6 шагов, умеет задавать правильные вопросы и ведёт пошагово — даже если вы забудете всё что было сегодня. Файлы помощника и все инструкции — здесь →

02 · Определение

Что такое вайбкодинг

Вы описываете что хотите словами — и получаете рабочий интерактивный html-файл. Не текст, а живой артефакт: кнопки нажимаются, данные считаются, страница выглядит как страница.

«Вайб — это не случайно. Вы не пишете техзадание. Вы передаёте ощущение. "Сделай тёплый минималистичный трекер привычек" — и Claude сам выбирает цвета, шрифты, структуру.»

✍️

Вы управляете результатом

Не кодом. Описываете что хотите — Claude пишет код сам. Ваша задача — описать достаточно точно чтобы получить то что нужно.

⚡

Живой артефакт за минуты

Один промпт — рабочая страница. Потом итерации: что-то не так — говорите Claude что именно изменить. Не с нуля — точечно.

Свобода без структуры — это застревание

Если не понимать из чего состоит то что вы строите — будете блуждать. Именно здесь помогают 6 шагов →

🔮

Что можно делать с вайбкодингом

Конспекты и воркбуки · Лендинги экспертов · Трекеры привычек · Игры и квизы · Интерактивные гайды · Персональные инструменты · Платформы с базой данных (следующий уровень)

03 · Каркас

6 шагов создания продукта

Каждый продукт проходит через эти шаги. Каждый шаг — вопрос на который нужно ответить прежде чем двигаться дальше.

Для кого и зачем Практика 1

Кто пользователь и что он должен сделать?

Содержание Практика 1

Что именно внутри — тексты, данные, вопросы?

Оформление Практика 1

Как это выглядит и ощущается? С каких устройств откроют?

Интерактивность Практика 2

Что пользователь делает, а не только смотрит?

Данные Практика 2

Нужно ли что-то сохранять? Закроет вкладку — что должно остаться?

Размещение Практика 3

Кто и как откроет это? Ссылкой, файлом, на сайте?

💡

Шаг 5 часто не нужен

Большинству артефактов хранение не нужно — данные живут пока открыта вкладка. Лендинг — не нужно. Трекер привычек — нужно. Пропускайте шаг 5 осознанно, а не случайно.

04 · Демонстрация

Один промпт — живой артефакт

Смотрите как это работает прямо сейчас — один запрос, 90 секунд, рабочая страница.

Шаг1

Пишем промпт

«Сделай интерактивный чеклист для утреннего ритуала: 5 привычек, прогресс-бар вверху, минималистичный тёплый дизайн»

Шаг2

Видим результат

Claude генерирует живую страницу. Кнопки нажимаются, прогресс считается.

Шаг3

Переключаем в код

Кнопка </> в правом углу артефакта. За красивой страницей — HTML, CSS, JavaScript. Claude написал это сам по одному предложению. Вы этого не писали — и не должны были.

Код существует — но управляете вы

Когда будете публиковать на сайте — возьмёте именно этот файл. Об этом в третьей практике.

05 · Насмотренность

Учимся замечать элементы

Хороший артефакт — это набор элементов с понятной логикой. Тренируем глаз: не «что написано», а «из чего построено».

Иерархия заголовков

H1 — тема, H2 — блок, H3 — подпункт. Читатель ориентируется без чтения — видит структуру за секунду.

Выделение ключевого

Цветная полоса слева, фоновый блок, жирный текст. Принцип: «прочитать» за 10 секунд не читая весь текст.

Блок определения

Всегда одна структура: термин → что это → пример. Не менять порядок.

Итог в конце

3–5 пунктов. Главное — если нет времени читать всё.

Вопрос-приглашение

Не «Задание: напишите…», а «Когда ты последний раз…» или «Что было бы важным для тебя…». Открытый, без правильного ответа.

Пространство для ответа

Поле для ввода — человек видит куда писать. Высота поля подсказывает сколько писать.

Теория → задание → рефлексия

Трёхшаговая структура каждого блока. Теория — только то что нужно для ответа на вопрос.

Поддерживающий тон

Не тест. «Нет правильного ответа», «Пиши первое что приходит», «Это только для тебя».

Одно главное действие

Трекер не для чтения — для ежедневного использования. Одно нажатие — один результат. Минимум текста.

Мгновенная обратная связь

Нажал галочку — что-то изменилось. Прогресс-бар, цвет, анимация. Человек видит что действие засчитано.

Визуализация прогресса

Тепловая карта по дням, счётчик серий (streak), процент выполнения. Мотивирует продолжать.

«Claude умеет собрать всё это. Ваша задача — уметь это назвать.»

06 · Практика

Практика 1 · Шаги 1–3

Для кого, содержание, оформление. Задача — получить что-то живое которое выглядит как нужно и устроено как нужно.

Вайб-бриф — 6 вопросов по 6 шагам

Для кого и зачем

Конкретный человек — кто откроет это и что должен сделать?

Содержание

Что внутри — тексты, данные, вопросы? Одним предложением, как другу.

Оформление

Опиши словами: тон, стиль, настроение. Или прикрепи дизайн-кит.

Интерактивность

Одно главное действие пользователя — что он делает?

Данные

Закроет вкладку — что должно остаться? (Часто: «ничего» — это ок.)

Размещение

Кто откроет это и как — ссылкой, файлом, на сайте?

Три вопроса для проверки первой версии

После генерации

Попадает в цель пользователя?

Тот ли это человек который откроет? Сможет ли он сделать то ради чего пришёл?

Структура читается, содержание понятно?

Понятно ли с первого взгляда что где. Не пропущено ли главное, нет ли лишнего.

Оформление соответствует пожеланиям?

Тон, стиль, ощущение — то что хотели передать? Если на любой вопрос «нет» — это тема для следующей итерации.

📋 Первый промпт

Помоги мне сделать [лендинг / конспект / трекер / игру] по инструкции в проекте. Мой бриф: — Для кого: ... — Содержание: ... — Тон и оформление: ... Цель: получить что-то живое — выглядит как нужно и устроено как нужно.

✨ Промпты для практики 1

Отдаёте первую версию и просите Claude сыграть роль придирчивого незнакомца. Помогает сразу после генерации — до того как начать итерировать вслепую.

Ты — [целевой пользователь, например: «эксперт-психолог которая видит эту страницу впервые»]. Ты ничего не знаешь об авторе, ты просто зашла по ссылке. Посмотри на страницу и честно ответь: 1. Что ты поняла за первые 5 секунд? 2. Что осталось непонятным? 3. Что вызвало сомнение или недоверие? 4. Что хотела бы найти но не нашла? 5. Нажала бы на главную кнопку — почему да или нет? Будь честной и конкретной. Не хвали — ищи слабые места.

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

Посмотри на эту страницу взглядом дизайнера с насмотренностью. Она выглядит слишком шаблонно — как типичный AI-сайт. Переосмысли визуальный язык: — выбери нестандартное сочетание шрифтов (не Inter, не Roboto) — добавь один сильный визуальный приём: большой контрастный заголовок, неожиданный акцентный цвет, асимметричный лейаут или декоративный элемент — сохрани всё содержимое и структуру — меняем только оформление Хочу чтобы страница запоминалась. Сделай что-то чего я не ожидаю.

Оценка от лица конкретного пользователя по пяти критериям. На выходе — три правки с максимальным эффектом.

Проведи UX-аудит этой страницы. Представь что ты — [целевой пользователь, например: «эксперт-психолог которая видит лендинг впервые»]. Оцени по пяти критериям: 1. Ясность — понятно ли с первого экрана что здесь предлагают? 2. Доверие — вызывает ли страница доверие или есть что-то что отталкивает? 3. Действие — легко ли найти и нажать главную кнопку? 4. Читаемость — комфортно ли читать на телефоне и компьютере? 5. Ощущение — соответствует ли визуал заявленному тону? Для каждого критерия: оценка 1–5, что не так, как исправить. Закончи списком трёх правок которые дадут максимальный эффект.

07 · Итерация

Как работать с результатом

Первая версия всегда немного кривая — это нормально. Вот как двигаться дальше в четырёх ситуациях.

Не переписывайте с нуля. Задайте себе три вопроса по одному: попадает в цель пользователя? Структура понятна? Оформление то что нужно? На первом «нет» — нашли точку входа.

Говорите Claude именно это — одно конкретное изменение.

Покажите что именно — элемент, секцию, деталь. Или пришлите скриншот помощнику — он скажет что изменить.

Пример промпта

Заголовок слишком формальный — сделай теплее и живее. Остальное не трогай.

Пришлите скриншот помощнику. Он сам посмотрит и скажет что именно стоит изменить — объяснит простыми словами, не техническими терминами.

Одно добавление за раз. Уточните: что это даст пользователю чего сейчас нет? Если добавление сложное — Claude предупредит.

Пример промпта

Добавь в конец кнопку «Перейти к следующему уроку» — она ведёт на [ссылка]. Стиль кнопки как у остальных.

Итерация точечно — всегда быстрее чем с нуля

Разница между «переписать всё» и «довернуть» — разница между часом и двумя минутами.

08 · Практика

Практика 2 · Шаги 4–5

Делаем продукт живым — добавляем интерактивность и решаем нужно ли хранить данные.

Виды интерактивов

☑️

Чеклист с прогресс-баром

Галочки на пунктах, прогресс обновляется. Для списков задач, привычек, шагов процесса.

Часто используется

📂

Аккордеон

Блоки раскрываются по клику. Для FAQ, длинных объяснений, когда контента много.

🃏

Карточки с переворотом

Вопрос / ответ. Для терминов, обучающих пар, проверки себя.

📝

Поля для ответов

Ввод текста с сохранением в браузере. Для воркбуков, дневников, рефлексии.

Сохраняется

🗓

Тепловая карта

Сетка дней — ячейки окрашиваются при отметке. Для трекеров привычек.

Сохраняется

🎯

Квиз с результатом

Вопросы с вариантами, мгновенная обратная связь, итог в конце.

Хранение данных — просто

ВариантЧто значитКогда нужно Ничего не сохранятьРаботает пока вкладка открытаКвизы, калькуляторы, просмотр localStorageОстаётся в этом браузере на этом устройствеТрекеры, воркбуки с ответами База данныхДоступно с любого устройства, личные кабинетыСледующий уровень →

📋 Промпты для лайфхаков

Кликабельная ссылка: «Сделай слово [текст] кликабельной ссылкой на [адрес]» Плавный скролл к секции: «Добавь навигацию — при клике плавная прокрутка к секции [название]» Кнопка открывает форму: «При нажатии на кнопку появляется форма с полями [перечислить]» Подравнять элемент: «Выровняй по центру / добавь отступ 24px сверху / увеличь шрифт» Кнопка перехода к следующему уроку: «Добавь кнопку "Следующий урок" в конце — ведёт на [ссылка]»

✨ Промпты для практики 2

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

Я хочу чтобы пользователь мог [описать действие одним предложением]. Предложи три варианта как это можно реализовать: — Вариант А: простой (минимум кода, легко поддерживать) — Вариант Б: средний (чуть сложнее но лучше выглядит) — Вариант В: продвинутый (максимально удобно для пользователя) Для каждого варианта: — одним предложением как это работает — плюсы и минусы — мини-демо прямо здесь (рабочий HTML-фрагмент) Я выберу один и ты встроишь его в мой артефакт.

Три варианта хранения — Claude объясняет что подходит вашей задаче и сразу реализует. Включая отправку в Google-таблицу.

Мне нужно чтобы данные которые вводит пользователь сохранялись. Объясни просто какой вариант подходит моей задаче: А) localStorage — остаётся в браузере на этом устройстве Подходит если: трекер для себя, воркбук с личными ответами Б) Кнопка «Скачать мои ответы» — выгружает в текстовый файл Подходит если: хочу отправить результат себе или куратору В) Отправка в Google-таблицу через webhook Подходит если: нужно собирать данные от разных людей Моя задача: [опиши одним предложением что должно происходить с данными] Выбери подходящий вариант и реализуй его в моём артефакте.

Берёт скучный список или абзац и предлагает три варианта как превратить его в интерактивный элемент — с мини-демо на вашем реальном контенте.

Вот мой текстовый блок: [вставить список или абзац] Предложи три варианта как сделать его интерактивным: — Вариант А: аккордеон (пункты раскрываются по клику) — Вариант Б: карточки с переворотом (тезис / пояснение) — Вариант В: табы (содержимое переключается по категориям) Для каждого покажи мини-демо с моим реальным контентом. Я выберу и ты встроишь в артефакт.

Карточки поднимаются при наведении, кнопки тактильно нажимаются, секции появляются при скролле. Только CSS — никаких библиотек, файл не тяжелеет.

Добавь микроанимации которые сделают страницу живой и тактильной. Только CSS — никаких библиотек. Что именно: — карточки: плавное поднятие при наведении (translateY -4px, shadow усиливается) — кнопки: лёгкое нажатие при клике (scale 0.97, 100ms) — заголовок и первый абзац: плавное появление при загрузке (fade + slideUp, 0.6s) — секции: появление при скролле (intersection observer, opacity 0→1 + translateY 20px→0) Анимации должны быть едва заметными — создавать ощущение качества, а не отвлекать. Если элемент уже анимирован — не трогай.

09 · Медиа

Добавляем картинки

Три способа добавить фотографии в артефакт — выбирайте по ситуации.

📁

Файлы рядом

HTML и картинки в одной папке. Только у вас — другие не увидят.

Только локально

🧩

Встроить через base64

Картинка внутри кода. Везде работает без интернета. Файл тяжёлый — Tilda может не принять.

Команда Claude

imgbb.com

Загружаете картинки, копируете ссылки — вставляете в код. Файл лёгкий, Tilda довольна.

2+ картинки

Как загрузить на imgbb.com — пошагово

3 минуты

Шаг1

Открой imgbb.com

Сайт на английском — если что-то непонятно, пришли скриншот помощнику, он покажет где нажать.

Шаг2

Загрузи картинки

Кнопка «Start uploading» — можно сразу несколько. Они загрузятся и появятся превью.

Шаг3

Скопируй прямые ссылки

«Direct link» — ссылка заканчивается на .jpg или .png. Это прямая ссылка на картинку.

Шаг4

Скажи Claude

«Вставь фото по этой ссылке в секцию "Обо мне", по центру, ширина 300px» — и готово.

📋 Промпты для работы с картинками

Встроить через base64 (1–2 картинки): «Встрой эту картинку прямо в код через base64» (прикрепить картинку к сообщению) Вставить по ссылке: «Вставь фото по этой ссылке: [ссылка с imgbb.com] В секцию "Обо мне", по центру, ширина 300px, скруглённые углы» Подравнять картинку: «Сделай картинку круглой» «Выровняй по центру» «Ограничь ширину 400px, сохрани пропорции» «Сделай картинку фоном секции с тёмным оверлеем» Tilda не принимает (файл тяжёлый): «Замени все встроенные base64-картинки на внешние ссылки. Вот ссылки: [список ссылок с imgbb.com]»

10 · Практика 3

Размещаем — артефакт выходит в мир

Три способа опубликовать страницу. Выбирайте по ситуации.

Кнопка «Скачать» в правом углу артефакта → файл .html на компьютер → отправить в Telegram или на почту. Получатель открывает в браузере — всё работает. Никакой регистрации.

💡

Быстро показать кому-то прямо сейчас — этот способ. Не нужны ни аккаунты, ни подписки.

Создать страницу → добавить блок HTML → вставить весь код → опубликовать. Ссылка вида yourname.tilda.ws.

Шаг1

Скачай HTML из Claude

Кнопка скачать в правом углу артефакта.

Шаг2

Открой файл в Блокноте

Правая кнопка на файле → «Открыть с помощью» → Блокнот (Windows) или TextEdit (Mac). Выдели всё Ctrl+A → скопируй Ctrl+C.

Шаг3

Вставь в Tilda

Создать страницу → добавить блок HTML → вставить код → Сохранить.

Шаг4

Опубликовать

Кнопка «Опубликовать страницу» → получить ссылку.

⚠️

Если Tilda не принимает код

Лимит ~500 КБ на блок. Скажите Claude: «Раздели код на 3 части как отдельные HTML-блоки для Tilda» — и вставьте каждую часть в отдельный блок.

Ссылка вида ваш-ник.github.io/название. Бесплатно, без рекламы, навсегда. Интерфейс на английском — если что непонятно, пришлите скриншот помощнику, он покажет где нажать.

Шаг1

Зайди на github.com

Если нет аккаунта — Sign up (займёт 2 минуты).

Шаг2

Создай репозиторий (папку)

Нажми + → New repository → придумай название латиницей без пробелов → Public → Create.

Шаг3

Загрузи файл

«uploading an existing file» → перетащи HTML. Переименуй в index.html → Commit changes.

Шаг4

Включи Pages

Settings → Pages → Deploy from branch → main → / (root) → Save.

Шаг5

Подожди 1–2 минуты

Обнови страницу — появится зелёный блок с вашей ссылкой. Готово!

Проверь после публикации

Всегда

💻 Компьютер

Страница открывается
Кнопки кликабельны
Картинки загружаются
Скролл плавный

📱 Телефон

Текст без горизонтального скролла
Кнопки удобно нажимать
Блоки не обрезаются
Картинки не выходят за экран

📸

Нашли проблему?

Скриншот → помощнику в Claude. Он скажет что именно не так простыми словами и даст промпт для исправления.

✨ Промпты для практики 3

Claude проверяет вес кода, находит base64-картинки и делит на блоки если нужно — всё перед вставкой в Tilda.

Мне нужно вставить этот код в Tilda через HTML-блок. Лимит Tilda — ~500 КБ на блок. Подготовь код к вставке: 1. Проверь есть ли base64-картинки — если да, скажи что их нужно вынести на imgbb.com и дай инструкцию 2. Оцени примерный размер кода 3. Если код больше 400 КБ — раздели на части, каждая часть как отдельный HTML-блок, части должны визуально стыковаться без швов 4. Убери всё лишнее что не влияет на отображение В конце скажи: вставлять одним блоком или несколькими, и в каком порядке.

Отдельный прогон только по мобильной версии — Claude находит и сразу исправляет все проблемы с телефонным отображением.

Проверь этот артефакт только с точки зрения телефона. Представь экран шириной 375px (iPhone). Найди и исправь все проблемы: — текст который вылезает за край или требует горизонтального скролла — кнопки меньше 44px по высоте (неудобно нажимать пальцем) — картинки которые выходят за экран — блоки с фиксированной шириной в пикселях вместо процентов — шрифт меньше 14px (плохо читается на телефоне) — элементы которые на десктопе в ряд, а на телефоне должны быть в колонку Исправь всё найденное. Десктопную версию не трогай.

Комплексная проверка по пяти критериям — как автоматический чеклист перед тем как отправить ссылку людям.

Это финальная версия моего артефакта перед публикацией. Проведи полный аудит по пяти критериям: 1. СКОРОСТЬ — нет ли тяжёлых элементов которые будут долго грузиться? (base64 картинки больше 100КБ, неоптимизированный код) 2. АДАПТИВ — корректно ли выглядит на телефоне, планшете, десктопе? Назови конкретные проблемы если есть. 3. UX — понятно ли с первого взгляда что делать? Есть ли «тупики» где пользователь застрянет? 4. КОНТЕНТ — нет ли заглушек [вставить текст], незаполненных мест, лишних элементов? 5. ССЫЛКИ И КНОПКИ — все ли ссылки рабочие? Все ли кнопки что-то делают? По каждому критерию: статус (✅ ок / ⚠️ есть замечания) + что исправить. В конце — список правок по приоритету: обязательно / желательно / потом.

11 · Следующий уровень

Когда нужна база данных

Всё что мы делали сегодня — это фронтенд. Красиво, живо, интерактивно — но данные хранятся у вас в браузере и доступны только вам.

✅

Что работает без базы

Лендинг — страница о себе
Конспект, гайд, воркбук
Трекер (данные на вашем устройстве)
Игра и квиз

🔑

Когда нужна база

Личный кабинет пользователя
Несколько пользователей видят своё
Данные доступны с любого устройства
Платформа для других людей

Один лендинг — сделаешь сам
Сложная архитектура — с техническим специалистом

Это не ограничение — это честная карта. Платформа это отдельный проект и отдельная задача.

🚀

Сервисы для старта если хотите попробовать

Supabase (бесплатно, хорошая документация), Firebase, Airtable для простых данных. Попросите Claude: «Помоги подключить Supabase к моему артефакту» — и он проведёт пошагово. Но сначала освойте базовый уровень.

13 · Справочник

Все промпты воркшопа

Все промпты одним местом — скопируйте нужный и используйте.

Помоги мне сделать [лендинг / конспект / трекер / игру] по инструкции в проекте. Мой бриф: — Для кого: [кто откроет и что сделает] — Содержание: [что внутри] — Тон и оформление: [как должно выглядеть] Цель: получить что-то живое — выглядит как нужно и устроено как нужно.

[Название элемента] сделай [что именно изменить]. Остальное не трогай. Примеры: «Заголовок сделай теплее и живее. Остальное не трогай.» «Кнопку выровняй по центру и увеличь отступы. Остальное не трогай.»

Кликабельная ссылка: «Сделай слово [текст] кликабельной ссылкой на [адрес]» Кнопка перехода: «Добавь кнопку "[название]" в конце страницы — ведёт на [ссылка]» Плавный скролл: «Добавь навигацию — при клике плавная прокрутка к секции [название]»

Встроить через base64: «Встрой эту картинку прямо в код через base64» (прикрепить картинку к сообщению) Вставить по ссылке: «Вставь фото по этой ссылке: [ссылка] В секцию "[название]", по центру, ширина 300px» Если Tilda не берёт: «Замени все base64-картинки на ссылки с imgbb.com Вот ссылки: [список]»

Проблема на телефоне: «На телефоне [название блока] обрезается справа — почини отступы» Текст растягивается: «Текст растягивается на весь экран — сделай максимальную ширину 680px, центрируй» Кнопки мелкие: «Увеличь все кнопки — минимальная высота 44px» Картинка кривая: «Картинке добавь max-width:100% и height:auto» Разделить для Tilda: «Раздели код на 3 части как отдельные HTML-блоки для Tilda»

✨ Продвинутые промпты

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

Посмотри на эту страницу взглядом дизайнера с насмотренностью. Она выглядит слишком шаблонно — как типичный AI-сайт. Переосмысли визуальный язык: — Выбери нестандартное сочетание шрифтов (не Inter, не Roboto) — Добавь один сильный визуальный приём: большой контрастный заголовок, неожиданный акцентный цвет, асимметричный лейаут или декоративный элемент — Сохрани всё содержимое и структуру — меняем только оформление Хочу чтобы страница запоминалась. Сделай что-то чего я не ожидаю.

Попросите Claude посмотреть на страницу как критик — найти всё что мешает пользователю и объяснить почему.

Проведи UX-аудит этой страницы. Представь что ты — [целевой пользователь: например, «эксперт-психолог которая видит лендинг впервые»]. Оцени по пяти критериям: 1. Ясность — понятно ли с первого экрана что здесь предлагают? 2. Доверие — вызывает ли страница доверие или есть что-то что отталкивает? 3. Действие — легко ли найти и нажать главную кнопку? 4. Читаемость — комфортно ли читать на телефоне и компьютере? 5. Ощущение — соответствует ли визуал заявленному тону? Для каждого критерия: оценка 1–5, что не так, как исправить. Закончи списком трёх правок которые дадут максимальный эффект.

Страница статична и ощущается плоской? Попросите добавить тонкие движения которые делают её живой — только CSS, без тяжёлых библиотек.

Добавь микроанимации которые сделают страницу живой и тактильной. Только CSS — никаких библиотек. Что именно: — Карточки: плавное поднятие при наведении (translateY -4px, shadow усиливается) — Кнопки: лёгкое нажатие при клике (scale 0.97, 100ms) — Заголовок и первый абзац: плавное появление при загрузке (fade + slideUp, 0.6s) — Секции: появление при скролле (intersection observer, opacity 0→1 + translateY 20px→0) Анимации должны быть едва заметными — создавать ощущение качества, а не отвлекать. Если элемент уже анимирован — не трогай.

Не можете выбрать направление? Попросите Claude сгенерировать два принципиально разных варианта одного блока — чтобы выбрать или скомбинировать лучшее.

Сделай два варианта секции [название] с принципиально разным подходом. Вариант А — [первый полюс, например: «минималистичный, воздушный, только текст и пространство»] Вариант Б — [второй полюс, например: «насыщенный, с карточками, иконками и визуальными акцентами»] Покажи оба на одной странице рядом — с подписями «Вариант А» и «Вариант Б». Содержимое одинаковое, только оформление и компоновка разные. Я выберу один или скажу что взять из каждого.

Хотите дать пользователю выбор — светлая или тёмная версия? Это делается через CSS-переменные и одну кнопку переключения.

Добавь переключатель тёмной темы. Как должно работать: — Кнопка в правом верхнем углу: иконка луны 🌙 / солнца ☀️ — При клике весь сайт переключается в тёмный режим и обратно — Выбор сохраняется в localStorage — при следующем открытии помнит — Тёмная тема: тёмно-синий фон (#0c1a2e), светлый текст (#e0e8f0), акцентный синий остаётся, карточки чуть светлее фона (#122240) Реализуй через CSS-переменные и класс .dark на body. Переход плавный — 0.3s на все цвета.

Помощник по вайбкодингу

Все инструкции и файлы для настройки помощника-наставника в вашем проекте Claude — по ссылке.

Открыть файлы помощника →

Что заберёте сегодня

Чек-лист воркшопа — отмечайте по ходу

Помощник-наставник — остаётся с вами

Что такое вайбкодинг

Вы управляете результатом

Живой артефакт за минуты

Что можно делать с вайбкодингом

6 шагов создания продукта

Шаг 5 часто не нужен

Один промпт — живой артефакт

Пишем промпт

Видим результат

Переключаем в код

Учимся замечать элементы

Практика 1 · Шаги 1–3

Вайб-бриф — 6 вопросов по 6 шагам

Попадает в цель пользователя?

Структура читается, содержание понятно?

Оформление соответствует пожеланиям?

Как работать с результатом

Практика 2 · Шаги 4–5

Виды интерактивов

Чеклист с прогресс-баром

Аккордеон

Карточки с переворотом

Поля для ответов

Тепловая карта

Квиз с результатом

Хранение данных — просто

Добавляем картинки

Файлы рядом

Встроить через base64

imgbb.com

Открой imgbb.com

Загрузи картинки

Скопируй прямые ссылки

Скажи Claude

Размещаем — артефакт выходит в мир

Скачай HTML из Claude

Открой файл в Блокноте

Вставь в Tilda

Опубликовать

Если Tilda не принимает код

Зайди на github.com

Создай репозиторий (папку)

Загрузи файл

Включи Pages

Подожди 1–2 минуты

💻 Компьютер

📱 Телефон

Нашли проблему?

Когда нужна база данных

Что работает без базы

Когда нужна база

Сервисы для старта если хотите попробовать

Три шага до следующей встречи

Одна итерация по своему проекту

Второй формат

Присылайте опубликованные проекты

Мост к Воркшопу 4 — 30 мая

Коворкинг — 31 мая

Все промпты воркшопа

Помощник по вайбкодингу