---
name: katapick
description: Find a real, recently launched website to use as a design reference and build from Katapick's measured "reproduction markdown" (type scale, spacing, breakpoints, motion timings, section-by-section spec, Tailwind theme, design tokens). Use when the user asks to design or build a web page, LP, corporate/recruit/brand/VTuber/event site, wants "something like X", asks for design references, or pastes a katapick.com URL.
---

# Katapick — design references your agent can build from

Katapick (https://katapick.com) is a daily-updated gallery of hand-picked web design references. Every site has a **reproduction markdown (再現MD)**: values measured in a real browser (font sizes, line heights, letter spacing, spacing scale, radii, breakpoints, transition durations/easings, GSAP/Lenis detection, scroll frames), the full section structure, an implementation prompt, a Tailwind v4 `@theme`, W3C design tokens, and a list of things that must be replaced (copy, images, logos, paid fonts, code).

## When to use

- The user wants to build or redesign a web page and doesn't have a concrete design yet
- The user says "like <site>", "in the style of…", "make it feel like…", or asks for references
- The user pastes a `https://katapick.com/sites/<slug>` URL (use that slug directly)

## Setup

The token is optional for searching. It is required for the full reproduction markdown (free: 3 sites, Pro: unlimited). The user gets it at https://katapick.com/account → 「エージェント連携」. Read it from the environment:

```bash
echo ${KATAPICK_TOKEN:+set}
```

If it's not set, you can still search and read public summaries; tell the user how to get a token when you need the full MD.

## Workflow

1. **Understand the brief.** Extract: page type (LP / corporate / recruit / brand / service / portfolio / ec / media / vtuber / event), industry, mood, must-have interactions.

2. **Search** (skip if the user pasted a katapick.com site URL):
   ```bash
   curl -s "https://katapick.com/api/agent/search?q=<URL-encoded Japanese or English keywords>&limit=6"
   ```
   Optional filters: `category=` (corporate, recruit, lp, brand, service, portfolio, ec, media, vtuber, event) and `trend=` (vtuber, overseas, ai-saas, anime-game, anniversary, interactive, local, d2c). Each result has `slug`, `name`, `summary`, `tags`, `page`, `screenshot`.

3. **Pick.** Show the user the top 2–3 (name, one-line summary, page link) and let them choose. If they told you to just proceed, pick the best match and say why.

4. **Get the reproduction markdown:**
   ```bash
   curl -s -H "Authorization: Bearer $KATAPICK_TOKEN" "https://katapick.com/api/agent/md/<slug>" -o <slug>.katapick.md
   ```
   - 401 → no/invalid token: you received the public summary instead. Ask the user to create a token at https://katapick.com/account.
   - 402 → the free limit (3 sites) is used up. Previously fetched sites can be fetched again; Pro is unlimited (https://katapick.com/pricing).

5. **Build from it.**
   - Put the Tailwind `@theme` (or the CSS variables) from the MD in place first; use the measured type scale and spacing scale instead of guessing.
   - Implement sections in the MD's order; follow the motion section's measured durations and easings; respect `prefers-reduced-motion`.
   - **Follow the 「差し替え必須」 list.** Never copy the original site's text, images, logos, characters, paid fonts, or code. Use the user's content or clear placeholders and the free font alternatives listed.
   - Check the contrast table; fix any pair below 4.5:1 for body text.

6. **Credit.** Mention in your summary which Katapick reference you used (name + page link).

## MCP alternative

If the environment supports MCP, the same features are available as tools (`search_sites`, `get_site_summary`, `get_reproduction_md`):

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