English 中文TürkçeРусскийFrançaisTiếng ViệtEspañol日本語

フローを操作するためのエージェントスキル

flow-generator スキルを使えば、AIコーディングツールがターミナルからフローを作成・編集できます。作成または変更したい内容を自然言語で伝えるだけで、ツールがAdapty CLIを通じてフローのビルダー設定を読み込み、書き換え、プレビューを表示し、承認後にドラフトとして保存します。

スキルとは、AIツールがオンデマンドで読み込む一連の指示です。このスキルでは、フロー設定でミスが起きやすい部分を説明します。具体的には、どんな変更を加えるとパブリッシュができなくなるか、スクリーンを削除したときにどの参照が壊れるか、レンダリングプレビューで確認できることとできないことについて解説します。

Important

フロージェネレータースキルは実験的な機能であり、ダッシュボード上のフローに直接変更を保存します。必ず下書きまたはコピーに対して実行し、パブリッシュ前にすべての変更を Flow & Paywall Builder で確認してください。

始める前に

  • スキルをサポートするAIコーディングツール: Claude Code、GitHub Copilot CLI、OpenAI Codex、Gemini CLIはすべて対応しています。
  • Adaptyカタログのプロダクト: 販売画面をデザインする前に、スキルはあなたのプロダクトを一覧表示し、どれを画面に含めるかを確認します。適切なものがない場合は、指定したストアのプロダクトIDから新しく作成することもでき、その際は事前に確認が行われます。

これでできること

フローをゼロから作成する

  • 説明から作成: 「フィットネスアプリ用のペイウォール、年間プランを事前選択した2つのプラン」といった説明を渡すだけで、構成を自動で決定し、検証済みのパターン（タブ、プランカード、トグル、カウントダウン、プログレスバー、ボトムシート）からビルドし、カタログから選んだプロダクトを使用します。
  • スクリーンショットやデザインから作成: 参照画像を渡すと、レイアウト・カラー・タイポグラフィ・アイコンスタイルに合わせて再現し、再現できなかった差異をすべて報告します。参照画像は競合他社のペイウォール、自社の既存画面、またはデザインツールのフレームでも構いません。AIツールがMCP経由でそのデザインツールに接続されていれば、フレームを直接読み取るため、スクリーンショットのエクスポートやデザインを言葉で再説明する必要はありません。
  • コンバージョン基準での評価: デザインを提供しなかった場合、スキルはビルドした画面に対してAdaptyのpaywall-teardownライブラリを実行し、最も優先度の高い問題を修正してから、あなたに画面を見せます。汎用的なレイアウトではなく、あなたのカテゴリで成果を上げているパターンに基づいた画面が得られます。

既存のフローを変更する

  • 新しい市場へのローカライズ: ロケールを追加し、見出し、ボタンラベル、プランのキャプション、画像スロット、入力プレースホルダーなど、ローカライズ可能なすべてのフィールドを埋めます。1つの完成したペイウォールを10言語に展開する最速の方法です。
  • すべてのロケールのコピーを一括で書き直す: 構造に手を加えず文言を変更し、価格変数を通してではなく変数の周りを編集するため、価格の表示が維持されます。
  • フローの構成を変更する: 画面の追加・削除・並び替えを行い、変更によって壊れたナビゲーションを修復し、到達できなくなった画面があれば報告します。
  • クイズと分岐を追加する: 選択可能なグループ、オプションID、各回答を対応する画面にルーティングする条件アクションを構築します。これにより、オンボーディングが適切な属性付きのペイウォール訪問に変わるパーソナライゼーションが実現します。
  • テスト用のバリアントを作成する: 既存のフローをベースに新しいフローを生成し、テストしたい変更を適用します。テーマ、フォント、ロケール、プロダクトはそのまま引き継がれるため、バリアントは意図した箇所だけが異なります。
  • シーズンやキャンペーンに合わせて外観を変更する: 参照画像から色をサンプリングし、各画面を個別にスタイル変更する代わりに、フロー全体に新しいテーマを適用します。

生成されるもの

プランタイムラインのあるペイウォール

生成されたファイナンスペイウォール：グリーンのレールでつながれた3ステップの番号付きタイムライン、月換算価格と年間価格が表示された選択済みの年間プランカード、未選択の月間カード、そして続行ボタン

2枚のプランカードの上に番号付きタイムラインを配置しています。デバイス上でレンダリングされているため、ストアが価格を解決済みです。年間プランの月換算価格はAdaptyが計算します。

