はじめに：ReactコンポーネントをCursorへ

DesignLayer は、React・Next.js・Tailwind でプロダクトやマーケティングページを実装している開発者向けのコンポーネントカタログです。21st.dev などで動きのあるブロックを探し、コーディングエージェントに貼っている人を想定しています。

汎用 UI キットは同じ SaaS 顔になりやすく、署名のあるモーションを見つけるのに時間がかかります。DesignLayer は人間が組んだ完成セクションをブラウザ上で動かし、実装ごとコピーしてリポジトリに載せます。

コンポーネントはライブプレビューできます。ホバー、入場、スクロール連動のタイミングを静止画ではなく実物で確認してから、Copy for Cursor で TSX を取得します。コピーにはエージェント向けの包みと本体コンポーネントが含まれます。

無料の Copy for Cursor はコンポーネント 1 日 1 回（日本時間）です。閲覧とプレビューにカードは不要です。無制限のコピーと、完成 1 ページの Templates コピーは Pro です。

コンポーネント一覧を開き、使いたいセクションの動きを確認します。Copy for Cursor を実行し、Cursor の Composer か Claude のチャットに貼ります。「この TSX を app 配下に置き、足りない依存を入れて、コピーと色をプロダクトに合わせて」と指示すると、エージェントが Next.js プロジェクトへ組み込みます。

ヒーローから FAQ まで 1 ページ丸ごと渡したい場合は Templates を開きます。プレビューは公開、コピーは Pro です。すでに月額を契約しているアカウントはそのまま使えます。

出力は React（TypeScript）と Tailwind を前提にしています。モーションはセクションごとに Framer Motion など、そのブロックが使うライブラリに依存します。足りないパッケージはエージェントに package.json への追加を依頼してください。

コピーしたコードは出発点です。文言、リンク、ブランドカラー、データのつなぎ込みは自分のリポジトリ側で行います。