Протестировали работу нейросети https://v0.dev/, с помощью которой можно генерировать интерфейсы, landing page и white page в режиме текстовых команд или по готовому референсу.
v0 — это сервис основанный на искусственном интеллекте — генерирует удобный для использования React-код на основе shadcn/ui и Tailwind CSS. На выходе получаются качественные интерфейсы, web-элементы или целые web-страницы без необходимости кодинга.
Примеры
Примеры работ доступны тут: https://v0.dev/explore. Там же можно подсмотреть все этапы генерации и промты (текстовые команды), которые были использованы.
Наши тестовые генерации white page:
- https://v0.dev/t/YhU7kBlU3kx — по текстовому описанию
- https://v0.dev/t/vHwH1g8n1Aw — по скриншоту найденному в интернете
- https://v0.dev/t/rINhEShaTmZ — по нашему референсу
Все созданные работы по умолчанию доступны публично — можно скрыть только на платном тарифе:
Тарифы
Сервис находится на стадии Beta и можно пользоваться бесплатно. Можно зарегистрироваться через e-mail или авторизоваться через Github. На внутренний баланс сразу начисляются кредиты.
Генерация landing page
Есть 2 варианта генерации:
- Использование промта (текстового описания). Сервис понимает русский язык.
- Использование референса, например скриншот нужного лендинга.
Для пробы загрузим свой простенький референс:
Сперва генерируются несколько вариантов:
Можно выбрать подходящий и продолжить его дорабатывать уточняющими промтами пока не получим нужный результат.
Также можно явно выбирать элементы, которые надо править
Сохранить как landing page
Чтобы скачать и использовать сгенерированный интерфейс в качестве landing page, нажмите кнопку «Code</>»
Откроется вкладка с финальным кодом, где доступен React и HTML версии:
На компьютере создаем файл index.php и копируем в него PHP код из вкладки HTML.
Важный нюанс: генератор использует фреймворк TailwindCSS, и чтобы в лендинге заработали стили, необходимо подключить этот фреймворк, например через CDN, добавив в код <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">.
К сожалению данный сервис не умеет генерировать картинки, их придется закидывать к файлу index.php самостоятельно, использовав названия из полученного кода. Для генерации изображений можно использовать нейросеть Midjourney.
Так как у нас PHP файл, для просмотра его надо залить на сервер или использовать сервис типа https://codepen.io/pen/