1文からペイウォールを生成

生成されたダークテーマのフィットネスペイウォール：見出し、アイコン付きの3つのメリット行、「Best value」バッジ付きの選択済み「年間」カード、未選択の「月間」カード、「Start training」ボタン

指示は「ペイウォール画面を追加して」のみで、参考資料も元のフローもありませんでした。$0.00 はプレビュー用のスタブ値で、割引が指定されていないため Best value バッジが表示されています。

3画面のフロー

横並びに生成された3つの画面：2番目の選択肢が選ばれたトレーニング目標クイズ、3つのフェーズに分かれた8週間のプラン、カウントダウン付きのYearlyカードが表示されたオファー画面

クイズ、プラン、オファーが画面間のナビゲーションで繋がっています。カウントダウンは描画されますが、実際に動作するかどうかはデバイスで確認する必要があります。

スキルをインストールする

スキルは adapty-skills リポジトリに adapty-integration、flow-audit、migrate-placements、ads-manager、paywall-teardown、onboarding-teardown とともに収録されています。これらのコマンドはいずれも7つすべてをインストールします。

インストール後、スラッシュコマンドをスキルにマッピングするツールでは /flow-generator、そうでないツールでは「Use the flow-generator skill」と入力してリクエストします。

あとは普通の言葉でやり取りするだけです。リクエストのほとんどは次のいずれかです：

  • フローを説明する: アプリが何をするか、その画面で何を販売するか、どのプランをデフォルト選択にするか。
  • デザインを指定する: スクリーンショット、自分のアプリの画面、またはデザインツール内のフレームを参照させる。
  • 具体的な修正を依頼する: フロー名と変更内容を伝える — 新しいロケール、別のコピー、追加画面、クイズの回答に基づく分岐など。
  • 質問に答える: どのプロダクトを画面に配置するか聞かれるので、実際の数字が必要な場合は自分で答える（AIは数字を勝手に作らない）。

仕組み

スキルが構築するすべての内容は、ローカルファイルに集約されます。最後のステップが完了するまで、ダッシュボードには何も反映されません。

  1. セットアップと認証。スキルは必要に応じて Adapty CLI をインストールまたは更新し、Adapty へのログインを確認してアプリ ID を読み取ります。ログインしていない場合は、ブラウザでログイン画面を開き、完了するまで待機します。

  2. フローを選択または作成する。編集の場合は、フローのコンフィグを取得し、見つかった内容（スクリーン、ロケール、プロダクト、ナビゲーショングラフ）を報告します。これにより、何かを変更する前に誤ったフローを検出できます。また、取得したコンフィグのバックアップを最初に作成します。新規作成の場合は、すでにコンテンツが存在するフローに上書き生成するのではなく、新しいフローを作成します。

  3. 設定を検証する。このスキルはローカルファイルに対して2つの検証を行い、さらにAdaptyに対して1つの検証を行います。ローカルの検証では、内部参照の整合性とプロパティの形式が確認されます。adapty flows config validate は公開時に使用されるのと同じサービスを実行するため、グリーンの結果が出れば設定は公開可能な状態です。3つの検証はいずれも何も保存しません。

  4. プレビューして繰り返す。スキルは変更されたスクリーンをスクリーンショットとしてレンダリングし、確認します。参照画像を指定した場合は、レンダリング結果をファイルと要素ごとに比較します（色、書体、アイコンスタイル、プロポーションなど）。修正できる差異はここで解消されます。何か問題があればスキルはステップ3に戻りますが、その際に消費されるのは保存ではなくスクリーンショットです。

  5. 承認して保存する。既存のコンフィグを上書きする場合は、明示的な確認が必要です。このスキルは、変更したすべての画面のレンダリング前後を表示し、視覚的な変化がない変更の一覧を表示し、1つの画面をブラウザでライブ表示し、バックアップファイル名を明示します。その後に初めて書き込みが行われます。

実行後

