2024-03-10 ツール
デザインとコードを一度に出力するv0
vercel社のv0というサービスは、デザインとコードを一度に出力することができる万能サービス。
使い方も簡単で、出力してほしい画面内容をプロンプトに入力するのみ！
画像での入力もできるから、真似したい画面のスクショを入力すれば似た画面のデザインとコードを生成できるよ！
実際にやってみよう
今回は、サイトのデザインをパクれるか検証してみようと思うので、
このサイトの"おすすめ教材"のページのスクショを入力として入れてみる。
公式サイト
入力する画像
その結果出来上がったデザインがこちら！
共有リンク
結構スタイリッシュ!それもそのはず、
v0で生成されるUIは、Shadcn UIとTailwind CSSというライブラリとフレームワークをベースにしているから
UIデザインは、モダンでスタイリッシュなデザインのものが生成されるんだ。
これ、共有リンクはあるからプロトタイプを作ってすぐに見せられるのも良いね！
個人開発での用途
ダッシュボード系ならこれで一発で作れちゃうし、フォームのデザインとかもこれが頼りになりそう！
個人開発なら使える場面結構多いと思うから、プロダクトとデザインの相性が良さそうだったら積極的に使ってみよう。
終わりに
今回はこんな感じ！
もし何か相談とか質問、記事のリクエストなどあったら気軽にTikTokのDMに送ってね~!
じゃあまた次の記事で会おうー！バイバイっ