Vibecoding Workshop Hero Section

Закулисье вайбкодинга

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

Твое приключение в мир вайбкодинга:
знакомство
знакомство
Видео №1 «Знакомство + задание №1 «Создаем свою открытку»
Перейти
что такое вайбкодинг
что такое вайбкодинг
Видео №2 «Вайбкодинг и создание первого интерактива» + задание №2 «Вайбкодим свою открытку»
Перейти
создание идеи
создание идеи
Видео №3 «Вайбкодинг в образовании» + задание №3 «Выбираем идею»
Перейти
прототип и дизайн
прототип и дизайн
Видео №4 «Процесс разработки» + задание №4 «Создаем прототип и дизайн»
Перейти
разработка
разработка
Видео №5 «Инструмент Lovable» + задание №5 «Перенос кода в Lovable»
Перейти
финал
финал
Видео №6 «Финальные советы и ретроспектива» + задание №6 «Елка ретроспективы»
Перейти
финал
финал
Видео №7 «Ответы на вопросы»
Перейти
Полезные ссылки
Перед тем, как начать просмотр, можешь открыть доску Миро в соседней вкладке и презентацию в другой. А также чуть позже тебе пригодится Lovable.
Доска практикума в Миро
Презентация
Реферальная ссылка на Lovable
1
видео №1
Знакомство
В этом видео Дарья Туча рассказывает про план практикума, а также мы начинаем первую практику-знакомство.
Если видео не загружается, то его можно посмотреть по ссылке
задание №1
Создаем свою открытку
Предлагаю не пропускать это задание, потому что в слеующих практиках мы будем его использовать.
2
видео №2
Вайбкодинг и создание первого интерактива
В этом видео разбираем, что такое вайбкодинг, как меняется майндсет и роли, а также пробуем вайбкодить! Посмотри видео и переходи к следующей практике.
Если видео не загружается, то его можно посмотреть по ссылке
задание №2
Вайбкодим свою открытку
Предлагаю не пропускать это задание, потому что в слеующих практиках мы будем его использовать.
Vibecoding Instruction Block
А теперь оживим вашу открытку с помощью вайбкодинга.
  • 1. Скопируйте промпт и добавьте его в вашу текстовую нейросеть.
  • 2. Добавьте вашу открытку, созданную в предыдущей практике, как референс.
ПРОМПТ

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

Скопировано! ✨
3
видео № 3
Вайбкодинг в образовании
В этом видео разбираем, что можно создавать с помощью вайбкодинга для целей образования и как это может выглядеть.
Интерактивное Видео
Какой блок создан с помощью вайбкодинга?
Если видео не загружается, то его можно посмотреть по ссылке
задание №3
Выбираем идею
Предлагаю не пропускать это задание, потому что в слеующих практиках мы будем его использовать.
Vibecoding Ideas Block
Выберите тип продукта, который хотите завайбкодить сегодня.
  • Если вы в первый раз пробуете, то выбирайте уровень light или medium.
  • Если вы профи, то выбирайте из medium или hard.
  • Если у вас есть своя идея (она другая!), то запишите ее у себя на листочке или добавьте ее на доску Miro.
Light
Обычный тест
Инфографика
Презентация
с интерактивными элементами
Интерактивная карта курса
Medium
Интерактивное видео
Чек-лист или самооценка
Memory Game
игра на запоминание
Escape Game
квест-игра
Бинго
Диалог с чат-ботом
Разветвленный сценарий
Hard
Дашборд для обучения
Лидерборд
таблица лидеров
Велком-лендинг
для новых участников
Тренажер имитирующий ПО
например, Ozon или CRM
Платформа для воркшопа
Своя Идея
Ваша идея
Запишите её на листочек или в Miro
Если видео не загружается, то его можно посмотреть по ссылке
4
видео №4
Процесс разработки
В этом видео пройдемся по всем этапам разработки digital/IT продуктов, разберем вопросы, на которые нужно ответить на каждом этапе и примеры промптов.
Если видео не загружается, то его можно посмотреть по ссылке
задание №4
Создаем прототип и дизайн
В прошлом задании вы выбрали идею продукта, который вы будете создавать. Приступаем к разработке прототипа (UX) и дизайна (UI).
Vibecoding UX/UI Instruction Block
  • 1. Выберите стиль: стиль вашей открытки из первого задания / flat design / retro / pixel / Christmas / придумайте свой.
  • 2. Выберите цветовую гамму: цвета вашей открытки / либо вдохновитесь палитрами на доске Миро / придумайте свою.
  • 3. Скопируйте промпт справа, кастомизируйте его под свою задачу и вставьте в вашу текстовую нейросеть.
  • 4. Выберите 1-3 улучшения прототипа (UX) и доработайте.
  • 5. Выберите 1-3 улучшения по дизайну (UI) и доработайте.
  • 6. Поделитесь в чате тем, что у вас получилось, соберите фидбек.
  • 7. Расскажите друзьям и похвастайтесь :)
ПРОМПТ (КЛИКНИТЕ, ЧТОБЫ СКОПИРОВАТЬ)

Роль: Ты старший фронтенд разработчик, который создает интерактивные digital продукты для обучения в стилистике продукта/сервиса [название компании: Apple, Duolingo, Spotify и т.д.]. Задача: Создай интерактивную практику для достижения [образовательный результат], используя HTML, CSS, JavaScript. Стиль: [референс с открыткой / flat design/ retro/ pixel/ Christmas/ свой стиль]. Используй эти цвета: [коды цветов или референс с палитрой]. Контекст: Это практика будет встроена в [название продукта, тема] для [аудитория]. Путь пользователя: [если есть понимание, добавь, что должно происходить на каждом экране]

Скопировано! ????
Если видео не загружается, то его можно посмотреть по ссылке
5
видео №5
Инструмент Lovable
В этом видео знакомимся с инструментом Lovable, в котором можно создать полностью рабочий самостоятельный продукт.
Если видео не загружается, то его можно посмотреть по ссылке
задание №5
Переносим наш код в Lovable
В прошлом задании вы разработали прототип, теперь время перенести этот прототип в Lovable и опубликовать его.
Vibecoding Lovable Instruction Block
  • 1. Сохрани свой код из текстовой нейросети в формате txt.
  • 2. Зарегистрируйся в Lovable по этой ссылке (это реферальная ссылка, после публикации проекта должно начисляться 10 кредитов). В Lovable лучше регистрироваться через gmail почту и лучше проверить, чтобы gmail был привязан не к РФ (на всякий случай).
  • 3. Скопируйте промпт, добавьте в Lovable и кастомизируйте. Добавьте файл с кодом.
  • 4. Опубликуйте свой проект и поделитесь в чате.
ПРОМПТ (КЛИКНИТЕ, ЧТОБЫ СКОПИРОВАТЬ)

Создай [название продукта + его тип], используя только этот код. Ничего не меняй и не добавляй.

Скопировано! ????
6
видео №6
Финальные советы и ретроспектива
В этом видео знакомимся с инструментом Lovable, в котором можно создать полностью рабочий самостоятельный продукт.
Если видео не загружается, то его можно посмотреть по ссылке
задание №6
Елка ретроспективы
Спасибо, что были с нами на практикуме и смотрели здесь материалы. Надеюсь, что у вас получились ваши первые продукты и вы ими гордитесь. А теперь давайте нарядим нашу елку.
7
видео №7
Ответы на вопросы
После завершения практикума мы с ребятами остались и обсудили еще несколько вопросов.
Если видео не загружается, то его можно посмотреть по ссылке