Cursor で Claude Code を使う：2つのエージェントの使い分け（モーション付き React コンポーネントも足す）
公開日: 2026年10月21日 · 読了目安 10 分
Cursor の拡張機能かターミナルで Claude Code を動かし、2つのエージェントの作業を分け、AGENTS.md を1つ共有して、モーション付きの React UI を足します。
まとめ： Cursor の中で Claude Code を動かす方法は2つあります。公式の Claude Code 拡張機能を入れる（インライン差分と計画の確認ができるチャットパネル）、または Cursor の統合ターミナルで claude を動かす（フルの CLI。差分はエディタで開く）。Claude Code には、有料の Claude プランか Claude Console のアカウントが必要です。UI 作業でうまくいく分け方は、コンポーネントの取得・記述・複数ファイルへの配線を Claude Code に任せ、出来上がりをライブプレビューと見比べるのはブラウザ付きの Cursor の Agent にすることです。ルールは AGENTS.md を1つにして、両方に守らせます。実物で試すなら、DesignLayer のモーションコンポーネントをコピーします。1日3回まで無料で、Plus は月額 $9 でコピー無制限、Cursor と Claude Code の両方から MCP を使えます。
Claude Code と Cursor を並べると、なぜごちゃつくのか
Cursor には、すでに自分のエージェントがあります。同じウィンドウに Claude Code を足した瞬間、リポジトリを編集できるエージェントが2つになり、会話は共有しません。共有するのはファイルだけです。
起きがちな問題は、次のとおりです。
指示が2セットになる。 Cursor のルールには「デザイントークンを使う」と書いてあっても、Claude Code はそれを読んでいないので、最初のコンポーネントが色を無視します。
ツールの設定が2つになる。 Cursor で MCP サーバーをつないだから Claude Code も使える、と思っても使えません。そちらにも追加が必要です。
編集が重なる。 両方とも同じ時間に
page.tsxを触り、次の1時間は差分の解きほぐしになります。「見た目は合っているか」の担当がいない。 モーションのセクションは、コンパイルも lint も通ったうえで、最初のフレームのまま止まることがあります。
どれかに当たっても、やり方が悪いわけではありません。Cursor と Claude Code は別の会社の別製品で、それぞれのドキュメントはそのツールだけを説明しています。このガイドは、そのあいだを扱います。
Cursor の中で Claude Code を動かす方法
Anthropic の Claude Code ドキュメントには入り方が2つあり、どちらも公式です。Cursor は VS Code を基にしていて、Claude Code の VS Code ページ に Install for Cursor への直接リンクがあります。
Cursor 内の Claude Code 拡張機能 | Cursor の統合ターミナルの | |
|---|---|---|
手に入るもの | Cursor 内のグラフィカルなチャットパネル（Spark アイコン） | Claude Code のフル CLI |
インストール | Install for Cursor のリンク、または Extensions で "Claude Code" を検索 | 単体インストール（macOS / Linux / WSL では |
差分 | 並べた差分で採用か却下（Manual mode）。1変更ずつも可 | CLI がエディタの差分ビューアで差分を開く |
エディタからの文脈 | 選択範囲を見る。 | 現在の選択範囲とアクティブなファイルのパスを送る |
計画 | Plan mode が、コメントできる Markdown 文書として計画を開く | ターミナル内の Plan mode |
機能 | コマンドとスキルの一部 | すべてのコマンドとスキル、 |
向いているとき | 差分を目で確認する、ターミナルに慣れていない | スクリプト、 |
ドキュメントにある、混乱を減らす点が2つあります。
拡張機能は
claudeを PATH には置きません。 パネル用に、CLI のコピーを同梱しています。ターミナルでもclaudeと打ちたいとき（たとえばclaude mcp add）は、単体インストールを一度だけ行います。履歴は共有します。 拡張機能と CLI は同じ会話履歴を使うので、パネルで始めて、ターミナルでは
claude --resumeで続けられます。Cursor の外のターミナルで Claude Code を動かすときは、その中で/ideを実行してエディタにつなぎます。
Claude Code には Pro、Max、Team、Enterprise のいずれか、または Claude Console のアカウントが必要です。無料の claude.ai プランには含まれません。Cursor の料金は、別のプランです。
作業ごとに、Cursor の Agent と Claude Code のどちらを使うか
公式の分担はありません。これは、フロントエンドとモーションの作業で使える分け方で、各ツールが何のために作られているかに合わせています。
作業 | 向いているほう | 理由 |
|---|---|---|
コンポーネントを取ってファイルを書く | Claude Code | バンドルを読み、指定されたパスへファイルを書き、同じセッションでインストール行を実行する |
複数ファイルの配線（新しいセクション、import、props、ページの順番） | Plan mode の Claude Code | 複数ファイルを触る前に、計画を1つ承認する |
| Claude Code | ターミナルの出力を読んで続ける |
動いているアプリのセクションを、ライブプレビューと見比べる | ブラウザ付きの Cursor の Agent | Cursor の browser tool で、エージェントがページを開き、スクロールし、スクリーンショットを撮れる |
「このカードをあれに合わせる」、余白、小さな見た目の修正 | Cursor の Design Mode | 動いているアプリの要素をクリックするか囲み、それに対して指示する（Agents Window のブラウザでは |
1行の文言や class の変更 | 開いているファイルなら、どちらでも | 計画にするほどではない |
表より大事なルールは、1ファイルにつきエージェントは1つです。Claude Code の差分を終えて採用してから、同じコンポーネントの調整を Cursor に頼んでください。変更がおかしくなったときは、Claude Code の checkpoints で、ファイルの編集を前のメッセージまで戻せます。
Claude Code と Cursor に同じルールを守らせる方法
リポジトリのルートに AGENTS.md を1つ置きます。両方のツールが読みます。
Cursor は、プロジェクトのルートとサブディレクトリの
AGENTS.mdを、.cursor/rulesの代わりになるプレーンな Markdown としてサポートしています（Cursor rules のドキュメント）。Claude Code は、作業ディレクトリかその上位に
CLAUDE.mdがないときAGENTS.mdを読みます。すでにCLAUDE.mdがあるなら、先頭に@AGENTS.mdの1行を足すと、共有ファイルを先に読み込みます（Claude Code memory のドキュメント）。
ツール固有のメモは、共有ファイルに入れないでください。コピーしたモーションセクションを使う Next.js のマーケティングサイト向けの出発点です。
「Adding a copied section」のルールは、DesignLayer の Copy for Cursor で渡す と プレビューと見比べる に沿っています。コンポーネントを1つ貼るときに伝える項目の一覧は、React コンポーネントの渡し方と指示文の型 にあります。
# AGENTS.md
## Stack
- Next.js App Router, TypeScript, Tailwind CSS
- cn() lives in src/lib/utils.ts. Do not add a second copy.
## Adding a copied section
- Put sections in src/components/sections/, one file per section.
- Write each file to the path given in the bundle. Do not rewrite the code from scratch.
- Install only the npm packages the bundle lists.
- Keep "use client" inside the section file. page.tsx stays a Server Component.
- Keep the demo image URLs until the section matches its live preview.
## Motion
- Do not wrap scroll-linked sections in overflow-hidden or a short h-screen box.
- Swap headlines and links only after the motion matches the preview.両方のエージェントに同じコンポーネントカタログを渡す方法
MCP サーバーはツールごとに設定するので、同じサーバーを2回追加します。
Cursor | Claude Code | |
|---|---|---|
設定の場所 |
| 既定はローカルスコープ。 |
リモートサーバーの追加 | Add to Cursor ボタン、または |
|
サインイン | ブラウザの OAuth |
|
DesignLayer のサーバー URL は https://design-layer.com/mcp です。どちらのエディタも、ブラウザで Allow connection を押して接続します。貼る API キーはありません。
Cursor では、DesignLayer の Account settings → DesignLayer MCP → Cursor tab → Add to Cursor を開き、Authenticate します。手順の全体は Cursor と Claude Code を接続する に、カタログを MCP 経由にする理由は Cursor MCP のガイド にあります。
接続すると、どちらのエージェントも search_catalog（検索。コピー回数は減らない）と get_component（Copy for Cursor と同じバンドルを取る）を呼べます。MCP は Plus の機能です。Free では、各コンポーネントページの Copy for Cursor ボタンで同じバンドルを1日3回取れます。
# Claude Code (from the DesignLayer docs)
claude mcp add --transport http DesignLayer https://design-layer.com/mcpモーション付き React コンポーネントを足すときの流れ
1セクション分の一連の流れです。使うのは キネティック・サービス料金 で、巨大な "Pricing" のワードマークの上にすりガラスのプランカードが3枚あり、Billed Yearly のスイッチで価格が桁ごとに回ります。依存は React、TypeScript、Tailwind CSS、lucide-react だけです。
手順1：プロジェクトを一度だけ確認する
DesignLayer のセクションは、Next.js の App Router、TypeScript、Tailwind CSS、clsx と tailwind-merge から作る cn ヘルパーを前提にしています（プロジェクトに必要なもの）。最初に貼る前に、Claude Code へ確認させます。
Check that this repo has TypeScript, Tailwind CSS, and a cn() helper at @/lib/utils
(clsx + tailwind-merge). If anything is missing, tell me what you will add before editing.手順2：Claude Code でファイルを取って書く
MCP につながっているとき（Plus）：
MCP がないとき（Free）：コンポーネントページで Copy for Cursor を押し、クリップボードの全文を Claude Code のパネルに貼り、どのページに載せるかを1行足します。バンドルには、ファイルパス、インストール行、ライブプレビューの URL がすでに入っています。
既存ファイルを2つ以上触るときは、先に Claude Code を Plan mode にして、計画を承認します。
Use DesignLayer get_component for kinetic-service-pricing.
Write each files[].path from the JSON, install npmDependencies,
and mount it in app/(marketing)/page.tsx under the hero.
Follow AGENTS.md. Keep the demo images. Then run tsc --noEmit and lint.手順3：Cursor でライブプレビューと見比べる
どのバンドルにも、https://design-layer.com/part/ で始まるライブプレビューの URL があります。手元のページとその URL を Cursor のブラウザで並べ、Cursor の Agent に見比べさせます。
1枚だけ見た目がおかしいカードは、Design Mode をオンにしてクリックし、直し方を書きます。
Open http://localhost:3000 and the live preview URL from the bundle.
Scroll both to the pricing section, flip Billed Yearly on each,
and list every difference in motion, spacing and type. Don't change the design;
fix only what differs from the preview.手順4：文言の差し替えは最後にする
プラン名、価格、CTA の文言は、動きがプレビューと合ってから変えます。先に変えると、壊れたアニメーションがコンポーネント由来なのか自分の編集由来なのかが分かりにくくなります。
公開ページを組むなら、次にどのセクションを足すか
開発者向けツールの公開ページには、たいてい4つか5つのセクションが要ります。暗い、技術寄りのページで並ぶ DesignLayer の実在コンポーネントです。
セクション | コンポーネント | 見せるもの | 追加の依存 |
|---|---|---|---|
連携 | ツールのロゴが中央のハブに集まり、接続線がパルスする | React + Tailwind 以外はなし | |
ストーリー帯 | 1枚の静止画が左、右、中央へ動き、スクロールで画面を埋める | なし | |
料金 | ワードマークが1文字ずつ立ち上がり、年額スイッチで価格が回る | lucide-react | |
FAQ | 開いた行が白くなり、プラスが × に回り、答えが広がる | なし | |
フッター | 写真が端まで広がるフッター。リンクの列と CTA | なし |
DesignLayer の セクションを並べて1ページにする が勧めるとおり、1つずつ足します。1つ置いて Cursor で動きを確認し、次を取ります。ガイドは、複数のバンドルを1つのチャットに貼らないこと、セクションを結合しないようエージェントに伝えることを勧めています。
手順3のスクロール確認を、もっと難しいもので試すなら、ピンスペーサー・ワークス のようなピン留めの GSAP セクションを使います。この種のスクロール連動セクションは、親に overflow: hidden や短い h-screen の箱があると最初のフレームで止まるので、確認のテストに向いています。
DesignLayer 側の費用はいくらか
閲覧とライブプレビューは、アカウントもカードもなく無料です。Free はコンポーネントのコピーが1日3回（00:00 JST / 15:00 UTC に戻る）で、get_component の取得は Copy for Cursor を押したのと同じ回数として数えます。
上の5セクションのページはコピー5回分なので、Free では2日に分かれます。Plus は月額 $9 で、次が付きます。
サイト上でも MCP 経由でも、コンポーネントのコピーが無制限
Cursor と Claude Code の両方からの MCP（Free では接続できない）
動画プロンプトのコピーが無制限
月ごとに更新され、アカウントページから解約できます。プランは、支払った期間の終わりまで有効です。1ページを作るあいだだけ無制限が要るなら、公開したら解約できます。
よくある質問
使えます。Anthropic のドキュメントにある Install for Cursor のリンクから公式の Claude Code 拡張機能を入れるか、CLI を入れて Cursor の統合ターミナルで
claudeを実行します。どちらも Anthropic がサポートしています。
まとめ
Cursor では、公式拡張機能（差分の確認、計画のレビュー）か、統合ターミナルの
claude（フル CLI）で Claude Code を動かす。有料の Claude プランか Console アカウントが必要。コンポーネントの取得、記述、配線は Claude Code。ライブプレビューとの確認は、Cursor の Agent、ブラウザ、Design Mode。
1ファイルにつきエージェントは1つ。
AGENTS.mdを1つ共有する。CLAUDE.mdがあるなら@AGENTS.mdを足す。MCP サーバーはツールごとに追加する。DesignLayer の MCP は Plus なら両方で動く。
まずは1セクションから。キネティック・サービス料金 を開くか、コンポーネントカタログ を見て、今日の無料コピーで上の4手順を回してください。
