【DesignLayer】使い方を紹介｜無料枠で Cursor に1セクション載せるまで

Next.js と Tailwind CSS で LP を作っていて、ヒーローに動きを付けたい。

Motion（旧 Framer Motion）で入場やスクロール連動を一から書くと、1セクションで半日かかります。調整まで入れると数日かかることもあります。

Cursor や Claude に頼めば、コードはすぐに出てきます。ただ、出てくるのはどこかで見たような見た目で、動きの細かさは毎回ばらばらです。

結局、イージングや遅延を自分で直す時間がかかります。

この記事は、そんな悩みから「DesignLayer」を見つけた人、名前で検索してきた人に向けた入口です。

DesignLayer が何をするサービスで、最初の10分で何をすればよいかを順に説明します。

モーションは、言葉で伝えるのが難しい部分です。「ふわっと」「なめらかに」と書いても、エージェントが選ぶ速さや距離は毎回違います。

何度か生成し直して、ようやく近い動きにたどり着く。そんな経験がある人は多いはずです。

既存のコンポーネント集を探す方法もあります。けれど、スクリーンショットや GIF だけでは、実際の動きの質は分かりません。

入れてみてから「思っていた動きと違う」と気づき、別の候補を探し直すことになります。

どちらの遠回りも、原因は同じです。動きを確かめる前に、コードを書き始めていることです。

遠回りを減らすには、順番を逆にします。先にブラウザで実際の動きを見て「これでいく」と決め、そのコードを自分のプロジェクトに入れてから、文言や色を直します。

この順番なら、動きの品質は最初に確定しています。

エージェントに頼む仕事は、ゼロから書くことではなく、既存のプロジェクトに合わせて組み込むことに変わります。この仕事はエージェントが得意な領域なので、仕上がりも安定します。

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

セクションは React（TypeScript）と Tailwind CSS で書かれています。次のような用途で探せます。

• ヒーロー

• 機能紹介

• 料金表

• FAQ

できることと、できないことを整理すると次のとおりです。

• できること：ホバーや入場、ループ背景などの動きを、実際に動く React で確かめてから選ぶ

• できること：統合指示・ライブプレビューの URL・本体の TSX・npm 依存を、Copy for Cursor でまとめてコピーする

• できること：コピーした内容を Cursor や Claude に貼り、既存の Next.js プロジェクトに組み込む

• できないこと：文章からサイト全体を AI に一括生成させること。DesignLayer は生成ツールではなく、完成したセクションを選ぶためのカタログ

初めて使うときは、次の4ステップで1セクションを自分のプロジェクトに載せてみてください。

• ステップ1：コンポーネント一覧を開く。アカウントもカードも要らない。https://design-layer.com/ja/components

• ステップ2：ヒーローなど、今日足したい用途で絞り込み、気になったカードを開いてライブプレビューを確かめる

• ステップ3：Copy for Cursor を実行する。無料枠は日本時間で無料サンプル10個（無料アカウントで回数制限なし）

• ステップ4：Cursor の Agent や Claude のチャットに貼り、下の指示文を添える

ステップ4の指示文は、次の形にすると安定します。

配置する場所を書いておくと、エージェントが置き場所を推測せずに済みます。差分も読みやすくなります。

無料プランでは、ライブプレビューが無制限、ソースのコピーが日本時間で無料サンプル10個（無料アカウントで回数制限なし）です。カードの登録は要りません。

「今日はヒーローだけ取る」と決めて使えば、カタログの使い勝手を十分に試せます。

30日ビルドパス、Lifetime、Plus では、コンポーネントのコピーが無制限になります。MCP も含まれます。Free では接続できません。毎日いくつものセクションを取り込む人や、チームで使う場合に向いています。

迷ったら、まず無料で1セクションを載せてください。動きの品質と組み込みやすさは、自分のリポジトリに入れてみるのが一番早く分かります。

Cursor や Claude Code を日常的に使っているなら、DesignLayer の MCP サーバーをつなぐ方法もあります。MCP は、エージェントが外部のツールを直接呼び出すための仕組みです。

接続できるのは30日パス、Lifetime、Plus です。Cursor なら、アカウント設定のボタンから追加します。

Claude Code なら、アカウント設定に表示されるコマンドを実行します。どちらもブラウザで接続を許可するだけで使えます。

API キーのコピーは要りません。

つなぐと、エージェントが search_catalog でカタログを検索し、get_component でコピーの中身を取得できます。ブラウザでサイトを開いてコピーする手順を省けます。

接続の手順と使い方は https://design-layer.com/ja/articles/cursor-mcp-component-catalog-guide にまとめています。

向いているのは、次のような人です。

• Next.js と Tailwind CSS で LP やプロダクトページを作っている

• Cursor や Claude にコンポーネントを貼って開発している

• 動きのあるセクションを、毎回ゼロから書く時間を減らしたい

• shadcn/ui で静的な部品を組み、動きの要る部分だけを足したい

向いていないのは、店舗のサイトなどを AI に丸ごと作ってほしい場合や、React と Tailwind CSS 以外のスタックで開発している場合です。DesignLayer のコードは React と Tailwind CSS が前提です。

• DesignLayer は、人が組んだモーション付き React セクションを、ライブプレビューしてからコピーできるカタログ

• 閲覧は無料でカード不要、ソースのコピーは無料サンプル10個（無料アカウントで回数制限なし）。動画プロンプトは月1回。カタログ全体は30日ビルドパス、Lifetime、Plus

• Copy for Cursor の内容を Cursor や Claude に貼り、配置と差し替えを指示する

• 30日ビルドパス、Lifetime、30日ビルドパス、Lifetime、Plus なら MCP をつなぐと、ブラウザを開かずに検索と取得ができる。Free では接続できない。Free では接続できない

まずはコンポーネント一覧を開き、今日足したいセクションを1つ選んでください。https://design-layer.com/ja/components

次に読む記事は次のとおりです。

• カタログの選び方：https://design-layer.com/ja/articles/cursor-react-motion-components-guide

• LP を1日で公開する流れ：https://design-layer.com/ja/articles/cursor-nextjs-landing-page-guide

• ヒーローの作り方：https://design-layer.com/ja/articles/nextjs-animated-hero-section-guide