菜单
Generate an Open Graph / Twitter Card social unfurler image — 1200×630 JPEG/PNG, <5MB, with deterministic typography. Defaults to Satori + @resvg/resvg-js template rendering (no diffusion). Diffusion is optional and only for the hero art layer composited behind the template.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
Translate a UI brief (a page, a screen, a single component, a feature) into a paste-ready prompt for Nano Banana Pro / gpt-image-2 / Ideogram / Flux 2 / Midjourney that produces a designer-grade mockup as visual inspiration — not pixel-spec UI, not AI slop. Use whenever the user asks for "imagine the X page", "mock up the Y screen", "give me a prompt for nano banana / gpt image 2 to design", "describe this UI for an image model", "draft a prompt for the designer to take inspiration from", or any time the agent needs to produce a UI image-gen prompt for a real product surface (pricing page, dashboard, settings, onboarding, mobile screen, marketing hero, single component). Be pushy — trigger even when the user says "design" without "prompt", or "show me what X could look like" — the agent should reach for this skill before hand-rolling a brief.
Classify a software-asset brief (logo, app icon, favicon, OG image, illustration, splash, icon pack, transparent mark), route to the right image model, rewrite the prompt in the target model's dialect, pick an execution mode (inline_svg / external_prompt_only / api) based on what's actually available, and run the pipeline. Use whenever the user asks for any visual asset for a software product.
Generate a production-grade logo (primary brand mark). Returns RGBA PNG master + SVG vector + monochrome variant. Route by text-length and per-model ceiling. Strong-text models render multi-word and even paragraph-length wordmarks reliably; weak-text models composite SVG type post-render.
Rewrite an asset brief into the exact prompt dialect of the target image model (OpenAI gpt-image-1, Google Imagen/Gemini, SDXL, Flux.1/Flux.2, Midjourney, Ideogram, Recraft). Handles negative-prompt translation, token budgets, transparency quirks, brand-palette injection, and text-in-image ceilings so that `asset_generate_*` submissions succeed on the first try.
Produce a truly RGBA-transparent asset from a brief. Handles the
| name | og-image |
| description | Generate an Open Graph / Twitter Card social unfurler image — 1200×630 JPEG/PNG, <5MB, with deterministic typography. Defaults to Satori + @resvg/resvg-js template rendering (no diffusion). Diffusion is optional and only for the hero art layer composited behind the template. |
| trigger_phrases | ["og image","open graph image","social card","twitter card","link preview"] |
summary_large_image.Default: template-based, no diffusion. The OG engine is:
@resvg/resvg-js — rasterizes the SVG to PNG deterministically, no system fonts leaked.@vercel/og — reference Satori wrapper if running inside Next.js/Vercel.brief + brand bundle
↓
pick template (centered hero, left-aligned, minimal)
↓
fill template slots:
- title (required)
- subtitle (optional)
- logo.svg (optional, brand bundle)
- accent color (brand palette)
- background: solid | gradient | image
↓
[optional] generate background image (diffusion, see skills/hero or skills/illustration)
↓
satori(jsx) → SVG
↓
resvg.render(svg) → 1200×630 PNG
↓
validate: dimensions exact, <5MB, contrast, no-text-cropped
| Template id | Layout | Use for |
|---|---|---|
centered_hero | title + subtitle centered; logo bottom-left | launch posts, generic pages |
left_title | title left-aligned; hero image right | feature pages, blog posts |
minimal | title + brand color block | landing pages |
quote | pull-quote + attribution | blog, documentation |
product_card | logo + product name + tagline + accent bar | product pages |
Templates live as JSX/TSX strings in packages/mcp-server/src/templates/og/*.tsx.
og/
├── og.png # 1200×630 PNG
├── og.jpg # 1200×630 JPEG (higher compression)
├── og-2x.png # 2400×1260 retina (optional)
└── meta.json