appllama-skills は、AI エージェントに「売れているモバイルアプリの画面を調べてから作る」手順を持たせるスキル集だ。中身は2つのスキルで、Expo / React Native の画面づくりを対象にする。2026-11-11 時点で ★5.0k、ライセンスは MIT。本記事ではスキルの全ファイルを読み、決まりごとを数え、導入手順を実際に試した。

WHAT IT REPLACES何を置き換えるか

調べてから作るを、エージェントの手順にする

スキルが禁じる作り方

  • 想像だけで画面を描く
  • 紫のグラデーションと光るボタン
  • コードを読んだだけで完成とする
  • 動きを静止画だけで確かめる

appllama-skills の作り方

  • 実在アプリの画面を20〜30枚見てから書く
  • アクセントは1色に固定する
  • シミュレーターで動かして見る
  • フローを録画してコマ送りで見る
出典: skills/appllama-app-design-skill/SKILL.md（v1.3.0・2026-11-11 確認）

30秒でわかる appllama-skills（2026-11-11 時点）

  • ・正体：モバイルアプリの画面を調べてから作らせる2つのスキル。★5.0k・MIT
  • ・何ができる：売上上位アプリの実画面を調べる手順と、Expo / React Native で作るときの決まりを、エージェントに読ませる
  • ・実測：手動の導入で 11 ファイルが入ることを確認。MCP をつないだ調査と npx での導入は未検証
  • ・注意：調査に使う Appllama MCP は有料の Pro プラン。設計スキルだけなら単体で使える

画面の部品と見た目の決まりを揃える考え方は デザインシステムとは？仕組み・構成要素・有名事例をエンジニア向けに整理する【2026年版】 にまとめている。

appllama-skills の構成は、2つのスキルと有料の MCP

Appllama は、売上上位のモバイルアプリの画面・フロー・UI の型を集めたデザインの資料庫だ。appllama-skills は、その資料庫をエージェントの作業手順に変えるためのスキルで、役割の違う2つがある。

スキル 役割 版 外部サービス
appllama-usage 何を調べるかを決める。MCP のツールの使い方と、3つの進め方 1.1.0 Appllama MCP が必要
appllama-app-design-skill どう作るかを決める。ネイティブらしい画面の決まりと、確認の手順 1.3.0 無くても使える

読者の3つの問いに先に答える。

・何ができるか：「習慣トラッカーを作って」と頼むと、エージェントが同じ分野の上位アプリを調べ、その型に沿って画面を作り、シミュレーターで確かめるところまでを手順として進める
・何を解決するか：AI が作ったアプリがどれも同じ見た目になる問題。スキルはこれを「数秒でテンプレートだと見抜かれる」と書いている
・何を代替するか：競合アプリを自分で入れて画面を1枚ずつ撮る下調べと、「いい感じにして」という曖昧な指示

無料と有料の境目ははっきりしている。スキル本体は MIT で、誰でも入れられる。一方、appllama-usage が呼ぶ Appllama MCP は Pro プランの機能だ。スキルの記述では、Pro に月 1,500 クレジットが付き、毎月1日（UTC）に全量が戻る。残高を見る get_credits だけが無料で、ほかの呼び出しは1回1クレジットを使う。

appllama-skills の進め方：調べてから作る6段階

appllama-usage には進め方が3つある。ゼロから作る、いまある画面を良くする、フローや部品を調べる、の3つだ。ゼロから作る場合は次の6段階になる。

SIX PHASESゼロから作る手順

売上上位を探すところから始まる6段階

  1. 1

    上位アプリを探す

    search_apps で分野の売上上位を絞る

  2. 2-3

    上位5本の全画面を見て、3本をコマ送りで読む

    list_app_screens で利用の流れの順にたどる

  3. 4

    機能の組み合わせを決める

    調べた型から自分の製品の構成を組む

  4. 5-6

    1画面ずつ作り、完成の基準に照らす

    シミュレーターで確かめ、欠点が無くなるまで繰り返す

出典: skills/appllama-usage/references/build-from-scratch.md の Phase 1〜6（2026-11-11 確認）

調査の道具は MCP の12ツールだ。よく使うものを抜き出す。

ツール 返すもの
get_credits 残高・上限・リセット日。無料
search_apps 1ページ10本。売上・ダウンロード数・評価・フロー一覧つき
list_app_screens 1ページ10画面。ようこそ画面から課金画面まで、利用の流れの順
search_screens 資料庫全体から画面を探す。名前での検索と、意味での検索
get_screen 1画面の詳細と、ほかのアプリの似た画面を最大5枚
get_board 利用者が appllama.io で集めたボードの中身

スキルは、MCP の扱いで守ることも決めている。画像と動画の URL は約1時間で切れるので、見たものは手元に保存する。画像の左上には Appllama の透かしが入るが、これは画面の一部ではないので無視し、作るものに写さない。ページ送りは順番にしか進めない。

禁止事項は1つ書かれている。課題に答えるためでなく、資料庫そのものを抜き出す目的で一覧を総なめにすることだ。スキルはこれを規約違反とし、サーバー側で検知されると明記している。

設計スキルの中身を数えた

appllama-app-design-skill の SKILL.md は 343 行、20,220 バイトある。番号つきの決まりとチェック項目を数えると、次のとおりだった。

