60fps

60fps

作りたい動きを説明すると、それを実現する実際の iOS クリップと、その動きを再現する SwiftUI ファイルが返されます。

ライブラリには、実際にリリースされたアプリのインタラクションクリップが 2,000 件以上収録されています。それぞれのクリップには、開始状態、遷移、終了状態、およびその背後にあるタイミングとイージングを文章で説明したものが付属しています。数値を推測する代わりに活用してください。

得られるもの

ツール	内容
60fps_search_shots	セマンティック検索。キーワードではなく、動きを説明してください。
60fps_list_filters	ライブラリで使われているすべてのフィルターを確認し、検索条件を正確に指定できます。
60fps_get_shot	キーフレームを含む、ショットの全情報を取得します。
60fps_get_motion_breakdown	開始、遷移、終了に加えて、タイミングとイージングを取得します。
60fps_get_motion_code	そのショットを再現する、自己完結型の SwiftUI ファイルを取得します。
60fps_get_related_shots	最初に選んだショットが近いものの、ぴったりではない場合に使います。

スキルも付属しています。それぞれのスキルは、同じツールを使って、より大きなタスクをエージェントに実行させます。

• find-animation-opportunities は「アプリのどこにアニメーションを入れるべきか？」に答えます。エージェントは SwiftUI コードを読み、動きを加えると効果的な箇所を見つけ、壊れていたり過剰だったりする動きを指摘し、静止させておく箇所を示して、それぞれに参考となる実際のショットを提案します。
• motion-system は、アプリ独自のコードと同じ雰囲気を持つ実際のアプリに基づき、タイミング、スプリング、ハプティクスを 1 つにまとめた Motion.swift を作成します。
• feedback-states は、ある機能の読み込み、成功、空、エラー、再試行の各状態について、それぞれの動き、ハプティクス、文言を設計します。
• motion-spec は、ショットの再現時に使われたタイミングに基づき、開発者が実装できる引き継ぎ用仕様書にショットを変換します。判断した内容は、ショットから得られた情報と分けて記載します。
• motion-reference は、ライブラリを使うべき場合と、使わない方がよい場合をエージェントに伝えます。

どのスキルも、あなたが指示するまではコードを変更しません。

Claude Code、Cursor、Codex などのコーディングエージェントなら、どれでも自分でスキルを追加できます。

npx skills add 60fps-Design/plugin

これで追加されるのはスキルのみです。スキルからサーバーを使えるように、以下の手順でサーバーを接続してください。

インストール

サーバーはホストされているため、ローカルで実行するものはありません。サインインすると、ブラウザーで OAuth が開きます。

• Cursor：以下の URL を使って Settings > MCP からサーバーを追加するか、mcp.json をコピーします。

• Grok Build：URL を指定してサーバーを追加します。

• Gemini CLI：このリポジトリを拡張機能としてインストールします。

  gemini extensions install https://github.com/60fps-Design/plugin
  

• Claude Code：このリポジトリをマーケットプレイスとして追加し、プラグインをインストールします。

  /plugin marketplace add 60fps-Design/plugin
  /plugin install 60fps@60fps-design
  

  または、プラグインを使わず、サーバーのみを追加します。 claude mcp add --transport http 60fps https://mcp.60fps.design/mcp

• MCP に対応するその他のクライアント：ストリーミング可能な HTTP 経由で https://mcp.60fps.design/mcp に接続します。mcp.json を参照してください。

60fps のライセンスキーが必要です。60fps MCP キー、または 2026 年 9 月 12 日以前に購入した 60fps PRO キーをご利用ください。その日付以降に購入した PRO には MCP は含まれません。キーがなくてもツールには接続できますが、401 が返されます。これは意図された動作であり、障害ではありません。

Xcode で使う

Xcode 26.3 以降には独自の MCP サーバーが搭載されているため、エージェントはビルドシステム、Simulator、プレビュー、デバッガーを操作できます。そのエージェントに 60fps も同時に利用させれば、一連の作業が完結します。実際の操作を見つけ、動きの内訳を読み取り、SwiftUI を記述してビルドし、結果を確認できます。

Xcode は、ツールがあらかじめ接続されたエージェントを起動します。

xcrun mcpbridge run-agent claude

そのエージェントにインストールしたものはすべて引き継がれるため、このプラグインを使うと、セッションで両方のツールセットを利用できます。「Threads のプルして更新の仕組みを調べて、このプロジェクトに実装し、プレビューを表示して」といったプロンプトなら、3 つのツールを使ってコピー＆ペーストするのではなく、エージェントとの 1 回のやり取りで済みます。

xcrun mcpbridge --help には、Xcode のツールを除外する --no-xcode-tools や、Xcode に同梱されているスキルを書き出す run-agent skills export など、ほかのオプションも記載されています。ブリッジに処理を渡すには、プロジェクトを開いた状態で Xcode を起動し、Xcode の設定でエージェントへのアクセスを有効にしておく必要があります。

対応範囲

対応するのは iOS のモーションのみです。

Android、Material、Flutter、React Native、ウェブには対応していません。アイコン、カラーパレット、ロゴ、ブランドのデザインも行いません。名前が同じというだけで、それ以外に関係のないフレームレートのプロファイリングにも対応していません。このスキルは、そうした依頼には検索せずに直接回答するようエージェントに指示します。

ライブラリ全体を近さで順位付けするため、検索結果は必ず返されます。検索された件数ではなく、結果の内容を基準に判断してください。

コードについて

各ファイルは単体で動作します。Xcode に貼り付けて実行してください。

元のアプリの文言、色、ブランディング、アセットは、意図的に含めていません。ご自身のデザインシステムに合わせてスタイルを変更してください。残す価値があるのはモーションです。

リンク

• 60fps.design/mcp
• プライバシーと利用規約

mcp.60fps.design は Cookie を設定せず、アナリティクスも実行しません。外部のサードパーティへのリクエストは、Framer の画像 CDN からストーリーボードのフレームを取得する 1 件のみで、呼び出し元に関する情報は一切送信しません。

ライセンス

MIT ライセンスの対象は、このリポジトリのみです。対象にはマニフェスト、スキルのテキスト、ロゴが含まれます。

60fps ライブラリ、ホストされたサービス、返されるクリップやコードはライセンスの対象外です。これらには利用規約が適用されます。