Katapick

For Agents

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

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

  1. STEP 1

    トークンを発行

    検索だけならトークンなしでも使えます。

    アカウントページの「エージェント連携」でトークンを発行し、環境変数に入れておきます。

    shell

    export KATAPICK_TOKEN="kp_..."

  2. 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

  3. 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）

  4. STEP 3

    いつもどおり頼む

    例

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

    URL を貼るだけでも

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

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の差し替え必須リストで、文章・画像・ロゴ・有料フォント・コードを使わず、実測値と構成から組み直すよう指示しています。