--- id: daily-slide-creator name: "slide-creator" url: https://skills.yangsir.net/skill/daily-slide-creator author: starchild-ai-agent domain: content-creation tags: ["presentation", "content-creation", "pdf", "design-systems", "visualization"] install_count: 2400 rating: 4.30 (4 reviews) github: https://github.com/starchild-ai-agent/official-skills --- # slide-creator > 用 HTML 构建幻灯片并导出为完美 PDF，确保跨平台一致的显示效果 **Stats**: 2,400 installs · 4.3/5 (4 reviews) ## Before / After 对比 ### 幻灯片导出质量 **Before**: PowerPoint 导出 PDF 常出现字体丢失、布局错乱、颜色偏差，不同设备显示效果不一致 **After**: HTML 转 PDF 保证像素级精确，所有设备和平台显示完全一致，完美保留设计细节 | Metric | Before | After | Change | |---|---|---|---| | 渲染一致性 | 75% | 99% | +32% | ## Readme # slide-creator # Slide Creator — HTML → PDF Presentations Build slide decks as HTML, export to pixel-perfect 16:9 PDF via headless Chromium. **Output format: PDF** — not Microsoft PowerPoint (.pptx). The PDF preserves exact layout, fonts, and colors across all devices. ## Why HTML → PDF - CSS layout (Grid/Flexbox) is far more flexible than any PPT editor - Full web typography, gradients, SVG, animations (print degrades gracefully) - Git-friendly, reproducible, scriptable - One command → PDF with exact 16:9 page dimensions ## Workflow ### 0. Identify Scenario (new) Before any other step, identify the presentation scenario. Read `references/content-scaffolding.md` for full templates. Scenario keyword Template to use pitch / investor / fundraising `pitch-deck` conference / keynote / summit / talk `conference-keynote` product launch / launch event `product-launch` report / research / analysis `research-report` (none of the above) ask user which scenario fits best Each template defines: slide count, page titles, required content per page. ### 0.5 Bilingual Layout (if needed) If the audience is bilingual (e.g. HK, Singapore, global Chinese conference), or the user mentions Chinese + English: - Use the `bilingual` layout mode from `references/content-scaffolding.md` - Heading: English (large) + Chinese subtitle (smaller, --text-muted) - Body bullets: Chinese first, English parenthetical optional - Avoid pure English-only decks for HK/TW/SG audiences ### 1. Plan the Deck Define slide count and content per slide based on the scenario template. Each slide = one `
`. ### 1.5 Art Direction (run this before building) Run this step whenever the user hasn't provided a specific visual style. Read `skills/slide-creator/references/art-direction.md` for the full style taxonomy, CSS token templates, and style-brief output format. **Step A — Ask 4 questions:** - Audience & setting: who is this for, and in what context (investors / internal team / public keynote)? - Mood keywords: how should the audience feel (authoritative / energetic / friendly / geeky-modern)? - Brand constraints: any required brand colors, logo, or fonts? - Reference material: any template references to align with (images, web links, existing deck screenshots)? **Step B — Generate a visual style picker page:** Do NOT present style options as text descriptions — users can't evaluate styles from words alone. Reference handling rules: - If user provides **image files/screenshots**: sample palette (primary/surface/accent), inspect layout density, corner radius, typography tone from the visual. - If user provides **web URLs**: use `web_fetch` to extract design cues. **Critical — follow this extraction protocol to avoid misreading the style:** **Ignore the brand name / domain name** — never infer visual style from the product's industry or name (e.g. "Neo" does NOT mean neon, "Opera" does NOT mean European luxury). - **Read copy tone & vocabulary** — the words used on the page reveal mood (e.g. "surgical precision", "quiet confidence" → restrained; "unleash", "radically" → bold/aggressive). - **Extract explicit color vocabulary** — look for CSS keywords in the fetched text, or color names mentioned in body text / alt tags. Warm vs cool, light vs dark, muted vs saturated. - **Infer layout density** — count words per section; sparse = editorial/luxury, dense = technical/functional. - **Identify decorative motifs** — mentioned or implied (e.g. geometry, gradients, photography, illustration, line art, brutalism). - **Cross-check against art-direction.md** — find the closest matching template, then describe the delta (e.g. "Style G but warmer, replace blue with burnt orange, add subtle grid lines"). - **When uncertain**: be conservative — under-promise the style match and present 3 options where Option A is your best interpretation, B is safer/cleaner, C is more experimental. **Never confidently assert a style that contradicts the actual visual evidence.** - If user provides both: prioritize image cues first, URL cues second. - If no references are provided: use built-in style taxonomy defaults. Then: - Create `output/style-picker/index.html` — a single page with 3 side-by-side mini slide previews (16:9 aspect ratio), each fully rendered with real CSS (colors, fonts, layout, decorative elements). Each preview must look like an actual slide, not a color chip. - Build these 3 options as: **(A) Reference-faithful**, **(B) Safer corporate variant**, **(C) Bolder creative variant**. - `preview_serve` the directory and show the preview URL. - Each card has a label below: style name + one-line description. - Add `onclick` highlight so the user can click to indicate their choice. User picks by saying "Choose A" / "I want B" / "Blend A+C" etc. **Step C — Generate style-brief.md:** Once user selects a style, write a `style-brief.md` (template in art-direction.md) in the project directory. All subsequent HTML/CSS work must follow this brief. **Step D — Ask for brand assets (logo / colors):** After user picks a style, ask: "Do you have a logo or brand color to include? You can upload an image file, and I’ll embed the logo across the slides." If logo uploaded: embed as base64 in HTML (use `base64.b64encode` in bash), place in top-left or top-right corner at ≤60px height. If brand color given: override `--accent` in CSS token block with user's color. ### 2. Choose a Theme If Art Direction was completed, the `style-brief.md` is the theme spec — skip this table. Otherwise, use as a quick fallback: Style Background Accent Font Mood Dark tech `#000` / `#0a0a0a` bright orange/blue/green Inter, Space Grotesk Bold, modern Light clean `#fff` / `#f8f8f8` navy, teal, coral Inter, DM Sans Professional, minimal Gradient dark gradient vibrant accent Any sans-serif Creative, energetic Corporate `#1a1a2e` / white brand color system fonts Trustworthy, formal Playful soft pastels warm pop colors Nunito, Poppins Friendly, casual ### 3. Build HTML + CSS Create a project directory with `index.html` + `styles.css`. **Start from `assets/base.css`** — structural skeleton (slide dimensions, print rules, layout helpers) with NO colors or fonts. Layer your theme on top: ``` /* Example theme layer — customize freely */ body { font-family: 'Inter', sans-serif; color: #fff; background: #000; } .slide { background: #0a0a0a; } .slide-tag { background: rgba(0,120,255,0.15); color: #0078ff; } .card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } ``` **Mandatory structural rules** (in base.css — don't remove): ``` .slide { width: 1280px; height: 720px; page-break-after: always; overflow: hidden; } @page { size: 1280px 720px; margin: 0; } ``` **Key rules:** - Use `px` units — never `vh/vw/rem/%` for slide dimensions - Google Fonts: use `` in ``, export script waits for network idle - Viewport meta: `` - Content must fit within 720px height — overflow is clipped ### 4. Preview (Optional) Use `preview_serve` to preview in browser before exporting. ### 5. Export to PDF ``` python3 skills/slide-creator/scripts/export_pdf.py --dir --output output/.pdf ``` Options: - `--dir` — directory containing `index.html` (required) - `--output` / `-o` — output PDF path (default: `/deck.pdf`) - `--width` — slide width in px (default: 1280) - `--height` — slide height in px (default: 720) ### 6. Verify The script prints slide count and confirms output path. Extra check: ``` import fitz doc = fitz.open("output/deck.pdf") print(f"Pages: {doc.page_count}") for p in doc: r = p.rect print(f" {r.width*96/72:.0f}x{r.height*96/72:.0f}px") ``` ## Style Guidelines - **No default brand** — every deck gets a theme tailored to its content - Prefer Art Direction-first workflow (questions → references → user pick → `style-brief.md`) - Ask the user for preference: dark/light, accent color, font, mood - Each slide should have clear visual hierarchy: tag → title → content - Keep text concise — slides are visual, not documents - Use `.bg-glow` with theme-colored radial gradients for depth - Do not use `web_search` for style exploration by default; prioritize user-provided reference images/links plus templates in `art-direction.md`. - When the user provides reference links, use `web_fetch` to extract design cues (color tone / voice / layout), but implement final CSS using local templates and token variables. - When the user asks for "art-direction advice / style advice", always generate a visual style-picker preview page (3 options) — never rely on text-only descriptions. - Build HTML strictly against chosen style brief, then export PDF (do not skip brief unless user explicitly opts out) - After style is chosen, always ask about logo / brand assets before building - For HK/TW/SG/bilingual audiences, default to bilingual layout unless user says English only ## Style Microtweaks (after style is chosen) If user says "change primary color to red" / "switch the font" / "increase corner radius", do NOT restart art direction. Instead, directly patch the `--accent` / `--font-head` / `--radius` CSS variable in `styles.css`. Only restart art direction if user wants a completely different style. ## Gotchas - **Chromium deps**: first run needs `python3 -m playwright install chromium && python3 -m playwright install-deps chromium` - **Fonts**: Google Fonts need HTTP — the export script starts a local server automatically - **Emoji rendering**: headless Chromium may lack emoji fonts — use SVG icons instead - **Large images**: embed as base64 or use relative paths (local server serves the project dir) - **Slide overflow**: content exceeding 720px height is clipped — design within bounds - **⚠️ PDF text not selectable (verified 2026)**: `filter` / `backdrop-filter` CSS on any ancestor containing text causes Chromium to rasterize that layer to bitmap during PDF export — all child text becomes pixels, not selectable. Fix: NEVER apply `filter`/`backdrop-filter` to containers holding text. Only apply to empty decorative `
` elements (e.g. `.blur-layer`, `.glow-overlay`) with no text children. Same rule applies to `mix-blend-mode` on text parents. **Pre-export checklist**: search HTML for `filter`/`backdrop-filter` on non-decorative elements and strip them. - **⚠️ Footer / source attribution — use standard component + strict bottom-safe-area contract (verified 2026)**: ad-hoc footer markup causes inconsistent positioning across slides. Always use this `.slide-footer` pattern for all source citations, page numbers, and disclaimers. **Hard layout contract (do not skip):** Every non-cover slide must have a dedicated content wrapper (e.g. `.slide-body`) that reserves footer space. - **Hard rule:** `.slide-body` must reserve footer space with bottom-safe-area `>= 96px` (default 96px). Example: `.slide-body { padding: 52px 72px 96px; }`. - Footer must be outside normal flow: `position: absolute; bottom: 24px`, as a sibling of `.slide-body` directly under `.slide`. - Never place source/disclaimer text inside `.slide-body`. - Cover page can be exception only when it has no `.slide-footer`. This enforces physical separation: body content area ends above a reserved footer lane, and footer stays in the canvas-bottom lane, so they never overlap regardless of content density. ``` ``` ``` .slide-footer { position: absolute; bottom: 24px; left: 48px; right: 48px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: rgba(255,255,255,0.35); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 8px; z-index: 2; } .slide > *:not(.bg-glow):not(.slide-footer) { position: relative; z-index: 1; } .slide-body { padding-bottom: 96px; } ``` Never use in-flow / `position: relative` footers — they shift when slide content height changes. Also exclude `.slide-footer` from generic `.slide > *` stacking rules, or CSS order can accidentally override footer layering. **Validation checklist (required before export):** - every non-cover slide has `.slide-body` and `.slide-footer` as siblings; - `.slide-body` bottom padding is `>=96px`; - source/disclaimer text appears only inside `.slide-footer`, never in body containers. - **⚠️ z-index / decorative overlay bug (verified 2026)**: `.bg-glow` and other decorative pseudo-layers MUST be positioned with `z-index: 0` and all real slide content given `z-index: 1` explicitly. If `.bg-glow` is a sibling of `.slide > *` (not a `::before`/`::after` pseudo-element), add this rule to ensure content is never visually buried: ``` .slide > *:not(.bg-glow) { position: relative; z-index: 1; } .bg-glow { position: absolute; z-index: 0; pointer-events: none; } ``` Failure mode: PDF exports show content pushed to the bottom or invisible, even though browser preview looks fine (browser compositing handles z-order more forgivingly than Chromium's print path). Weekly Installs600Repository[starchild-ai-ag…l-skills](https://github.com/starchild-ai-agent/official-skills)GitHub Stars3First Seen4 days agoSecurity Audits[Gen Agent Trust HubPass](/starchild-ai-agent/official-skills/slide-creator/security/agent-trust-hub)[SocketPass](/starchild-ai-agent/official-skills/slide-creator/security/socket)[SnykWarn](/starchild-ai-agent/official-skills/slide-creator/security/snyk)Installed onopenclaw597opencode12gemini-cli12deepagents12antigravity12github-copilot12 --- *Source: https://skills.yangsir.net/skill/daily-slide-creator* *Markdown mirror: https://skills.yangsir.net/api/skill/daily-slide-creator/markdown*