Некоторое время назад появился новый сервис по разработке сайтов. Ранее уже была статья о нашумевшем сервисе Hero UI.
И вот появился еще один крутой сервис, в котором, по сравнению с HeroUI сделать лендинг стало гораздо проще и быстрее, а главное — качественнее.
https://v0.dev — по
самому простому запросу может создать приличный лендинг. Покажу
несколько примеров простых работ, а так же некоторые возможности.
Создаем лендинг по простому запросу
Пишем простой запрос «Создай мне лендинг из 5 блоков на тему магазина
автомобилей». И получаем уже готовый и вполне сносный, хоть и просто,
лендинг!
На превью в чате он выглядит обрезанным, но в полном предпросмотре всё отлично.
Картинки
Да, видно, что картинок нет, сервис может поставить по умолчанию заглушки, а иногда сразу и подходящие картинки добавляет, но они в превью сервиса не отображаются.
Если попросить эту нейросеть добавить картинки и сразу же включить их в проект, то она скачает подходящие изображения и добавит их в директорию сайта. Ниже пример еще одного лендинга (точнее его часть). Картинки подобрала нейросеть.
Основной интерфейс
Давайте ознакомимся с базовыми функциями и интерфейсом
- Preview и Code — переключаем соответственно для просмотра либо результата, либо структуры файлов и кода.
- Иконка загрузки и выбор версии — первая иконка дает вам скачать файлы сайта к себе на компьютер, что дял нас и важно. Вторая кнопка дает возможность переключать версии. Они меняются в зависимости от дополнительных запросов. Например мы получили лендинг, но
нам его нужно доработать, добавить что-то или изменить, тогда создается
новая версия. Удобно, если после каких-то дополнений что-то сломалось.. - Блок действий — первая кнопка позволяет нам выделить любой элемент на полученнмо сайте и детально отредактировать его (от этом чуть ниже), вторая кнопка — открывает проект в новой вкладке. Удобная функция, можно сразу просмотреть как выглядит проект в итоговом виде, а главное — эту ссылку можно использовать где угодно, она доступна, и таким образом Вы можете уже показывать полученный сайт кому угодно, как демо-проект. Третья кнопка просто разворачивает предпросмотр на полный экран.
Вернемся к функции выбора и редактирования элементов.
Выбираем любой элемент и мы можем редактировать стили каждого
элемента, на скриншотах видно различные настройки для кастомизации.
Очень удобно!
Особенности
Сервис условно-бесплатный. На бесплатном тарифе предоставляет определенное количество токенов в месяц. Сложно сказать, по какому критерию они списываются, но пока я тестировал сервис, я сделал 5 лендингов, в том числе не только по текстовым запросам, но и сгенерированным на основе загруженного скриншота (об этом подробнее будет написано далее). Для каждого были дополнительные запросы и правки. И токены еще остались.
Приблизительно месячного запаса хватит примерно на 5-10 проектов, в зависимости от их объема, количества правок. Что-бы экономить — нужно задавать более емкие и грамотные запросы.
Платная версия способна генерировать проекты напрямую из Figma. При генерации можно задать примечания и пожелания, что бы ИИ внес соответствующие изменения в исходный макет.
Создание страницы по исходному изображению
Крутая функция, которая в общем то не нова, но тут она работает отлично. Добавляем изображение референс, пишем желаемый запрос, например «Сделай на основе данного примера лендинг на тему «строительство домов», добавь блок каталога, наполни контентом» и т.д.
По итогу мы получим похожий лендинг, наполненный демо-контентом на
русском языке. Лендинг будет похож на приложенный референс, но сделан
под ваше заданную тему. Ну либо можно не просить вносить изменения и
сверстать как есть.
P.S.: приложить референс, пример работы — это отличный способ сделать интересный дизайн. Если не задавать какие то строгие критерии, явно не указывать и не описывать текстом весь желаемый визуал, сервис делает примерно стандартные блоки, которые из проекта в проект выглядят очень похоже. А задав пример — получим что-то интересное, не стандартное
Генерация картинок в проект
Вот мы вернулись к пункту, который упоминали, изучая интерфейс.
В окне запроса, можно включить переключатель Generate Images.
После чего можно в запросы добавлять задачу по генерации картинок
сразу в проект, а не подбор их в других источниках (хотя с этим сервис
справляется тоже хорошо)
Как получить готовый сайт в привычном виде
По умолчанию сайт создается с использованием TailwindCSS, не имеет
привычной структуры типа index.html, и т.д. По этому когда вы скачаете
сайт, просто открыть его в браузере не получится. Хотя и в таком виде с
помощью некоторых манипуляций сайт будет работать. Но как же получить
привычный вид?
А очень просто. Попросить сделать сайт. Просто напишите примерно такой запрос:
я скачал сайт, хочу что бы он запускался у меня на ПК и был стандартным html, css, php сайтом в стандартном виде
После чего будет доступна для скачивания версия в привычном виде, со стандартным набором файлов.
Можно и изначально попросить делать сайт в таком виде, но я сталкивался с проблемой, что было невозможно его ни скачать, ни посмотреть на предпросмотре.
Заключение
Данный сервис мне крайне понравился. Результаты очень порадовали. Подведем итоги, что можно выделить в плюсах данного сервиса:
- Скорость работы
- Создание лендинга по картинке
- Генерация изображений сразу в проект
- Бесплатный доступ
- Ежемесячные токены
- Редактирование стилей элементов
Надеюсь на дальнейшее развитие сервиса. https://v0.dev — на какое то время он точно войдет в список моих любимых нейросетей..
Ниже есть скриншот ленлинга, который сгенерирован на основе приложенного референса и добавлении тематики сайта, а так же пара дополнительных блоков. Есть несколько огрехов, но их так же можно поправить, задав пару дополнительных запросов, просто не стал тратить токены на тестовый лендинг.
(кликните на скриншот, а потмо откройте его в новой вкладке. что бы увидеть полный размер)
🔹 Понравилось? Ставьте лайк и подписывайтесь — будет ещё больше интересных обзоров!
Так же подписывайтесь на ВК и Telegram! Там публикуем короткие новости, мини-гайды и много всего интересного!
Еще больше интересного на нашем сайте - AIBrains!