Искусственный интеллект превращает обычных пользователей в разработчиков: теперь достаточно описать идею словами, чтобы собрать персональное приложение или информационную панель. Журналист The Wall Street Journal проверила на себе новый тренд — vibe coding — и выяснила, почему это может изменить будущее программирования.
Люди повсюду создают панели мониторинга, чтобы «следить за ситуацией». За какой именно ситуацией? За любой, какая придёт им в голову.
Они делятся сайтами с информацией в реальном времени для отслеживания геополитических конфликтов, рынков прогнозов и природных катастроф — иногда всего сразу.
Эти панели выглядят как научно-фантастические командные центры: самообновляющиеся карты, графики и новостные ленты.
Почему все внезапно начали заполнять экраны головокружительными объёмами данных? Причина — «vibe coding», искусство создавать приложения с помощью искусственного интеллекта, просто разговаривая с ним.
Я уже чувствую скептические взгляды, но обещаю: это реальность, а не хайп. И вы тоже можете это сделать.
Создавая собственную панель, я немного научилась программированию и многое поняла о новом мире, где люди без навыков кодинга могут создавать любое программное обеспечение, какое захотят. И теперь у меня есть способ следить за собственной «ситуацией»!
Как и любое стоящее занятие, vibe coding не обходится без раздражения. Но начать легко, а выгода велика. Вот как — и почему — вам стоит попробовать.
ШАГ ПЕРВЫЙ
Продумайте дизайн
Самое сложное — придумать сам продукт. Помните: не нужно мыслить масштабно, ведь всё это — только для вас.
Панели мониторинга популярны потому, что они просты. Это может быть сайт или приложение, существующее только в браузере вашего компьютера. Всё размещается на одной странице и получает данные из источников, которые вы и так регулярно проверяете. Например: календарь, акции или что-то более специфическое — вроде идеального времени для съёмки заката.
Навыки дизайна тоже не нужны — ИИ поможет и с этим.
Новичкам я советую сайт Lovable, созданный специально для vibe coding приложений и сайтов. Replit тоже достаточно прост, но позволяет более опытным пользователям работать над несколькими задачами одновременно.
Начните с запроса на создание макета-заглушки. Вот мой:
Создай макет персональной панели мониторинга с фиктивными данными. Она должна выглядеть спокойно, утончённо и элегантно, с мягкой нейтральной палитрой, крупной типографикой и без визуального шума. Элементы: карточка календаря, карточка задачи дня, 4–5 технологических заголовков, показатели здоровья, погода в Сан-Франциско и время отправления автобусов.
ИИ может добавить функции, о которых вы сами не подумали — как полезные (кнопка тёмного режима), так и не очень (банальная цитата дня). Мне пришлось пройти через несколько раундов редактирования, чтобы довести макет до нужного состояния. Вы буквально говорите ИИ, что изменить, обычным английским языком.
Лучше сначала зафиксировать дизайн, потому что потом, когда ИИ начнёт подключать потоки данных, переделывать всё будет сложнее.
Многое можно сделать бесплатно. Но когда бесплатные кредиты заканчиваются, приходится выбирать: либо платить $25 в месяц за большой пакет кредитов, либо ждать сутки до следующей бесплатной порции.
Совет: чтобы экономить кредиты в Lovable или Replit, сначала продумайте дизайн с помощью ChatGPT, а затем загрузите изображение макета как образец. Можно загружать и другие референсы.
ШАГ ВТОРОЙ
Найдите данные
ИИ может определить, какие данные вообще можно получить. Пример запроса:
Я хочу открывать эту панель через интернет и не умею программировать. Оцени, насколько реалистичен мой список желаемых данных. И есть ли ещё какие-нибудь источники, которые стоит добавить?
Скорее всего, ИИ предложит получать данные через API — интерфейс программирования приложений. Не вдаваясь в технические детали: это способ получать «сырые» данные для вашей панели.
Я узнала, что некоторые API не предназначены для личного использования — например, поток данных о потреблении энергии от моего поставщика. Другие оказались платными.
Большая часть моего списка оказалась бесплатной: статистика с кольца Oura, информация о тумане в Сан-Франциско и прибытии местных автобусов. Но некоторые API пришлось подключать вручную.
ИИ объяснил, как получить так называемый «ключ» — длинную строку символов для доступа к данным. Сам ИИ сделать это не может, потому что пользователю часто нужно создавать аккаунт разработчика. Получив код, я просто вставила его в текстовое поле Lovable.
Ещё один совет: храните API-ключи в менеджере паролей. Большинство сервисов показывают код только один раз, а потом он исчезает навсегда. Если потеряете — придётся создавать новый.
Google Calendar предоставляет «секретный адрес» в настройках, чтобы избежать возни с API.
ШАГ ТРЕТИЙ
Соберите панель
Наконец пришло время подключать данные к панели. Мне оказалось проще делать это по одному элементу за раз.
Например:
Добавь карточку общественного транспорта, показывающую ближайшие прибытия автобусов SFMTA на конкретную остановку. Отображай название маршрута, направление и минуты до прибытия. Сделай всё минималистичным и легко читаемым.
Признаюсь: временами мне хотелось швырнуть ноутбук в Тихий океан. Решение некоторых проблем требовало долгих, вежливых и отчаянных уговоров машины. Всё — обычным английским языком. Но это работало.
Когда моя панель для поездок по Сан-Франциско заработала, я увлеклась — и взялась за следующую, более сложную идею: новостной брифинг, ранжирующий технологические новости по моей тематике. На этот раз я использовала Replit.
Сделать рабочими все кнопки оказалось сложнее. В какой-то момент мобильная версия выглядела отлично — а потом полностью сломалась.
Я быстро исчерпала бесплатные кредиты Replit, оформила платную подписку и достигла даже её лимита. Общий итог — $45. И ещё придётся платить $25 в месяц за хостинг.
Но зато у меня теперь есть новостной агрегатор моей мечты.
ДОПОЛНИТЕЛЬНЫЙ ВЫЗОВ
Использование Claude Code
Я не могла закончить эксперимент, не попробовав Claude Code. Это более сложный и открытый ИИ-инструмент для программирования, доступный только подписчикам тарифов от $20 в месяц.
Claude Code упрощает создание полностью приватного веб-приложения, работающего только на вашем компьютере. Но ради этого мне пришлось столкнуться с пугающим Terminal — экраном командной строки.
А если использовать новый исследовательский режим Claude Design (пока в бета-версии) для создания макета, можно сразу отправить визуальный проект в Claude Code и начать разработку.
Подписки Anthropic Pro за $20 в месяц мне хватило, хотя несколько раз приходилось ждать пару часов, пока не обновятся лимиты использования.
После завершения локальной панели Claude предложил бесплатные сервисы для хостинга. Я последовала его пугающим инструкциям: загрузила файлы на GitHub и подключила их к Cloudflare Pages. В итоге приложение заработало в интернете. Мой муж — профессиональный инженер-программист — был впечатлён.
В прошлую пятницу я открыла свою панель Сан-Франциско на телефоне и вовремя вышла из дома к автобусу. Ощущение было таким же приятным, как после удачного DIY-проекта из Home Depot, который действительно красиво выглядит и работает.
Конечно, будут и взлёты, и падения. На пути vibe coding вам всё ещё может захотеться выбросить ноутбук в океан — но зато ваша панель хотя бы покажет, насколько сейчас высокий прилив.
