- 同じプロジェクト内で、デザインを新しいアプリとしてビルドする
- デザインの見た目を、すでに持っているアプリに適用する
- どちらの場合も安全にロールバックできる — Agentは開始前にチェックポイントを作成します
フレームからアプリへの2つの道
選択したDesignフレームの**Build…**メニューは両方をカバーします:
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サービスまでインテグレーションを自動的に有効化します。
公開して育てる
アプリが動作するようになったら、人々の目に触れさせて改善を続けましょう:- 公開する:Publishingツールから出荷し、公開後の運用アプリの更新方法は公開後の作業を参照してください。
- 本物のアドレスを持つ:カスタムドメインを購入または接続します。
- 見つけてもらう:SEO Agentを実行して技術的な監査とワンクリック修正を行います。
- 訪問者の声を聞く:フィードバックウィジェットを追加して、問題や改善案を人々が報告し、それをそのままAgentに送れるようにします。
- 健全に保つ:公開済みアプリの監視でステータス、パフォーマンス、稼働率を追跡します。
次のステップ
- DesignとBuildの違い:それぞれの入口をいつ使うか。
- デザインシステムを作成する:出荷したデザインを抽出して、次のデザインが最初からブランドに沿うようにします。