スキルは下書きを保存した状態で終了します。ユーザーに届けるには:

  1. フローをフロー＆ペイウォールビルダーで開きます。 すでにブラウザのタブでフローを開いていた場合は、ページを更新してください — CLI 経由で行われた変更はフロー＆ペイウォールビルダーに自動反映されません。
  2. 変更内容を確認します。 保存前に Published 状態だったフローは、Adapty によって Dirty とマークされ、チームの全員にそのステータスが表示されます。ユーザーには引き続き最後に公開されたバージョンが表示されます。
  3. 実機でプレビューします。 フローのプレビュー では、Adapty モバイルアプリを使った QR コードフローについて説明しています。スキルが「未検証」と報告した内容（分岐、トグル、レンダリングされたロケール以外のロケールなど）をテストしてください。
  4. 公開します。 フロー＆ペイウォールビルダー右上の Publish to Live をクリックするか、ターミナルから adapty flows publish を実行してください。プレースメント に紐付けられていないフローはユーザーに届かず、また Draft 状態のフローはプレースメントに追加できません — まず公開してください。詳しくはフローの保存と公開をご覧ください。

結果が間違っている場合は、バックアップから復元してください。スキルは最初の編集前にコンフィグをコピーし、承認メッセージにそのファイル名を記載します。そのファイルを書き戻すよう指示するか、Flow & Paywall Builder で手動でフローを修正してください。いずれの場合も、保存済みの下書きはユーザーに何も影響しません。

プロンプト例

スキルにはコマンド、設定フォーマット、検証手順が組み込まれているため、プロンプトでそれらを説明する必要はありません。どのフローを対象にするか、完了時にどんな状態になっているべきかを伝えるだけです。

ペイウォールを翻訳する

「Summer 2026」ペイウォールにブラジルポルトガル語を追加して。
見出しだけでなく、すべてのローカライズ可能なフィールドを翻訳し、
対応できなかった箇所があれば教えて。

デザインからビルドする

Figmaファイルの「Winter promo」フレームから新しいペイウォールフローを作成して。
まず自分のプロダクトを表示して、どれを載せるか選ばせて。

分岐するクイズを追加する

Add a quiz screen before my paywall: "What's your main goal?" with three
options, each routing to its own benefit screen, then on to the paywall.

コピーの書き直し

Rewrite the headline and CTA on my onboarding to be shorter and more direct.
Keep the price variables working, and apply it to every locale.

テストバリアントの作成

Copy my "Main paywall" into a new flow and make the monthly plan the
preselected one. Leave the original alone.

キャンペーン用の再スキン

Re-theme my paywall flow to match the colors in ./design/spring.png.
Copy and layout stay as they are.

Add a screen

Add a social proof screen between the quiz and the paywall in my activation
flow — star rating and two testimonials. Ask me for the real numbers.

画像を提供する

このスキルはコンピューター上の画像をアップロードし、返されたURLをフローに紐付けるため、Flow & Paywall Builderで手動でメディアを追加する必要はありません。必要なのはファイルパスであり、画像そのものではありません。チャットに画像を貼り付けたり添付したりすると、AIツールはピクセルデータを受け取りますがファイルは受け取れないため、アップロードするものが何もありません。

アセットをコンピューター上のフォルダーに入れ、そのフォルダーをツールに指定してください。

The hero images are in ./design/paywall/. Use hero-calm.png on the first
screen and the three icons in ./design/paywall/icons/ for the benefit rows.

フォーマットとサイズの制限は、フロー＆ペイウォールビルダーへの手動アップロードと同じです。詳細は画像・動画・アイコンをご覧ください。SVGだけは例外で、アップロードに失敗するため、代わりに単色のグリフをインラインで描画します。

アップロードのたびにメディアライブラリに個別のアセットが追加されますが、CLIコマンドで削除する方法がないため、ビルドを再実行すると同じファイルのコピーが蓄積されます。

存在しないファイル名を指定した場合、似た名前のファイルに置き換えるのではなく、確認を求めます。ファイル名が間違っていると、見た目は正常に表示されるものの誤った画像が含まれた画面が生成されますが、ワークフロー内でそれを検知する仕組みはありません。

独自のエージェントを利用する

Adapty には、フロー＆ペイウォールビルダー内に AI エディター も用意されています。どちらの機能が多いかという違いではなく、作業がどの環境で行われるかの違いです。

AI エディターは Adapty のエージェントで、開いている画面上で動作します。スキルはその逆の構成です。あなた自身のエージェント、あなたのモデル、あなたのツールを使い、Adapty はその一つのツールとして機能します。あなたの AI ツールがすでにアクセスできるすべてのもの（リポジトリ、デザインファイル、MCP サーバー、独自のプロンプトやコンテキスト）がそのまま使えます。

