SlackのアイデアからReactプロトタイプを生成
Slackでアイデアを説明するだけ。Zeroがv0でクリック可能なReactプロトタイプを生成し、ライブプレビューリンクをスレッドに投稿します。
Zeroの接続先:
Zeroが出力する結果
課題
Slackスレッドで機能の動作方法を議論しています。誰かが新しいUIパターンを提案 - コマンドパレット、設定パネル、マルチステップウィザード。言葉では伝わりません。ホワイトボードに描くオプションもありません。Figmaセッションをスケジュールすると決定が来週に延期されます。Zeroに自然言語でアイデアを説明します。v0を呼び出し、完全にインタラクティブなReactプロトタイプを生成し、ライブプレビューリンクをスレッドに投稿します - 1分以内に。会話が先に進む前に全員がクリックスルーできます。
Zeroによる解決方法
ステップ1：ツールを接続する
ステップ2：Zeroに聞く
@Zero これをプロトタイプ化: ユーザーがエージェント、最近の実行、コネクターを検索できるコマンドパレット。キーボード操作可能、ファジー検索、右側にプレビューパネルを表示。
自然言語でアイデアを説明
仕様書もワイヤーフレームも不要。UIが何をすべきか - コンポーネント、インタラクション、表示するデータをZeroに伝えます。大まかなスケッチ説明を貼り付けるか、スレッドから即興で。
Zeroがv0でプロトタイプを生成
Zeroがあなたの説明を構造化されたv0プロンプトに変換し、v0 APIを呼び出します。v0が完全にインタラクティブなReactコンポーネント - 本物のボタン、本物の状態、本物のナビゲーション - を生成します。
ライブプレビューリンクをSlackに投稿
Zeroがv0プレビューURLを同じスレッドに投稿します。チームメイトはあらゆるデバイスで、何もインストールしたりコードをチェックアウトすることなく、すぐにプロトタイプをクリックスルーできます。
ステップ3：さらに活用する
より良い結果のためのヒント
外見だけでなく振る舞いを説明しましょう。「行をクリックするとその下に詳細が展開」は「展開可能な行」よりも正確なプロトタイプを生成します。
既存のUIパターンを名前で参照 - 「VS Codeのコマンドパレットのように」や「Notionのスラッシュメニューのように」 - v0の生成を導きます。
最初の結果の直後にイテレーションプロンプトを使いましょう。1回の改良で通常90%の完成度に達します。