概要

Vibrはデザイナー向けのプロトタイピングツールです。画面の内容を普段の言葉で説明すると、エージェントが計画を立て、選択したデザインシステムで構築し、正しくレンダリングされるかを確認し、アクセシビリティとレイアウトの問題をレビューして、見つかった問題を修復します。結果は実際のReactコードで、クリックして操作したり、修正したり、注釈を付けたり、フローとしてリンクしたり、エクスポートしたりできます。

仕組み

1. キーを用意します。 Vibrは、ご自身のAPIキーを使ってGoogle Gemini、OpenAI、Anthropic、OpenRouterを呼び出します。キーはブラウザーの外に出ません。
2. デザインシステムを選びます。 Material UI、Ant Design、Fluent UI、Mantine、Shoelace、Octuple、またはnpmの任意のパッケージを選べます。
3. 画面を説明します。 Vibrは処理中の各ステップを表示し、キャンバスにはコードが書かれている途中から画面が描かれます。
4. 続けて作り込みます。 変更を依頼したり、1つの要素を指定してその部分だけを変更したり、バージョンを比較したり、フィードバックをピン留めしたり、ライブラリに保存したりできます。

ほかのツールとの違い

• 見た目だけ似せたものではなく、本物のコンポーネント。 下書きは実際のデザインシステムのパッケージからインポートするため、表示されるものはエンジニアが出荷するものと同じです。
• 自分の作業を自分でチェック。 すべての下書きはレンダリングされた後、表示される前に、デスクトップ、タブレット、スマートフォンの幅で自動アクセシビリティチェックによってレビューされます。
• ライブラリをどこでも活用。 追加した画像、動画、カラーテーマ、タイプランプ、アイコンは、@メンションで任意のリクエストに取り込めます。
• アカウントもサーバーも不要。 すべてがブラウザー内で動作します。詳しくはキー、プライバシー、ストレージをご覧ください。

次に読むページ

• 初めての方ははじめにからどうぞ。
• より良い結果を得たい場合はプロンプトの書き方をお読みください。
• 各ステップの意味を知りたい場合は実行の仕組みをご覧ください。
• 問題が発生した場合はトラブルシューティングをご確認ください。