SuperAPI AI Directory
Partner中文AI newsFavorites
SkillsGeek-skills-notion-infographic

Geek-skills-notion-infographic

General & other

View repository

Updated 10-16 08:08

About this skill

Notion Infographic & Presentation Generator — Agent Pipeline V2

You provide the outline, the Agent researches + designs, you just Plan and review.

Architecture

User Outline / Topic
       ↓
P0: 环境检测 + 输入解析 + 输出模式决策
       ↓
Lead Agent (你 — 永远不搜索)
  │
  P1: 研究任务板 (拆解大纲为研究任务)
  │
  Dispatch ──→ Expert A ──→ writes task-a.md ──┐
           ──→ Expert B ──→ writes task-b.md ──┤ (parallel)
           ──→ Expert C ──→ writes task-c.md ──┘
  │                                             │
  │     workspace/research-notes/  <────────────┘
  │
  P2: Read notes → 提炼核心观点
  P3: 设计决策 (风格选择 + 配色 + 版式规划)
  P4: 生成输出
  │   ├─ Mode A: PptxGenJS → .pptx 文件
  │   └─ Mode B: 信息图提示词 → imageGen / 文本输出
  P5: QA 验收 + 输出

P0: Environment detection + output mode decision

1. 检测子 Agent 能力:
   - Claude Code / Cowork: YES → 并行派遣
   - Claude.ai: NO → 降级模式 (Lead 自己串行执行研究)

2. 可用工具检测:
   - web_search / web_fetch → 研究能力
   - Node.js + pptxgenjs → Mode A 可用
   - imageGen → Mode B 可直接出图
   - 均无 → Mode B 输出提示词文本

3. 输出模式决策 (优先级: 用户指定 > 场景推断):
   - 用户说 "PPT/演示文稿/slides/deck" → Mode A
   - 用户说 "信息图/图解/小红书/社交媒体" → Mode B
   - 未指定 → 推断：汇报/培训/商务 → A；传播/科普/内容营销 → B

4. 解析用户输入:
   - 纯主题/关键词 → 需要全面研究
   - 大纲/要点列表 → 按要点研究
   - 完整文稿 → 提炼观点后补充研究
   - 用户指定张数/页数? → 记录，优先级最高

P1: Research task board

The Lead Agent breaks down the user's outline into 3-6 research tasks. Each task is assigned an expert role.

Read reference/subagent-prompt.md for the prompt template.

Task board format

# Research Task Board
Topic: {用户主题}
Output Mode: {A: PPTX / B: Infographic}
Outline Points: {大纲要点列表}

## Group A (parallel — 核心观点研究)
Task A: [行业分析师] — 研究 {观点1} 的数据支撑和案例
Task B: [技术专家] — 研究 {观点2} 的技术细节和趋势
Task C: [用户研究员] — 研究 {观点3} 的用户痛点和故事

## Group B (parallel — 补充素材)
Task D: [数据挖掘师] — 搜集相关统计数据和图表素材
Task E: [案例猎手] — 搜集经典案例和金句

Task assignment principles

  • Each outline point must be assigned at least 1 research task
  • Prioritize researching viewpoints that "require data/case support"
  • Purely opinion-based items (no external information needed) may skip research
  • Keep the total number of tasks between 3-6

Environment-adaptive dispatch

Claude Code / Cowork (with sub-Agents):

for task in a b c; do
  claude -p "$(cat workspace/prompts/task-${task}.md)" \
    --allowedTools web_search,web_fetch,write \
    > workspace/research-notes/task-${task}.md &
done
wait

Claude.ai (degraded): The Lead Agent executes each task serially itself:

  1. In the order of the task board, execute web_search + web_fetch sequentially
  2. Upon completing each task, write the findings into a notes block
  3. After completing all research, proceed to P2

P2: Distill core viewpoints

The Lead Agent reads all research notes and performs:

  1. Information aggregation — categorize scattered findings by outline point
  2. Viewpoint distillation — distill 1 core visualized viewpoint for each point
  3. Data selection — select the most impactful data/case for each viewpoint
  4. Visualization assessment — determine what presentation format suits each viewpoint

Viewpoint distillation rules

  • Each image/slide carries only 1 core viewpoint
  • Do not pad with filler when viewpoints are insufficient
  • Merge similar content when there are too many viewpoints
  • Hard limit: no more than 12 images/pages

P3: Design decisions

Read reference/design-system.md for the complete design system.

This is the core upgrade of V2 — systematizing aesthetic decisions instead of relying on intuition.

3.1 Choose a color scheme

Read reference/design-system.md → Color Palette Reference

Choose a color scheme based on the topic and audience:

