Vercel、自然言語からUIを生成するサービス「v0」を実験的に公開。Tailwind CSSとShadcn UIをベースに

2023年9月20日

Next.jsの開発元として知られるVerelは、生成AIに対して自然言語のプロンプトを与えることでWebのユーザーインターフェイスを自動生成してくれるサービス「v0」をプライベートアルファ版として公開しました。

figv0のWebサイト。プロンプト入力欄が中央にあり、下には過去の作例が並んでいる

v0の作例として公開されている、プロンプトから生成されたUIをいくつか見てみましょう。

下記は「A dashboard for saas app」(SaaSのダッシュボードを作って)というプロンプトで生成されたUI画面。

fig

もちろんソースコードも表示できます。デザインはHTMLとCSSで作成されており、Tailwind CSSとShadcn UIがベースになっています。

fig

「A music player UI in a macOS windows」(macOS用のミュージックプレイヤー)というプロンプトで生成したUI。

fig

左上にある「Add a container div to wrap the...」というプロンプトは、最初のプロンプトで生成された後のUIに対して、さらに変更や追加などを指定した際に使われたプロンプトです。

「Give me a set of 12 buttons. Use a different color for each button. Put them in a grid」(12個のボタンを色違いで生成して、テーブルとして並べて)というプロンプトで生成されたUI。

fig

「a contact form」(問い合わせのページ)というプロンプトで生成されたUI。

fig

「A table of financial invoices」(請求書の一覧表)というプロンプトで生成されたUI。

fig

前述の通り、生成されたUIに対して、プロンプトでさらに追加変更などを行うことも可能。例えば、この請求書の一覧表はバージョン20までプロンプトによって変更が行われました。

fig

このようにv0は、人間のデザイナーにデザインを依頼し、対話しながらデザインを詰めていくように、生成AIに対してプロンプトで対話しながらUIを生成できるようなサービスです。

特に定型的なUI画面であれば、プログラマが簡単にプロンプトで生成できてしまいそうです。

現時点でv0はプライベートアルファ版です。上記のデモは誰でも参照できますが、実際にプロンプトを入力して生成させるにはウェイトリストへの登録が必要となっています。

(追記 2023/10/18)ベータ公開が発表されました。

あわせて読みたい

HTML/CSS Web技術 ローコード/ノーコード開発 機械学習・AI 開発ツール Vercel




タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本