ZhanlinCui SpaceX-Style Deck
Turn a topic or outline into a cinematic, minimalist black deck. The output is an HTML deck rendered to PDF + per-slide PNGs (not an editable .pptx — by design, for pixel-perfect fidelity).
How the look works (read this first)
The aesthetic is restraint + consistency: pure-black slides, one full-bleed
photo per slide faded into black with a gradient scrim, UPPERCASE light
headlines with wide tracking, white stat numbers, thin 1px rules, lots of
negative space, and no accent color (all color comes from the photos). Full
rules, the scrim technique, and the layout catalog are in
references/design_system.md — read it before authoring slides.
Workflow
0. Check runtime dependencies
If this is the first run in a fresh Python environment, install the bundled requirements from the skill folder:
python -m pip install -r requirements.txt
The render path also needs Chrome or Edge; set CHROME_PATH only if auto-detect
fails.
1. Establish content + ONE visual theme
Get the deck's content (topic, outline, or raw notes) and pick a single photo theme that runs through the whole deck. Default to dramatic natural-world photography — ocean/coastline, desert, mountains, glaciers, fog, night sky, aerial earth — which is what produces the cinematic look. Avoid generic corporate/office and abstract 3D stock (it breaks the aesthetic); even for an abstract topic, wrap it in a natural theme. One theme + one color family is what makes it cohere. If the theme isn't obvious, propose one (ocean is a safe pick) and confirm.
2. Outline the slides and assign layouts
Draft the slide sequence. For each slide, choose a layout from the catalog in
references/design_system.md (cover, section divider, split text/photo, stat
stack, metric columns, product cards, table, numbered list, full-bleed
bullets, image grid, bar chart, chart+photo, closing). For a "matrix" of items
with multi-word specs, use product cards (not metric columns — long values
wrap badly there). Alternate dense and airy slides; keep words few.
3. Fetch cohesive imagery
Count how many photos the deck needs, then fetch them in one theme. The script darkens + desaturates and prefers darker frames so white text reads:
python scripts/fetch_images.py --query "<theme + mood words>" --count <n> \
--orientation landscape --out <deckdir>/images
Use --orientation portrait for split/numbered layouts, and --duotone "#0c1622"
(same hex deck-wide) if a mixed set needs stronger unification. See the
"Image strategy" section of the reference for query and treatment tips.
API key (first run): the script needs a Pexels key. If none is configured it
exits with instructions. When that happens, tell the user to create a free
key at https://www.pexels.com/api/ (instant, ~1 min) and paste it into
scripts/pexels_key.txt (or set the PEXELS_API_KEY env var). The key is a
secret — never commit it or share a packaged .skill that contains a real key;
distribute with the placeholder pexels_key.txt and let each user add their own.
4. Assemble the deck
Copy assets/template.html to <deckdir>/deck.html and adjust the stylesheet
link so it resolves (e.g. point <link> at this skill's assets/css/deck.css,
or copy the assets/ folder next to the deck). Keep images/ and logo.svg
paths resolvable. Then, for each planned slide, copy the matching
<section class="slide"> from the template and swap in real text and image
paths. Delete unused layouts; duplicate the ones you reuse. Never nest
<section> inside a slide. Obey the non-negotiable rules — if tempted to add a
color, a box, or a third paragraph, don't.
5. Render
python scripts/render_deck.py <deckdir>/deck.html --out <deckdir>/out --scale 2
Produces out/slide_*.png and out/deck.pdf. The renderer auto-detects clipped
content and prints ⚠ CONTENT OVERFLOW for any slide whose text/elements run
past the edge — you must resolve every overflow warning before delivering
(cut words, add columns, switch to cards, or split the slide). Then inspect the
PNGs and fix any muddy-text issues (strengthen the scrim, re-crop the photo) —
see the troubleshooting section of the reference.
6. Deliver
Give the user the PDF and PNG folder. Keep images/CREDITS.txt with the output
(Pexels attribution).
Bundled resources
assets/css/deck.css— the complete design system (compose with its classes; don't fight it).assets/template.html— renderable gallery of all 12 layouts; the copy-paste source.assets/fonts/,assets/logo.svg— bundled fonts (offline) and corner mark.requirements.txt— Python dependencies for image fetching and PDF assembly.scripts/fetch_images.py— Pexels fetch + color-grade for cohesion.scripts/render_deck.py— HTML → PNG/PDF via headless Chrome.references/design_system.md— rules, scrim guide, layout catalog, troubleshooting.