Skip to main content
デザインフレームは単なる絵ではなく、本物のソフトウェアの仕様書です。フレームが仕上がったら、それをAgentに渡しましょう:フレームを選択し、アクションバーで**Build…**を選び、進め方を選びます:
  • 同じプロジェクト内で、デザインを新しいアプリとしてビルドする
  • デザインの見た目を、すでに持っているアプリに適用する
  • どちらの場合も安全にロールバックできる — Agentは開始前にチェックポイントを作成します

フレームからアプリへの2つの道

選択したDesignフレームの**Build…**メニューは両方をカバーします:
選択されたDesignフレーム(APEX X1 Exact Replica)で開いたBuildメニュー。見出しは「Build or apply your designs」で、新しいアーティファクトを作成する「Build this design」と、プロジェクトのAPEX X1 Design SystemとそのScroll Heroウェブサイトを列挙する「Apply to an existing creation」が表示されている

Build…メニュー:新しいアーティファクトを作成するか、既存のものにデザインを適用します。

このデザインをビルドする

Build this designを選ぶと、そのフレームから新しいアーティファクトが始まります。Agentがレイアウト、スタイリング、アセットをビルドし、プロジェクトのアーティファクト一覧に表示されるライブで動作するアプリに仕上げます。

既存のアプリに適用する

このメニューにはプロジェクト内のすべてのアーティファクトも一覧表示されます。いずれかを選ぶとデザインがそのアプリに適用されます:Agentがフレームに合わせてアーティファクトのコードを書き換え、Designフレームは参照用としてCanvasに残ります。これが、最初からやり直すことなくすでにビルド済みのアプリを再スタイルする方法です。

流れ

1

ビルドするデザインを選ぶ

出荷したいフレームを決めます。まずCanvas上で候補を並べて比較しましょう — ビルドすると今回の探索は一区切りしますが、Agentがチェックポイントを作成するのでいつでもロールバックできます。
2

Agentに渡す

フレームを選択し、アクションバーで**Build…**を選んで進め方を選びます:新しいアーティファクトか既存のものか。Agentがデザイン、レイアウト、スタイリング、アセットをビルドし、進捗をチャットで報告します。
3

ビルドを確認する

Agentが変更内容を報告し、チェックポイントを作成します。結果を開いてデザインが実際に動いているのを確認し、うまく反映されなかった部分はチャットで調整を続けます。
Designフレームから新しいアプリをビルドするにはCoreまたはProプランが必要です。デザインの適用やその他のReplit Design機能はすべてのプランで利用できます。プランの詳細は請求を参照してください。

ビルド後:本物にする

フレームをビルドすると、デザインがそのまま反映された動作するアプリが手に入ります。モックアップは動いているふりをしていただけですが、これでAgentが本物の機能を追加できます。チャットで必要なものを依頼しましょう:
  • サインインを可能にするReplit Authでユーザーアカウントを追加します。ユーザーは設定不要でReplitアカウントでサインインできますし、独自のプロバイダーを持ち込むこともできます。
  • 実データを保存する:組み込みのDatabaseで注文、メッセージ、設定を保存・取得します。
  • 課金するMonetizationインテグレーションで支払いとサブスクリプションを追加します。
  • 他のサービスに接続する:Agentはあなたのプロンプトに基づいて、メールからSlack、Googleサービスまでインテグレーションを自動的に有効化します。

公開して育てる

アプリが動作するようになったら、人々の目に触れさせて改善を続けましょう:

次のステップ