Image Poster

Name: Image Poster
Author: nexu-io

nexu-io/open-design

227 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

Generate shareable poster images from open-design HTML presentation assets for social posts, event promos, and slide cover art without leaving the design workflow.

About

The image-poster skill in nexu-io/open-design produces promotional poster images from HTML presentation designs, bridging slide authoring and shareable visual assets for marketing and distribution.

Poster raster export
Slide-to-image pipeline
Social-ready graphics
Branded cover art
No external design tool

Image Poster by the numbers

227 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #585 of 1,335 Generative Media skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/open-design --skill image-poster

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/image-poster.svg)](https://skillselion.com/skills/nexu-io/open-design/image-poster)

Installs	227
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

What it does

Generate shareable poster images from open-design HTML presentation assets for social posts, event promos, and slide cover art without leaving the design workflow.

Files

SKILL.mdMarkdownGitHub ↗

Image Poster Skill

Produce one finished image asset per turn unless the user asks for variations. Image generation rewards a tight, structured prompt — your job is to assemble that prompt from the user's brief, then dispatch.

Resource map

image-poster/
├── SKILL.md         ← you're reading this
└── example.html     ← what the resulting card looks like in Examples

Workflow

Step 0 — Read the project metadata

The active project carries imageModel, imageAspect, and (optional) imageStyle notes. Use them as the upstream model + canvas + style anchor; only ask the user to fill them in if they're marked (unknown — ask).

Step 1 — Compose the prompt

Plan in this exact order before calling any tool:

1. Subject + composition — what is in the frame, where, at what scale; eye-line and crop. 2. Lighting + mood — natural / studio / moody; warm / cool; key plus rim plus fill; time of day if outdoor. 3. Palette + textures — hex anchors when the user gave a brand palette; otherwise a 3-word mood tag (e.g. "muted ochre + ink"). 4. Camera / lens — only if the user wants photographic realism ("85mm portrait, shallow DOF") or a specific film stock. 5. What to avoid — common AI-slop patterns ("no extra fingers, no warped text, no logo placeholders").

Step 2 — Dispatch via the media contract

Use the unified dispatcher — do not call upstream provider APIs by hand. Run from your shell tool:

"$OD_NODE_BIN" "$OD_BIN" media generate \
  --project "$OD_PROJECT_ID" \
  --surface image \
  --model "<imageModel from metadata>" \
  --aspect "<imageAspect from metadata>" \
  --output "<short-descriptive-name>.png" \
  --prompt "<the full assembled prompt from Step 1>"

The command prints one line of JSON: {"file": {"name": "...", ...}}. The daemon writes the bytes into the project folder; the FileViewer picks it up automatically.

Step 3 — Hand off

Reply with a one-paragraph summary of the prompt you used and the filename returned by the dispatcher (e.g. I generated `hero-poster.png` with `gpt-image-2` at 1:1.). Do not emit an <artifact> tag.

Hard rules

One image per turn unless asked for variations.
Honor imageAspect exactly — the upstream cost is the same; matching

the aspect avoids a re-render.

No filler typography in the image itself unless the user asked for

in-frame text. Real copy beats lorem.

Save every render — never describe an image without producing the

file. The user expects something to open in the file viewer.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Image poster — example</title>
    <style>
      :root {
        --bg: #f5efe5;
        --ink: #1c1b1a;
        --accent: #c96442;
        --muted: #8b8579;
        --paper: #efe7d7;
      }
      * { box-sizing: border-box; }
      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
        font-family: 'Iowan Old Style', 'Charter', Georgia, serif; }
      body { min-height: 100dvh; display: grid; place-items: center; padding: 32px; }
      .poster {
        width: min(640px, 92vw);
        aspect-ratio: 3 / 4;
        background: var(--paper);
        border: 1px solid rgba(28, 27, 26, 0.08);
        border-radius: 6px;
        box-shadow: 0 16px 48px rgba(28, 27, 26, 0.12), 0 1px 2px rgba(28, 27, 26, 0.06);
        display: grid;
        grid-template-rows: auto 1fr auto;
        padding: 38px 32px;
        position: relative;
        overflow: hidden;
      }
      .poster::after {
        content: '';
        position: absolute; inset: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 30% 18%, rgba(255,255,255,0.7), transparent 60%),
          repeating-linear-gradient(0deg, rgba(28,27,26,0.025) 0 1px, transparent 1px 2px);
      }
      .eyebrow {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 11px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--muted);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .accent-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--accent);
      }
      .silhouette {
        align-self: center;
        justify-self: center;
        width: 70%;
        aspect-ratio: 1 / 1;
        position: relative;
      }
      .silhouette svg { width: 100%; height: 100%; display: block; }
      .meta {
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
        font-size: 10.5px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 12px;
        align-items: end;
      }
      .meta strong { color: var(--ink); font-weight: 600; }
      .title {
        font-size: 44px;
        line-height: 0.95;
        margin: 18px 0 0;
        letter-spacing: -0.01em;
      }
      .title em { font-style: italic; color: var(--accent); }
      .footer {
        margin-top: 12px;
        font-size: 13px;
        color: var(--muted);
        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      }
    </style>
  </head>
  <body>
    <div class="poster">
      <div class="eyebrow">
        <span>Open Design · Image</span>
        <span class="accent-dot" aria-hidden></span>
      </div>
      <div class="silhouette" aria-hidden>
        <svg viewBox="0 0 100 100">
          <circle cx="50" cy="38" r="18" fill="#1c1b1a" />
          <path d="M22 100 C 22 70, 78 70, 78 100 Z" fill="#1c1b1a" />
          <circle cx="68" cy="22" r="6" fill="#c96442" />
        </svg>
      </div>
      <div>
        <h1 class="title">An <em>image</em> project<br />produced by the agent.</h1>
        <div class="meta">
          <span><strong>gpt-image-2</strong></span>
          <span>·</span>
          <span style="text-align:right">3:4 · poster</span>
        </div>
        <p class="footer">Saved as PNG into the project folder.</p>
      </div>
    </div>
  </body>
</html>