For Agents

「〇〇っぽいLP作って」で、
エージェントが参考から探す。

KatapickのスキルかMCPサーバーを入れると、Claude Code や Cursor が依頼内容に合う参考サイトを検索し、実測値入りのデザイン分析MDを読んでから実装します。katapick.com のURLを貼るだけでも使えます。

STEP 1
トークンを発行
検索だけならトークンなしでも使えます。
アカウントページの「エージェント連携」でトークンを発行し、環境変数に入れておきます。
shell
```
export KATAPICK_TOKEN="kp_..."
```
STEP 2 · A
スキルを入れる
Claude Code 向け。依頼内容から自動で呼ばれます。
Claude Code（全プロジェクトで使う）
```
mkdir -p ~/.claude/skills/katapick && curl -fsSL https://katapick.com/skills/katapick/SKILL.md -o ~/.claude/skills/katapick/SKILL.md
```
中身はこちら: SKILL.md

STEP 2 · B

MCPサーバーを追加

Cursor・Claude Desktop など MCP 対応ツール向け。

Claude Code

claude mcp add --transport http katapick https://katapick.com/mcp --header "Authorization: Bearer $KATAPICK_TOKEN"

Cursor（.cursor/mcp.json）

{
  "mcpServers": {
    "katapick": {
      "url": "https://katapick.com/mcp",
      "headers": { "Authorization": "Bearer kp_..." }
    }
  }
}

使えるツール: search_sites（検索）/ get_site_summary（要約）/ get_reproduction_md（デザイン分析MD）

STEP 3

いつもどおり頼む

例

採用サイトを作りたい。写真多めで、あたたかい雰囲気。Katapick で参考を探して、デザイン分析MDをもとに Next.js で組んで。

URL を貼るだけでも

https://katapick.com/sites/seasats みたいな感じで、うちのサービスのLPを作って

WebMCP · 設定不要

ブラウザのAIなら、開くだけで使える

katapick.com は WebMCP に対応しています。ChatGPT の内蔵ブラウザなど WebMCP 対応のAIブラウザでこのサイトを開けば、AIが画面を操作しなくても「検索・要約・デザイン分析MDの取得・ページを開く」を直接呼び出せます。ログイン状態がそのまま使われるので、トークンの発行も不要です（無料枠・Pro もいつもどおり）。

AIへの頼み方の例

katapick.com で「採用サイト 写真 あたたかい」に近い参考を3つ探して、いちばん合うもののデザイン分析MDを取得し、それをもとに Next.js で組んで

使えるツール: search_sites / list_latest_sites / get_site_summary / get_reproduction_md / get_current_page_site / open_site

API（そのほかのエージェント向け）

検索

curl "https://katapick.com/api/agent/search?q=SaaS%20ダーク%203D&limit=5"

デザイン分析MD

curl -H "Authorization: Bearer $KATAPICK_TOKEN" https://katapick.com/api/agent/md/<slug>

トークンなしでデザイン分析MDを呼ぶと、公開の要約と取得方法を 401 で返します。無料枠を超えると 402 です。

エージェント連携についてよくある質問

トークンがなくても使えますか？

参考サイトの検索と公開の要約は、トークンなしで使えます。実測値・全セクション仕様・AI実装プロンプト入りのデザイン分析MDの取得には、アカウントページで発行するトークンが必要です。

無料で何件まで取得できますか？

トークン1つにつき3件まで無料です（同じサイトの再取得は数えません）。Pro（月額500円）でトークンを発行すると無制限になります。

エージェントが元サイトをコピーしてしまいませんか？

スキルとMCPの指示、そしてデザイン分析MDの差し替え必須リストで、文章・画像・ロゴ・有料フォント・コードを使わず、実測値と構成から組み直すよう指示しています。