チャットからコンポーネントを取る
最終更新日: 2026年10月16日
接続済みの Cursor または Claude Code から、search_catalog と get_component でセクションを検索し、ページへ置く手順。
このページでできること
サイトを開かずに、id を指定してセクションをリポジトリへ入れます。中身は Copy for Cursor と同じです。
get_component が成功すると、サイトのボタンと同じ規則で回数を消費します。Plus と Pro はコンポーネントが無制限です。search_catalog は消費しません。
始める前に
「Cursor と Claude Code を接続する」が終わっていて、DesignLayer が Connected であること。
1. 探す
チャットに、役割か言葉を指定して検索させます。
DesignLayer の search_catalog で、料金セクションを探してください。候補の id と previewUrl を出してください。search_catalog が受け取れるもの
query。sakura、hero、footer、pricing などの文字列
kind。hero、section、motion、navigation
category。hero、footer、pricing、gallery など。一覧は「コンポーネントの id と分類」
limit。1 から 40
戻り値には id、短い説明、previewUrl、ページ URL が入ります。ファイルはまだ来ません。
2. 1件を取り込む
id が決まったら get_component を呼ばせます。id はページ URL の末尾と同じです。
DesignLayer の get_component で sakura-editorial-poster を取得し、app/page.tsx に置いてください。
files の source を path に書き、npmDependencies があればインストールしてください。
previewUrl の動きと余白に合わせてください。返ってくるもの
get_component は、サイトの Copy for Cursor と同じ仕事です。末尾の JSON に files（path と source）と npmDependencies があり、その前に previewUrl と組み込み指示があります。
エージェントに、JSON を読ませずファイルを自分で想像させないでください。書いたあとは「プレビューと見比べる」で確認します。
完成1ページを取るツールは、まだ有効になっていません。