ほとんどのAIデザインツールには根本的な問題が存在します。それはピクセルを生成するだけで、コンポーネントを生成しないという点です。
UIを記述すると、AIはボタンやカード、入力フィールドのように見える矩形を描画します。デモでは非常に印象的に感じられるでしょう。しかしその後、エンジニアは実際のコンポーネントライブラリと一切連携していないため、すべてを一から再構築しなければなりません。
そこでUXPinはForgeを開発しました。これは実際のReactコンポーネントと連携するAIアシスタントです。エンジニアが本番環境で使用するコンポーネントと同一のものを扱います。デザイナーは視覚的に作業しますが、出力結果は本番環境対応のReactコードとしてエクスポートが可能です。
AIによって生成されたUIの問題点
まず、一般的な流れは以下の通りです。
- デザイナーがAIツールを使ってダッシュボードを生成する
- AIは静的なモックアップ（形、色、テキスト）を生成する
- デザイナーがそれをエンジニアに引き渡す
- エンジニアはデザインを見てコードベースを開き、実際のコンポーネントを使って作り直す
- デザイナーが差異に気づき、チケットを起票する
- 繰り返し
AIが生成したデザインは、最初から「本物」ではありませんでした。それはUIそのものではなく、UIの画像に過ぎなかったのです。
これは単なる効率化の問題ではありません。AIが解決すべきとされた設計から開発への引き継ぎプロセス全体の問題なのです。しかし多くのAIツールは、その問題を解消するどころか、プロセスのより早い段階へ移動させただけでした。
もしAIが実際のコンポーネントと連携したら？
UXPin Mergeは、本番環境のReact コンポーネントライブラリをデザインツールに直接同期します。再現品ではありません。SVGをインポートしたものでもありません。ブラウザ上でレンダリングされる、実際のコンポーネントそのものです。
デザイナーは、本物の <Button>、<Card>、<DataTable> コンポーネントをドラッグして配置します。実際の props を設定し、hover、disabled、loading、error といった実際の状態を確認できます。キャンバス上にあるものは、そのままコードベースに存在するものです。
Forgeはこれをさらに発展させます。ForgeにUIの生成や編集を依頼すると、単に図形を描くのではなく、あなたのコンポーネントライブラリにある実際のコンポーネントを配置し、設定するのです。
技術的な仕組み
コンポーネント同期
Mergeは、CLIまたはCI連携を通じて、本番環境のReact コンポーネントライブラリに接続します。コンポーネントはエディター内のiframeでレンダリングされ、デザイナーはブラウザ上で実際に動作しているコードをそのまま見て、使用できます。
対応内容：
- React（主な対応対象）
- Storybook 連携
- npm パッケージ
- Git 同期による継続的な更新
ライブラリが更新されると、デザインツール側も自動で更新されます。手動での再同期は不要です。バージョンの乖離も発生しません。
ビジュアル編集・実際のコンポーネント
デザイナーはコードを書くのではなく、キャンバス上にコンポーネントをドラッグするというビジュアル操作で作業します。ただし配置しているのは、完全な再現度を持つ実際のReact コンポーネントです。
- すべてのpropsがUI上で公開・設定可能
- コンポーネントの状態（hover、active、disabled、loading）が標準で組み込まれている
- バリアントはライブラリで定義された通りに動作する
- レスポンシブ挙動は本番環境と一致する
デザイナーが <Button variant="primary" disabled> を設定した場合、それは長方形にスタイルを当てているのではなく、実際のコンポーネントに対して実際のpropsを設定しているということです。
ForgeによるAI生成
Forge が UI を生成・編集する際も、これらの実コンポーネントを使って動作します。ライブラリ内で利用可能なコンポーネント、各コンポーネントが受け取れるprops、存在するバリアントを理解した上で処理を行います。
生成される結果はキャンバス上のビジュアルデザインですが、そこに配置されるすべての要素は、実際のコンポーネントであり、実際の設定を持っています。偽物のボタンや近似値のカード、デザインシステムに「なんとなく似ているオブジェクト」は一切ありません。
Forgeは会話のコンテキストも維持します。次のように反復的な指示が可能です。
- 「保存の横にキャンセルボタンを追加して」
- 「これをコンパクトバリアントにして」
- 「横並びのレイアウトに切り替えて」
それぞれのプロンプトは、既存のデザインをベースに変更を加えます。最初から作り直すことはありません。手動編集に切り替えたい場合も、そのまま作業を続けるだけです。モード切り替えもエクスポートも不要です。すでに実際のデザインを編集している状態なのです。
コードとしてエクスポート
引き渡しの準備ができたら、デザインを React コードとしてエクスポートできます。エクスポートされるコードは、キャンバス上の内容を正確に反映します。コンポーネント、props、構造はすべて同一です。
// Exported from UXPin
<Card padding="lg">
<Form>
<TextField label="Email" type="email" />
<Button variant="primary" size="lg">Save</Button>
</Form>
</Card>エンジニアが受け取るのは、自分たちのコンポーネントライブラリを使ったコードです。翻訳は不要。作り直しも不要です。
APIアクセス
コンポーネントデータ（props、状態、バリアント、構造）は、API経由でも利用できます。これにより、ドキュメントツール、テストパイプライン、その他ワークフローとの連携が可能になります。
これによって何が変わるのか
デザイナーにとって：
- 近似的なものではなく、実際のコンポーネントを使ってビジュアルに作業できる
- すべての状態やバリアントが、オーバーレイによる擬似表現ではなく、標準で組み込まれている
- プロトタイプが実際に動作する ― 本物のインタラクション、本物のレスポンシブ挙動
- 新しいツールを学ぶ必要はない。依然としてデザインキャンバスで作業できる
エンジニアにとって：
- エクスポートすると、本番環境でそのまま使えるReact コードが得られる
- 実際のコンポーネントライブラリを使用しており、翻訳や作り直しは不要
- propsや構造が、設計された内容と完全に一致する
- 「そのコンポーネントはそういう動きじゃない」というやり取りがなくなる
チームにとって：
- デザインとコードの間に、単一の信頼できる情報源が生まれる
- デザインシステムの採用がツールによって強制される ― デザイナーは存在するものしか使えない
- AIは、あなたのコンポーネントにしかアクセスできないため、ブランドから逸脱できない
- 翻訳工程が存在しないため、反復が速くなる
制限事項とトレードオフ
機能しないケースについても正直に述べます。
コンポーネントライブラリが必要（補足あり）：チームがまだコード化されたReact コンポーネントで作業していない場合、Forgeの効果は限定的です。これは、すでにデザインシステムへ投資しているチーム向けに作られています。もしFigmaでピクセルを置くだけで、コード化されたライブラリがない場合、現時点ではこのツールは適していません。
- 補足：幸いなことに、UXPin MergeはすでにMUI、ShadCN、Bootstrapなどのグローバルなコンポーネントライブラリとネイティブ統合されています。カスタムコンポーネントライブラリを持っていないチームにとって、良い出発点となります。
Reactファースト：Mergeは、Reactを強くサポートしています。Vue、Angular、Svelte のサポートは限定的、もしくは存在しません。技術スタックがReactでない場合、この価値提案は成り立ちません。
AIはあくまでAI：複雑なレイアウトでは、手動調整が必要になることがあります。Forgeはゼロから始めるより速いものの、デザイン判断の代替ではありません。素早く80％まで到達し、残りはUXPinの手動デザインツールですべて同じ場所で仕上げます。
学習コスト：Mergeを使うデザイナーは、props、バリアント、コンポーネント構成を理解する必要があります。従来のデザインツールでピクセルを配置するよりも、技術的な作業になります。すべてのデザイナーがこれを望むわけではありません。しかし、デザインエンジニア、テクニカルデザイナー、システム思考の人にとっては、より良い働き方です。
なぜ開発したのか
UXPinは長年、コードベースのデザインツールの開発に取り組んできました。2019年にMergeがリリースされましたが、その背景に常にあった前提は、デザイナーと開発者が異なる媒体（ピクセル対コード）で作業するため、デザインから開発へのギャップが生じているという仮説でした。
多くのデザインツールは、より良い引き渡し仕様、より詳細なエクスポート、より密な統合によってこの問題を解決しようとしています。しかし、それらは依然として、エンジニアが翻訳しなければならない静的な成果物を生成しているに過ぎません。
AIは状況を改善する前に悪化させてしまいました。これまでに目にしたAIデザインツールはどれも、エンジニアが再構築すべき静的なピクセルを増やすだけでした。モックアップは高速化しても、翻訳の問題は解決されなかったのです。
Forgeは、すでに「媒体の問題」を解決しているチームにとって、AIを本当に役立つものにするための試みです。デザイナーがすでに実際のコンポーネントで作業しているなら、AIもそうあるべきです。出力は「見せるだけ」のものではなく、「出荷できる」ものであるべきです。
名前について
「Forge」と名付けたのは、鍛冶場が鍛冶職人の代わりになるのではなく、熱とスピードを与える存在だからです。技術には、依然として人間の判断が必要です。
AIも同じであるべきです。作業を置き換えるのではなく、加速させる存在であるべきなのです。
今すぐForge AIをお試しください
ForgeがUXPinで正式リリースされました。AI機能を有効にしている全アカウントと無料トライアルでご利用いただけます。
UXPinにアクセスし、さっそく始めましょう。
