القائمة
Turn notes (Notion, Google Docs, Markdown) into branded 1920×1080 HTML slide decks with PDF and PNG export. Pulls real brand tokens from any URL.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | slide-generation-system |
| description | Turn notes (Notion, Google Docs, Markdown) into branded 1920×1080 HTML slide decks with PDF and PNG export. Pulls real brand tokens from any URL. |
Turn a content source (codebase files, Notion notes, Google Docs) into slide-sized (1920×1080) pages that actually look like they came from a specific brand. Output: one HTML file per slide + PDF + PNG.
This is a three-step pipeline:
If any of the three is skipped or half-done, the output looks generic. All three together is what makes a slide feel branded and on-message.
You are a design-systems engineer who refuses to ship generic output. Given a source of branding and a source of content, you produce slides a stranger would immediately recognise as coming from that brand, not a Tailwind default with a color swap, and not a bullet-list dump of the source doc.
Three things must be right, in order:
If the render looks like a generic "dark hero with images" or "light card with bullet points", you failed. The pattern stack, typography tokens, and tight content selection are what make it recognisable.
Do not skip this. Confirm before building:
1080×1080 (Instagram), 1200×630 (OG), 2560×1440 (retina), 1080×1920 (story/reel).Push back on vague briefs ("make slides from this doc"). Specifically ask: which sections, what's the takeaway per slide, who's the audience?
Before extracting anything, look for an existing design system in likely locations:
In a codebase:
# Dedicated theme files
find . -name "*.theme.css" -o -name "cli-theme.css" -o -name "theme.css" -o -name "tokens.css" 2>/dev/null
# Global style entry points
find . -path "*/styles/*.css" -o -path "*/src/*globals.css" -o -name "tailwind.config.*" 2>/dev/null
# A pre-extracted design doc (common output name from dembrandt)
find . -name "DESIGN.md" -o -name "design-tokens.md" 2>/dev/null
If you find one, read it end to end, paste the tokens block into your skill's working notes, and skip to Step 2. Do not re-extract, the file is the source of truth.
For a website:
Check if you've already run an extraction against this domain before:
ls references/*/DESIGN.md 2>/dev/null
ls references/*/design-tokens.md 2>/dev/null
If yes, reuse it.
Pick ONE mode based on where the branding lives.
Branding lives in a repo you own. Never guess paths. Ask which app/package and read:
globals.css, tailwind.css, theme.css, any *-theme.css)public/ or assets/, confirm which is current brand (legacy logos from old products are extremely common)Monorepo trap: apps/marketing, apps/landing-v2, apps/old-site will each have a set of "brand" tokens. Only one is live. Verify before extracting.
Capture into a local design-tokens.md:
0)--gradient-*)Use dembrandt, a vetted CLI built on playwright-core that walks the DOM and clusters computed styles:
npx dembrandt <domain> --save-output --design-md
Outputs:
DESIGN.md summary designed to be read by AI coding agentsIf dembrandt misses pattern backgrounds (it often does for non-token CSS like repeating-linear-gradient on hero ornaments), fall back to the manual Playwright extraction script at the bottom of this file.
Safety check before any new CLI:
Don't npx -y unvetted packages. 10-second vet:
curl -s https://registry.npmjs.org/<pkg> | jq '{latest: ."dist-tags".latest, maintainers, license}'
curl -s https://api.github.com/repos/<owner>/<repo> | jq '{stars: .stargazers_count, updated: .updated_at, archived}'
curl -s https://api.npmjs.org/downloads/point/last-month/<pkg>
Red flags: <1k monthly downloads, 0 GitHub stars, archived repo, obscure deps, new-in-last-7-days publish with no prior history.
A brand's texture stack is roughly half of what makes it recognisable. Skip it and you'll ship generic. Always capture:
repeating-linear-gradient at specific angles, radial-gradient dot grids, SVG data-URI tiles)mask-image: radial-gradient(...) keeps textures tasteful)feTurbulence-based, low opacity, very common on modern dark themes)Modern brands frequently ship their most distinctive visual (the painterly gradient, the aura, the organic blob, the mesh) as a raster asset (WebP / PNG) rather than as CSS. Token extractors (dembrandt included) count pixels of surface color and will tell you the brand is "cream" or "white" when the actual brand moment is a huge image sitting on top. This is the single biggest reason extractions look generic.
Before trusting a color-only extraction, inspect the hero for non-CSS decor:
<img> elements (especially position: absolute or inset: 0 with object-fit: contain/cover)<video> elements with poster images<canvas> elements (animated aurora / blob shaders)background-image: url(...) where the URL points to a file (not a data: URI)Rule: if the brand's hero texture is an image, download the image. Don't approximate a painterly WebP with CSS radial-gradients, you will lose the softness and the specific color flow that makes it recognisable. The asset itself is the brand; the CSS around it is plumbing.
If the brand's display font isn't on Google Fonts (e.g. a custom variable font, a foundry license, a proprietary face), grab the woff2 directly from their CDN and embed via @font-face. The skill's HTML skeleton already supports this, just point the src: url(...) at a local asset. Never silently fall back to a generic substitute because Google Fonts doesn't have it.
Before writing any HTML, open the actual live site (or real in-repo hero) with Playwright and screenshot it. Compare visually to your extracted tokens. If they don't match:
document.querySelectorAll("[class*='cookie'],[class*='banner']").forEach(el => el.remove())).This catches 90% of "why does my slide look off" debugging later.
A screenshot tells you what the slide looks like. A DOM inspection tells you what it's made of. Before building, dump the hero region's:
<img src="...">, a <canvas>, a background-image: url(...), or real CSS? (This is how you catch image-based brand moments.)color: don't assume white-on-gradient; many modern brands use dark text even over vivid decor. Match what the live site actually renders.font-weight / letter-spacing / line-height: tokens from theme files are what the brand allows; what the hero actually uses is often tighter (negative tracking, specific weight). Copy what you measure, not what you assume.One short Playwright evaluate that queries getComputedStyle on the hero h1 + captures the list of <img>/<video>/<canvas>/background-image URLs in the viewport is enough to avoid this whole class of mistake. The manual extraction script at the bottom of this file includes these queries, use it before you design, not after you render.
Pick the source the user named. Don't invent copy. If the source is thin, surface that and ask for more, don't pad with filler.
The source is one or more files (README, docs, blog post, source code with JSDoc, a feature spec).
# Read the target files
cat path/to/source.md
# If the source is scattered, grep for the section first
rg -A 30 "Feature:" path/to/docs/
Extract:
cp <path> references/<slide-name>/).Summarise each slide's content into a short outline before writing HTML. One line per slide: title + 1–2 bullets + visual name.
Notion has two options. Prefer the REST API with a token because the Notion MCP is often unreliable.
Requires NOTION_TOKEN in .env (Integrations internal token).
# Fetch a page's blocks (children)
curl -s -H "Authorization: Bearer $NOTION_TOKEN" \
-H "Notion-Version: 2022-06-28" \
"https://api.notion.com/v1/blocks/<page-id>/children?page_size=100" | jq .
# Fetch a page's properties (title, icon, cover)
curl -s -H "Authorization: Bearer $NOTION_TOKEN" \
-H "Notion-Version: 2022-06-28" \
"https://api.notion.com/v1/pages/<page-id>" | jq .
The page ID is the 32-char hex at the end of a Notion URL (strip dashes if needed; both formats work).
Walk the blocks recursively. Blocks with "has_children": true need a follow-up children call. Block types you care about: heading_1/2/3, paragraph, bulleted_list_item, numbered_list_item, toggle, code, image, quote, callout.
For images: download block.image.file.url (presigned, short TTL, fetch and save to local disk immediately, don't hotlink).
If a Notion MCP is configured, notion-search and notion-fetch can substitute, but schemas drift between hosts and it often returns less structured data than the REST API. Only use when REST access isn't available.
Requires Google Drive access. Two paths:
If the google-drive MCP is configured, authenticate once per session via mcp__claude_ai_Google_Drive__authenticate, then fetch the doc as plain text / Markdown.
If the doc is shared publicly (or with the caller's Google account in a browser they control), they can export as Markdown via File → Download → Markdown (.md) and hand you the file path. Read it like any other codebase source.
Don't try to scrape the rendered Docs HTML with a headless browser, auth flow is hostile and the output is unusable for content extraction.
Regardless of source, produce a flat outline first:
Slide 1 (title), "<headline>" / visual: hero-shot.png
Slide 2 (feature), "<1-line claim>" / 3 bullets / visual: before-after.png
Slide 3 (quote), pull-quote from para 4 / no visual
Slide 4 (cta), "<call to action>" / visual: logo.svg
Show this to the user before committing to the design. Cheaper to iterate on an outline than on 8 rendered slides.
Skip this step entirely unless your outline needs a content asset that doesn't exist yet.
Scope: in-slide content only. Use this for the imagery that lives inside a slide as content: a UGC person holding the product, a lifestyle scene, a product render on a backdrop, an illustrative diagram, a hero photo, an icon-style cutout, a missing background texture.
NOT for high-fidelity branded chrome. Do not generate platform containers, app shells, or any frame the viewer reads as "this is platform X". TikTok mockups, Reddit post cards, Instagram feed/story frames, iMessage bubbles, browser chrome, OS UI: those must come from real brand extraction (Step 1), real screenshots, or vetted UI kits. A generated TikTok frame is instantly recognisable as fake and tanks the credibility of the whole deck.
If you do need a generated content asset, use Wonda CLI. Don't reach for ChatGPT, Midjourney, or hand-rolled provider APIs.
--wait -o <path> drops the file on disk, no SDK juggling. It's already what every other agentic skill in the Wonda ecosystem reaches for first.# Default: strongest prompt adherence, great when the image needs to render text correctly
wonda generate image --model gpt-image-2 --prompt "..." --aspect-ratio 16:9 --wait -o assets/hero.png
# Useful flags
# --params '{"quality":"high"}' crisper output on gpt-image-2
# --params '{"resolution":"4K"}' true 4K on nano-banana-pro / nano-banana-2
# --negative-prompt "..." exclude things explicitly
# --seed <n> reproducible output (model-dependent)
Slide-friendly aspect ratios: 16:9 (1920×1080), 1:1 (square), 9:16 (story / reel), 4:5 (IG feed).
Model picker for slides:
| Need | Model |
|---|---|
| Default, prompt adherence, text-in-image | gpt-image-2 |
| True 4K (above the 1536px cap) | nano-banana-pro or nano-banana-2 |
| 5+ reference images | nano-banana-2 (up to 14 refs) |
| Vector / SVG output | runware-vectorize |
| Cheapest / fastest drafts | z-image |
Background removal, crop, text overlay, img2img restyle, or vectorize: pull the dedicated skill, it ships the full decision tree, model waterfall, and aspect-ratio rules.
wonda skill get image-edit
Common slide-deck edit (img2img with a reference):
wonda generate image --model gpt-image-2 \
--prompt "soft cream gradient background, painterly, brand-aligned" \
--attach ./assets/raw-product.png \
--wait -o assets/hero.png
Background removal (image and video bg removal use different models, never swap them):
wonda generate image --model birefnet-bg-removal \
--attach ./assets/logo-on-white.png \
--wait -o assets/logo-cutout.png
One file per slide: slide-01.html, slide-02.html, etc. Absolute-sized viewport matching the target.
Skeleton (adjust tokens to the ones you extracted in Step 1):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title><slide name></title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=<BrandFont>:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
/* paste extracted tokens here: --bg, --fg, --accent, --border, etc. */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: <W>px;
height: <H>px;
overflow: hidden;
background: var(--bg);
color: var(--fg);
font-family: "<BrandFont>", ui-sans-serif, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
.slide {
position: relative;
width: <W>px;
height: <H>px;
padding: 72px 120px;
display: flex;
flex-direction: column;
/* paste the brand's pattern stack here (radial glows, noise, etc.) */
}
.slide > * {
position: relative;
z-index: 1;
}
/* frames, eyebrows, arrows, etc., all using brand tokens */
</style>
</head>
<body>
<div class="slide">
<!-- pattern layers (corners, dividers, dot grid) go as positioned divs with their own masks -->
<!-- content layer: hero, headline, bullets, visuals -->
</div>
</body>
</html>
Rules:
Inter, Geist, Instrument Serif, JetBrains Mono, Bricolage Grotesque, Fraunces are all available. Never fall back to system-ui silently.-0.02em vs 0 is visibly different and brand-specific. Default-tracking screams "Tailwind default".rgba(255,255,255,0.09)) + the brand's shadow scale.Title / hero slide: single large .frame.hero centered, optional eyebrow pill above, brand heading at 80–96px below.
Before / After split: smaller left .frame, accent-colored arrow between, bigger right .frame.hero. Labels above each frame.
Bullet slide: headline at top, 3 bullets with gap 28–36px, optional small visual to the right. Resist more than 3 bullets per slide, if you have 6, make two slides.
Quote / pull-quote: single line of text at 56–72px, Instrument Serif italic or the brand display face. Attribution below in mono at 16px.
CTA / end slide: logo or wordmark, one line, optional URL in mono. Nothing else.
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.02);
backdrop-filter: blur(8px);
font-family: "JetBrains Mono", ui-monospace, monospace;
font-size: 13px;
color: var(--fg-secondary);
}
One render.mjs for the whole deck:
import { readdirSync } from "node:fs";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";
import { chromium } from "playwright";
const __dirname = dirname(fileURLToPath(import.meta.url));
const W = 1920,
H = 1080;
const slides = readdirSync(__dirname)
.filter((f) => /^slide-\d+\.html$/.test(f))
.sort();
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: W, height: H },
deviceScaleFactor: 2,
});
const page = await context.newPage();
for (const file of slides) {
const base = file.replace(/\.html$/, "");
await page.goto("file://" + join(__dirname, file), {
waitUntil: "networkidle",
});
await page.waitForTimeout(400); // let fonts settle
// emulateMedia persists across page.goto, so reset each iteration before the PNG
await page.emulateMedia({ media: "screen" });
await page.screenshot({ path: join(__dirname, `${base}.png`) });
await page.emulateMedia({ media: "print" });
await page.pdf({
path: join(__dirname, `${base}.pdf`),
width: `${W}px`,
height: `${H}px`,
printBackground: true,
pageRanges: "1",
margin: { top: 0, right: 0, bottom: 0, left: 0 },
});
}
await browser.close();
Run:
node render.mjs
macOS:
# Using Python's pypdf (pre-installed with many toolchains)
python3 -c "from pypdf import PdfWriter; w=PdfWriter(); import glob; [w.append(f) for f in sorted(glob.glob('slide-*.pdf'))]; w.write('deck.pdf'); w.close()"
# Or with qpdf (brew install qpdf)
qpdf --empty --pages slide-*.pdf -- deck.pdf
cp deck.pdf <target-dir>/<name>.pdf
cp slide-01.png <target-dir>/<name>-cover.png # for previews
open <target-dir>/<name>.pdf # macOS; use xdg-open on Linux, start on Windows
Put working artifacts in a project-local gitignored path (references/<name>/ or .tmp/<name>/). Never /tmp: artifacts get wiped and references vanish.
Re-open the rendered PNGs and compare against the brand's real hero screenshot side-by-side. Ask:
If any answer is "approximation" / "arbitrary" / "paraphrased", iterate. Better to self-review than to ship and be told "this looks wrong."
When dembrandt misses pattern backgrounds (corner ornaments and dot grids especially), use this inspection script:
// inspect.mjs, tweak URL and run: node inspect.mjs
import { chromium } from "playwright";
const browser = await chromium.launch();
const page = await (
await browser.newContext({
viewport: { width: 1920, height: 1080 },
deviceScaleFactor: 2,
})
).newPage();
await page.goto("https://<brand>.com", { waitUntil: "networkidle" });
await page.waitForTimeout(1500);
// Kill cookie / announcement overlays
await page.evaluate(() => {
document
.querySelectorAll(
"[class*='cookie'],[class*='Cookie'],[class*='banner'],[class*='Banner']",
)
.forEach((el) => el.remove());
});
// Scroll to force lazy-loaded patterns into the DOM
await page.evaluate(async () => {
for (let y = 0; y < document.body.scrollHeight; y += 600) {
window.scrollTo(0, y);
await new Promise((r) => setTimeout(r, 300));
}
window.scrollTo(0, 0);
});
// 1. All non-trivial background patterns
const patterns = await page.evaluate(() => {
return [...document.querySelectorAll("*")]
.slice(0, 6000)
.map((el) => {
const cs = getComputedStyle(el);
const r = el.getBoundingClientRect();
return {
bg: cs.backgroundImage,
size: cs.backgroundSize,
mask: cs.maskImage !== "none" ? cs.maskImage : cs.webkitMaskImage,
cls: el.className?.toString()?.slice(0, 140),
w: Math.round(r.width),
h: Math.round(r.height),
y: Math.round(r.top + window.scrollY),
};
})
.filter(
(r) =>
r.bg &&
r.bg !== "none" &&
(r.bg.includes("repeating") ||
r.bg.includes("radial-gradient") ||
r.bg.includes("data:image") ||
r.bg.includes("conic-gradient")),
);
});
// 2. Root design tokens
const tokens = await page.evaluate(() => {
const s = getComputedStyle(document.documentElement);
const prefixes = [
"--color-",
"--text-",
"--font-",
"--tracking-",
"--radius-",
"--spacing",
"--shadow-",
];
const out = {};
for (let i = 0; i < s.length; i++) {
const p = s[i];
if (prefixes.some((pre) => p.startsWith(pre)))
out[p] = s.getPropertyValue(p);
}
return out;
});
// 3. Dashed/dotted borders (corner marks, registration ornaments)
const dashedBorders = await page.evaluate(() => {
return [...document.querySelectorAll("*")]
.slice(0, 6000)
.map((el) => {
const cs = getComputedStyle(el);
return {
style: cs.borderStyle,
width: cs.borderWidth,
color: cs.borderColor,
cls: el.className?.toString()?.slice(0, 100),
};
})
.filter((r) => r.style.includes("dashed") || r.style.includes("dotted"));
});
// 4. Image-based decor in the hero (IMG / VIDEO / CANVAS + background-image URLs)
// This is where painterly WebPs and aurora blobs live, not in the CSS token tree.
const heroDecor = await page.evaluate(() => {
const out = { media: [], bgUrls: [] };
for (const el of document.querySelectorAll("img, video, canvas")) {
const r = el.getBoundingClientRect();
if (r.top > 1200 || r.bottom < 0 || r.width < 400 || r.height < 300)
continue;
out.media.push({
tag: el.tagName.toLowerCase(),
src: el.getAttribute("src") || el.getAttribute("poster") || "",
srcset: (el.getAttribute("srcset") || "").slice(0, 240),
cls: (el.className?.toString() || "").slice(0, 120),
w: Math.round(r.width),
h: Math.round(r.height),
});
}
for (const el of [...document.querySelectorAll("*")].slice(0, 6000)) {
const r = el.getBoundingClientRect();
if (r.top > 1200 || r.bottom < 0) continue;
const bg = getComputedStyle(el).backgroundImage;
if (bg && bg.startsWith("url(") && !bg.includes("data:")) {
out.bgUrls.push({
bg: bg.slice(0, 240),
cls: (el.className?.toString() || "").slice(0, 100),
w: Math.round(r.width),
h: Math.round(r.height),
});
}
}
return out;
});
// 5. Hero headline typography (what the brand ACTUALLY renders, not what tokens allow)
const heroHeadline = await page.evaluate(() => {
const candidates = [
...document.querySelectorAll(
"h1, h2, [class*='hero'] *, [class*='title'] *",
),
];
const best = candidates
.map((el) => ({
el,
r: el.getBoundingClientRect(),
size: parseFloat(getComputedStyle(el).fontSize || "0"),
}))
.filter(
(x) =>
x.r.top < 900 && x.r.top > 0 && x.size >= 32 && x.el.innerText?.trim(),
)
.sort((a, b) => b.size - a.size)[0];
if (!best) return null;
const cs = getComputedStyle(best.el);
return {
text: best.el.innerText.slice(0, 80),
family: cs.fontFamily,
weight: cs.fontWeight,
size: cs.fontSize,
lineHeight: cs.lineHeight,
letterSpacing: cs.letterSpacing,
color: cs.color,
};
});
console.log(
JSON.stringify(
{ patterns, tokens, dashedBorders, heroDecor, heroHeadline },
null,
2,
),
);
await browser.close();
Converting LAB colors (used by Attio, Linear, and other modern brands):
lab() directly in CSS, including in PDF output. Paste the raw lab(...) values.culori / colorjs.io. Example: lab(10.72 -0.096 -1.54) ≈ #191C1F.<img>/<video>/<canvas>/background-image: url(...) decor before designing.@font-face. Never substitute silently.open, xdg-open, or start.radial-gradient(), the softness and color flow won't match. Download the asset.#333-style approximations when the real token is rgba(255,255,255,0.09) or lab(...). Translate properly.npx -y unvetted packages. Vet downloads, stars, deps, publish history first./tmp artifacts. Use a project-local gitignored directory.# 0. Check for existing design system
find . -name "*.theme.css" -o -name "DESIGN.md" -o -name "design-tokens.md"
# 1a. Extract from codebase: read theme files manually
# 1b. Extract from live website
npx dembrandt <domain> --save-output --design-md
# 1c. Fallback manual extraction
node inspect.mjs > extracted.json
# 2. Source content
# Codebase: cat / rg the source file(s)
# Notion: curl Notion REST with $NOTION_TOKEN
# Google Docs: via Drive MCP, or export to .md from the browser
# 3. Author slide-01.html, slide-02.html, ...
# 4. Render
node render.mjs
# 5. Combine + save + open (macOS)
qpdf --empty --pages slide-*.pdf -- deck.pdf
cp deck.pdf ~/Downloads/<name>.pdf && open ~/Downloads/<name>.pdf
<repo>/
references/<deck-name>/
design-tokens.md # captured branding (or copied from existing source)
outline.md # flat per-slide outline, reviewed before rendering
slide-01.html
slide-02.html
...
render.mjs
inspect.mjs # (optional) manual extractor
assets/ # images from the content source
hero.png
...
slide-01.png slide-01.pdf # per-slide outputs
deck.pdf # combined output
Add references/ (or your chosen working dir) to .gitignore if you don't want to commit working artifacts.