DesignLayer のはじめ方｜無料枠で Cursor に1セクション載せる

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

DesignLayer を初めて使う開発者向け。ライブプレビュー、Copy for Cursor の1日3回、Cursor / Claude への貼り方、Pro Templates との違い。

誰向けか

Next.js と Tailwind で LP やプロダクトページを実装している人向けです。Cursor や Claude にコンポーネントを貼っている人を想定しています。

店のサイトを AI に一括生成するツールではありません。人間が組んだモーション付き React セクションを、見て、コピーして、リポジトリに載せるカタログです。

ステップ1：コンポーネント一覧を開きます。アカウントもカードも不要です。https://design-layer.com/components

ステップ2：ヒーローなど、今日足したい用途で絞り、ライブプレビューをスクロールします。

ステップ3：Copy for Cursor を実行します。無料は日本時間で1日3回です。

ステップ4：Cursor の Agent か Claude に貼り、「既存の Next.js に追加。依存を入れて。文言を差し替え。配置は components/sections/」と書きます。

無料：プレビュー無制限、コピー1日3回。

Pro（月額2,980円・税込）：コピー無制限、完成1ページの Templates。https://design-layer.com/templates

迷ったら無料の1セクションです。品質は、リポジトリに載せてから判断します。

日常的に Cursor を使うなら、API キーを MCP に登録すると、検索と取得をエージェントが行います。手順は https://design-layer.com/articles/cursor-mcp-component-catalog-guide です。

ドキュメントの「はじめに」も、同じ前提で短くまとめています。