RULES COUNTED決まりごとの数

設計スキルの決まりは番号つきで37項目

ネイティブらしさNative fidelity laws

12

完成の条件Definition of done（チェック項目）

10

AI っぽさの禁止Anti-slop laws

9

画面遷移Navigation laws

6
出典: skills/appllama-app-design-skill/SKILL.md の番号つき項目とチェック項目を数えた（v1.3.0・2026-11-11 実測）

最初に置かれているのは「描く前に調べる」という原則だ。MCP がつながっていれば、コードを1行書く前に 20〜30 画面を見る。取り出すのは型で、見た目そのものではない。画面を1対1で写すのは「手抜きで、法的にも危うい」とスキル自身が書いている。

AI っぽさの禁止は、どれも「既定では使わない」という扱いになっている。ブランドが明確に求め、製品に合う理由を説明できるときだけ外せる。

・紫や藍のグラデーションに光をまとわせたボタン、どのカードにもかけたすりガラス、ささいな出来事での紙吹雪を使わない
・アクセントの色は1色に決め、全画面で同じ色を使う
・グレーは暖色系か寒色系のどちらか一方に揃える

確認の手順が、このスキルのいちばん重い部分だ。画面は、動いているのを見るまで「存在しない」とされる。フローごとに xcrun simctl io booted recordVideo でシミュレーターを録画し、通常の速さで1回、コマ送りで1回見る。探すのは、こま落ち、1フレームだけの白い画面、レイアウトの跳ねだ。基準は遷移を通して 60 fps で、「感覚でなく測る」と書かれている。

完成の条件10項目には、次のものが含まれる。

・その種類の画面について、実在の参考画面を10枚以上調べた
・ライトとダークの両方をシミュレーターで確かめた
・文字を大きくする設定（Dynamic Type の XL）でレイアウトが崩れない
・タップできる範囲がすべて 44pt 以上

インストールと、入ったことの確認

README が勧める入れ方は npx skills だ。プロジェクトのルートで実行する。このコマンドは本記事では実行しておらず、未検証。

npx skills@latest add appllama/appllama-skills

スキルはただのディレクトリなので、コピーでも入る。次の4行は空のディレクトリで実行して確かめた。プロジェクトの .claude/skills/ に2つのスキルが入る。

git clone --depth 1 https://github.com/appllama/appllama-skills
mkdir -p .claude/skills
cp -r appllama-skills/skills/* .claude/skills/
ls .claude/skills/*/SKILL.md

最後の ls は、次の2行を返した。入ったファイルは、参照用の文書8つなどを含めて全部で 11 個だった。

.claude/skills/appllama-app-design-skill/SKILL.md
.claude/skills/appllama-usage/SKILL.md

この確認でわかるのは、ファイルが置かれたことまでだ。エージェントが実際にスキルを読み込むかどうかは、起動して確かめる必要がある。

MCP を使う場合は、接続先 https://mcp.appllama.io/mcp を MCP クライアントに追加し、Appllama のアカウントで承認する。リポジトリには、この接続先を書いた .mcp.json も入っている。MCP をつないだ調査は、本記事では未検証だ。

使うときの注意と、ほかのスキルとの違い

導入の前に知っておきたい点を挙げる。

・前提は Expo と React Native。Expo Router、TypeScript、react-native-reanimated などが既定の構成として指定されている。SwiftUI や Flutter の記述は無い
・確認の手順には iOS シミュレーターか Android エミュレーターが要る。録画の例は xcrun simctl で、これは Xcode のコマンドだ
・設計スキルは長い。SKILL.md だけで約 20KB あり、参照用の文書が5つ付く。読み込まれるたびに文脈を使う
・リリースのタグは無い。コミットは10件で、最終更新は 2026-09-06。版はスキルの frontmatter に書かれた番号で追う
・商標は別扱い。Appllama の名前とロゴは、MIT ライセンスの対象に含まれない

UI を良くするスキルは、ほかにもある。当サイトで扱ったものと並べる。

  appllama-skills unslop
対象 モバイルアプリの画面（Expo / React Native） AI っぽい見た目の UI
やり方 実在アプリを調べてから作り、シミュレーターで確かめる 兆候を場所つきで洗い出して直す
外部サービス 調査は有料の MCP。設計スキルは単体で可 —
ライセンス MIT CC BY 4.0

いまある画面の AI っぽさを消したいなら unslopとは｜AIっぽいUIをデザイナーの目で直すClaude Codeスキルを実際に動かした が近い。動きを揃える部品は transitions.devとは｜UIの動きをCSSで配り、AIエージェントにも使わせるモーション集、スキルが発火しない条件は Refactoring UIの原則をClaude Codeに守らせるスキル｜実測すると発火しない条件がある で扱った。

appllama-skills が向くのは、Expo でモバイルアプリを作っていて、競合の画面を調べる時間を減らしたいチームだ。Appllama を契約しない場合でも、設計スキルの決まりと完成の条件は、そのままレビューの観点として使える。

参照ソース

・Appllama/appllama-skills（GitHub）
・appllama-usage の SKILL.md
・appllama-app-design-skill の SKILL.md
・Appllama MCP（公式）