Build an Image-Led Presentation: Storyboard, Artwork Ledger and HTML Checks
Choose cinematic, tactile editorial or sky-glass compositions. Plan one visual beat per page, track image rights and source claims, then run and edit a complete local starting deck before commissioning new artwork.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Help me choose Image Narrative Deck, Ochre Editorial Deck or Sky Glass Deck for my supplied story. Ask for audience, purpose, page count, approved facts and image rights. Plan one visual beat per page and keep an artwork ledger with source, permission, crop and illustrative or documentary status. Run the installed template without paid APIs first; do not represent it as newly generated photography. Test every page, notes, crops, caption contrast and a saved edit after reload. Keep unknowns visible and verify any optional export separately.
Which skill fits an image-led story?
Use Image Narrative Deck when one scene and a short live caption should carry each beat. Use Ochre Editorial Deck for a tactile journal, maker story or cultural pitch. Use Sky Glass Deck when a complex subject benefits from sky photography, optical studies and translucent information panels. These are authoring workflows and HTML starting decks, not automatic research or photo-verification services.
Choose the visual grammar before ordering images
Choose a brand or decision deck when evidence density comes first
| Workflow | Composition and rhythm | A poor fit |
|---|---|---|
| Image Narrative Deck · cinematic | Dominant scene, live caption, detail crop and a quiet turning point | Dense analysis or many independently editable chart objects |
| Ochre Editorial Deck · tactile editorial | Cream paper, compressed type, portrait collage and warm statement pages | A generic dashboard or repeating the same photo in different crops |
| Sky Glass Deck · environmental clarity | Sky-blue scenes, optical objects, pale margins and readable glass panels | Treating an illustrative measurement or scene as observed evidence |
Write the page plan before the image prompt
State the audience, purpose, duration, exact requested page count and final action. Give each page one role, one scene and one factual message. For a fictional repair workshop, a useful short arc is the object before repair, a close-up of the process and the next action. This is a planning example, not a claim that a repair succeeded or that the package includes that story.
Attach approved sources to facts and quotes. Keep measured values, targets, illustrative numbers and unknowns distinct. Write three to five useful speaker notes per page. Select layouts from references/layouts.md and one named preset from references/themes.md; do not turn every page into the same photo card.
Keep a rights and evidence ledger for every image slot
Keep an artwork-ledger.md beside the deck. The following is a human-reviewed note format, not an input schema consumed by a bundled generator. Add the page and slot, original file or generation record, rights decision, aspect ratio, intended crop, purpose and whether the image is documentary or illustrative. Keep inspiration references separate from deliverable artwork.
- Image Narrative permits original inline SVG and CSS scenes when no image workflow is authorized. The Ochre and Sky workflows call for separately generated, non-repeating artwork for a newly authored photographic deck. Their local templates can be practiced without generation, but that practice does not complete the new photographic brief. Do not promise that every custom deck is free of image-service costs.
- Do not launch an image service without the user’s cost authorization. Changing a crop, rotation or color does not make one artwork into several independent images. A hash check can find identical bytes; it cannot establish rights, independence or truthfulness.
Prepare a portrait edit and review the actual source photo
Page / slot: process / hero
Purpose: show one repair step
Source: [approved local file or generation record]
Rights: [permission and restrictions; unresolved means stop]
Evidence: illustrative until a real source is supplied
Crop: [aspect ratio and protected subject area]
Used on page: process onlyRun the included HTML practice without an image API
Download one complete free package with a verified account and read its SKILL.md. From that installed directory on macOS or Linux, use Node.js and a fresh filename for this practice. cp -n leaves an existing file alone; if the name is taken, change it in every command. Open the address printed by the server; an occupied port advances to the next available port. Stop with Ctrl+C.
- The reviewed v1.0.2 templates contain 3 Image Narrative pages, 12 Ochre pages and 12 Sky pages. Their inline SVG and CSS scenes are practice artwork and placeholders, not newly generated photographs. They are complete starting examples, not mandatory counts or automatic generation from your brief. Ochre and Sky also include a separate references/example.html with photographic artwork; the commands above deliberately run the template.
- The local template practice uses its supplied inline assets and does not invoke a model or image service. Keep its fictional story and illustrative measurements labeled. Validate any newly authored copy again; passing the structural checker does not establish visual quality or source accuracy.
cp -n references/template.html ./visual-practice.html
node scripts/validate-deck.mjs ./visual-practice.html
node scripts/serve-deck.mjs ./visual-practice.html --port 5379Check crops, captions, every page and a saved edit
- Use next/previous and arrow keys to visit every page, including the final action. Open the overview with Escape and speaker notes with N. Check that each image loads, the subject survives its crop, and captions remain readable against both bright and dark image regions.
- Press E, edit one heading in the practice copy and change to another named theme. Wait for the visible file-save confirmation before reloading; the local server saves with a short delay. Confirm that the text and theme survive reload. A directly opened file keeps changes in browser state until Export → HTML creates a saved copy.
- Test the final deck at the actual presentation size and at phone width. A scaled 16:9 canvas can remain inside the viewport while small captions become unreadable. Check readable text and the final audience action, not just the absence of horizontal overflow.
Deliver the deck, ledger and honest export boundaries
Keep the final HTML, approved source facts, image ledger, selected preset, speaker notes and actual checks together. Review every page after replacing artwork; a good starting template does not certify your changed deck. The bundled PowerPoint exporter uses background images, separate pictures and supported native text boxes. It does not guarantee native charts or editable glass effects. Export and review optional PDF or PPTX separately before claiming those files as deliverables.