Scenario Recommended palette
Business/Annual report/Finance Business & Authority (#2b2d42 series)
Tech/Product launch Vibrant & Tech (#023047 series) or Tech & Night (#000814 series)
Education/Data report Education & Charts (#264653 series)
Health/Consulting Modern & Wellness (#006d77 series)
Creative/Fashion/Lifestyle Soft & Creative (#cdb4db series) or Elegant & Fashion (#edafb8 series)
Nature/Environmental/ESG Nature & Outdoors (#606c38 series) or Forest & Eco (#dad7cd series)

3.2 Choose a design style

Style Characteristics Applicable to
Sharp Right angles, solid lines, high contrast Business, tech, finance
Soft Slightly rounded corners (4-8px), soft shadows Education, consulting, general use
Rounded Large rounded corners (12-20px), friendly feel Consumer, social, young audiences
Pill Fully rounded capsule shape, modern feel Creative, tech products, SaaS
Notion hand-drawn Marker line art, doodle feel, large white space Infographics, social media distribution, popular science

3.3 Layout Planning (Mode A: PPTX)

Classify each page as one of five page types:

Type Purpose Content
Cover Opening tone-setting Large title + subtitle + date + visual elements
TOC Navigation expectations Chapter list (3-5 sections)
Section Divider Chapter transition Chapter title + quote/data
Content Core content Viewpoint + data + charts + visuals
Summary Summary and conclusion Core points review + CTA

Key: Layout diversity!

  • Strictly prohibitedUsing the same layout consecutively
  • Actively use: left-right split columns, large number highlights, timelines, comparison charts, quote cards, icon grids
  • Match layout to content type: key data → large number page, comparison → left-right split columns, process → timeline

3.4 Image Set Planning (Mode B: Infographic)

Content length Typical number of points Reference number of images
Short content (<500 words) 2-4 3-5 images
Medium (500-1500 words) 4-7 5-8 images
Long content (>1500 words) 6-10 8-12 images

Image set structure:

第 1 张: 标题封面图 — 主题 + 核心价值主张
第 2~N-1 张: 内容图 — 每张一个核心观点 + 研究数据支撑
第 N 张: 总结/行动号召图

P4: Generate output

Mode A: PPTX (PptxGenJS)

Read reference/pptx-generation.md for complete PptxGenJS guidance.

Technical constraints

Item Value
Size 10" x 5.625" (LAYOUT_16x9)
Color 6-digit hex without # (e.g. "FF0000")
English font Arial (default)
Chinese font Microsoft YaHei
Page number position x: 9.3", y: 5.1"
Theme keys primary, secondary, accent, light, bg

Workflow

  1. Create slides/ directory
  2. One JS file per page: slide-01.js, slide-02.js, ...
  3. Each file exports a synchronous createSlide(pres, theme) function
  4. Create slides/compile.js to orchestrate all pages
  5. Run cd slides && node compile.js
  6. Output slides/output/presentation.pptx

Theme Object Contract (mandatory)

const theme = {
  primary: "22223b",    // 最深色，标题
  secondary: "4a4e69",  // 深色辅助，正文
  accent: "9a8c98",     // 中间色调强调
  light: "c9ada7",      // 浅色辅助
  bg: "f2e9e4"          // 背景色
};

Absolutely do notUse other key names such as background, text, muted, darkest。

Slide file template

// slide-XX.js
const slideConfig = {
  type: 'content',  // cover | toc | section | content | summary
  index: 2,
  title: 'Slide Title'
};

function createSlide(pres, theme) {
  const slide = pres.addSlide();
  slide.background = { color: theme.bg };
  // ... 构建页面内容
  return slide;
}

if (require.main === module) {
  const pptxgen = require("pptxgenjs");
  const pres = new pptxgen();
  pres.layout = 'LAYOUT_16x9';
  const theme = { primary:"22223b", secondary:"4a4e69",
                   accent:"9a8c98", light:"c9ada7", bg:"f2e9e4" };
  createSlide(pres, theme);
  pres.writeFile({ fileName: `slide-${String(slideConfig.index).padStart(2,'0')}-preview.pptx` });
}

module.exports = { createSlide, slideConfig };

Page number badge (required except on Cover page)

// Circle Badge (默认)
slide.addShape(pres.shapes.OVAL, {
  x: 9.3, y: 5.1, w: 0.4, h: 0.4,
  fill: { color: theme.accent }
});
slide.addText("3", {
  x: 9.3, y: 5.1, w: 0.4, h: 0.4,
  fontSize: 12, fontFace: "Arial",
  color: "FFFFFF", bold: true,
  align: "center", valign: "middle"
});

PptxGenJS key pitfalls

  • Never reuse option objects — PptxGenJS modifies objects in place (e.g. shadow values converted to EMU). Use factory functions to generate new objects.
  • createSlide must be synchronous — cannot be an async function
  • Colors without # — "FF0000" not "#FF0000"
  • Body text not bold — bold only for titles and headings
  • Only use colors from the theme — do not invent colors yourself

Mode B: Infographic prompts

Read reference/style-guide.md for style specifications.

Prompt for each image = style prefix + content description + style suffix

The content description is the only variable area, and needs to:

  • Describe the scene (concise, visual)
  • Incorporate research data (transformed into chart/numeric elements)
  • Specify Chinese annotation text
  • Maintain ample white space and a sense of breathing room

P5: QA Acceptance

Mode A Acceptance Checklist

  • Each page is classified as one of five types
  • Consecutive pages have no identical layout
  • Theme object keys are correct (primary/secondary/accent/light/bg)
  • All colors come from the theme, no self-invented colors
  • Body text is not bolded; bold is used only for titles
  • Every page except the Cover has a page number badge
  • node compile.js Runs successfully
  • The generated .pptx opens normally

Mode B Acceptance Checklist

  • The style prefix and suffix of each image are complete and intact
  • The content description incorporates research data (not vague descriptions)
  • Chinese annotation text is concise (no more than 30 characters of annotation per image)
  • The image set logic is coherent (cover → content → summary)
  • The total number of images is within a reasonable range

General Acceptance

  • All data comes from the research notes, nothing fabricated
  • Statistical data is labeled with year and institution
  • Key quotes/citations are labeled with sources
  • Data not present in the research notes is labeled [to be verified]

Aesthetic Design Codex

These principles constrain the visual output of both Mode A and Mode B.

Six Core Laws

  1. One page, one point — Each page/each image conveys only one core message. If you want to say two things, use two pages.
  2. White space is breathing — At least 30% of the area should be white space. Do not fill every corner with content. The eyes need a place to rest.
  3. Hierarchy is navigation — Use font size, color, and position to establish information hierarchy. Viewers should know what to look at first within 2 seconds.
  4. Contrast is attention — The font size difference between adjacent elements is ≥20%. The title should be at least 2-3 times the body text.
  5. Consistency is professionalism — Within the same presentation/image set: color scheme, fonts, spacing, and style remain unified.
  6. Variety is rhythm — Consecutive pages do not repeat the same layout. Create a sense of visual rhythm through layout variation.

Typography Iron Rules

Rule Description
Fonts ≤ 2 types One for titles and one for body text; do not mix three or more
Color scheme ≤ 5 colors Use the color scheme from the design system
Keywords no more than 6 words/line 6×6 rule: no more than 6 bullet points per slide, no more than 6 words per line
Unified alignment Left-aligned or centered, do not mix
Consistent element spacing Related elements close, unrelated elements far (Proximity)

2025-2026 Visual Trends

Can be referenced and introduced during the design decision stage:

  • The era of big headlines — Bold and exaggerated title font sizes to quickly grab attention
  • Minimalist aesthetics — Soft color scheme + ample white space + clean layout
  • Dark mode — Dark background + bright accents, suitable for technology and night economy themes
  • Flowing shapes — ellipses and circles replace traditional rectangular blocks, creating an organic feel
  • Doodle infographic — hand-drawn style charts and icons, adding approachability
  • Morandi color palette — low-saturation matte feel, suitable for fashion/art/high-end brands

Anti-Hallucination Rules

  1. Lead Agent does not fabricate data — all data must come from research notes
  2. Data not in the research notes is marked [to be verified]
  3. Sub-agents use only real information from search results
  4. Quotes/citations must indicate the source
  5. Statistical data must indicate the year and institution

Progress Reporting

[P0] 环境: {claude.ai/code}. 输出模式: {A/B}. 输入类型: {大纲/文稿/关键词}.
[P1] 任务板: {N} 个研究任务, {M} 组并行. 派遣中...
[P1 task-X done] {N} 条发现, {M} 个数据点.
[P1 all done] 研究完成. {总发现数} 条发现, {总源数} 个来源.
[P2] 提炼 {N} 个核心观点.
[P3] 设计决策: 配色={色板名}, 风格={风格名}, 版式={N}页规划.
[P4] 生成中... {已完成}/{总数}
[P5] QA {通过/失败}. 输出完成.

Dependencies

Tool Purpose Installation
markitdown Read existing PPTX pip install "markitdown[pptx]"
pptxgenjs Create PPTX from scratch (Mode A) npm install -g pptxgenjs
react-icons SVG icons (optional) npm install -g react-icons react react-dom sharp