Open3
生成AI時代のUIコンポーネントshadcn/uiを使ってみる
Yukito Ohiraなぜshadcn/ui?
- v0で特にフレームワークを指定しないとこれがデフォルトになるため
- プロジェクトもshadcn/uiで作っておくとv0の結果をそのまま使いやすい
- もちろんv0で他のデザインフレームワークを指定することはできるが、デファクトに合わせておいたほうが学習データがたまって生成精度が良くなっていきそう
shadcn/ui でのプロジェクトの作り方
公式
0から作る場合だと、Vite+React+TypeScriptの構成が良さそう
shadcn/uiのコンポーネントの使い方
- 他のデザインフレームワークのように、npm install で一括でライブラリの中にごそっとインストールされるのではなく、
npx shadcn@latest add button
のように必要なコンポーネントを適宜追加していく。
src/components/ui/button.tsx にコードが生成されるのでカスタマイズも可能。
Yukito Ohira余談
このスクラップを書いてる時に例としてv0に 「案件管理システムを作って」という雑なプロンプトを投げたらshadcn/ui使ってなかったんので「もしかしてshadcn/uiをv0では使わなくなった？」と少し焦った。
v0に一応聞いてみたら依然としてshadcn/uiを使っているらしい
なので依然としてshadcn/ui は使えるようになっておいたほうが良いと思う
Yukito Ohirav0 って何？を知らない人のためのコメント
v0
WebサービスのUI生成に強い