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

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

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

スキルとは、AIツールがオンデマンドで読み込む一連の指示です。このスキルでは、フロー設定の中で間違えやすい部分をカバーします。どの編集がパブリッシュを停止させるか、スクリーンを削除したときにどの参照が壊れるか、そしてレンダリングプレビューで何を確認できて何ができないかについて説明します。

Important

フロージェネレータースキルは実験的なものであり、変更はダッシュボードのフローに直接保存されます。まずドラフトまたはコピーに対して実行し、パブリッシュ前にFlow 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、ads-manager、paywall-teardown と一緒に同梱されています。以下のコマンドをどれか一つ実行すると、4つ全てがインストールされます。

インストール後、スラッシュコマンドをスキルにマッピングするツールでは /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 をクリックします。プレースメントに配置されていないフローはユーザーに届かず、Draftのフローはプレースメントに追加できません。まず公開してください。詳しくはフローの保存と公開をご覧ください。

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

プロンプト例

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

ペイウォールを翻訳する

「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をフローに紐付けます。そのため、フロー内のメディアをペイウォールビルダーで手動で追加する必要はありません。必要なのはファイルパスであり、画像そのものではありません。チャットに画像を貼り付けたり添付したりすると、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 Editorも用意されています。どちらが高機能かという違いではなく、作業がどの環境で行われるかが違いです。

AI Editorは、開いている画面上で動作するAdaptyのエージェントです。スキルはその逆の構成です。あなた自身のエージェント、あなたのモデル、あなたのツールが主役であり、Adaptyはそのエージェントが操作できるツールのひとつです。あなたのAIツールがすでにアクセスできるもの—リポジトリ、デザインファイル、MCPサーバー、独自のプロンプトやコンテキスト—はすべてそのまま活用できます。

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

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

スキルが行わないこと

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

  • 公開はあなた自身が行います: Adapty CLI にはパブリッシュコマンドがないため、スキルは下書き保存までしか対応しません。
  • 上書きにはあなたの承認が必要です: 保存は設定全体を置き換えます。部分的な書き込みや元に戻す操作はできません。承認画面にはフロー名、ID、ステータス、および編集前にスキルが作成したバックアップファイルが表示されます。
  • 同時編集が発生すると書き込みは失敗します: 2回目以降の書き込みでは、設定の updated_at タイムスタンプが Adapty に送り返されます。その間にチームメンバーがフローを保存していた場合、Adapty は相手の作業を上書きせずに書き込みを拒否します。
  • フローの削除はダッシュボードで行います: CLI には削除コマンドがないため、スキルが作成したフローはダッシュボードから手動で削除するまで残ります。
  • 実際の数値やアセットはあなたが用意します: 評価、レビュー数、割引率、ストアの価格は決して自動生成されません。パターンに必要な情報が提供されていない場合、スキルはそれを尋ねるか、該当要素を省略し、どちらの対応をしたかを明示します。
Note

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

制限事項

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

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

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

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

  • Video: スキルはビデオが配置される場所にメディア要素を挿入するため、フロービルダーでファイルを差し替えた時点でレイアウトはすでに整っています。
  • フォント: スキルはデザインで使用するテキストスタイルを作成し、プレースホルダーのフォントに紐付けます。フロービルダーでフォントをアップロードし、それらのスタイルに割り当ててください。

プレビューは1つの画面を1つの状態でレンダリングする

スキルのプレビューページは単一の画面を表示するだけで、フロー全体を通して動作することはありません。以下のいずれも確認できないため、実機でテストしてください。確認方法についてはフローのプレビューをご覧ください：

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

次のステップ