Compare commits

...

2 Commits

Author SHA1 Message Date
Jim Liu 宝玉 f454257b5c chore: release v1.18.0 2026-01-23 14:32:21 -06:00
Jim Liu 宝玉 b1cbd1d527 chore: release v1.17.1 2026-01-23 12:23:13 -06:00
21 changed files with 1972 additions and 877 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
}, },
"metadata": { "metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency", "description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.17.0" "version": "1.18.0"
}, },
"plugins": [ "plugins": [
{ {
+22
View File
@@ -2,6 +2,28 @@
English | [中文](./CHANGELOG.zh.md) English | [中文](./CHANGELOG.zh.md)
## 1.18.0 - 2026-01-23
### Features
- `baoyu-slide-deck`: introduces dimension-based style system—replaces monolithic style definitions with modular 4-dimension architecture: **Texture** (clean, grid, organic, pixel, paper), **Mood** (professional, warm, cool, vibrant, dark, neutral), **Typography** (geometric, humanist, handwritten, editorial, technical), and **Density** (minimal, balanced, dense). 16 presets map to specific dimension combinations, with "Custom dimensions" option for full flexibility.
- `baoyu-slide-deck`: adds two-round confirmation workflow—Round 1 asks style/audience/slides/review preferences, Round 2 (optional) collects custom dimension choices when user selects "Custom dimensions".
- `baoyu-slide-deck`: adds conditional outline and prompt review—users can skip reviews for faster generation or enable them for more control.
### Documentation
- `baoyu-slide-deck`: adds dimension reference files—`references/dimensions/texture.md`, `references/dimensions/mood.md`, `references/dimensions/typography.md`, `references/dimensions/density.md`, and `references/dimensions/presets.md` (preset → dimension mapping).
- `baoyu-slide-deck`: adds design guidelines—`references/design-guidelines.md` with audience principles, visual hierarchy, content density, color selection, typography, and font recommendations.
- `baoyu-slide-deck`: adds layout reference—`references/layouts.md` with layout options and selection tips.
- `baoyu-slide-deck`: adds preferences schema—`references/config/preferences-schema.md` for EXTEND.md configuration.
## 1.17.1 - 2026-01-23
### Refactor
- `baoyu-infographic`: simplifies SKILL.md documentation—removes redundant content, streamlines workflow description, and improves readability.
- `baoyu-xhs-images`: improves Step 0 (Load Preferences) documentation—adds clearer first-time setup flow with visual tables and explicit path checking instructions.
### Improvements
- `baoyu-infographic`: enhances `craft-handmade` style with strict hand-drawn enforcement—requires all imagery to maintain cartoon/illustrated aesthetic, no realistic or photographic elements.
## 1.17.0 - 2026-01-23 ## 1.17.0 - 2026-01-23
### Features ### Features
+22
View File
@@ -2,6 +2,28 @@
[English](./CHANGELOG.md) | 中文 [English](./CHANGELOG.md) | 中文
## 1.18.0 - 2026-01-23
### 新功能
- `baoyu-slide-deck`:引入基于维度的风格系统——将单一风格定义重构为模块化四维架构:**纹理** (clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张)、**氛围** (professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性)、**字体** (geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术)、**密度** (minimal 极简、balanced 均衡、dense 密集)。16 种预设映射到特定维度组合,并提供「自定义维度」选项实现完全灵活配置。
- `baoyu-slide-deck`:新增两轮确认工作流——第一轮询问风格/受众/页数/审核偏好,第二轮(可选)在用户选择「自定义维度」时收集具体维度选择。
- `baoyu-slide-deck`:新增条件性大纲和提示词审核——用户可跳过审核以加快生成,或启用审核以获得更多控制。
### 文档
- `baoyu-slide-deck`:新增维度参考文件——`references/dimensions/texture.md``references/dimensions/mood.md``references/dimensions/typography.md``references/dimensions/density.md`,以及 `references/dimensions/presets.md`(预设到维度的映射)。
- `baoyu-slide-deck`:新增设计指南——`references/design-guidelines.md`,包含受众原则、视觉层次、内容密度、配色选择、字体排版和字体推荐。
- `baoyu-slide-deck`:新增布局参考——`references/layouts.md`,包含布局选项和选择技巧。
- `baoyu-slide-deck`:新增偏好配置模式——`references/config/preferences-schema.md`,用于 EXTEND.md 配置。
## 1.17.1 - 2026-01-23
### 重构
- `baoyu-infographic`:精简 SKILL.md 文档——移除冗余内容,优化工作流描述,提升可读性。
- `baoyu-xhs-images`:优化 Step 0(加载偏好设置)文档——新增更清晰的首次设置流程,使用可视化表格和明确的路径检查指令。
### 改进
- `baoyu-infographic`:增强 `craft-handmade` 风格的手绘规则——要求所有图像必须保持卡通/插画风格,禁止写实或照片元素。
## 1.17.0 - 2026-01-23 ## 1.17.0 - 2026-01-23
### 新功能 ### 新功能
+47 -19
View File
@@ -297,6 +297,9 @@ Generate professional slide deck images from content. Creates comprehensive outl
/baoyu-slide-deck path/to/article.md --style corporate /baoyu-slide-deck path/to/article.md --style corporate
/baoyu-slide-deck path/to/article.md --audience executives /baoyu-slide-deck path/to/article.md --audience executives
# Target slide count
/baoyu-slide-deck path/to/article.md --slides 15
# Outline only (no image generation) # Outline only (no image generation)
/baoyu-slide-deck path/to/article.md --outline-only /baoyu-slide-deck path/to/article.md --outline-only
@@ -304,25 +307,50 @@ Generate professional slide deck images from content. Creates comprehensive outl
/baoyu-slide-deck path/to/article.md --lang zh /baoyu-slide-deck path/to/article.md --lang zh
``` ```
**Styles** (visual aesthetics): **Options**:
| Style | Description | Best For | | Option | Description |
|-------|-------------|----------| |--------|-------------|
| `blueprint` (default) | Technical schematics, grid texture, engineering precision | Architecture, system design | | `--style <name>` | Visual style: preset name or `custom` |
| `notion` | SaaS dashboard aesthetic, card-based layouts, clean data focus | Product demos, SaaS, B2B | | `--audience <type>` | Target: beginners, intermediate, experts, executives, general |
| `bold-editorial` | High-impact magazine style, bold typography, dark backgrounds | Product launches, keynotes | | `--lang <code>` | Output language (en, zh, ja, etc.) |
| `corporate` | Navy/gold palette, structured layouts, professional icons | Investor decks, proposals | | `--slides <number>` | Target slide count (8-25 recommended, max 30) |
| `dark-atmospheric` | Cinematic dark mode, glowing accents, atmospheric depth | Entertainment, gaming, creative | | `--outline-only` | Generate outline only, skip images |
| `editorial-infographic` | Magazine-style explainers, flat illustrations | Tech explainers, research | | `--prompts-only` | Generate outline + prompts, skip images |
| `fantasy-animation` | Whimsical Ghibli/Disney style, hand-drawn animation | Educational, storytelling | | `--images-only` | Generate images from existing prompts |
| `intuition-machine` | Technical briefing, bilingual labels, aged paper texture | Technical docs, bilingual | | `--regenerate <N>` | Regenerate specific slide(s): `3` or `2,5,8` |
| `minimal` | Ultra-clean, maximum whitespace, single accent color | Executive briefings, premium |
| `pixel-art` | Retro 8-bit aesthetic, chunky pixels, nostalgic gaming | Gaming, developer talks | **Style System**:
| `scientific` | Academic diagrams, biological pathways, precise labeling | Biology, chemistry, medical |
| `sketch-notes` | Hand-drawn feel, soft brush strokes, warm background | Educational, tutorials | Styles are built from 4 dimensions: **Texture** × **Mood** × **Typography** × **Density**
| `vector-illustration` | Flat vector, black outlines, retro soft colors | Creative proposals, explainers |
| `vintage` | Aged-paper aesthetic, historical document styling | Historical, heritage, biography | | Dimension | Options |
| `watercolor` | Soft hand-painted textures, natural warmth | Lifestyle, wellness, travel | |-----------|---------|
| Texture | clean, grid, organic, pixel, paper |
| Mood | professional, warm, cool, vibrant, dark, neutral |
| Typography | geometric, humanist, handwritten, editorial, technical |
| Density | minimal, balanced, dense |
**Presets** (pre-configured dimension combinations):
| Preset | Dimensions | Best For |
|--------|------------|----------|
| `blueprint` (default) | grid + cool + technical + balanced | Architecture, system design |
| `chalkboard` | organic + warm + handwritten + balanced | Education, tutorials |
| `corporate` | clean + professional + geometric + balanced | Investor decks, proposals |
| `minimal` | clean + neutral + geometric + minimal | Executive briefings |
| `sketch-notes` | organic + warm + handwritten + balanced | Educational, tutorials |
| `watercolor` | organic + warm + humanist + minimal | Lifestyle, wellness |
| `dark-atmospheric` | clean + dark + editorial + balanced | Entertainment, gaming |
| `notion` | clean + neutral + geometric + dense | Product demos, SaaS |
| `bold-editorial` | clean + vibrant + editorial + balanced | Product launches, keynotes |
| `editorial-infographic` | clean + cool + editorial + dense | Tech explainers, research |
| `fantasy-animation` | organic + vibrant + handwritten + minimal | Educational storytelling |
| `intuition-machine` | clean + cool + technical + dense | Technical docs, academic |
| `pixel-art` | pixel + vibrant + technical + balanced | Gaming, developer talks |
| `scientific` | clean + cool + technical + dense | Biology, chemistry, medical |
| `vector-illustration` | clean + vibrant + humanist + balanced | Creative, children's content |
| `vintage` | paper + warm + editorial + balanced | Historical, heritage |
**Style Previews**: **Style Previews**:
@@ -341,7 +369,7 @@ Generate professional slide deck images from content. Creates comprehensive outl
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | | | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | | | watercolor | | |
After generation, slides are automatically merged into a `.pptx` file for easy sharing. After generation, slides are automatically merged into `.pptx` and `.pdf` files for easy sharing.
#### baoyu-comic #### baoyu-comic
+47 -19
View File
@@ -297,6 +297,9 @@ npx skills add jimliu/baoyu-skills
/baoyu-slide-deck path/to/article.md --style corporate /baoyu-slide-deck path/to/article.md --style corporate
/baoyu-slide-deck path/to/article.md --audience executives /baoyu-slide-deck path/to/article.md --audience executives
# 指定页数
/baoyu-slide-deck path/to/article.md --slides 15
# 仅生成大纲(不生成图片) # 仅生成大纲(不生成图片)
/baoyu-slide-deck path/to/article.md --outline-only /baoyu-slide-deck path/to/article.md --outline-only
@@ -304,25 +307,50 @@ npx skills add jimliu/baoyu-skills
/baoyu-slide-deck path/to/article.md --lang zh /baoyu-slide-deck path/to/article.md --lang zh
``` ```
**风格**(视觉美学) **选项**
| 风格 | 描述 | 适用场景 | | 选项 | 说明 |
|------|------|----------| |------|------|
| `blueprint`(默认) | 技术蓝图风格,网格纹理,工程精度 | 架构设计、系统设计 | | `--style <name>` | 视觉风格:预设名称或 `custom` |
| `notion` | SaaS 仪表盘美学,卡片式布局,数据清晰 | 产品演示、SaaS、B2B | | `--audience <type>` | 目标受众:beginners、intermediate、experts、executives、general |
| `bold-editorial` | 杂志社论风格,粗体排版,深色背景 | 产品发布、主题演讲 | | `--lang <code>` | 输出语言(en、zh、ja 等) |
| `corporate` | 海军蓝/金色配色,结构化布局,专业图标 | 投资者演示、客户提案 | | `--slides <number>` | 目标页数(推荐 8-25,最多 30) |
| `dark-atmospheric` | 电影级暗色调,发光效果,氛围感 | 娱乐、游戏、创意 | | `--outline-only` | 仅生成大纲,跳过图片 |
| `editorial-infographic` | 杂志风格信息图,扁平插画 | 科技解说、研究报告 | | `--prompts-only` | 生成大纲 + 提示词,跳过图片 |
| `fantasy-animation` | 吉卜力/迪士尼风格,手绘动画 | 教育、故事讲述 | | `--images-only` | 从现有提示词生成图片 |
| `intuition-machine` | 技术简报,双语标签,做旧纸张纹理 | 技术文档、双语内容 | | `--regenerate <N>` | 重新生成指定页:`3``2,5,8` |
| `minimal` | 极简风格,大量留白,单一强调色 | 高管简报、高端品牌 |
| `pixel-art` | 复古 8-bit 像素风,怀旧游戏感 | 游戏、开发者分享 | **风格系统**
| `scientific` | 学术图表,生物通路,精确标注 | 生物、化学、医学 |
| `sketch-notes` | 手绘风格,柔和笔触,暖白色背景 | 教育、教程、知识分享 | 风格由 4 个维度组合而成:**纹理** × **氛围** × **字体** × **密度**
| `vector-illustration` | 扁平矢量风格,黑色轮廓线,复古柔和配色 | 创意提案、说明性内容 |
| `vintage` | 做旧纸张美学,历史文档风格 | 历史、传记、人文 | | 维度 | 选项 |
| `watercolor` | 柔和手绘水彩纹理,自然温暖 | 生活方式、健康、旅行 | |------|------|
| 纹理 | clean 纯净、grid 网格、organic 有机、pixel 像素、paper 纸张 |
| 氛围 | professional 专业、warm 温暖、cool 冷静、vibrant 鲜艳、dark 暗色、neutral 中性 |
| 字体 | geometric 几何、humanist 人文、handwritten 手写、editorial 编辑、technical 技术 |
| 密度 | minimal 极简、balanced 均衡、dense 密集 |
**预设**(预配置的维度组合):
| 预设 | 维度组合 | 适用场景 |
|------|----------|----------|
| `blueprint`(默认) | grid + cool + technical + balanced | 架构设计、系统设计 |
| `chalkboard` | organic + warm + handwritten + balanced | 教育、教程 |
| `corporate` | clean + professional + geometric + balanced | 投资者演示、提案 |
| `minimal` | clean + neutral + geometric + minimal | 高管简报 |
| `sketch-notes` | organic + warm + handwritten + balanced | 教育、教程 |
| `watercolor` | organic + warm + humanist + minimal | 生活方式、健康 |
| `dark-atmospheric` | clean + dark + editorial + balanced | 娱乐、游戏 |
| `notion` | clean + neutral + geometric + dense | 产品演示、SaaS |
| `bold-editorial` | clean + vibrant + editorial + balanced | 产品发布、主题演讲 |
| `editorial-infographic` | clean + cool + editorial + dense | 科技解说、研究 |
| `fantasy-animation` | organic + vibrant + handwritten + minimal | 教育故事 |
| `intuition-machine` | clean + cool + technical + dense | 技术文档、学术 |
| `pixel-art` | pixel + vibrant + technical + balanced | 游戏、开发者 |
| `scientific` | clean + cool + technical + dense | 生物、化学、医学 |
| `vector-illustration` | clean + vibrant + humanist + balanced | 创意、儿童内容 |
| `vintage` | paper + warm + editorial + balanced | 历史、传记 |
**风格预览** **风格预览**
@@ -341,7 +369,7 @@ npx skills add jimliu/baoyu-skills
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | | | ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | | | watercolor | | |
生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。 生成完成后,所有幻灯片会自动合并为 `.pptx``.pdf` 文件,方便分享。
#### baoyu-comic #### baoyu-comic
+133 -405
View File
@@ -1,74 +1,47 @@
--- ---
name: baoyu-infographic name: baoyu-infographic
description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", or "visual summary". description: Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
--- ---
# Infographic Generator # Infographic Generator
Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics). Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
## Usage ## Usage
```bash ```bash
# Auto-recommend combinations based on content
/baoyu-infographic path/to/content.md /baoyu-infographic path/to/content.md
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
# Specify layout /baoyu-infographic path/to/content.md --aspect portrait --lang zh
/baoyu-infographic path/to/content.md --layout hierarchical-layers /baoyu-infographic # then paste content
# Specify style (default: craft-handmade)
/baoyu-infographic path/to/content.md --style technical-schematic
# Specify both
/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
# With aspect ratio
/baoyu-infographic path/to/content.md --aspect portrait
# Direct content input
/baoyu-infographic
[paste content]
# Direct input with options
/baoyu-infographic --layout linear-progression --style aged-academia
[paste content]
``` ```
## Options ## Options
| Option | Description | | Option | Values |
|--------|-------------| |--------|--------|
| `--layout <name>` | Information layout (20 options, see Layout Gallery) | | `--layout` | 20 options (see Layout Gallery), default: bento-grid |
| `--style <name>` | Visual style (17 options, default: craft-handmade) | | `--style` | 17 options (see Style Gallery), default: craft-handmade |
| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) | | `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
| `--lang <code>` | Output language (en, zh, ja, etc.) | | `--lang` | en, zh, ja, etc. |
## Two Dimensions
| Dimension | Controls | Count |
|-----------|----------|-------|
| **Layout** | Information structure: hierarchy, flow, relationships | 20 types |
| **Style** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
Layout × Style can be freely combined. Example: `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
## Layout Gallery ## Layout Gallery
| Layout | Best For | | Layout | Best For |
|--------|----------| |--------|----------|
| `linear-progression` | Timelines, step-by-step processes, tutorials | | `linear-progression` | Timelines, processes, tutorials |
| `binary-comparison` | A vs B, before-after, pros-cons | | `binary-comparison` | A vs B, before-after, pros-cons |
| `comparison-matrix` | Multi-factor comparisons | | `comparison-matrix` | Multi-factor comparisons |
| `hierarchical-layers` | Pyramids, concentric circles, priority levels | | `hierarchical-layers` | Pyramids, priority levels |
| `tree-branching` | Categories, taxonomies | | `tree-branching` | Categories, taxonomies |
| `hub-spoke` | Central concept with related items | | `hub-spoke` | Central concept with related items |
| `structural-breakdown` | Exploded views, cross-sections, part labeling | | `structural-breakdown` | Exploded views, cross-sections |
| `bento-grid` | Multiple topics, overview (default) | | `bento-grid` | Multiple topics, overview (default) |
| `iceberg` | Surface vs hidden aspects | | `iceberg` | Surface vs hidden aspects |
| `bridge` | Problem-solution, gap-crossing | | `bridge` | Problem-solution |
| `funnel` | Conversion processes, filtering | | `funnel` | Conversion, filtering |
| `isometric-map` | Spatial relationships, locations | | `isometric-map` | Spatial relationships |
| `dashboard` | Metrics, KPIs, data display | | `dashboard` | Metrics, KPIs |
| `periodic-table` | Categorized collections | | `periodic-table` | Categorized collections |
| `comic-strip` | Narratives, sequences | | `comic-strip` | Narratives, sequences |
| `story-mountain` | Plot structure, tension arcs | | `story-mountain` | Plot structure, tension arcs |
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
| `winding-roadmap` | Journey, milestones | | `winding-roadmap` | Journey, milestones |
| `circular-flow` | Cycles, recurring processes | | `circular-flow` | Cycles, recurring processes |
Detailed layout definitions: `references/layouts/<layout>.md` Full definitions: `references/layouts/<layout>.md`
## Style Gallery ## Style Gallery
| Style | Description | | Style | Description |
|-------|-------------| |-------|-------------|
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic | | `craft-handmade` | Hand-drawn, paper craft (default) |
| `claymation` | 3D clay figures, playful stop-motion | | `claymation` | 3D clay figures, stop-motion |
| `kawaii` | Japanese cute, big eyes, pastel colors | | `kawaii` | Japanese cute, pastels |
| `storybook-watercolor` | Soft painted illustrations, whimsical | | `storybook-watercolor` | Soft painted, whimsical |
| `chalkboard` | Colorful chalk on black board | | `chalkboard` | Chalk on black board |
| `cyberpunk-neon` | Neon glow on dark, futuristic | | `cyberpunk-neon` | Neon glow, futuristic |
| `bold-graphic` | Comic style, halftone dots, high contrast | | `bold-graphic` | Comic style, halftone |
| `aged-academia` | Vintage science, sepia sketches | | `aged-academia` | Vintage science, sepia |
| `corporate-memphis` | Flat vector people, vibrant fills | | `corporate-memphis` | Flat vector, vibrant |
| `technical-schematic` | Blueprint, isometric 3D, engineering | | `technical-schematic` | Blueprint, engineering |
| `origami` | Folded paper forms, geometric | | `origami` | Folded paper, geometric |
| `pixel-art` | Retro 8-bit, nostalgic gaming | | `pixel-art` | Retro 8-bit |
| `ui-wireframe` | Grayscale boxes, interface mockup | | `ui-wireframe` | Grayscale interface mockup |
| `subway-map` | Transit diagram, colored lines | | `subway-map` | Transit diagram |
| `ikea-manual` | Minimal line art, assembly style | | `ikea-manual` | Minimal line art |
| `knolling` | Organized flat-lay, top-down | | `knolling` | Organized flat-lay |
| `lego-brick` | Toy brick construction, playful | | `lego-brick` | Toy brick construction |
Detailed style definitions: `references/styles/<style>.md` Full definitions: `references/styles/<style>.md`
## Recommended Combinations ## Recommended Combinations
Based on content analysis, the system recommends 3-5 layout×style combinations: | Content Type | Layout + Style |
|--------------|----------------|
| Content Type | Recommended Combination |
|--------------|------------------------|
| Timeline/History | `linear-progression` + `craft-handmade` | | Timeline/History | `linear-progression` + `craft-handmade` |
| Step-by-step Process | `linear-progression` + `ikea-manual` | | Step-by-step | `linear-progression` + `ikea-manual` |
| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` | | A vs B | `binary-comparison` + `corporate-memphis` |
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` | | Hierarchy | `hierarchical-layers` + `craft-handmade` |
| Relationships/Overlap | `venn-diagram` + `craft-handmade` | | Overlap | `venn-diagram` + `craft-handmade` |
| Conversion/Sales | `funnel` + `corporate-memphis` | | Conversion | `funnel` + `corporate-memphis` |
| Recurring Process | `circular-flow` + `craft-handmade` | | Cycles | `circular-flow` + `craft-handmade` |
| Technical/System | `structural-breakdown` + `technical-schematic` | | Technical | `structural-breakdown` + `technical-schematic` |
| Data/Metrics | `dashboard` + `corporate-memphis` | | Metrics | `dashboard` + `corporate-memphis` |
| Educational/Overview | `bento-grid` + `chalkboard` | | Educational | `bento-grid` + `chalkboard` |
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` | | Journey | `winding-roadmap` + `storybook-watercolor` |
| Categories/Types | `periodic-table` + `bold-graphic` | | Categories | `periodic-table` + `bold-graphic` |
**Default combination**: `bento-grid` + `craft-handmade` Default: `bento-grid` + `craft-handmade`
## File Structure ## Output Structure
Each session creates an independent directory:
``` ```
infographic/{topic-slug}/ infographic/{topic-slug}/
├── source-{slug}.{ext} # Source files ├── source-{slug}.{ext}
├── analysis.md # Deep content analysis ├── analysis.md
├── structured-content.md # Instructional content structure ├── structured-content.md
├── prompts/ ├── prompts/infographic.md
└── infographic.md # Generated prompt └── infographic.png
└── infographic.png # Output image
``` ```
**Slug Generation**: Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "Machine Learning Basics" → `ml-basics`
**Conflict Resolution**: ## Core Principles
If `infographic/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
## Instructional Design Approach - Preserve all source data **verbatim**—no summarization or rephrasing
- Define learning objectives before structuring content
This skill applies a **world-class instructional designer** mindset to infographic creation: - Structure for visual communication (headlines, labels, visual elements)
1. **Deep Understanding**: Read and comprehend the source material thoroughly
2. **Learning Objectives**: Identify what the viewer should understand after seeing the infographic
3. **Information Architecture**: Structure content for maximum clarity and retention
4. **Visual Storytelling**: Use visuals to communicate complex ideas accessibly
5. **Verbatim Data**: Preserve all source data exactly as written—no summarization or rephrasing of facts
## Workflow ## Workflow
### Step 1: Analyze Content → `analysis.md` ### Step 1: Setup & Analyze
Read source content and perform deep instructional analysis. **1.1 Load Preferences (EXTEND.md)**
**Actions**: Use Bash to check EXTEND.md existence (priority order):
1. **Save source content** (if not already a file):
- If user provides a file path: use as-is
- If user pastes content: save to `source.md` in target directory
2. **Deep reading**: ```bash
- Read the entire document thoroughly # Check project-level first
- Develop deep understanding before proceeding test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
- Identify the core message and purpose
3. **Content analysis**: # Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
| Aspect | Questions to Answer | test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
|--------|---------------------|
| **Main Topic** | What is this content fundamentally about? |
| **Data Type** | Timeline? Hierarchy? Comparison? Process? Relationships? |
| **Complexity** | Simple (3-5 points) or complex (6-10+ points)? |
| **Tone** | Technical, educational, playful, serious, persuasive? |
| **Audience** | Who is the intended viewer? What do they already know? |
4. **Language detection**:
- Detect **source language** from content
- Detect **user language** from conversation
- Note if source_language ≠ user_language (will ask in Step 4)
5. **Extract design instructions** from user input:
- Style preferences (colors, mood, aesthetic)
- Layout preferences (structure, organization)
- Any specific visual requirements
- Separate these from content—they go in the Design Instructions section
6. **Save to `analysis.md`**
**Analysis Output Format**:
```yaml
---
title: "[Main topic title]"
topic: "[Category: educational/technical/business/etc.]"
data_type: "[timeline/hierarchy/comparison/process/etc.]"
complexity: "[simple/moderate/complex]"
source_language: "[detected language]"
user_language: "[user's language]"
---
## Main Topic
[1-2 sentence summary of what this content is about]
## Learning Objectives
After viewing this infographic, the viewer should understand:
1. [Primary objective]
2. [Secondary objective]
3. [Tertiary objective if applicable]
## Target Audience
- **Knowledge Level**: [Beginner/Intermediate/Expert]
- **Context**: [Why they're viewing this]
- **Expectations**: [What they hope to learn]
## Content Type Analysis
- **Data Structure**: [How information relates to itself]
- **Key Relationships**: [What connects to what]
- **Visual Opportunities**: [What can be shown rather than told]
## Design Instructions (from user input)
[Any style, color, layout, or visual preferences extracted from user's steering prompt]
``` ```
┌────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-infographic/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ User home │
└────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display summary │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
**1.2 Analyze Content → `analysis.md`**
1. Save source content (file path or paste → `source.md`)
2. Analyze: topic, data type, complexity, tone, audience
3. Detect source language and user language
4. Extract design instructions from user input
5. Save analysis
See `references/analysis-framework.md` for detailed format.
### Step 2: Generate Structured Content → `structured-content.md` ### Step 2: Generate Structured Content → `structured-content.md`
Transform analyzed content into a structured format for the infographic designer. Transform content into infographic structure:
1. Title and learning objectives
2. Sections with: key concept, content (verbatim), visual element, text labels
3. Data points (all statistics/quotes copied exactly)
4. Design instructions from user
**Instructional Design Process**: **Rules**: Markdown only. No new information. All data verbatim.
1. **Create high-level outline**: See `references/structured-content-template.md` for detailed format.
- Title that captures the essence
- List all main learning objectives
- Identify the logical flow
2. **Flesh out each section**: ### Step 3: Recommend Combinations
- For each learning objective, create a section
- Mix conceptual explanations with practical elements
- Preserve all source data **verbatim**—do not summarize or rephrase
3. **Structure for visual communication**: Recommend 3-5 layout×style combinations based on:
- Identify what becomes a headline - Data structure → matching layout
- Identify what becomes supporting text - Content tone → matching style
- Identify what becomes a visual element - Audience expectations
- Identify data points, statistics, or quotes - User design instructions
**Critical Rules**:
| Rule | Requirement |
|------|-------------|
| **Output format** | Markdown only |
| **Tone** | Expert trainer: knowledgeable, clear, encouraging |
| **No new information** | Do not add anything not in the source |
| **Verbatim data** | All statistics, quotes, and facts copied exactly |
**Structured Content Format**:
```markdown
# [Infographic Title]
## Overview
[Brief description of what this infographic conveys]
## Learning Objectives
The viewer will understand:
1. [Objective 1]
2. [Objective 2]
3. [Objective 3]
---
## Section 1: [Section Title]
**Key Concept**: [One-sentence summary]
**Content**:
- [Point 1 - verbatim from source]
- [Point 2 - verbatim from source]
- [Point 3 - verbatim from source]
**Visual Element**: [What to show visually]
**Text Labels**:
- Headline: "[Exact text for headline]"
- Subhead: "[Exact text for subhead]"
- Labels: "[Label 1]", "[Label 2]", ...
---
## Section 2: [Section Title]
[Continue pattern...]
---
## Data Points (Verbatim)
[All statistics, numbers, quotes exactly as they appear in source]
- "[Exact quote or statistic 1]"
- "[Exact quote or statistic 2]"
---
## Design Instructions
[Extracted from user's steering prompt]
- Style: [preferences]
- Colors: [preferences]
- Layout: [preferences]
- Other: [any other visual requirements]
```
### Step 3: Generate Layout×Style Recommendations
Based on analysis and structured content, recommend 3-5 combinations.
**Selection Criteria**:
| Factor | How to Match |
|--------|--------------|
| **Data structure** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
| **Content tone** | Technical→technical-schematic, Playful→kawaii, etc. |
| **Audience** | Business→corporate-memphis, Educational→chalkboard, etc. |
| **Complexity** | Simple→sparse layouts, Complex→dense layouts |
| **User preferences** | Honor any design instructions from Step 1 |
**Format each recommendation**:
```
[Layout] + [Style]: [Brief rationale based on content analysis]
```
### Step 4: Confirm Options ### Step 4: Confirm Options
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Present all options in single confirmation:
1. **Combination** (always): 3+ options with rationale
**Questions to ask**: 2. **Aspect** (always): landscape/portrait/square
3. **Language** (only if source ≠ user language): which language for text
| Question | When to Ask |
|----------|-------------|
| Combination | Always (required) |
| Aspect ratio | Always |
| Language | Only if `source_language ≠ user_language` |
**AskUserQuestion format**:
**Question 1 (Combination)** - always:
- Option A (Recommended): [layout] + [style] - [brief rationale]
- Option B: [layout] + [style] - [brief rationale]
- Option C: [layout] + [style] - [brief rationale]
- Custom: Specify your own layout and/or style
**Question 2 (Aspect)** - always:
- landscape (16:9, Recommended) - standard presentation
- portrait (9:16) - mobile/social media
- square (1:1) - social media posts
**Question 3 (Language)** - only if source ≠ user language:
- [Source language] (matches content)
- [User language] (your preference)
**Language handling**:
- If source language = user language: Just inform user
- If different: Ask which language to use for all text
### Step 5: Generate Prompt → `prompts/infographic.md` ### Step 5: Generate Prompt → `prompts/infographic.md`
Create the image generation prompt. Combine:
1. Layout definition from `references/layouts/<layout>.md`
**Process**: 2. Style definition from `references/styles/<style>.md`
1. Read layout definition from `references/layouts/<layout>.md` 3. Base template from `references/base-prompt.md`
2. Read style definition from `references/styles/<style>.md` 4. Structured content from Step 2
3. Read base prompt template from `references/base-prompt.md` 5. All text in confirmed language
4. Combine with structured content from Step 2
5. **All text in prompt uses confirmed language**
**Prompt Structure**:
```markdown
Topic: [main topic from analysis]
Layout: [selected layout]
Style: [selected style]
Aspect: [confirmed ratio]
Language: [confirmed language]
## Layout Guidelines
[From layout definition file]
## Style Guidelines
[From style definition file]
## Content to Visualize
### Learning Objectives
[From structured-content.md]
### Sections
[From structured-content.md - each section with its visual elements]
### Data Points (Verbatim)
[All exact statistics, quotes, and facts from source]
## Text Labels (in [language])
[All text that appears in the infographic, organized by section]
## Design Instructions
[Any specific visual requirements from user's steering prompt]
```
### Step 6: Generate Image ### Step 6: Generate Image
**Image Generation Skill Selection**: 1. Select available image generation skill (ask user if multiple)
1. Check available image generation skills 2. Call with prompt file and output path
2. If multiple skills available, ask user to choose 3. On failure, auto-retry once
**Generation**:
Call selected image generation skill with:
- Prompt file path: `prompts/infographic.md`
- Output path: `infographic.png`
- Aspect ratio parameter if supported
**Error handling**:
- On failure, auto-retry once before reporting error
- If retry fails, inform user with error details
### Step 7: Output Summary ### Step 7: Output Summary
``` Report: topic, layout, style, aspect, language, output path, files created.
Infographic Generated!
Topic: [topic from analysis]
Layout: [layout name]
Style: [style name]
Aspect: [aspect ratio]
Language: [confirmed language]
Location: [output directory path]
Learning Objectives Covered:
1. [Objective 1] ✓
2. [Objective 2] ✓
3. [Objective 3] ✓
Files:
✓ analysis.md
✓ structured-content.md
✓ prompts/infographic.md
✓ infographic.png
Preview the image to verify it matches your expectations.
```
## Quality Checklist
Before generating the final image, verify:
- [ ] All source data preserved verbatim (no summarization)
- [ ] Learning objectives clearly represented
- [ ] Layout matches information structure
- [ ] Style matches content tone and audience
- [ ] All text labels in correct language
- [ ] Design instructions from user honored
- [ ] Visual hierarchy supports comprehension
## References ## References
Detailed templates and guidelines in `references/` directory: - `references/analysis-framework.md` - Analysis methodology
- `analysis-framework.md` - Instructional design analysis methodology - `references/structured-content-template.md` - Content format
- `structured-content-template.md` - Structured content format and examples - `references/base-prompt.md` - Prompt template
- `base-prompt.md` - Base prompt template for image generation - `references/layouts/<layout>.md` - 20 layout definitions
- `layouts/<layout>.md` - Detailed layout definitions (20 files) - `references/styles/<style>.md` - 17 style definitions
- `styles/<style>.md` - Detailed style definitions (17 files)
## Notes
- Layout determines information architecture; style determines visual treatment
- Default style `craft-handmade` works well with most layouts
- Technical content benefits from `technical-schematic` or `ui-wireframe`
- Educational content works well with `chalkboard`, `storybook-watercolor`
- Business content pairs with `corporate-memphis`, `dashboard`
- All text in the infographic uses the confirmed language
- **Never add information not present in the source document**
- **Statistics and quotes must be copied exactly—no paraphrasing**
## Extension Support ## Extension Support
Custom styles and configurations via EXTEND.md. Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.
## Recommended Pairings ## Recommended Pairings
- `cartoon-hand-drawn`: Friendly overviews (default) - `craft-handmade`: Friendly overviews (default)
- `corporate-memphis`: Business summaries - `corporate-memphis`: Business summaries
- `pixel-art`: Retro feature grids - `pixel-art`: Retro feature grids
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
- Organic, slightly imperfect shapes - Organic, slightly imperfect shapes
- Layered depth with shadows (paper variant) - Layered depth with shadows (paper variant)
- Simple cartoon elements and icons - Simple cartoon elements and icons
- Character illustrations (people, personalities in cartoon form)
- Ample whitespace, clean composition - Ample whitespace, clean composition
- Keywords and core concepts highlighted - Keywords and core concepts highlighted
- **Strictly hand-drawn—no realistic or photographic elements**
## Style Enforcement
- All imagery must maintain cartoon/illustrated aesthetic
- Replace real photos or realistic figures with hand-drawn equivalents
- Maintain consistent line weight and illustration style throughout
## Typography ## Typography
File diff suppressed because it is too large Load Diff
@@ -52,8 +52,33 @@ You are "The Architect" - a master visual storyteller creating presentation slid
## STYLE_INSTRUCTIONS ## STYLE_INSTRUCTIONS
[Insert style-specific instructions here] [Extract from outline.md - do NOT re-read style files]
The STYLE_INSTRUCTIONS block from the outline contains:
- Design Aesthetic
- Background (Texture + Base Color)
- Typography (Headlines + Body descriptions)
- Color Palette (with hex codes)
- Visual Elements
- Density Guidelines
- Style Rules (Do/Don't)
Copy the entire `<STYLE_INSTRUCTIONS>...</STYLE_INSTRUCTIONS>` block from the outline here.
--- ---
Please use nano banana pro to generate the slide image based on the content provided below: ## SLIDE CONTENT
[Insert slide-specific content from outline]
Include:
- Slide number and filename
- Type (Cover/Content/Back Cover)
- Narrative Goal
- Key Content (Headline, Sub-headline, Body points)
- Visual description
- Layout guidance (if specified)
---
Please use nano banana pro to generate the slide image based on the content provided above.
@@ -0,0 +1,125 @@
# EXTEND.md Schema
Structure for user preferences in `.baoyu-skills/baoyu-slide-deck/EXTEND.md`.
## Full Schema
```yaml
# Slide Deck Preferences
## Defaults
style: blueprint # Preset name OR "custom"
audience: general # beginners | intermediate | experts | executives | general
language: auto # auto | en | zh | ja | etc.
review: true # true = review outline before generation
## Custom Dimensions (only when style: custom)
dimensions:
texture: clean # clean | grid | organic | pixel | paper
mood: professional # professional | warm | cool | vibrant | dark | neutral
typography: geometric # geometric | humanist | handwritten | editorial | technical
density: balanced # minimal | balanced | dense
## Custom Styles (optional)
custom_styles:
my-style:
texture: organic
mood: warm
typography: humanist
density: minimal
description: "My custom warm and friendly style"
```
## Field Descriptions
### Defaults
| Field | Type | Default | Description |
|-------|------|---------|-------------|
| `style` | string | `blueprint` | Preset name, `custom`, or custom style name |
| `audience` | string | `general` | Default target audience |
| `language` | string | `auto` | Output language (auto = detect from input) |
| `review` | boolean | `true` | Show outline review before generation |
### Custom Dimensions
Only used when `style: custom`. Defines dimension values directly.
| Field | Options | Default |
|-------|---------|---------|
| `texture` | clean, grid, organic, pixel, paper | clean |
| `mood` | professional, warm, cool, vibrant, dark, neutral | professional |
| `typography` | geometric, humanist, handwritten, editorial, technical | geometric |
| `density` | minimal, balanced, dense | balanced |
### Custom Styles
Define reusable custom dimension combinations.
```yaml
custom_styles:
style-name:
texture: <texture>
mood: <mood>
typography: <typography>
density: <density>
description: "Optional description"
```
Then use with: `/baoyu-slide-deck content.md --style style-name`
## Minimal Examples
### Just change default style
```yaml
style: sketch-notes
```
### Prefer no reviews
```yaml
review: false
```
### Custom default dimensions
```yaml
style: custom
dimensions:
texture: organic
mood: professional
typography: humanist
density: minimal
```
### Define reusable custom style
```yaml
custom_styles:
brand-style:
texture: clean
mood: vibrant
typography: editorial
density: balanced
description: "Company brand style"
```
## File Locations
Priority order (first found wins):
1. `.baoyu-skills/baoyu-slide-deck/EXTEND.md` (project)
2. `$HOME/.baoyu-skills/baoyu-slide-deck/EXTEND.md` (user)
## First-Time Setup
When no EXTEND.md exists, the skill prompts for initial preferences:
1. Preferred style (preset or custom)
2. Default audience
3. Language preference
4. Review preference
5. Save location (project or user)
Creates EXTEND.md at chosen location.
@@ -0,0 +1,208 @@
# Design Guidelines
Detailed design principles for slide decks.
## Audience Guidelines
Design decisions adapt to target audience. Use `--audience` to set.
| Audience | Content Density | Visual Style | Terminology | Slides |
|----------|-----------------|--------------|-------------|--------|
| `beginners` | Low | Friendly, illustrative | Plain language | 8-15 |
| `intermediate` | Medium | Balanced, structured | Some jargon OK | 10-20 |
| `experts` | High | Data-rich, precise | Technical terms | 12-25 |
| `executives` | Low-Medium | Clean, impactful | Business language | 8-12 |
| `general` | Medium | Accessible, engaging | Minimal jargon | 10-18 |
### Audience → Density Mapping
Recommended density dimension based on audience:
| Audience | Recommended Density | Rationale |
|----------|-------------------|-----------|
| `executives` | minimal | One insight per slide, respect time |
| `beginners` | minimal → balanced | Single concepts, build understanding |
| `general` | balanced | Accessible but informative |
| `intermediate` | balanced | Standard information density |
| `experts` | balanced → dense | Can handle more data per slide |
**Automatic Density Selection**:
- If `--audience executives` → default to `minimal` density
- If `--audience beginners` → default to `minimal` or `balanced`
- If `--audience experts` → allow `dense` density
- Otherwise → default to `balanced`
### Audience-Specific Principles
**Beginners**:
- One concept per slide
- Visual metaphors over abstract diagrams
- Step-by-step progression
- Generous whitespace
**Experts**:
- Multiple data points per slide acceptable
- Technical diagrams with precise labels
- Assume domain knowledge
- Dense but organized information
**Executives**:
- Lead with insights, not data
- "So what?" on every slide
- Decision-enabling content
- Bottom-line upfront (BLUF)
## Visual Hierarchy Principles
| Principle | Description |
|-----------|-------------|
| Focal Point | ONE dominant element per slide draws attention first |
| Rule of Thirds | Position key elements at grid intersections |
| Z-Pattern | Guide eye: top-left → top-right → bottom-left → bottom-right |
| Size Contrast | Headlines 2-3x larger than body text |
| Breathing Room | Minimum 10% margin from all edges |
## Content Density
See `references/dimensions/density.md` for full density dimension specs.
| Level | Description | Use When |
|-------|-------------|----------|
| High | Multiple data points, detailed charts, dense text | Expert audience, technical reviews |
| Medium | Key points with supporting details | General business, mixed audiences |
| Low | One main idea, large visuals, minimal text | Beginners, keynotes, emotional impact |
**High-Density Principles** (McKinsey-style):
- Every element earns its space
- Data speaks louder than decoration
- Annotations explain insights, not describe data
- White space is strategic, not filler
**Density by Slide Type**:
| Slide Type | Recommended Density |
|------------|-------------------|
| Cover/Title | minimal |
| Agenda/Overview | balanced |
| Content/Analysis | balanced or dense |
| Data/Metrics | dense |
| Quote/Impact | minimal |
| Summary/Takeaway | balanced |
## Color Selection
See `references/dimensions/mood.md` for full mood dimension specs.
**Content-First Approach**:
1. Analyze content topic, mood, and industry
2. Consider target audience expectations
3. Match palette to subject matter
4. Ensure strong contrast for readability
**Quick Palette Guide**:
| Content Type | Recommended Mood |
|--------------|-----------------|
| Technical/Architecture | cool |
| Educational/Friendly | warm |
| Corporate/Professional | professional |
| Creative/Artistic | vibrant |
| Scientific/Medical | cool or neutral |
| Entertainment/Gaming | dark or vibrant |
## Typography Principles
See `references/dimensions/typography.md` for full typography dimension specs.
| Element | Treatment |
|---------|-----------|
| Headlines | Bold, 2-3x body size, narrative style |
| Body Text | Regular weight, readable size |
| Captions | Smaller, lighter weight |
| Data Labels | Monospace for technical content |
| Emphasis | Use bold or color, not underlines |
## Font Recommendations
**English Fonts**:
| Font | Style | Best For |
|------|-------|----------|
| Liter | Sans-serif, geometric | Modern, clean, technical |
| HedvigLettersSans | Sans-serif, distinctive | Brand-forward, creative |
| Oranienbaum | High-contrast serif | Elegant, classical |
| SortsMillGoudy | Classical serif | Traditional, readable |
| Coda | Round sans-serif | Friendly, approachable |
**Chinese Fonts**:
| Font | Style | Best For |
|------|-------|----------|
| MiSans | Modern sans-serif | Clean, versatile, screen-optimized |
| Noto Sans SC | Neutral sans-serif | Standard, multilingual |
| siyuanSongti | Refined Song typeface | Elegant, editorial |
| alimamashuheiti | Geometric sans-serif | Commercial, structured |
| LXGW Bright | Song-Kai hybrid | Warm, readable |
**Multilingual Pairing**:
| Use Case | English | Chinese |
|----------|---------|---------|
| Technical | Liter | MiSans |
| Editorial | Oranienbaum | siyuanSongti |
| Friendly | Coda | LXGW Bright |
| Corporate | HedvigLettersSans | alimamashuheiti |
## Visual Elements Reference
See `references/dimensions/texture.md` for full texture dimension specs.
### Background Treatments
| Treatment | Description | Best For |
|-----------|-------------|----------|
| Solid color | Single background color | Clean, minimal |
| Split background | Two colors, diagonal or vertical | Contrast, sections |
| Gradient | Subtle vertical or diagonal fade | Modern, dynamic |
| Textured | Pattern or texture overlay | Character, style |
### Typography Treatments
| Treatment | Description | Best For |
|-----------|-------------|----------|
| Size contrast | 3-4x difference headline vs body | Impact, hierarchy |
| All-caps headers | Uppercase with letter spacing | Authority, structure |
| Monospace data | Fixed-width for numbers/code | Technical, precision |
| Hand-drawn | Organic, imperfect letterforms | Friendly, approachable |
### Geometric Accents
| Element | Description | Best For |
|---------|-------------|----------|
| Diagonal dividers | Angled section separators | Energy, movement |
| Corner brackets | L-shaped frames | Focus, framing |
| Circles/hexagons | Shape frames for images | Modern, tech |
| Underline accents | Thick lines under headers | Emphasis, hierarchy |
## Consistency Requirements
| Element | Guideline |
|---------|-----------|
| Spacing | Consistent margins and padding throughout |
| Colors | Maximum 3-4 colors per slide, palette consistent across deck |
| Typography | Same font families and sizes for same content types |
| Visual Language | Repeat patterns, shapes, and treatments |
## Dimension Combination Guide
When combining dimensions, consider compatibility:
| Audience | Recommended Dimensions |
|----------|----------------------|
| Executives | clean + neutral + geometric + minimal |
| Beginners | organic + warm + humanist + minimal |
| General | any texture + any mood + humanist/geometric + balanced |
| Experts | grid/clean + cool + technical + balanced/dense |
| Content Type | Recommended Dimensions |
|--------------|----------------------|
| Tutorial | organic + warm + handwritten + balanced |
| Technical | grid + cool + technical + balanced |
| Business | clean + professional + geometric + balanced |
| Creative | organic + vibrant + humanist + balanced |
| Data-heavy | clean + cool + technical + dense |
@@ -0,0 +1,118 @@
# Density Dimension
Information density per slide.
## Options
| Option | Content/Slide | Whitespace | Best For |
|--------|---------------|------------|----------|
| `minimal` | One focus point | Maximum | Executive briefings, keynotes, emotional impact |
| `balanced` | 2-3 key points | Standard | General presentations, mixed audiences |
| `dense` | Multiple data points | Compact | Data-heavy, technical reviews, detailed analysis |
## Rendering Guidelines
### minimal
- ONE main idea per slide
- Large visuals dominate
- Minimal text (headline + 1-2 lines max)
- Generous margins (15%+ from edges)
- Maximum breathing room between elements
- Let single element carry full weight
**Principles**:
- "One slide, one message"
- Visual > text
- Empty space is intentional
- Every element must earn its space
### balanced
- 2-3 key points per slide
- Standard margins (10% from edges)
- Balanced text/visual ratio
- Clear hierarchy with supporting details
- Comfortable reading experience
**Principles**:
- Primary point + supporting context
- Visuals complement text
- Structured but not crowded
- Good for diverse audiences
### dense
- Multiple data points acceptable
- Compact margins (5-8% from edges)
- Information-rich layouts
- Charts, tables, detailed annotations
- Assume engaged, attentive audience
**Principles**:
- Data speaks louder than decoration
- Annotations explain insights
- White space is strategic
- Every pixel serves a purpose
## Audience → Density Mapping
| Audience | Recommended Density |
|----------|-------------------|
| Executives | minimal |
| Beginners | minimal to balanced |
| General | balanced |
| Intermediate | balanced |
| Experts | balanced to dense |
## Slide Type → Density Guidelines
| Slide Type | Recommended Density |
|------------|-------------------|
| Cover/Title | minimal |
| Section break | minimal |
| Quote/Impact | minimal |
| Agenda/Overview | balanced |
| Content/Analysis | balanced or dense |
| Summary/Takeaway | balanced |
| Data/Metrics | dense |
## Content Guidelines Per Density
### minimal
| Element | Guideline |
|---------|-----------|
| Headlines | Large (40-60pt equivalent) |
| Body text | Minimal or none |
| Bullet points | 0-2 max |
| Visual elements | 1 dominant element |
| Charts/Data | 1 key stat only |
### balanced
| Element | Guideline |
|---------|-----------|
| Headlines | Medium-large (32-48pt equivalent) |
| Body text | 2-4 lines |
| Bullet points | 2-4 |
| Visual elements | 1-2 elements |
| Charts/Data | Simple charts OK |
### dense
| Element | Guideline |
|---------|-----------|
| Headlines | Medium (24-36pt equivalent) |
| Body text | Multiple paragraphs OK |
| Bullet points | 4-6+ |
| Visual elements | Multiple allowed |
| Charts/Data | Complex charts, tables OK |
## Combination Notes
| Density | Works Best With | Avoid With |
|---------|-----------------|------------|
| minimal | neutral mood, geometric typography | dense data content |
| balanced | any mood/typography | extremes (too sparse or too packed) |
| dense | cool mood, technical typography | handwritten typography, organic texture |
@@ -0,0 +1,135 @@
# Mood Dimension
Color temperature and palette style.
## Options
| Option | Color Temperature | Palette Style | Best For |
|--------|-------------------|---------------|----------|
| `professional` | Cool-neutral | Navy, gold, structured grays | Business, investor, corporate |
| `warm` | Warm | Earth tones, oranges, natural colors | Education, friendly, approachable |
| `cool` | Cool | Blues, grays, cyan, teal | Technical, data, analytical |
| `vibrant` | Varied | High saturation, bold colors | Marketing, creative, attention-grabbing |
| `dark` | Dark | Deep backgrounds with bright accents | Entertainment, gaming, atmospheric |
| `neutral` | Neutral | Minimal color, grayscale focus | Executive, minimal, sophisticated |
## Palette Specifications
### professional
```
Background: #FFFFFF (Pure White)
Primary Text: #1E3A5F (Navy)
Secondary Text: #4A5568 (Dark Gray)
Accent 1: #C9A227 (Gold)
Accent 2: #3D5A80 (Light Navy)
```
### warm
```
Background: #FAF8F0 (Warm Off-White)
Primary Text: #2C3E50 (Deep Charcoal)
Secondary Text: #4A4A4A (Deep Brown)
Accent 1: #F4A261 (Soft Orange)
Accent 2: #E9C46A (Mustard Yellow)
Accent 3: #87A96B (Sage Green)
```
### cool
```
Background: #FAF8F5 (Blueprint Off-White)
Primary Text: #334155 (Deep Slate)
Secondary Text: #64748B (Slate Gray)
Accent 1: #2563EB (Engineering Blue)
Accent 2: #1E3A5F (Navy Blue)
Accent 3: #BFDBFE (Light Blue)
```
### vibrant
```
Background: #FFFFFF or #1A1A2E (Light or Dark)
Primary Text: #1A1A2E or #FFFFFF
Accent 1: #E94560 (Coral Red)
Accent 2: #0F3460 (Deep Blue)
Accent 3: #16C79A (Teal Green)
Accent 4: #F9B208 (Golden Yellow)
```
### dark
```
Background: #0D1117 (Deep Black)
Primary Text: #E6EDF3 (Soft White)
Secondary Text: #8B949E (Muted Gray)
Accent 1: #58A6FF (Bright Blue)
Accent 2: #7EE787 (Bright Green)
Accent 3: #FF7B72 (Coral)
```
### neutral
```
Background: #FFFFFF (Pure White)
Primary Text: #18181B (Near Black)
Secondary Text: #71717A (Medium Gray)
Accent 1: #18181B (Black)
Accent 2: #A1A1AA (Light Gray)
```
## Rendering Guidelines
### professional
- Restrained use of accent colors
- Gold for emphasis only
- Clean, institutional feel
- Balanced contrast
### warm
- Generous use of warm tones
- Natural, approachable colors
- Soft transitions between colors
- Welcoming atmosphere
### cool
- Blue-dominant palette
- Technical precision in color use
- High contrast for clarity
- Analytical, trustworthy feel
### vibrant
- Bold color combinations
- High saturation throughout
- Dynamic color contrasts
- Energetic visual presence
### dark
- Deep backgrounds dominate
- Accent colors pop against dark
- Glowing/luminous effects
- Cinematic atmosphere
### neutral
- Minimal color usage
- Typography carries weight
- Grayscale hierarchy
- Maximum sophistication
## Combination Notes
| Mood | Works Best With | Avoid With |
|------|-----------------|------------|
| professional | clean texture, geometric typography | organic texture, handwritten |
| warm | organic texture, humanist typography | pixel texture, minimal density |
| cool | grid texture, technical typography | paper texture, handwritten |
| vibrant | pixel/organic texture, editorial typography | neutral mood overlaps |
| dark | clean/pixel texture, technical typography | paper texture |
| neutral | clean texture, geometric typography | organic texture, vibrant elements |
@@ -0,0 +1,126 @@
# Preset → Dimension Mapping
Maps 16 preset styles to their dimension combinations.
## Mapping Table
| Preset | Texture | Mood | Typography | Density |
|--------|---------|------|------------|---------|
| blueprint | grid | cool | technical | balanced |
| chalkboard | organic | warm | handwritten | balanced |
| corporate | clean | professional | geometric | balanced |
| minimal | clean | neutral | geometric | minimal |
| sketch-notes | organic | warm | handwritten | balanced |
| watercolor | organic | warm | humanist | minimal |
| dark-atmospheric | clean | dark | editorial | balanced |
| notion | clean | neutral | geometric | dense |
| bold-editorial | clean | vibrant | editorial | balanced |
| editorial-infographic | clean | cool | editorial | dense |
| fantasy-animation | organic | vibrant | handwritten | minimal |
| intuition-machine | clean | cool | technical | dense |
| pixel-art | pixel | vibrant | technical | balanced |
| scientific | clean | cool | technical | dense |
| vector-illustration | clean | vibrant | humanist | balanced |
| vintage | paper | warm | editorial | balanced |
## Preset Details
### blueprint
- **Dimensions**: grid + cool + technical + balanced
- **Feel**: Engineering precision, analytical clarity
- **Auto-select**: architecture, system, data, analysis, technical
### chalkboard
- **Dimensions**: organic + warm + handwritten + balanced
- **Feel**: Classroom warmth, educational
- **Auto-select**: classroom, teaching, school, chalkboard
### corporate
- **Dimensions**: clean + professional + geometric + balanced
- **Feel**: Business credibility, institutional trust
- **Auto-select**: investor, quarterly, business, corporate
### minimal
- **Dimensions**: clean + neutral + geometric + minimal
- **Feel**: Maximum sophistication, executive focus
- **Auto-select**: executive, minimal, clean, simple
### sketch-notes
- **Dimensions**: organic + warm + handwritten + balanced
- **Feel**: Friendly learning, approachable education
- **Auto-select**: tutorial, learn, education, guide, beginner
### watercolor
- **Dimensions**: organic + warm + humanist + minimal
- **Feel**: Artistic, natural, lifestyle
- **Auto-select**: lifestyle, wellness, travel, artistic
### dark-atmospheric
- **Dimensions**: clean + dark + editorial + balanced
- **Feel**: Cinematic, entertainment
- **Auto-select**: entertainment, music, gaming, atmospheric
### notion
- **Dimensions**: clean + neutral + geometric + dense
- **Feel**: SaaS professional, data-forward
- **Auto-select**: saas, product, dashboard, metrics
### bold-editorial
- **Dimensions**: clean + vibrant + editorial + balanced
- **Feel**: Magazine impact, keynote drama
- **Auto-select**: launch, marketing, keynote, magazine
### editorial-infographic
- **Dimensions**: clean + cool + editorial + dense
- **Feel**: Publication quality, informative
- **Auto-select**: explainer, journalism, science communication
### fantasy-animation
- **Dimensions**: organic + vibrant + handwritten + minimal
- **Feel**: Magical, storytelling
- **Auto-select**: story, fantasy, animation, magical
### intuition-machine
- **Dimensions**: clean + cool + technical + dense
- **Feel**: Technical briefing, bilingual documentation
- **Auto-select**: briefing, academic, research, bilingual
### pixel-art
- **Dimensions**: pixel + vibrant + technical + balanced
- **Feel**: Retro gaming, developer culture
- **Auto-select**: gaming, retro, pixel, developer
### scientific
- **Dimensions**: clean + cool + technical + dense
- **Feel**: Academic precision, research quality
- **Auto-select**: biology, chemistry, medical, scientific
### vector-illustration
- **Dimensions**: clean + vibrant + humanist + balanced
- **Feel**: Flat design, friendly creative
- **Auto-select**: creative, children, kids, cute
### vintage
- **Dimensions**: paper + warm + editorial + balanced
- **Feel**: Historical, heritage storytelling
- **Auto-select**: history, heritage, vintage, expedition
## Building Custom Combinations
When user selects "Custom dimensions", combine any:
- **Texture** (5): clean, grid, organic, pixel, paper
- **Mood** (6): professional, warm, cool, vibrant, dark, neutral
- **Typography** (5): geometric, humanist, handwritten, editorial, technical
- **Density** (3): minimal, balanced, dense
Total possible combinations: 5 × 6 × 5 × 3 = **450 unique styles**
## Recommended Combinations (Beyond Presets)
| Custom Name | Texture | Mood | Typography | Density | Use Case |
|-------------|---------|------|------------|---------|----------|
| tech-minimal | clean | neutral | technical | minimal | Developer keynotes |
| warm-editorial | paper | warm | editorial | balanced | Heritage brands |
| dark-technical | grid | dark | technical | dense | Security, DevOps |
| playful-clean | clean | vibrant | humanist | balanced | Startups, apps |
@@ -0,0 +1,60 @@
# Texture Dimension
Visual texture and background treatment.
## Options
| Option | Background | Visual Elements | Best For |
|--------|------------|-----------------|----------|
| `clean` | Pure solid color, no texture | Clean lines, geometric shapes | Executive, minimal, corporate |
| `grid` | Subtle grid overlay | Grid lines, schematics, technical diagrams | Technical, architecture, engineering |
| `organic` | Soft textures, hand-drawn feel | Brush strokes, watercolor, sketchy lines | Creative, educational, friendly |
| `pixel` | Chunky pixels, 8-bit aesthetic | Pixel art, retro game elements | Gaming, developer, nostalgic |
| `paper` | Aged/textured paper | Vintage elements, stamps, weathering | Historical, heritage, storytelling |
## Rendering Guidelines
### clean
- Solid background colors with no visible texture
- Crisp, sharp edges on all elements
- Digital precision and clarity
- Maximum contrast for readability
### grid
- Light grid overlay (5-10% opacity)
- Engineering paper or blueprint feel
- Alignment guides visible but subtle
- Technical drawing aesthetic
### organic
- Paper grain or canvas texture
- Imperfect edges, natural variations
- Hand-painted color fills
- Casual, approachable feel
### pixel
- Visible pixel grid (chunky, not fine)
- 8-bit color palette aesthetic
- Aliased edges (no smoothing)
- Retro game UI elements
### paper
- Aged paper texture (subtle creases, discoloration)
- Vintage printing artifacts
- Sepia or warm tones
- Historical document feel
## Combination Notes
| Texture | Works Best With | Avoid With |
|---------|-----------------|------------|
| clean | professional, neutral moods | handwritten typography |
| grid | cool, professional moods | handwritten, vibrant moods |
| organic | warm, vibrant moods | technical typography |
| pixel | vibrant, dark moods | editorial typography |
| paper | warm moods | geometric typography, minimal density |
@@ -0,0 +1,97 @@
# Typography Dimension
Headline and body text styling.
## Options
| Option | Headline Style | Body Style | Best For |
|--------|----------------|------------|----------|
| `geometric` | Modern sans-serif, clean angles | Clean sans-serif | Corporate, tech, modern |
| `humanist` | Friendly sans-serif, warm curves | Readable sans-serif | Education, general audiences |
| `handwritten` | Marker/brush, organic feel | Casual script or print | Creative, sketch, friendly |
| `editorial` | Bold serif/sans mix, magazine style | Classic serif | Keynote, magazine, premium |
| `technical` | Monospace accents, precise | Clean sans-serif | Developer, data, engineering |
## Rendering Guidelines
### geometric
**Headlines**: Modern geometric sans-serif with clean angles and consistent stroke width. Think Futura, Avenir, or Proxima Nova. Bold to semi-bold weight. Perfect circles in O, G characters.
**Body**: Clean sans-serif optimized for readability. Regular weight. Consistent x-height. Sufficient letter spacing.
**Characteristics**:
- Mathematical precision in letterforms
- Consistent stroke widths
- Perfect geometry in curves
- Modern, authoritative presence
### humanist
**Headlines**: Friendly sans-serif with subtle stroke variations. Think Frutiger, Open Sans, or Myriad. Medium to semi-bold weight. Warm, approachable letterforms.
**Body**: Readable humanist sans-serif. Comfortable line height. Slight calligraphic influence.
**Characteristics**:
- Warm, approachable feel
- Subtle stroke contrast
- Open counters for readability
- Natural, human touch
### handwritten
**Headlines**: Bold hand-written marker or brush lettering. Thick strokes with organic edges. Slightly uneven baseline. Render as actual hand-drawn letters.
**Body**: Clear handwritten style mimicking notes. Casual but legible. Natural variation in letter forms.
**Characteristics**:
- Organic, imperfect letterforms
- Visible brush/pen character
- Casual, personal feel
- NOT computer fonts - actual drawn letters
### editorial
**Headlines**: Bold serif or high-contrast sans-serif. Magazine cover style. Dramatic scale contrast. Think Playfair Display, Didot, or bold condensed sans.
**Body**: Classic serif for extended reading. Elegant, refined letterforms. Traditional publishing quality.
**Characteristics**:
- High contrast (thick/thin strokes)
- Dramatic headlines
- Sophisticated presence
- Premium, publication quality
### technical
**Headlines**: Clean sans-serif with monospace accents for data/code. Precise, engineered appearance. Think SF Mono for code, Inter for headers.
**Body**: Clean sans-serif optimized for technical content. Fixed-width for numbers and code.
**Characteristics**:
- Monospace for data elements
- Precise alignment
- Clear number distinction (0 vs O, 1 vs l)
- Engineering precision
## Font Rendering Instructions
Since image generators cannot use font names, describe visual characteristics:
| Option | Headline Description | Body Description |
|--------|---------------------|------------------|
| geometric | "bold geometric sans-serif with perfect circular O shapes" | "clean modern sans-serif" |
| humanist | "friendly rounded sans-serif with warm letterforms" | "readable humanist sans-serif" |
| handwritten | "bold hand-drawn marker lettering with organic strokes" | "casual handwritten notes style" |
| editorial | "dramatic high-contrast serif with thick-thin stroke variation" | "elegant classic serif" |
| technical | "precise sans-serif with monospace numbers" | "technical sans-serif, fixed-width for code" |
## Combination Notes
| Typography | Works Best With | Avoid With |
|------------|-----------------|------------|
| geometric | clean texture, professional/neutral mood | organic texture |
| humanist | organic/clean texture, warm mood | pixel texture |
| handwritten | organic/paper texture, warm/vibrant mood | grid texture, professional mood |
| editorial | clean texture, vibrant/professional mood | pixel texture |
| technical | grid/clean texture, cool/dark mood | paper texture, warm mood |
@@ -0,0 +1,65 @@
# Layout Gallery
Optional layout hints for individual slides. Specify in outline's `// LAYOUT` section.
## Slide-Specific Layouts
| Layout | Description | Best For |
|--------|-------------|----------|
| `title-hero` | Large centered title + subtitle | Cover slides, section breaks |
| `quote-callout` | Featured quote with attribution | Testimonials, key insights |
| `key-stat` | Single large number as focal point | Impact statistics, metrics |
| `split-screen` | Half image, half text | Feature highlights, comparisons |
| `icon-grid` | Grid of icons with labels | Features, capabilities, benefits |
| `two-columns` | Content in balanced columns | Paired information, dual points |
| `three-columns` | Content in three columns | Triple comparisons, categories |
| `image-caption` | Full-bleed image + text overlay | Visual storytelling, emotional |
| `agenda` | Numbered list with highlights | Session overview, roadmap |
| `bullet-list` | Structured bullet points | Simple content, lists |
## Infographic-Derived Layouts
| Layout | Description | Best For |
|--------|-------------|----------|
| `linear-progression` | Sequential flow left-to-right | Timelines, step-by-step |
| `binary-comparison` | Side-by-side A vs B | Before/after, pros-cons |
| `comparison-matrix` | Multi-factor grid | Feature comparisons |
| `hierarchical-layers` | Pyramid or stacked levels | Priority, importance |
| `hub-spoke` | Central node with radiating items | Concept maps, ecosystems |
| `bento-grid` | Varied-size tiles | Overview, summary |
| `funnel` | Narrowing stages | Conversion, filtering |
| `dashboard` | Metrics with charts/numbers | KPIs, data display |
| `venn-diagram` | Overlapping circles | Relationships, intersections |
| `circular-flow` | Continuous cycle | Recurring processes |
| `winding-roadmap` | Curved path with milestones | Journey, timeline |
| `tree-branching` | Parent-child hierarchy | Org charts, taxonomies |
| `iceberg` | Visible vs hidden layers | Surface vs depth |
| `bridge` | Gap with connection | Problem-solution |
**Usage**: Add `Layout: <name>` in slide's `// LAYOUT` section.
## Layout Selection Tips
**Match Layout to Content**:
| Content Type | Recommended Layouts |
|--------------|-------------------|
| Single narrative | `bullet-list`, `image-caption` |
| Two concepts | `split-screen`, `binary-comparison` |
| Three items | `three-columns`, `icon-grid` |
| Process/Steps | `linear-progression`, `winding-roadmap` |
| Data/Metrics | `dashboard`, `key-stat` |
| Relationships | `hub-spoke`, `venn-diagram` |
| Hierarchy | `hierarchical-layers`, `tree-branching` |
**Layout Flow Patterns**:
| Position | Recommended Layouts |
|----------|-------------------|
| Opening | `title-hero`, `agenda` |
| Middle | Content-specific layouts |
| Closing | `quote-callout`, `key-stat` |
**Common Mistakes to Avoid**:
- Using 3-column layout for 2 items (leaves columns empty)
- Stacking charts/tables below text (use side-by-side instead)
- Image layouts without actual images
- Quote layouts for emphasis (use only for real quotes with attribution)
@@ -8,7 +8,8 @@ Standard structure for slide deck outlines with style instructions.
# Slide Deck Outline # Slide Deck Outline
**Topic**: [topic description] **Topic**: [topic description]
**Style**: [selected style] **Style**: [preset name OR "custom"]
**Dimensions**: [texture] + [mood] + [typography] + [density]
**Audience**: [target audience] **Audience**: [target audience]
**Language**: [output language] **Language**: [output language]
**Slide Count**: N slides **Slide Count**: N slides
@@ -17,15 +18,15 @@ Standard structure for slide deck outlines with style instructions.
--- ---
<STYLE_INSTRUCTIONS> <STYLE_INSTRUCTIONS>
Design Aesthetic: [2-3 sentence description from style file] Design Aesthetic: [2-3 sentence description combining dimension characteristics]
Background: Background:
Color: [Name] ([Hex]) Texture: [from texture dimension]
Texture: [description] Base Color: [from mood dimension palette]
Typography: Typography:
Primary Font: [detailed description for image generation] Headlines: [from typography dimension - describe visual appearance]
Secondary Font: [detailed description for image generation] Body: [from typography dimension - describe visual appearance]
Color Palette: Color Palette:
Primary Text: [Name] ([Hex]) - [usage] Primary Text: [Name] ([Hex]) - [usage]
@@ -34,13 +35,17 @@ Color Palette:
Accent 2: [Name] ([Hex]) - [usage] Accent 2: [Name] ([Hex]) - [usage]
Visual Elements: Visual Elements:
- [element 1 with rendering guidance] - [element 1 from texture + mood combination]
- [element 2 with rendering guidance] - [element 2 with rendering guidance]
- ... - ...
Density Guidelines:
- Content per slide: [from density dimension]
- Whitespace: [from density dimension]
Style Rules: Style Rules:
Do: [guidelines from style file] Do: [guidelines from dimension combinations]
Don't: [anti-patterns from style file] Don't: [anti-patterns from dimension combinations]
</STYLE_INSTRUCTIONS> </STYLE_INSTRUCTIONS>
--- ---
@@ -48,6 +53,88 @@ Style Rules:
[Slide entries follow...] [Slide entries follow...]
``` ```
## Building STYLE_INSTRUCTIONS from Dimensions
When using custom dimensions or presets, build STYLE_INSTRUCTIONS by combining:
### 1. Design Aesthetic
Combine characteristics from all four dimensions into 2-3 sentences:
| Texture | Contribution |
|---------|--------------|
| clean | "Clean, digital precision with crisp edges" |
| grid | "Technical grid overlay with engineering precision" |
| organic | "Hand-drawn feel with soft textures" |
| pixel | "Chunky pixel aesthetic with 8-bit charm" |
| paper | "Aged paper texture with vintage character" |
| Mood | Contribution |
|------|--------------|
| professional | "Professional navy and gold palette" |
| warm | "Warm earth tones creating approachable atmosphere" |
| cool | "Cool analytical blues and grays" |
| vibrant | "Bold, high-saturation colors with energy" |
| dark | "Deep cinematic backgrounds with glowing accents" |
| neutral | "Minimal grayscale sophistication" |
### 2. Background
From `references/dimensions/texture.md`:
- Texture description
- Base color from mood palette
### 3. Typography
From `references/dimensions/typography.md`:
- Headline visual description (NOT font names)
- Body text visual description (NOT font names)
**Important**: Describe appearance for image generation: "bold geometric sans-serif with perfect circular O shapes" NOT "Inter font".
### 4. Color Palette
From `references/dimensions/mood.md`:
- Copy the palette specifications for the selected mood
- Include hex codes and usage notes
### 5. Visual Elements
Combine texture and mood characteristics:
| Combination | Visual Elements |
|-------------|-----------------|
| clean + professional | Clean charts, outlined icons, structured grids |
| grid + cool | Technical schematics, dimension lines, blueprints |
| organic + warm | Hand-drawn icons, brush strokes, doodles |
| pixel + vibrant | Pixel art icons, retro game elements |
| paper + warm | Vintage stamps, aged elements, sepia overlays |
### 6. Density Guidelines
From `references/dimensions/density.md`:
- Content per slide limits
- Whitespace requirements
- Element count guidelines
### 7. Style Rules
Combine dimension-specific rules:
**Do rules by texture**:
- clean: Maintain sharp edges, use grid alignment
- grid: Show precise measurements, use technical diagrams
- organic: Allow imperfection, layer with subtle overlaps
- pixel: Keep aliased edges, use chunky elements
- paper: Add subtle aging effects, use warm tones
**Don't rules by texture**:
- clean: Don't use hand-drawn elements
- grid: Don't use organic curves
- organic: Don't use perfect geometry
- pixel: Don't smooth edges
- paper: Don't use bright digital colors
## Cover Slide Template ## Cover Slide Template
```markdown ```markdown
@@ -123,18 +210,33 @@ Layout: [optional: layout name from gallery]
## STYLE_INSTRUCTIONS Block ## STYLE_INSTRUCTIONS Block
The `<STYLE_INSTRUCTIONS>` block contains all style-specific guidance for image generation: The `<STYLE_INSTRUCTIONS>` block is the SINGLE SOURCE OF TRUTH for style information in this outline.
| Section | Content | | Section | Content | Source |
|---------|---------| |---------|---------|--------|
| Design Aesthetic | Overall visual direction from style file | | Design Aesthetic | Overall visual direction | Combined from all dimensions |
| Background | Base color and texture details | | Background | Base color and texture details | texture + mood dimensions |
| Typography | Font descriptions for Gemini (no font names, describe appearance) | | Typography | Font descriptions (visual, not names) | typography dimension |
| Color Palette | Named colors with hex codes and usage guidance | | Color Palette | Named colors with hex codes and usage | mood dimension |
| Visual Elements | Specific graphic elements with rendering instructions | | Visual Elements | Graphic elements with rendering instructions | texture + mood dimensions |
| Style Rules | Do/Don't guidelines from style file | | Density Guidelines | Content limits and whitespace | density dimension |
| Style Rules | Do/Don't guidelines | Combined from dimensions |
**Important**: Typography descriptions must describe the visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names. **Important**:
- Typography descriptions must describe visual appearance (e.g., "rounded sans-serif", "bold geometric") since image generators cannot use font names
- Prompts should extract STYLE_INSTRUCTIONS from this outline, NOT re-read style files
## Preset → Dimensions Reference
When using a preset, look up dimensions in `references/dimensions/presets.md`:
| Preset | Dimensions |
|--------|------------|
| blueprint | grid + cool + technical + balanced |
| sketch-notes | organic + warm + handwritten + balanced |
| corporate | clean + professional + geometric + balanced |
| minimal | clean + neutral + geometric + minimal |
| ... | See presets.md for full mapping |
## Section Dividers ## Section Dividers
+59 -34
View File
@@ -164,11 +164,11 @@ Copy and track progress:
``` ```
XHS Infographic Progress: XHS Infographic Progress:
- [ ] Step 0: Check preferences (EXTEND.md) - [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content → analysis.md - [ ] Step 1: Analyze content → analysis.md
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED - [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
- [ ] Step 3: Generate 3 outline + style variants - [ ] Step 3: Generate 3 outline + style variants
- [ ] Step 4: Confirmation 2 - Outline & style selection ⚠️ REQUIRED - [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
- [ ] Step 5: Generate images (sequential) - [ ] Step 5: Generate images (sequential)
- [ ] Step 6: Completion report - [ ] Step 6: Completion report
``` ```
@@ -176,33 +176,48 @@ XHS Infographic Progress:
### Flow ### Flow
``` ```
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style] → Generate → Complete Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
``` ```
### Step 0: Check Preferences ### Step 0: Load Preferences (EXTEND.md) ⚠️
**Check paths** (priority order): **Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
**If preferences found**: Use Bash to check EXTEND.md existence (priority order):
1. Parse YAML frontmatter
2. Display current preferences summary:
```
Loaded preferences from [path]:
- Watermark: [enabled/disabled] "[content]" at [position]
- Style: [name] - [description]
- Layout: [layout]
- Language: [lang]
```
3. Continue to Step 1
**If NO preferences found**: ```bash
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`) # Check project-level first
2. Create EXTEND.md with user choices test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
3. Continue to Step 1
Schema reference: `references/config/preferences-schema.md` # Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
```
┌────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-xhs-images/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md │ User home │
└────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display summary → Continue to Step 1 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**First-Time Setup** (when EXTEND.md not found):
**Language**: Use user's input language or saved language preference.
Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
### Step 1: Analyze Content → `analysis.md` ### Step 1: Analyze Content → `analysis.md`
@@ -262,6 +277,11 @@ strategy: a # a, b, or c
name: Story-Driven name: Story-Driven
style: warm # recommended style for this strategy style: warm # recommended style for this strategy
style_reason: "Warm tones enhance emotional storytelling and personal connection" style_reason: "Warm tones enhance emotional storytelling and personal connection"
elements: # from style preset, can be customized in Step 4
background: solid-pastel
decorations: [clouds, stars-sparkles]
emphasis: star-burst
typography: highlight
layout: balanced # primary layout layout: balanced # primary layout
image_count: 5 image_count: 5
--- ---
@@ -289,15 +309,15 @@ image_count: 5
Reference: `references/workflows/outline-template.md` Reference: `references/workflows/outline-template.md`
### Step 4: Confirmation 2 - Outline & Style Selection ⚠️ ### Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️
**Purpose**: User chooses outline strategy AND confirms visual style. **Do NOT skip.** **Purpose**: User chooses outline strategy, confirms visual style, and customizes elements. **Do NOT skip.**
**Display each strategy**: **Display each strategy**:
- Strategy name + page count + recommended style - Strategy name + page count + recommended style
- Page-by-page summary (P1 → P2 → P3...) - Page-by-page summary (P1 → P2 → P3...)
**Use AskUserQuestion** with two questions: **Use AskUserQuestion** with three questions:
**Question 1: Outline Strategy** **Question 1: Outline Strategy**
- Strategy A (Recommended if "authentic sharing") - Strategy A (Recommended if "authentic sharing")
@@ -310,11 +330,22 @@ Reference: `references/workflows/outline-template.md`
- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard - Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
- Or type custom style description - Or type custom style description
**Question 3: Visual Elements** (show after style selection)
Display the selected style's default elements from preset, then ask:
- Use style defaults (Recommended) - show preview: background, decorations, emphasis
- Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
- Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
- Type custom element preferences
**After response**: **After response**:
- Single strategy → copy to `outline.md` with confirmed style - Single strategy → copy to `outline.md` with confirmed style
- Combination → merge specified pages with confirmed style - Combination → merge specified pages with confirmed style
- Custom request → regenerate based on feedback - Custom request → regenerate based on feedback
- Update `outline.md` frontmatter with final style choice - Style defaults → use preset's Element Combination as-is
- Background adjustment → update elements.background with user choice
- Decorations adjustment → update elements.decorations with user choice
- Custom elements → parse user's preferences into elements fields
- Update `outline.md` frontmatter with final style and elements
### Step 5: Generate Images ### Step 5: Generate Images
@@ -428,10 +459,4 @@ Detailed templates in `references/` directory:
## Extension Support ## Extension Support
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults. Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
**Check paths** (priority): `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project) → `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
**Supports**: Watermark | Preferred style/layout | Custom style definitions
**References**: `config/preferences-schema.md` | `config/first-time-setup.md`
@@ -31,7 +31,7 @@ No EXTEND.md found
## Questions ## Questions
**Language**: Use user's input language or preferred language for all questions. Do not always use English. **Language**: Use user's input language or saved language preference.
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option): Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):