--- metadata: - name: generator content: Diplodoc Platform v5.57.3 alternate: - https://sourcecraft.dev/portal/docs/en/vibecraft/index.md - https://sourcecraft.dev/portal/docs/ru/vibecraft/index.md - href: ru/vibecraft/index.md type: text/markdown title: Markdown version - href: llms.txt type: text/markdown title: llms.txt title: Начало работы с Vibecraft description: Создайте свой первый сайт или приложение с помощью ИИ в Vibecraft. --- > **Documentation Index:** Fetch the complete configuration index at https://sourcecraft.dev/portal/docs/ru/llms.txt # Как начать работать с Vibecraft _Vibecraft_ — сервис, с помощью которого вы можете создавать и публиковать сайты и веб-приложения, общаясь с ИИ на естественном языке без программирования. Опишите в чате, что хотите создать, а Vibecraft сгенерирует редактируемый в [SourceCraft](https://sourcecraft.dev/portal/docs/ru/sourcecraft/concepts/index.md) код полноценного приложения, включающего фронтенд и бэкенд, покажет предварительную версию и после опубликует его в [Yandex Cloud](https://yandex.cloud/ru). Сервис сокращает путь от идеи до MVP или даже полноценного продукта — вам не нужны специальные инструменты и навыки дизайнера или разработчика. Например, с помощью Vibecraft вы можете создать и опубликовать лендинг, сайт с онлайн-курсом, приложение для учета финансов, трекер спортивной активности и здоровья, игру или даже CRM-систему. [Что еще можно создать](https://sourcecraft.dev/portal/vibecraft/#what-create) {% note warning %} Функциональность сервиса находится на _стадии Preview_ и не попадает под действие соглашения об уровне обслуживания SLA. Взимается [плата](https://sourcecraft.dev/portal/docs/ru/vibecraft/pricing.md) за использование ресурсов SourceCraft и Yandex Cloud. {% endnote %} Чтобы начать работу с сервисом: 1. [Опишите идею](#describe-idea) 1. [Посмотрите предварительную версию](#preview) 1. [(Опционально) Добавьте в проект собственные файлы](#assets) ## Опишите идею {#describe-idea} 1. Откройте [главную страницу](https://vibe.sourcecraft.dev) Vibecraft. 1. В окне чата опишите свою идею для сайта или приложения, например: ```text Создай сайт для расчета индекса массы тела по введенным показателям. Расчеты должны сохраняться, и должна быть возможность видеть свой прогресс на графике. Снабди сайт рекомендациями и инфографикой под разные результаты. ``` Чтобы приложить к промпту файлы, нажмите ![image](../_assets/console-icons/plus.svg) и выберите их на компьютере. Также файлы можно перетащить из окна проводника на компьютере в окно чата. Чтобы выбрать шаблон проекта, нажмите ![image](../_assets/console-icons/magic-wand.svg) **Шаблон** и выберите подходящий вариант: * ![image](../_assets/console-icons/magic-wand.svg) **Авто** — Vibecraft подберет шаблон по описанию проекта. * ![image](../_assets/console-icons/server.svg) **Веб-сервис** — приложение с работающим бэкендом. * ![image](../_assets/console-icons/layout-header.svg) **Сайт** — статический сайт только с клиентской частью. Нажмите ![image](../_assets/console-icons/arrow-up.svg). Под вашу идею автоматически будут созданы _проект_ в Vibecraft и одноименный [репозиторий](https://sourcecraft.dev/portal/docs/ru/sourcecraft/concepts/index.md#repos) в SourceCraft. {% note warning %} Работа с Vibecraft в чате потребляет [нейрокредиты](https://sourcecraft.dev/portal/docs/ru/vibecraft/pricing.md#cu) Code Assistant. Оставшаяся квота нейрокредитов ![image](../_assets/console-icons/circle-letter-n.svg) отображается на нижней панели чата. {% endnote %} 1. Vibecraft структурирует вашу идею и предложит краткую формулировку задания. Если нужно — откорректируйте ее и нажмите **Принять**. 1. Далее Vibecraft выведет форму с основными возможностями будущего приложения и дополнительной информацией. Внесите правки и нажмите **Принять**. 1. В основном окне откроется вкладка ![image](../_assets/console-icons/book-open.svg) **Документация проекта** с проработанным планом реализации вашего проекта. Если что-то нужно исправить — напишите в чате. В правом нижнем углу нажмите **Принять**. {% note info %} Документация проекта размещается в одноименном репозитории SourceCraft по пути `<название_проекта>/.vibecraft/docs`. {% endnote %} [Что делать, если задача зависла или завершилась с ошибкой?](https://sourcecraft.dev/portal/docs/ru/vibecraft/qa.md#task-stuck) ## Посмотрите предварительную версию {#preview} После того как вы одобрили план, Vibecraft в режиме реального времени начнет разработку вашего приложения. {% note tip %} В любой момент вы можете прервать выполнение действия в Vibecraft. Для этого в окне чата нажмите ![image](../_assets/console-icons/circle-stop.svg) **Остановить**. Весь контекст проекта при этом будет сохранен. Чтобы возобновить работу Vibecraft, напишите об этом в окне чата, например `Продолжи работу`. {% endnote %} В основном окне откроется вкладка ![image](../_assets/console-icons/eye.svg) **Превью**, на которой будет отображаться предварительная версия вашего приложения. Vibecraft отчитается в чате о выполненной работе и кратко объяснит, как пользоваться приложением или сайтом. Протестируйте приложение. Если что-то нужно исправить или улучшить, напишите об этом в чате. Чтобы указать конкретный элемент, который вы хотите исправить, в окне чата нажмите ![image](../_assets/console-icons/layout-header-cursor.svg), а затем выберите этот элемент на вкладке ![image](../_assets/console-icons/eye.svg) **Превью**. Он появится в контексте чата. Опишите, как его изменить, и отправьте сообщение. Инструменты на верхней панели предварительного просмотра: * Чтобы посмотреть, как сайт или веб-приложение выглядит на экране смартфона или планшета, нажмите ![image](../_assets/console-icons/smartphone.svg) и выберите один из вариантов: * ![image](../_assets/console-icons/smartphone.svg) **Телефон · 390 × 844**; * ![image](../_assets/console-icons/stop.svg) **Планшет · 768 × 1024**. Чтобы перейти к горизонтальной ориентации экрана, нажмите ![image](../_assets/console-icons/arrows-rotate-right.svg) **Повернуть устройство**. Чтобы вернуться к обычному режиму, нажмите ![image](../_assets/console-icons/eraser.svg) **Убрать эмуляцию**. {% note tip %} Переключайтесь между режимами и проверяйте верстку прямо во время работы — это удобно, когда хочется убедиться, что все выглядит хорошо не только на большом экране. {% endnote %} * Чтобы обновить страницу с предварительным просмотром, нажмите ![image](../_assets/console-icons/arrow-rotate-right.svg). * Чтобы открыть сгенерированный сайт на новой странице браузера, нажмите ![image](../_assets/console-icons/arrow-up-right-from-square.svg). {% note warning %} Ссылка на сайт **временная**, но вы можете использовать ее, чтобы показать кому-то предварительную версию. Сайт в процессе разработки доступен всем, у кого есть на него прямая ссылка. {% endnote %} * Чтобы перейти к конкретной странице сайта, введите ее в адресной строке, например `/about-us`. Сгенерированный код проекта доступен для просмотра и редактирования в репозитории SourceCraft. Чтобы открыть репозиторий, в правом верхнем углу нажмите ![image](../_assets/sourcecraft/src-logo.svg) **Посмотреть код в SourceCraft**. ## (Опционально) Добавьте в проект собственные файлы {#assets} На вкладке ![image](../_assets/console-icons/shapes-4.svg) **Файлы** можно загружать изображения, управлять ими и добавлять их в контекст чата. Чтобы загрузить изображения, нажмите ![image](../_assets/console-icons/arrow-up-from-square.svg) **Загрузить изображение** и выберите файлы на компьютере. Для работы с загруженными файлами доступны следующие возможности: * поиск по имени; * отображение в режимах **Сетка** и **Таблица**; * сортировка по одному из параметров: **Имя**, **Назначение**, **Тип файла** или **Размер**; * предварительный просмотр; * команды **Скачать**, **Открыть в новой вкладке**, **Переименовать**, **Дублировать** и **Удалить**. Добавить файлы в контекст чата можно одним из способов: * В окне чата нажмите ![image](../_assets/console-icons/plus.svg) и выберите один из вариантов: * ![image](../_assets/console-icons/picture.svg) **С устройства** — для загрузки новых файлов. * ![image](../_assets/console-icons/shapes-4.svg) **Из проекта** — для выбора уже загруженных файлов. * На вкладке ![image](../_assets/console-icons/shapes-4.svg) **Файлы** выберите один или несколько файлов и нажмите ![image](../_assets/console-icons/check.svg) **Добавить в промпт**. Добавленные файлы отобразятся над полем ввода сообщения. Чтобы убрать файл из контекста, нажмите ![image](../_assets/console-icons/xmark.svg) на его миниатюре. В окне чата напишите, где нужно использовать добавленные файлы, например: ```text Размести это изображение на странице после вводного абзаца. ``` После того как Vibecraft заново сгенерирует страницу, протестируйте приложение повторно. {% note info %} Файлы размещаются в одноименном репозитории SourceCraft по пути `<название_проекта>/.vibecraft/assets`. {% endnote %} ### Что дальше {#what-next} * [Опубликуйте проект в Yandex Cloud](https://sourcecraft.dev/portal/docs/ru/vibecraft/operations/deploy.md) * [Привяжите к проекту собственный домен](https://sourcecraft.dev/portal/docs/ru/vibecraft/operations/attach-domain.md) ### Полезные ссылки {#see-also} * [Обзор сервиса Vibecraft](https://sourcecraft.dev/portal/docs/ru/vibecraft/concepts/index.md) * [Вопросы и ответы про Vibecraft](https://sourcecraft.dev/portal/docs/ru/vibecraft/qa.md) * [Квоты и лимиты в Vibecraft](https://sourcecraft.dev/portal/docs/ru/vibecraft/concepts/limits.md) * [Правила тарификации для Vibecraft](https://sourcecraft.dev/portal/docs/ru/vibecraft/pricing.md)