ImagePremium Verified

Dark Grid Code Card OG Image

A premium social share image skill for product launches and web publishing, combining a disciplined dark grid, editorial headline, and believable code-card interface with exact text rendering.

sl-dark-grid-code-card-og-image sample output

What you get

  • One polished 16:9 OG image with a repeatable signature layout
  • A high-contrast headline block with clear thumbnail readability
  • A structured code card with monospace metadata and syntax accents
  • Series-consistent grid, border, spacing, and palette decisions

Good fit

  • Technical product launches that need a confident social preview
  • Design systems or campaign series that require consistent cover images
  • Web pages where the OG image must communicate the release at a glance

Not for

  • Long-form announcements with several paragraphs of copy
  • Photo-led campaigns or character-driven visual identities
  • Layouts that require multiple panels, charts, or competing calls to action

What you provide

  • Product or project name
  • Primary headline and optional supporting line
  • At least two metadata values such as version, date, URL, or status

Requirements

  • Node.js 20+
  • A SkillLoom generation key (prepaid)

Running cost

Each image is generated with your prepaid SkillLoom generation key (about $0.05 per image at 1K). Subscriptions do not include generation credits.

A typical run costs about $0.05 at sub2api prices, charged to your prepaid key.

Try this prompt

/sl-dark-grid-code-card-og-image Create a 16:9 launch image for fictional software project Lattice Harbor. Show the exact uppercase headline "SHIP THE QUIET UPGRADE", supporting line "A calmer release workflow for small teams", and metadata "v2.4 / NOW AVAILABLE / latticeharbor.dev". Include a legible, short-lines code card named "release.config". Keep the established dark grid and code-card style.

Follow-up prompts

  • Make the headline shorter while preserving the same card geometry and metadata order.
  • Create the next release image with a cyan syntax highlight and the same dark grid system.
  • Use the same composition for a maintenance announcement with exact date and status text.

Verification

Verified

render-checkpass5.0 / 563s

FAQ

How much text should I provide?

Provide one short headline plus a supporting line and two or three metadata values. The skill prioritizes exact, readable copy over filling every available area.

Can this produce a consistent launch series?

Yes. Keep the same headline hierarchy, grid, code-card placement, accent treatment, and metadata order across requests while changing the release content.

Can I request a different accent color?

You can request a restrained variation, but the strongest results keep orange as the primary signal and cyan as a small technical support color.

Similar skills