Cursor と Claude で渡し方は変わりますか？

基本の型は同じです。コードと、配置・依存・差し替え・制約の4つを渡します。違うのは貼る場所だけで、Cursor は Agent、Claude はチャットや Claude Code です。

Copy for Cursor は Claude にも使えますか？

使えます。名前は Cursor ですが、中身は統合の指示と TSX をまとめたテキストです。 Claude のチャットにも、そのまま貼れます。

Cursor に貼ったコンポーネントがビルドエラーになるのはなぜですか？

多くは依存パッケージの不足です。エラー文をそのまま貼り、「import を読んで足りないパッケージを入れて」と頼んでください。

DesignLayer

お問い合わせ

JA EN

【Cursor・Claude】React コンポーネントの渡し方と指示文の型を紹介

公開日: 2026年9月12日 · 読了目安 7 分

React コンポーネントを Claude や Cursor に貼ると、置き場所や依存がずれて差分が膨らむ人へ。コードと一緒に渡す4つの情報、そのまま使える指示文の型、よくある失敗と直し方、Copy for Cursor の使い方をまとめました。

Cursor・Claude に TSX を貼っても思いどおりに入らない

気に入った React コンポーネントのコード（TSX ファイル）を Cursor や Claude に貼り、「これを入れて」と頼んだ。すると、次のようなことが起きる。

想定と違うフォルダにファイルができる
ページのファイル（page.tsx）全体に、"use client"（ブラウザで動かす印）が付く
ビルドすると依存が足りないと言われる

直すために何往復もしているうちに、自分で書いたほうが早かったと感じた人もいるはずです。

この記事では、コンポーネントをコーディングエージェントに渡すとき、コードと一緒に何を伝えればよいかを解説します。

Cursor の Agent でも Claude のチャットでも使える、指示文の型も載せています。

Cursor や Claude がコンポーネントの組み込みを間違える理由

コードだけを貼ると、エージェントは足りない情報を推測で埋めます。推測が入るのは、たいてい次の4か所です。

どのフォルダに置き、どのページから読み込むか
動きやアイコンのライブラリなど、どの npm パッケージが必要か
見出しや CTA（行動を促すボタン）、リンクや画像のうちどれを差し替えるか
既存の色や余白の決まりに合わせるか、ページをサーバーで組み立てる部品のまま保つか

推測が外れると差分が大きくなり、レビューに時間がかかります。エラーが出たときに「直して」とだけ頼むと、エージェントはさらに推測を重ねます。

うまくいかない原因は、エージェントの能力より、渡している情報の量にあることがほとんどです。

Cursor・Claude にコードと一緒に渡す4つの情報

推測を減らすには、推測が入る4か所を先に指定します。どれも一文で書ける内容です。

1. 部品を置く場所と読み込むページ

部品を置く場所は、たとえば components/sections/Hero.tsx のように書きます。

読み込むページも、app/(marketing)/page.tsx のようにあわせて書きます。

置き場所が決まっていると、レビューで差分を追いやすくなります。

2. 必要な npm 依存パッケージ

ファイル先頭の読み込み行（import）を見れば、必要なパッケージが分かります。

「足りない npm 依存を package.json に入れて」と書くか、motion（旧 Framer Motion）や lucide-react のように名前を挙げます。

3. 差し替える文言と画像

見出しや CTA の文言、リンク先や画像のうち、何をプロダクトに合わせるかを伝えます。

Tailwind のクラスは「そのまま」と明記します。そうすると、エージェントが見た目まで書き換えるのを防げます。

4. Cursor・Claude に守ってほしい制約

特に効くのは次の2つです。「既存のデザイントークン（色・余白の決まり）に合わせる」「ページ全体をブラウザで動く部品にしない」。

動くセクションだけにブラウザで動かす印を書き、ページはサーバーで組み立てる部品のまま読み込む形が理想です。

tsx

