Slide Image

Turn a talk topic into one ultra-detailed English image prompt per slide, delivered as a self-contained HTML file where each prompt has its own copy button. The user pastes each prompt into any image model to generate that slide's visual.

Two things make this skill worth using instead of improvising:

• Every prompt stands alone. Each prompt must run in a fresh thread, by itself, with zero external context — the user copies them one at a time into separate chats. So the full style is written out inside every prompt. There is no shared "art direction" block, no "same style as above", no global rules the prompt depends on. Cohesion comes from repeating the same style description verbatim in each prompt, not from referencing it.
• A reliable artifact. The output is always an HTML file built by a bundled script, so every prompt is genuinely copy-paste-ready and the format never drifts.

Workflow

1. Read the brief. You usually get a topic/brief, not finished slides. Pin down: the subject, the audience, the deck's language (the slide text is often Spanish; the image prompts are always English), the aspect ratio (default 16:9), and any brand/visual constraints (e.g. ESIC colors). If slide count isn't given, propose a sensible outline — don't block on it.
2. Propose the slide outline. List the slides with a short title and role each (e.g. "Portada", "Concepto", "Proceso", "Cierre"). Keep it tight; confirm with the user only if the direction is genuinely ambiguous — otherwise proceed, they can edit.
3. Pick the text mode, because it changes everything downstream:
   • Background mode — the image is a backdrop; the slide text is added later in HTML/overlay. Leave text-safe negative space and put no text inside the image. This is the generic default in references/prompt-recipe.md.
   • Full-slide mode — the image model renders the whole slide, title and minimal text baked in (big title, little text, full illustration). Use this when the user wants the slides "ready", or mentions ESIC. If the deck is ESIC or the user mentions the ESIC style, read references/esic-style.md and use that preset (cream background, electric-blue monoline illustration, huge condensed navy title). Ask only if genuinely unsure which mode.
4. Decide the style once — then write it into every prompt. Settle on the style/medium, palette (named colors), lighting, mood, composition rules, and what to avoid. This is a decision you hold in your head for consistency; it is not a separate output and the prompts never reference it. You will paste the same full style description into each prompt verbatim. Repetition is the point: ten prompts that each spell out the same style produce ten images that match.
5. Write one self-contained prompt per slide. Ultra-detailed, English, platform-agnostic, and complete on its own — every prompt fully restates the background, palette, composition, style, and technical specs so it can be run alone in a new chat with nothing else. Never write "same as slide 1", "as above", or "use the shared style". In background mode follow the 8-ingredient recipe in references/prompt-recipe.md (~70–140 words, text-safe negative space, no-text ending). In ESIC full-slide mode follow the per-slide pattern in references/esic-style.md (title + short subtitle baked in, full monoline illustration that narrates the idea/exercise). Read the relevant reference every time — it's the core of the skill. Vary the composition across the deck. Cohesion comes from the shared palette and line style, not from one repeated layout. If every slide has the title in the same spot with the illustration in the same place, the deck feels like a photocopied template. Rotate framings slide to slide — full-bleed, centered, split, mirrored, the occasional inverted-background slide — and don't repeat a layout on adjacent slides. In ESIC mode, draw from the Layout menu in references/esic-style.md.
6. Build the HTML. Assemble the JSON (schema below) and run the bundled script. Never hand-write the HTML — the script guarantees working copy buttons and a consistent layout.
7. Hand off. The build script opens the HTML in Safari automatically — the point is to eyeball the prompts, so don't make the user hunt for the file. Then tell them the file path and the slide count, and confirm each prompt is fully self-contained — runnable alone in a fresh thread (in ESIC full-slide mode the title comes baked into the image; in background mode the image carries no text and the slide text is overlaid later).

Building the HTML

Write the JSON to a file, then run:

python ~/.claude/skills/slide-image/scripts/build_html.py prompts.json output.html

(If the path differs, the script sits at scripts/build_html.py inside this skill folder.)

The script writes the HTML and then opens it in Safari (macOS). Pass --no-open to skip that in a headless run; otherwise let it open — seeing the prompts is the whole point.

JSON schema — note there is no art_direction field on purpose. The style lives inside each prompt, not in a shared block.

{
  "deck_title": "Transformación digital: arma tu agencia",
  "subtitle": "ESIC · Sesión 1",
  "aspect_ratio": "16:9",
  "slides": [
    { "n": 1, "title": "Portada", "role": "Apertura",
      "prompt": "Full self-contained English prompt: background, palette, composition, style and technical specs all restated here, runnable alone in a fresh chat." }
  ]
}

• deck_title and a non-empty slides array are required; everything else degrades gracefully.
• Put the entire self-contained prompt in slides[].prompt. Every prompt repeats the full style — that is how the deck stays cohesive without any external rules.
• Output filename defaults to <deck-title-slug>-image-prompts.html if you omit the second arg. Prefer saving next to the user's deck/project so it's easy to find.

Notes

• Self-contained is non-negotiable. The litmus test: could a stranger paste only this one prompt into a brand-new chat and get the right image? If it leans on anything outside itself, it fails. No "as above", no shared block, no numbered cross-references.
• Platform-agnostic means no flags. Never emit --ar 16:9, ::, or other model-specific syntax. State every constraint in words ("wide 16:9 cinematic composition").
• English prompts, even for Spanish decks. Image models follow English most reliably. The text the model should render (titles/subtitles in full-slide mode) stays in the deck's language and goes in quotes inside the prompt.
• One image per slide. Background mode → no text in the image. Full-slide/ESIC mode → only the title and a short subtitle, baked in.
• If the user hands you an existing deck (HTML or a list), skip step 2 and use those slides directly — one prompt per existing slide.