パックの内容

SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：

Search-Product OG Image

When to use

• You are about to launch or announce a search tool, docs site, API, or developer product and the link preview is currently a blank grey box
• Your existing OG image is a screenshot of your homepage that turns into unreadable mush when a chat app shrinks it to 400 pixels wide
• You need one image that works everywhere a link gets pasted: chat apps, social feeds, docs, and forum posts
• Your product's core idea is "type a query, get an answer" and you want the preview to say that in under a second
• You are shipping a changelog, launch post, or docs page and want the share card to look deliberate instead of accidental

Workflow

1. Pin down the one idea (input: product positioning → output: one-sentence message)
   An OG image gets one idea, not three. Write the sentence a stranger should take away: "Search across all your docs in one box" beats "Fast, AI-powered, blazingly quick semantic search for modern teams." If you cannot say it in one sentence, the image will not say it either. Everything downstream — layout, query text, mark — serves this sentence.
2. Write the query (input: one-sentence message → output: example query string)
   The query motif is the heart of this skill: show a short, realistic query your actual users type, not a generic "Search...". A docs product shows something like how do I rotate API keys?; a code search product shows auth middleware retry logic. Keep it under 40 characters so it renders large. The query must be plausible — a fake or nonsensical query makes the product look fake.
3. Lay out the card (input: query + product mark → output: composition)
   Use the standard 1200×630 canvas. Put the product mark (logomark or wordmark) in one corner, the query in a search-bar shape as the dominant element, and one short supporting line under it at most. Leave generous margins: chat apps crop unpredictably, so keep all meaningful content inside the central 90% of the canvas. One focal point — the query bar — and everything else quiet.
4. Set type and contrast (input: composition → output: legible type spec)
   Test legibility at 400 pixels wide, because that is the size most people will actually see. Body copy that is comfortable at 1200 wide is invisible at 400, so set the query large (roughly 72–96px on the full canvas) and keep supporting text to a handful of words at a size that survives the shrink. Check contrast against the background: dark text on a dark wash, or thin weights on busy gradients, both fail. If the image has a background texture, keep it subtle enough that text never competes with it.
5. Export and verify (input: finished image → output: verified preview)
   Export as JPG or PNG at exactly 1200×630, under 300KB if you can manage it without visible artifacts. Then verify the way a stranger will see it: paste the URL into a chat app or a link-preview debugger and look at the actual thumbnail. Check three things: the query is readable, the product mark is identifiable, and nothing important is cropped. Fix and re-test — a preview you never previewed is a guess, not a deliverable.

テンプレートのプレビュー

Search-Product OG Image — Brief Template

Fill this in before any layout work. One product, one idea, one query.

Product: {product name}

One-sentence message: {what a stranger should take away — one idea only}

Product mark: {logomark / wordmark / both — attach the actual asset, do not redesign it}

The query

Example query (≤40 characters): {e.g. how do I rotate API keys?}

Why this query: {where it came from — real search log, support inbox, or docs analytics}

Result hint (optional): {one short line suggesting answers exist, e.g. "Every doc. One search."}

Layout

スキルパック本体（SKILL.md とテンプレート）は英語で書かれています。

スキルパックを購入 — $4.99 Pro — 全511件のスキル