v0とは
Vercelが提供するサービスの1つで、入力したテキストに対応したUIを提案してくれる生成AI。
プロンプトへ入力したテキストに合わせて、UIとReact × (shadcn ui or tailwindcss)のコードを生成する
2023年12月13日現在はPrivate Beta版として機能を提供
UIを生成する
プロンプトに「Material You Button」と、入力すると以下のような結果が得られる(生成物)。
3つのUIが提案され、Codeを押すとそれぞれのコードを確認できる。
生成されたボタンはどちらかといえばMaterial Design2の見た目をしていている(参考)。
Material Design Youの見た目へ近づけるために、角丸に丸みを帯びさせたい場合には生成物に対して追加の入力が可能。
生成物に対する入力は特定の箇所に対して行うこともできる。
このような生成物は基本的には公開される。Premiumプランに加入することで、非公開に生成することができる。
他者の生成物は誰でも閲覧することができる。
感想
ポジティブな感想として以下の点を抱いた。
- 集合知を元に特定機能のUIを生成できる
- 大きなコンポーネントのマークアップを任せられる
- 自分の思い描くUIへ微調整を行える
ネガティブな感想として以下の点を抱いた。
- ロジックの生成を行なってくれない
- スタイリング方法が限られている
- a11yに対する考慮は多分ない(意味論に沿った要素を配置してくれる)
今すぐ、React開発を劇的に加速させるようなツールにはならないように感じた。
現時点では以下のように使用することが多そう。
- デザインを飛ばして開発するときにUIからマークアップまでしてもらうとき
- デザインについて考える時の案を出すとき
今後、ロジックなども組み込めるように進化するとコンポーネントの開発速度が劇的に上がると感じた。