Как начать работать с Vibecraft
Vibecraft — сервис, с помощью которого вы можете создавать и публиковать сайты и веб-приложения, общаясь с ИИ на естественном языке без программирования.
Опишите в чате, что хотите создать, а Vibecraft сгенерирует редактируемый в SourceCraft код полноценного приложения, включающего фронтенд и бэкенд, покажет предварительную версию и после опубликует его в Yandex Cloud.
Сервис сокращает путь от идеи до MVP или даже полноценного продукта — вам не нужны специальные инструменты и навыки дизайнера или разработчика. Например, с помощью Vibecraft вы можете создать и опубликовать лендинг, сайт с онлайн-курсом, приложение для учета финансов, трекер спортивной активности и здоровья, игру или даже CRM-систему.
Важно
Функциональность сервиса находится на стадии Preview и не попадает под действие соглашения об уровне обслуживания SLA.
Взимается плата за использование ресурсов SourceCraft и Yandex Cloud.
Чтобы начать работу с сервисом:
Опишите идею
-
Откройте главную страницу Vibecraft.
-
В окне чата опишите свою идею для сайта или приложения, например:
Создай сайт для расчета индекса массы тела по введенным показателям. Расчеты должны сохраняться, и должна быть возможность видеть свой прогресс на графике. Снабди сайт рекомендациями и инфографикой под разные результаты.Чтобы приложить к промпту файлы, нажмите и выберите их на компьютере. Также файлы можно перетащить из окна проводника на компьютере в окно чата.
Чтобы выбрать шаблон проекта, нажмите Шаблон и выберите подходящий вариант:
- Авто — Vibecraft подберет шаблон по описанию проекта.
- Веб-сервис — приложение с работающим бэкендом.
- Сайт — статический сайт только с клиентской частью.
Нажмите .
Под вашу идею автоматически будут созданы проект в Vibecraft и одноименный репозиторий в SourceCraft.
Важно
Работа с Vibecraft в чате потребляет нейрокредиты Code Assistant.
Оставшаяся квота нейрокредитов отображается на нижней панели чата.
-
Vibecraft структурирует вашу идею и предложит краткую формулировку задания. Если нужно — откорректируйте ее и нажмите Принять.
-
Далее Vibecraft выведет форму с основными возможностями будущего приложения и дополнительной информацией. Внесите правки и нажмите Принять.
-
В основном окне откроется вкладка Документация проекта с проработанным планом реализации вашего проекта. Если что-то нужно исправить — напишите в чате.
В правом нижнем углу нажмите Принять.
Примечание
Документация проекта размещается в одноименном репозитории SourceCraft по пути <название_проекта>/.vibecraft/docs.
Что делать, если задача зависла или завершилась с ошибкой?
Посмотрите предварительную версию
После того как вы одобрили план, Vibecraft в режиме реального времени начнет разработку вашего приложения.
Совет
В любой момент вы можете прервать выполнение действия в Vibecraft. Для этого в окне чата нажмите Остановить. Весь контекст проекта при этом будет сохранен.
Чтобы возобновить работу Vibecraft, напишите об этом в окне чата, например Продолжи работу.
В основном окне откроется вкладка Превью, на которой будет отображаться предварительная версия вашего приложения.
Vibecraft отчитается в чате о выполненной работе и кратко объяснит, как пользоваться приложением или сайтом.
Протестируйте приложение. Если что-то нужно исправить или улучшить, напишите об этом в чате.
Чтобы указать конкретный элемент, который вы хотите исправить, в окне чата нажмите , а затем выберите этот элемент на вкладке Превью. Он появится в контексте чата. Опишите, как его изменить, и отправьте сообщение.
Инструменты на верхней панели предварительного просмотра:
-
Чтобы посмотреть, как сайт или веб-приложение выглядит на экране смартфона или планшета, нажмите и выберите один из вариантов:
- Телефон · 390 × 844;
- Планшет · 768 × 1024.
Чтобы перейти к горизонтальной ориентации экрана, нажмите Повернуть устройство.
Чтобы вернуться к обычному режиму, нажмите Убрать эмуляцию.
Совет
Переключайтесь между режимами и проверяйте верстку прямо во время работы — это удобно, когда хочется убедиться, что все выглядит хорошо не только на большом экране.
-
Чтобы обновить страницу с предварительным просмотром, нажмите .
-
Чтобы открыть сгенерированный сайт на новой странице браузера, нажмите .
Важно
Ссылка на сайт временная, но вы можете использовать ее, чтобы показать кому-то предварительную версию.
Сайт в процессе разработки доступен всем, у кого есть на него прямая ссылка.
-
Чтобы перейти к конкретной странице сайта, введите ее в адресной строке, например
/about-us.
Сгенерированный код проекта доступен для просмотра и редактирования в репозитории SourceCraft. Чтобы открыть репозиторий, в правом верхнем углу нажмите Посмотреть код в SourceCraft.
(Опционально) Добавьте в проект собственные файлы
На вкладке Файлы можно загружать изображения, управлять ими и добавлять их в контекст чата.
Чтобы загрузить изображения, нажмите Загрузить изображение и выберите файлы на компьютере.
Для работы с загруженными файлами доступны следующие возможности:
- поиск по имени;
- отображение в режимах Сетка и Таблица;
- сортировка по одному из параметров: Имя, Назначение, Тип файла или Размер;
- предварительный просмотр;
- команды Скачать, Открыть в новой вкладке, Переименовать, Дублировать и Удалить.
Добавить файлы в контекст чата можно одним из способов:
- В окне чата нажмите и выберите один из вариантов:
- С устройства — для загрузки новых файлов.
- Из проекта — для выбора уже загруженных файлов.
- На вкладке Файлы выберите один или несколько файлов и нажмите Добавить в промпт.
Добавленные файлы отобразятся над полем ввода сообщения. Чтобы убрать файл из контекста, нажмите на его миниатюре.
В окне чата напишите, где нужно использовать добавленные файлы, например:
Размести это изображение на странице после вводного абзаца.
После того как Vibecraft заново сгенерирует страницу, протестируйте приложение повторно.
Примечание
Файлы размещаются в одноименном репозитории SourceCraft по пути <название_проекта>/.vibecraft/assets.