Вайбкодинг: ваше первое приложение на AI за 15 минут
Привет, VC.
Я собираю курс «Вайбкодинг» — про то, как работать с AI так, чтобы процесс кодинга (и не только) был в кайф, быстрым и по-настоящему своим.
Начал с самого начала — с нулевого модуля. Первая глава получилась особенно тёплой и рабочей.
Ваше первое приложение за 15 минут
Катя хотела калькулятор для блога. Разработчик — 15 000 рублей. Она сделала это сама за 15 минут.
ПЕРВЫЙ КРО
Катя хочет калькулятор для блога — но 15 000 рублей и две недели её не устраивают
«15 000 рублей и две недели — или 15 минут и один промпт. Катя выбрала второе»
ПЕРЕД ТЕМ КАК НАЧАТЬ
Курс учит принципам — вы выбираете доступный AI-чат сами
Под AI в курсе мы имеем в виду привычные чат-модели, которым можно писать словами, а в ответ получать текст: Claude, ChatGPT, YandexGPT, GigaChat. Все примеры сделаны с Claude, но всё, что вы освоите, работает в любом из них. Когда в уроке написано «откройте AI-чат» — выберите тот, который доступен вам прямо сейчас.
ШАГ 1 ИЗ 4
Первый шаг — открыть браузер и зайти в любой AI-чат
Катя открыла claude.ai в обычном браузере — и увидела только поле ввода внизу экрана. Никакого терминала, никаких папок, никакой установки. Курсор мигает. Можно начинать.
ШАГ 2 ИЗ 4
Промпт — конкретная инструкция для AI, а не поисковый запрос
Катя напечатала в поле ввода: «сделай калькулятор» — и нажала Enter. AI вернул числовой калькулятор с серым дизайном. Технически верно. Но совсем не тот инструмент, который она хотела для блога.
Промпт — это не поисковый запрос, а инструкция. Представьте, что вы принимаете на работу блестящего, но нового сотрудника: он способен на многое, но не знает ваших норм. Без контекста он сделает что-то своё.
Катя переписала промпт: добавила поля ввода, цвет, формат вывода и одно ограничение — «один HTML-файл без сервера». Второй ответ AI совпал с тем, что она описала.
Вот как выглядел промпт Кати — тот же текст понадобится в практике в конце урока. В конце промпта Катя просит «без markdown разметки»: это способ украшать текст звёздочками и решётками, а нам нужен чистый HTML без украшений. Строчки <!DOCTYPE html> и </html> в конце — это технические пометки начала и конца веб-страницы. Кате ничего с ними делать не нужно: она просто просит AI вернуть готовый код от одной пометки до другой.
КОНЦЕПЦИЯ
Промпт
Текстовая инструкция для AI: задача + формат + ограничения = предсказуемый результат.
Промпт — не вопрос и не поисковый запрос. Это конкретное задание: что создать, в каком формате, с какими ограничениями. Чем меньше пространства для интерпретации — тем предсказуемее результат.
«Конкретность промпта — разница между "что-то получилось" и "получилось то, что нужно"»
ШАГ 3 ИЗ 4
Артефакт — это законченный результат AI, с которым можно взаимодействовать
Катя нажала Enter — и в правой панели Claude.ai появился калькулятор. Не блок с кодом, не инструкция «скопируй и сохрани». Рабочий инструмент прямо в окне чата.
Она ввела «20» в поле «Минут в день» и нажала «Рассчитать». Результат появился сразу: 26 книг в год.Файлов на компьютере — ноль. Редактор кода — не открывала.
КОНЦЕПЦИЯ
Артефакт
Самостоятельный рабочий результат AI: не черновик, не текст с кодом, а готовый инструмент, с которым можно взаимодействовать прямо в окне чата.
Панель артефактов доступна в Claude.ai. В других AI-чатах — ChatGPT, YandexGPT, GigaChat — панели артефактов нет. Там работает другой путь: скопируйте HTML-код из ответа и сохраните его в обычный текстовый файл с именем, оканчивающимся на .html (например calc.html) — по этим четырём буквам браузер поймёт, что это веб-страница, и откроет её как приложение.
Главное
Всё в одном окне чата. Никаких файлов, папок и редакторов не нужно.
ШАГ 4 ИЗ 4
Итерация — это цикл «изменить одну деталь и посмотреть на результат»
Калькулятор Кати работал. Считал верно. Но синий цвет не подходил к стилю её блога. Она вернулась в поле ввода и написала:
Через 10 секунд в боковой панели появилась зелёная версия. Поля ввода, кнопка, логика расчёта — всё осталось прежним. Изменился только стиль.
Представьте примерку в магазине: первый размер подошёл по фасону, но цвет не тот. Вы не уходите — вы просите другой цвет. Первый промпт — такая же примерка: не финальная, а отправная точка.
КОНЦЕПЦИЯ
Итерация
Цикл: промпт → результат → правка → новый результат.
Каждый новый промпт в той же сессии чата — не отдельный запрос, а шаг цикла. Версия 2 строится на версии 1. Версия 3 — на версии 2. Цель не «написать идеальный промпт», а «двигаться от рабочего к подходящему».
«Первый промпт — это первая примерка. Нормально, что не идеально»
СЛОВАРЬ УРОКА
Промпт, артефакт и итерация описывают то, что вы только что сделали
Марина пишет письмо поставщику с претензией. Она описывает ситуацию в поле ввода — это промпт. AI возвращает готовый текст письма — это артефакт. Тон оказался слишком жёстким, Марина уточняет: «сделай мягче, сохрани суть» — это итерация.
Дмитрий проверяет договор на риски. Он вставляет текст договора и просит найти уязвимые места — промпт. AI возвращает список рисков с указанием пунктов — артефакт. Дмитрий уточняет: «разбери подробнее пункт 4.2» — итерация.
Виктор готовит объяснение второго начала термодинамики для девятиклассников. Просит AI сформулировать понятно — промпт. Получает готовое объяснение — артефакт. Просит упростить язык: «без формул, только на примерах» — итерация.
Главное
Три слова — промпт, артефакт, итерация — теперь в вашем рабочем словаре. Дальше они будут встречаться в каждом уроке.
ИСТОРИЧЕСКИЙ ОЧЕРК
Дартмутское лето 1956: как мы придумали, что машина может «думать»
Летом 1956 года Джон Маккарти — молодой математик — собрал в Дартмутском колледже десяток коллег на двухмесячный семинар. В заявке он написал впервые два слова, которые теперь знает весь мир: artificial intelligence. Семинар назывался просто: «летнее исследование по искусственному интеллекту».
Участники верили, что за лето смогут решить задачу. Маккарти в заявке писал: «Мы полагаем, что значительный прогресс может быть достигнут за лето, если группа тщательно отобранных учёных поработает над этим вместе». Лето закончилось без прорыва. Зато закончилось с термином, планом исследований и семью направлениями — от нейронных сетей до обучения с подкреплением.
Катя в наши дни сделала за 15 минут то, что в Дартмуте ставили как задачу на десятилетия: дала компьютеру описание задачи словами и получила работающий код. Технология догнала мечту через 69 лет. Суть мечты не изменилась — изменились масштаб вычислений и количество текста, на котором училась модель.
Источник. John McCarthy et al. «A Proposal for the Dartmouth Summer Research Project on Artificial Intelligence», 1955. Cade Metz, Genius Makers, 2021, гл. 1. Открыть источник ↗
КОМПАС КУРСА
РИТМ — компас работы с AI: Режиссируй → Итерируй → Тестируй → Монтируй
Р — Режиссируй. Прежде чем открыть чат, сформулируйте задачу. Катя знала: нужен калькулятор для поста о чтении, в стиле блога, один файл.
И — Итерируй. Напишите промпт, получите результат, уточните одну деталь. Катя добавила в чат: «замени синий на зелёный» — и получила новую версию за 10 секунд.
Т — Тестируй. Проверьте артефакт руками: введите данные, нажмите кнопку. Катя ввела «20 минут» — увидела «26 книг в год». Один HTML-файл (та же «веб-страница из шага 2»), один промпт.
М — Монтируй. Выберите лучший вариант и зафиксируйте результат. Катя посмотрела на три версии, выбрала зелёную и оставила её в блоге.
ФИНАЛ НАРРАТИВА
Катя создала калькулятор за 12 минут и добавила его в блог
Катя открыла claude.ai и вставила промпт. Через 12 секунд в боковой панели появился рабочий калькулятор. Один уточняющий промпт — зелёная версия под цвет блога. Три итерации, 12 минут.
Не 15 000 рублей и не две недели. Один промпт, один чат, один браузер. Катя закрепила вкладку и добавила ссылку на калькулятор в статью о чтении.
РЕАЛЬНАЯ ИСТОРИЯ
Арвинд Нараянан в рассылке Симона Уиллисона
«Легче создать приложение по запросу, чем искать его в App Store».
Именно это и сделала Катя: не искала готовый инструмент — создала нужный.
Теперь читатели её блога открывают статью и сразу видят калькулятор. Инструмент, которого не существовало 12 минут назад.
Буду очень благодарен за обратную связь именно по этой главе:
- Что зацепило сильнее всего?
- Что показалось лишним или, наоборот, не хватило?
- Пробовали ли уже делать что-то подобное?
Следующие главы буду выкладывать здесь по мере готовности (примерно раз в 1–2 недели).
Курс пока в процессе, поэтому ваши комментарии реально помогут сделать его лучше.
Жду ваших впечатлений 👇