AI エディターflow-generator スキル
エージェントの主体Adapty（ブラウザ上）あなた自身（ターミナル上）
参照できる範囲開いている画面のみAI ツールがアクセスできるすべて
1プロンプトのスコープ1画面フロー全体（画面・ナビゲーション・ロケール）
ローカライズ対象外ロケールを追加し、ローカライズ可能なフィールドをすべて入力
元に戻すプロンプトごとに1クリックバックアップファイル＋保存前の確認
セットアップ不要Adapty CLI とスキルのインストールが必要

AIエディターは、すでにビルダーにいてその画面をリスタイルしたいときに使用します。自分の環境を離れずにフロー作業を進めたい場合はスキルを使用します。

スキルが行わないこと

スキルはあなたのフローをライブコンテンツとして扱います。公開済みのフローは実際のユーザーに配信されているためです。

  • 公開はご自身で行います: スキルは下書きの保存までで止まり、公開は行いません。フロー & ペイウォールビルダー、または adapty flows publish で公開してください。
  • 上書きには承認が必要です: 保存すると設定全体が置き換わり、部分書き込みや元に戻す操作はできません。承認画面にはフロー名、ID、ステータス、編集前にスキルが作成したバックアップファイルが表示されます。
  • 同時編集が発生すると書き込みは失敗します: 最初の書き込み以降は、設定の updated_at タイムスタンプが Adapty に送り返されます。その間にチームメンバーがフローを保存していた場合、Adapty は上書きを行わずに書き込みを拒否します。
  • フローの削除はダッシュボードで行います: CLI には削除コマンドがないため、スキルが作成したフローはダッシュボードから削除するまで残り続けます。
  • 実際の数値やアセットはご自身が提供します: 評価、レビュー数、割引率、ストアの価格は自動生成されません。テンプレートに必要な値が提供されていない場合、スキルはそれを求めるか要素を省略し、どちらの対応をしたかを伝えます。
Note

読み取り、バリデーション、プレビューはいずれも無料で、何も変更しません。コンフィグの保存だけがダッシュボードに反映される操作であり、あなたの承認が必要です。

制限事項

実行には時間がかかります

スキルは変更のたびにバリデーションと再レンダリングを行います。これによりダッシュボードへの壊れた設定の反映を防いでいますが、チャットの返信よりも実行が遅くなります。小さな編集なら数分で完了しますが、分岐を含むマルチスクリーンのフローを作成する場合は 10〜40分 かかります。実行を開始したら、ずっと見ている必要はありません。後で戻ってきましょう。

動画とカスタムフォントは手動での作業が必要です

スキルは画像をアップロードしますが、動画やカスタムフォントファイルはアップロードしません。どちらの場合も、スキルはスロットを構築した上でアップロード作業をあなたに引き渡します：

  • ビデオ: スキルはビデオが配置される位置にメディア要素を設置するため、Flow & Paywall Builder でファイルを差し替えるだけでレイアウトが正しく整います。
  • フォント: スキルはデザインが要求するテキストスタイルを作成し、プレースホルダーのフォントを割り当てます。Flow & Paywall Builder でフォントをアップロードし、それらのスタイルに適用してください。

プレビューは1つの画面を1つの状態で表示します

スキルのプレビューページは単一の画面を描画するだけで、フローを通じてウォークスルーすることはできません。そのため、以下のいずれも確認できません。実機でそれぞれテストしてください — テスト方法についてはフローをプレビューするをご覧ください：

  • ナビゲーションと分岐: ナビゲーションアクションを持つボタンはプレビュー上でその場にとどまるため、条件分岐ルートは発火しません。各スクリーンは独立してレンダリングされます。
  • トグルと複数選択: トグル行と複数選択行は、デフォルト値に関わらずオフ状態で表示されます。単一選択行とプロダクトカードは選択状態が正しく反映されます。
  • 表示中のロケール以外のロケール: プレビューはフローのデフォルトロケールやロケールリストの順序を無視するため、翻訳を視覚的に確認することはできません。Flow & ペイウォールビルダーでロケールを切り替えて、テキストがコンテナからはみ出していないか確認してください。
  • 実行時に解決される要素: 実際の価格、ストアの通貨、ユーザー入力などは反映されません。価格の変数はリテラルのトークンとして表示されます。このトークンは実際の価格より長いため、固定ボタンの下にテキストが隠れることがありますが、実際の価格が解決されると重なりは消えます。
  • ページが認識できない画面サイズ: ビューポートの高さに依存するレイアウトは、画面の小さい端末で実際に確認する必要があります。

次のステップ