Code Platform OG Image
開発者がちゃんと読む、リンクプレビュー。
AIをコードプラットフォーム向けのソーシャルプレビューデザイナーに変え、リポジトリ、プロジェクト、開発者ツールのページ向けに1200×630のOG画像を作ります。実在感のあるコードのモチーフ、名前と約束が読めるレイアウト、そして書き出し前のサムネイルテストまで行います。共有したリポジトリリンクに、グレーの箱以上の価値を持たせたいチームのためのものです。

3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
パックの内容
SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:
Code Platform OG Image
When to use
- Your repository or project page shows a blank grey box when shared on X, LinkedIn, Slack, or Discord
- You are announcing a new release, library, CLI, or API and the link preview is doing none of the selling
- Your docs site or changelog has pages worth sharing, but every preview looks identical
- You maintain several repos and want each one to be recognizable at thumbnail size
- A conference talk, blog post, or launch thread links to your code and you want the card to carry the pitch
Workflow
- Collect the identity (input: repo or project page → output: identity brief)
Pull the facts the card must carry: the project name, the one-line promise (what it does, for whom), the primary language or stack, the license if you want it shown, and the mark or wordmark. Drop anything that is not true of this project right now — no aspirational features, no star counts you have not verified. One card = one page = one promise; a card that advertises three things advertises nothing. - Pick the code motif (input: identity brief → output: motif choice + snippet)
Choose one motif and commit to it: a short real code snippet (3–6 lines, real syntax, real function names from the project), a terminal session showing one real command and its output, or a contribution-style activity grid drawn from real activity. The snippet must be code a reader could actually run or find in the repo — never pseudo-code invented for the card. Trim it until it reads at thumbnail size: short lines, no deep nesting, no line longer than about 40 characters. - Lay out the card (input: motif + identity brief → output: 1200×630 layout)
Build on a 1200×630 canvas in a dark, code-editor-like system: near-black background, one silver-grey panel for the code, one accent reserved for the single most important word. Put the name top-left in large type, the one-line promise under it, the code motif on the right or lower half, and the mark in one corner. Keep the title to six words or fewer and the promise to one line — anything longer turns to mush at 240 pixels wide. - Run the thumbnail test (input: layout → output: pass/fail + fixes)
Shrink the card to 240×126 and to 120×63 and read it cold, as if you had never seen the project. Pass means: the name is readable, the promise is readable, the code motif still reads as code, and nothing overlaps. Fail means: fix the type size, shorten the promise, or drop an element — never shrink the canvas and hope. Also check it on a dark chat background and a light one; the card must hold up on both. - Export and wire up (input: passing layout → output: shipped OG image + meta tags)
Export as a JPG or PNG at exactly 1200×630, under a sensible file size, with a stable filename per page. Add theog:imageandtwitter:imagemeta tags pointing at the absolute URL, plus matchingog:titleandog:descriptionthat say the same promise the card shows. Test the real share: paste the URL into one chat app and one social post draft, and confirm the card renders before you call it done.
テンプレートのプレビュー
Code Platform OG Image — Card Template
One card = one page = one promise. Fill this in before designing.
Page: {repo / project / docs page URL}
Project name: {name — 6 words or fewer on the card} One-line promise: {what it does, for whom — one line, verifiable on the page} Primary language / stack: {e.g. Python, Rust, TypeScript} License (optional, show only if wanted): {e.g. MIT} Mark / wordmark: {attach or describe — plain wordmark is fine}
Code motif (pick ONE)
- [ ] Real code snippet (3–6 lines, real syntax, real names from the project)
- [ ] Terminal session (one real command + real output)
- [ ] Activity grid (drawn from real activity)
スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。


