Несколько месяцев назад Vercel объявила о запуске V0.dev — инструмента, предназначенного для разработчиков и дизайнеров, который использует искусственный интеллект для генерации кода React. Первоначально V0.dev был открыт для публики только по приглашению, но теперь любой, у кого есть учетная запись Vercel, может получить к нему доступ и использовать его.

Эти инструменты заполняют пробел между разработчиками и дизайнерами и экономят время многих компаний при запуске проектов и продуктов. В этом посте я расскажу о ценности V0.dev, о том, как он работает, и о влиянии открытого исходного кода на подобные проекты.

Что такое V0.dev?

V0.dev — это инструмент, похожий на ChatGPT, но ориентированный на генерацию кода пользовательского интерфейса. Для генерации кода он использует библиотеки shadcn/ui и Tailwind CSS. После генерации кода веб-сайт предоставляет команду установки npx, чтобы вы могли легко добавить сгенерированные компоненты в свой проект.

Как использовать V0.dev?

написание подсказок

V0.dev описание предоставлено для вас подсказок для создания дизайнерских способностей. Кроме того, V0 Изображениями также можно манипулировать, что позволяет улучшить дизайн выбранных элементов. Чтобы лучше понять, как это работает, я провел несколько экспериментов по проверке его работоспособности.

Пример

навигационная станция

aigc.cn — известный навигационный веб-сайт AIGC. Давайте попробуем сделать снимок экрана веб-сайта v0.dev.

Затем внесите некоторые улучшения на основе сгенерированного контента.

Затем вы можете увидеть эффект страницы после воспроизведения.

Давайте добавим настроенные данные и развернем их в Vercel, чтобы увидеть АИГК Навигация

Оценка эффективности

Доступен ли готовый к использованию код?

Код, предоставленный V0, готов к использованию в производстве с некоторыми небольшими изменениями и проверками. Эти корректировки включают преобразование больших разделов в компоненты многократного использования, проверку проблем доступности и оценку кода на соответствие вашим стандартам кодирования. Ключом является интеграция его с вашим стеком технологий.

Сможете ли вы понять представленные изображения?

V0 способен обрабатывать изображения, но обработка изображений требует дальнейшего улучшения. Понимание значков и макетов, представленных на изображениях, станет важным направлением для будущего развития этого инструмента.

Работает ли это на других языках?

V0 поддерживает несколько языков, включая арабский. Однако из-за некоторых проблем, связанных с языком, таких как ориентация RTL, вам может потребоваться внести некоторые изменения самостоятельно.

Можно ли использовать его в уже существующих проектах?

Использовать V0 в существующем проекте будет непросто, но если вы думаете о нем как о дружелюбном помощнике или инструменте, который может выполнять некоторую базовую работу, тогда он поможет вашему проекту.

Можно ли использовать его для новых проектов?

С V0 начать новый проект относительно легко. Со временем вам потребуется улучшить качество кода и понять систему извлечения повторно используемых компонентов, что поможет вам ускорить цикл разработки вашего проекта.

Области улучшения для V0.dev

Понимать дизайн-системы

V0 Основная проблема, которую необходимо решить – Понимать дизайн-системы. Это поможет компаниям легче интегрироваться с ним, особенно тем, которые уже делают это сами в течение многих лет. Один из возможных способов добиться этого – V0 Предоставьте клиент, который будет интегрирован с редактором кода, аналогично GitHub Copilot практики.

Импорт из программного обеспечения для проектирования

Одна из важных функций, которыми должна обладать V0, — это возможность импортировать проекты из программного обеспечения для проектирования, такого как Figma. Если Vercel сможет реализовать возможность импорта из Figma, V0 сделает новый шаг вперед в помощи программистам и дизайнерам.

Улучшите обработку изображений

V0 также может улучшить способ обработки изображений, позволяя понимать значки и макеты, представленные на изображении. Этого улучшения можно достичь, анализируя изображения и разбивая процесс на несколько этапов для предоставления подсказок, или даже используя мультимодальные проекты, которые понимают макеты и значки.

Улучшите пользовательский опыт веб-сайта

Веб-сайт V0 имеет несколько функций, которые можно улучшить в дальнейшем, например, возможность редактору кода выбирать элемент из пользовательского интерфейса и автоматически прокручивать его до позиции этого элемента. Кроме того, селекторы элементов можно усовершенствовать, чтобы можно было выбирать несколько элементов.

в заключение

Судя по проведенным мной экспериментам, я считаю, что V0 в некоторых местах лучше, и мне бы хотелось, чтобы он улучшился. V0 достаточно зрелая и полезная для программистов и дизайнеров. Это устранит разрыв между ними и сократит цикл разработки веб-приложений. Я предвижу, что в будущем команда Vercel будет поддерживать новые технологические стеки и системы проектирования, которые окажут значительное и более широкое влияние на сообщество.