v0を既存デザインシステムに組み込む実践ガイド

v0.dev を「試してみたけど、うちのコンポーネントライブラリと合わなくて…」で止まっているチーム、多いんじゃないでしょうか。たしかに v0 は shadcn/ui を前提に生成するので、Chakra や MUI を使っているプロジェクトではそのまま取り込めません。

でも、実はトークンだけ合わせて、出力をレビューフローに乗せるという運用にすれば、十分使えます。この記事ではその具体的な手順を書きます。

1. デザイントークンを v0 に教え込む

まず前提として、v0 は「プロンプトに書かれた文脈」を強く反映します。つまり、自分たちの色・スペーシング・タイポグラフィを Tailwind config 風の形でプロンプトに含めると、かなり馴染む結果が返ってきます。

デザイントークンは、AI にとっての「文法」です。これを渡さずに UI を生成させるのは、辞書なしで翻訳を頼むのと同じ。

例えば、ブランドのプライマリが #0F9E8E で、間隔スケールが 4px ベースなら、それをシステムメッセージに忍ばせておきます。

2. 出力されたコードを「翻訳」する

v0 は shadcn/ui の <Button /> を出してきます。これを自社の <AppButton /> に置換するスクリプトを用意しておくと、置換の手間が激減します。

• Button → AppButton
• Card → Panel
• cn() → clsx()

チームの codemod で 5 分でセットアップできるので、初期投資としては安い。

3. レビューフローに組み込む

v0 の出力は、そのまま PR に入れないこと。デザイナーが Storybook でスクショを撮り、デザインシステムの Do/Don't に照らしてチェックするのがベストプラクティスです。

まとめ

v0 は「完成品を作るツール」ではなく、「70% まで爆速で運んでくれるツール」と捉えるのが健全です。残りの 30% は人間の目で整える — それで十分、速度は圧倒的に上がります。