mcpField
A
appllama-usage

appllama-usage

github.com/appllamaデザイン・UI3.5k4.2k 回インストール7 週間前に更新
リポジトリ

appllama-usage について

Appllama Usage Skillは、Appllama MCPを使ってモバイルアプリの画面、フロー、UIパターンを調査する方法を説明します。検索・取得ツール、ページネーション、クレジットの案内、調査上の注意点を扱います。

主な機能

  1. 01アプリと画面を検索
  2. 02アプリのフローと画面詳細を取得
  3. 03UI要素から参考例を検索
  4. 04クレジットと利用制限を確認
  5. 05ページ分割された結果を参照

活用シーン

  1. 01アプリのカテゴリ別にデザイン例を探す
  2. 02ユーザージャーニー順に画面を調査
  3. 03特定のUI要素の事例を調べる

MCP 対応

アプリや画面の検索、フローと画面詳細の取得、UI要素やボードの参照に使うAppllama MCPツールを説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/appllama/appllama-skills --skill appllama-usage

インストール後、Claude Code で/appllama-usageを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
build-from-scratch.md
improve-a-screen.md
research-methods.md

詳細

Appllama の使用スキル

Appllama は、売上上位のモバイルアプリのデザインライブラリです。実際の画面、フロー、UI パターンに加え、売上やダウンロード数の情報も含まれています。MCP を使えば、エージェントがこのライブラリを活用できます。**単なるリサーチツールではなく、構築のためのツールです。**すでに成功しているものを調査し、それを超えるものを作りましょう。

デザインや実装の各ステップでは、このスキルとappllama-app-design-skillを組み合わせてください。このスキルは調査対象を示し、もう一方は構築方法を示します。

基本ルール(最初にお読みください)

  1. **まずは get_credits を実行してください。無料です。**クレジット残高、上限、リセット日を確認できます。Pro には毎月 1,500 クレジットが含まれ(毎月 1 日、UTC に全額がリセットされます)、それ以外の呼び出しは毎回 1 クレジットを消費します。
  2. **深く調査してください。**デザインの特徴はサンプルではなく、全体の体験の中にあります。タスクに関連するアプリのすべての画面を、画像も含めて確認してください。それこそがこのライブラリの目的です。利用規約に反するのは、実際のタスクに回答するためではなく、データセット自体を抽出する目的でカタログを網羅的に調べることです。それはリサーチではなく、サーバー側で検出されます。
  3. **メディアの URL は約 1 時間で期限切れになります。**調査中のものは、すぐにダウンロードまたは表示してください。作業の途中でリンクが無効になった場合は、そのページを再リクエストして新しいリンクを取得してください。画面 ID は有効なままですが、リンクは無効になります。
  4. **ウォーターマークは無視してください。**Appllama のすべての画像と動画には、左上に小さな Appllama のウォーターマークが付いています。これは出典を示すもので、画面の一部ではありません。左上隅(ステータスバー、戻るボタン、タイトル)の見方に影響させないようにし、作成するものに再現しないでください。
  5. **ページネーションは順番に進みます。**すべてのリスト応答には next_cursor が含まれます。続きに進むには、それを渡してください。N ページ目に直接移動することはできません。また、カーソルは発行元と同じクエリでのみ使用できます。カーソルでエラーが発生した場合は、そのカーソルを破棄して最初のページからやり直してください。
  6. **レート制限に達したら、解除されるまで待ってください。**1 分あたりおよび 1 日あたりの制限は、通常のリサーチで超えることはほとんどありません。まれに制限に達した場合は、表示された時間だけ待ってください。何度も再試行しないでください。
  7. **エラーは対処方法を示しています。**ツールのエラーメッセージは、対処に役立つように書かれています(カーソルの期限切れ → 最初からやり直す、クレジット不足 → クレジットは毎月 1 日にリセットされ、追加クレジットは Settings → Usage からリクエストできることをユーザーに伝える)。

ツール一覧

ツール得られる情報典型的な用途
get_credits残高、上限、リセット日。無料です。セッション開始時
search_apps1ページあたり10個のアプリ:名前、収益、ダウンロード数、評価、リリース日、画面数、画面数付きのフロー一覧。自然言語の query +フィルター(収益/ダウンロード数/評価/リリース日/価格/オンボーディングのステップ数)+ sort + board_idカテゴリーやニーズに合う上位アプリを探す
get_app1つのアプリの詳細情報:評価の内訳、カテゴリー順位、アプリ内課金の価格、上位の国、フローアプリを詳しく調査する価値があるか判断する
list_app_screensジャーニーの順序(ウェルカム → オンボーディング → ペイウォール → プロダクト)に並んだ1ページあたり10画面。それぞれにメディア URL、フロー、UI 要素、カラーが含まれます。flow または section でフィルターできますアプリの画面を1つずつ確認する
search_screensライブラリー全体の画面。mode="keyword" は画面名とフィルター(flow、screen_type、element、app_id)で検索し、mode="semantic" は意味やビジュアル表現で検索します特定の画面タイプのデザイン参考例を集める
get_screen1つの画面の詳細情報と、他のアプリから視覚的に類似した最大5画面。screen_ref = app_id/screen_id(appllama.io の「Copy Screen ID」で取得できる形式)を受け付けますユーザーが画面参照 ID を貼り付けた場合、または参考画面を詳しく調べる場合
list_flows画面数とアプリ数を含むフロー分類カテゴリーにどのようなフローがあるか把握する
get_flow_apps指定したフローを含むアプリ。収益の高い順あるフローの優れた事例を探す
list_ui_elements約38種類の UI 要素ファミリーとその件数(1回の呼び出し)要素レベルの調査に使う用語を把握する
get_element_screens指定した要素ファミリーを含む画面優れたアプリが特定のコンポーネントをどのように作っているか調べる
list_my_boardsメンバー自身の appllama.io ボード(画面/アプリ/フロー)まず自分のキュレーション済みボードを探す
get_boardボードの全内容:メディア付き画面、アプリのプロフィール、または(アプリ、フロー)の組み合わせメンバーがタスク用にボードをキュレーションしている場合は、ここから始めます

screen_ref の受け渡し: メンバーは appllama.io の任意の画面で「Copy Screen ID」をクリックし、その ID をあなたに貼り付けられます。形式は 1393061654/spl_9i075 のようになります。これをそのまま get_screen(screen_ref=...) に渡せば、指定された画面と、ライブラリー内で最も近い類似画面を確認できます。

プレイブック

シナリオ参照先
アプリをゼロから作る(例:「習慣トラッカーを作って」)references/build-from-scratch.md
既存の画面を改善するreferences/improve-a-screen.md
フローと要素の調査、一般的な調査方法references/research-methods.md

どちらのビルド用プレイブックも、最後は同じです。appllama-app-design-skill のシミュレーターループを、欠点が見つからなくなるまで繰り返します。 そのループを行わない調査は飾りにすぎません。

ローカルの参考ボード

画面を調査用に取得したら、ローカルの作業用構成に保存してください。リンクは約1時間で期限切れになりますが、メモとダウンロードしたファイルは残ります。

research/
  <category>/
    apps.md            # the shortlist: metrics, flows, verdicts
    <app-name>/
      screens.md       # per-screen notes: id, name, flow, elements, colors
      img/             # downloaded screens, in journey order
    patterns.md        # cross-app synthesis: the category's design language

調査しながら画面をダウンロードしてください。統合はメタデータだけではなく、画像を並べて行います。メモと画面 ID は残るため、再び画像が必要になったら ID から新しいリンクを取得できます。

コメント