AI を使用したデザインは、ループとして最適に機能します。つまり、説明し、AI が草案を作成し、判断して改良し、これを繰り返すというものです。 AI は選択肢を生み出すのが速いです。正しいものを選択するのはあなた自身の責任です。
ステップ 1: 概要を書きます。ユーザー、タスク、コンテンツ、および制約を説明します。 「既存のコンポーネントを使用して、アカウント、通知、プライバシーのセクションを備えた、携帯電話を使用している人向けの予算作成アプリの設定画面」は、「設定ページを作成する」よりもはるかに良い結果が得られます。
ステップ 2: ドラフトを作成します。 Google Stitch や UXPin の AI アシスタントなどの Prompt-to-UI ツールは、説明やスケッチを画面に変換します。最初のバリエーションを受け入れるのではなく、いくつかのバリエーションを尋ねて比較してください。
ステップ 3: デザインツールで調整します。最高のドラフトを Figma、Penpot、または別のエディターに取り込みます。階層、間隔、コピーを修正し、AI が通常スキップする状態 (読み込み、空、エラー、無効) を設計します。
ステップ 4: コードに接続します。 Claude Code や Cursor などの AI コーディング ツールを使用してインターフェイスを構築できます。 MCP サーバー経由でデザインを読み取ることができると、結果はさらに良くなります。 Figma と Penpot の両方に 1 つあります。インタラクティブなアニメーション部分については、私たちが作成した ExodeUI には MCP サーバーがあり、AI が平易な言語のプロンプトから状態とバネの物理を使用してアニメーションを作成および編集できるようになり、アプリが再生する開いている .exode ファイルに保存されます。
ステップ 5: 発送前に確認します。キーボードとスクリーン リーダーの使用、コントラスト、動きの減少、小さい画面と大きい画面、長いテキストまたは翻訳されたテキストを確認します。 AI の出力を、高速だが新しいチームメイトの仕事のように扱います。便利ですが、常にレビューされます。