UXPin Wire を使えば、完全にインタラクティブで、コードに裏打ちされたプロダクトフローを作成できます。ゼロから、あるいはコンポーネントや一連の画面を起点として、ロジック、ナビゲーション、フォームの動作、レスポンシブレイアウトを追加し、その結果を、他のユーザーがブラウザで開けるホストされたリンクとして共有できます。
Wireは、UXPinのAIシステム「Forge」を基盤としており、組み込みのコードエディタを通じて生成されたコードに直接アクセスできます。すべてが連携しているため、Forgeやコードで行った変更は、ライブプレビューに即座に反映されます。
Wireは、コンポーネントやテキストによる説明から、動作するReactアプリを生成します。生成されたアプリは「Playground」で操作できます。Playgroundはライブプレビュー機能であり、フローを順にクリックして進めたり、フォームをテストしたり、ロジックをリアルタイムで確認したりできます。変更を加えるには、UXPinのAI「Forge」を使用します。Forgeはアプリの現在の状態を把握しており、ユーザーの指示に基づいてアプリを更新します。変更内容はすべて、Playgroundに即座に反映されます。
内部的には、Wireが実際のReactコードを生成しています。コードエディタで直接コードを確認・編集したり、プロジェクト全体を Vite + React アプリとしてエクスポートして開発者に引き継いだりできます。
各アプリは「ビルド」として保存されます。同じ起点から別の Wire アプリを作成すると、そのビルドの新しい「バリアント」として保存されるため、これまでの作業内容を失うことなく、さまざまな方向性を試すことができます。すべてのビルドは Wire ダッシュボードからアクセスでき、そこでコレクションに整理することも可能です。
複数の画面を1つのワークフローに統合し、本格的なナビゲーション、フォームの検証、状態管理を実現します。これは、オンボーディングフロー、チェックアウトプロセス、登録フォーム、ダッシュボードなど、静的なプロトタイプでは不十分な、複数のステップからなるユーザー体験に役立ちます。
Wireアプリをホストされたリンクとして公開しましょう。UXPinアカウントがなくても、誰でもブラウザで開くことができます。これにより、フィードバックの収集やユーザーテストの実施、ステークホルダーへのプレゼンテーションが、プロトタイプの操作方法を説明することなく、はるかに簡単に行えるようになります。
すべてのWireアプリには、エクスポート可能なReactコードベースが付属しています。開発者は、修正箇所や仕様書の注釈ではなく、ローカルで実行し、さらに開発を進められる実働するVite + Reactプロジェクトを手に入れることができます。これにより、デザインと実装の間のギャップが短縮されます。