Deployment Platform OG Image
コードを入れて、サイトが公開される——サムネイルでも読めます。
AIがデプロイ・ホスティングプラットフォーム向けのSNSプレビューデザイナーになります——1200×630のシェア画像を作成します。デプロイパイプラインのモチーフ1つ、コードを公開する旨の短い一文、サムネイルサイズでも読める文字で構成します。

3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
パックの内容
SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:
Deployment Platform OG Image
When to use
- Your deployment platform's shared links preview as a blank box, a cropped dashboard screenshot, or a generic logo that says nothing about shipping code
- You are announcing a feature, a launch, a performance improvement, or a pricing change and want the link preview to carry the news, not just the platform's name
- A docs page, changelog entry, or blog post about deploying gets shared, and the preview does not distinguish it from any other page
- Your platform publishes often and needs one repeatable preview format that works for launches, changelogs, docs, and posts alike
- A screenshot of the deploy dashboard keeps failing as a preview because its tiny log lines and dense panels turn to noise at thumbnail size
Workflow
- Decide the one shipping line (input: the page → output: a one-line shipping message)
A deployment preview carries one line about getting code live, in eight words or fewer — "Ship it. Live in seconds," not "Our next-generation cloud deployment platform empowers developers to build, deploy, and scale applications with confidence." Read the page and find the sentence a developer would repeat to a teammate; that is the preview line. If the page is a general platform homepage, the line is the platform's core shipping promise; if it is a feature or changelog page, the line is that change's payoff. A list of features is not a shipping line, and a mission statement is not a shipping line — one concrete line is. - Pick the deploy-pipeline motif (input: the shipping line → output: a single pipeline motif idea)
Choose one deploy gesture that embodies shipping without pretending to be a screenshot: a code commit flowing through three pipeline stages into a live globe, a single branch line resolving into a green checkmark on a globe, a row of small stage dots lighting up in sequence toward a live marker. The motif is a symbol, not a dashboard — no log lines, no terminal text, no real build output, no tiny status labels, no real URLs. Draw it big and flat, in one or two colors, occupying roughly a third to a half of the canvas. A real dashboard crammed into 1200×630 reads as static at thumbnail size; one clean pipeline gesture reads as "code goes in, live site comes out." - Set the type (input: shipping line + motif → output: the type layout)
Set the shipping line in one large, bold typeface at a size that stays legible when the image is shown 240 pixels wide — few words, large size, generous line spacing. Put a small platform mark or name in one corner, never competing with the shipping line. Keep all text inside a safe margin (at least 60 pixels from every edge at 1200×630) because platforms crop previews differently, and keep essential text out of the bottom strip, where platforms overlay labels or play buttons. If the motif and the type compete for the same space, shrink the motif — the words carry the click. - Build to spec (input: type layout + motif → output: a finished 1200×630 image)
Produce the image at exactly 1200×630 pixels, exported as a JPEG or PNG under 1 MB so it loads fast in crawlers. Use flat colors and bold shapes — silver pipeline stages and one bright checkmark on a dark field, for example — rather than photographic detail or fine lines, which turn to mush at thumbnail size. Check contrast between text and background: light text on a dark field or dark text on a light field, never mid-tone on mid-tone. Export once at full size and once at 240 pixels wide to verify the thumbnail read. - Verify the preview (input: finished image → output: a confirmed working preview)
Wire the image into the page's social meta tags (the Open Graph image tag and its width/height companions) and check it with the platform's own link debugger or by pasting the link into a fresh post draft. Confirm three things: the image actually appears (not a cached old one), it is not cropped into unreadability, and the title and description beside it match the image's shipping line. If a stale preview persists, it is usually a cache — re-scrape the URL through the debugger rather than rebuilding the image.
テンプレートのプレビュー
Deployment Platform OG Image — Brief Template
One page = one preview. Fill this in before building the image.
Page: {page title + URL}
Page type: {platform homepage / feature / launch / changelog / docs / blog post}
One shipping line (≤8 words)
> {the sentence a developer would repeat to a teammate}
Why this line: {what the page actually announces}
Deploy-pipeline motif
Gesture: {commit flowing through stages into a live globe / branch resolving into a checkmark / stage dots lighting toward a live marker} What it symbolizes: {the shipping line, abstractly} Colors: {field color} + {motif color} (one or two flat colors)
Type layout
スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。