// app/(marketing)/page.tsx（サーバーコンポーネントのまま）
  import { Hero } from "@/components/sections/Hero";

  export default function Page() {
    return (
      <main>
        <Hero />
      </main>
    );
  }

  // components/sections/Hero.tsx の1行目
  // "use client";

Cursor・Claude でそのまま使える指示文の型

4つの情報をまとめると、次のような指示文になります。コンポーネントのコードを貼ったあとに、続けて送ってください。

text

この React セクションを既存の Next.js アプリに追加する。
  - 配置：components/sections/Hero.tsx に置き、app/(marketing)/page.tsx から読み込む
  - Tailwind のクラスはそのまま
  - 足りない npm 依存を package.json に入れる
  - 見出し・CTA・リンクをうちのプロダクト名に差し替える
  - 色と余白は既存のデザイントークンに合わせる
  - page 全体はクライアントコンポーネントにしない

Cursor の Agent で使う場合

Cursor の Agent に、コード全文と指示文を貼ります。

ファイルの作成と依存の追加はエージェントが進めます。あなたは動きと文言の確認に集中できます。

Claude のチャットや Claude Code で使う場合

Projects にリポジトリを載せている場合は、同じコードと指示文をチャットに貼り、対象のファイルを指定します。

手元のパソコンで動く Claude Code などを使う場合も、まずコンポーネントを読ませておきます。そのうえで「既存のレイアウトの色と余白に合わせて」と書くと、ブランドから外れにくくなります。

Cursor の中で Claude Code を動かしていますか。Cursor で Claude Code を使う：2つのエージェントの使い分けを見てください。

Cursor・Claude に貼ったあとのよくある失敗と直し方

指示文を整えても、つまずく場面はあります。よくあるものを挙げます。

エラー文を貼らずに「直して」とだけ頼む：エラーをそのまま貼るのが、もっとも速い直し方
画像の URL を空にしてしまう：デモの画像 URL はいったん残し、壊れているときだけ差し替える
全セクションに強い動きを付ける：動きはヒーローと CTA 周辺に絞り、ページのテンポを保つ
同じ日に何本も試す：コピーに回数制限があるカタログでは、「今日はヒーロー」と決めてから取る

依存のエラーで止まったときは、コード内の import をエージェントに読ませます。そのうえで package.json の更新を頼むと、解決することが多いです。

Copy for Cursor なら4つの情報が最初から揃う

毎回の指示文を自分で書くのが手間なら、組み込みの情報まで同梱しているカタログを使う方法があります。

DesignLayer は、人が組んだ React + Tailwind のモーション付きセクションを、ブラウザでライブプレビューしてコピーできるカタログです。

Copy for Cursor でコピーされるのは、次の4つのひとまとまりです。

統合の指示
ライブプレビューの URL
本体の TSX
npm 依存

これを Cursor や Claude にそのまま貼り、配置先と差し替えだけを短く添えれば十分です。

サイトを開かずに取り込みたい場合は、DesignLayer MCP をエディタに接続します。エージェントが部品を取り込む命令（get_component）を使い、Copy for Cursor と同じ内容を取得します。

接続は30日パス、Lifetime、Plus が対象です。手順は https://design-layer.com/ja/articles/cursor-mcp-component-catalog-guide で解説しています。

Copy for Cursor が向いている人と無料枠

Cursor や Claude で LP のセクションを組むことが多い
貼ったあとの手直しで、何往復もしている
動きのあるセクションを、Motion から書き起こす時間がない

閲覧とライブプレビューは無料で、アカウントもカードも要りません。無料アカウントでは、無料サンプル10個を回数制限なくコピーできます。カタログ全体と MCP は30日ビルドパス（$19の1回払い、自動更新なし）、Lifetime Access（先着100名の$79の1回払い）、Plus（月額 $9、いつでも解約可）です。

同じ日に何本も取り込む場合は、コピーが無制限の Plus が向いています。