mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-11 05:31:33 +00:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jim Liu 宝玉
|
f454257b5c | ||
|
Jim Liu 宝玉
|
b1cbd1d527 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.17.0"
|
||||
"version": "1.18.0"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -2,6 +2,28 @@
|
||||
|
||||
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
|
||||
|
||||
### Features
|
||||
|
||||
@@ -2,6 +2,28 @@
|
||||
|
||||
[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
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -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 --audience executives
|
||||
|
||||
# Target slide count
|
||||
/baoyu-slide-deck path/to/article.md --slides 15
|
||||
|
||||
# Outline only (no image generation)
|
||||
/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
|
||||
```
|
||||
|
||||
**Styles** (visual aesthetics):
|
||||
**Options**:
|
||||
|
||||
| Style | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `blueprint` (default) | Technical schematics, grid texture, engineering precision | Architecture, system design |
|
||||
| `notion` | SaaS dashboard aesthetic, card-based layouts, clean data focus | Product demos, SaaS, B2B |
|
||||
| `bold-editorial` | High-impact magazine style, bold typography, dark backgrounds | Product launches, keynotes |
|
||||
| `corporate` | Navy/gold palette, structured layouts, professional icons | Investor decks, proposals |
|
||||
| `dark-atmospheric` | Cinematic dark mode, glowing accents, atmospheric depth | Entertainment, gaming, creative |
|
||||
| `editorial-infographic` | Magazine-style explainers, flat illustrations | Tech explainers, research |
|
||||
| `fantasy-animation` | Whimsical Ghibli/Disney style, hand-drawn animation | Educational, storytelling |
|
||||
| `intuition-machine` | Technical briefing, bilingual labels, aged paper texture | Technical docs, bilingual |
|
||||
| `minimal` | Ultra-clean, maximum whitespace, single accent color | Executive briefings, premium |
|
||||
| `pixel-art` | Retro 8-bit aesthetic, chunky pixels, nostalgic gaming | Gaming, developer talks |
|
||||
| `scientific` | Academic diagrams, biological pathways, precise labeling | Biology, chemistry, medical |
|
||||
| `sketch-notes` | Hand-drawn feel, soft brush strokes, warm background | Educational, tutorials |
|
||||
| `vector-illustration` | Flat vector, black outlines, retro soft colors | Creative proposals, explainers |
|
||||
| `vintage` | Aged-paper aesthetic, historical document styling | Historical, heritage, biography |
|
||||
| `watercolor` | Soft hand-painted textures, natural warmth | Lifestyle, wellness, travel |
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--style <name>` | Visual style: preset name or `custom` |
|
||||
| `--audience <type>` | Target: beginners, intermediate, experts, executives, general |
|
||||
| `--lang <code>` | Output language (en, zh, ja, etc.) |
|
||||
| `--slides <number>` | Target slide count (8-25 recommended, max 30) |
|
||||
| `--outline-only` | Generate outline only, skip images |
|
||||
| `--prompts-only` | Generate outline + prompts, skip images |
|
||||
| `--images-only` | Generate images from existing prompts |
|
||||
| `--regenerate <N>` | Regenerate specific slide(s): `3` or `2,5,8` |
|
||||
|
||||
**Style System**:
|
||||
|
||||
Styles are built from 4 dimensions: **Texture** × **Mood** × **Typography** × **Density**
|
||||
|
||||
| Dimension | Options |
|
||||
|-----------|---------|
|
||||
| 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**:
|
||||
|
||||
@@ -341,7 +369,7 @@ Generate professional slide deck images from content. Creates comprehensive outl
|
||||
|  | | |
|
||||
| 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
|
||||
|
||||
|
||||
+47
-19
@@ -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 --audience executives
|
||||
|
||||
# 指定页数
|
||||
/baoyu-slide-deck path/to/article.md --slides 15
|
||||
|
||||
# 仅生成大纲（不生成图片）
|
||||
/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
|
||||
```
|
||||
|
||||
**风格**（视觉美学）：
|
||||
**选项**：
|
||||
|
||||
| 风格 | 描述 | 适用场景 |
|
||||
|------|------|----------|
|
||||
| `blueprint`（默认） | 技术蓝图风格，网格纹理，工程精度 | 架构设计、系统设计 |
|
||||
| `notion` | SaaS 仪表盘美学，卡片式布局，数据清晰 | 产品演示、SaaS、B2B |
|
||||
| `bold-editorial` | 杂志社论风格，粗体排版，深色背景 | 产品发布、主题演讲 |
|
||||
| `corporate` | 海军蓝/金色配色，结构化布局，专业图标 | 投资者演示、客户提案 |
|
||||
| `dark-atmospheric` | 电影级暗色调，发光效果，氛围感 | 娱乐、游戏、创意 |
|
||||
| `editorial-infographic` | 杂志风格信息图，扁平插画 | 科技解说、研究报告 |
|
||||
| `fantasy-animation` | 吉卜力/迪士尼风格，手绘动画 | 教育、故事讲述 |
|
||||
| `intuition-machine` | 技术简报，双语标签，做旧纸张纹理 | 技术文档、双语内容 |
|
||||
| `minimal` | 极简风格，大量留白，单一强调色 | 高管简报、高端品牌 |
|
||||
| `pixel-art` | 复古 8-bit 像素风，怀旧游戏感 | 游戏、开发者分享 |
|
||||
| `scientific` | 学术图表，生物通路，精确标注 | 生物、化学、医学 |
|
||||
| `sketch-notes` | 手绘风格，柔和笔触，暖白色背景 | 教育、教程、知识分享 |
|
||||
| `vector-illustration` | 扁平矢量风格，黑色轮廓线，复古柔和配色 | 创意提案、说明性内容 |
|
||||
| `vintage` | 做旧纸张美学，历史文档风格 | 历史、传记、人文 |
|
||||
| `watercolor` | 柔和手绘水彩纹理，自然温暖 | 生活方式、健康、旅行 |
|
||||
| 选项 | 说明 |
|
||||
|------|------|
|
||||
| `--style <name>` | 视觉风格：预设名称或 `custom` |
|
||||
| `--audience <type>` | 目标受众：beginners、intermediate、experts、executives、general |
|
||||
| `--lang <code>` | 输出语言（en、zh、ja 等） |
|
||||
| `--slides <number>` | 目标页数（推荐 8-25，最多 30） |
|
||||
| `--outline-only` | 仅生成大纲，跳过图片 |
|
||||
| `--prompts-only` | 生成大纲 + 提示词，跳过图片 |
|
||||
| `--images-only` | 从现有提示词生成图片 |
|
||||
| `--regenerate <N>` | 重新生成指定页：`3` 或 `2,5,8` |
|
||||
|
||||
**风格系统**：
|
||||
|
||||
风格由 4 个维度组合而成：**纹理** × **氛围** × **字体** × **密度**
|
||||
|
||||
| 维度 | 选项 |
|
||||
|------|------|
|
||||
| 纹理 | 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 | | |
|
||||
|
||||
生成完成后，所有幻灯片会自动合并为 `.pptx` 文件，方便分享。
|
||||
生成完成后，所有幻灯片会自动合并为 `.pptx` 和 `.pdf` 文件，方便分享。
|
||||
|
||||
#### baoyu-comic
|
||||
|
||||
|
||||
+133
-405
@@ -1,74 +1,47 @@
|
||||
---
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
```bash
|
||||
# Auto-recommend combinations based on content
|
||||
/baoyu-infographic path/to/content.md
|
||||
|
||||
# Specify layout
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers
|
||||
|
||||
# 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]
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
|
||||
/baoyu-infographic path/to/content.md --aspect portrait --lang zh
|
||||
/baoyu-infographic # then paste content
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--layout <name>` | Information layout (20 options, see Layout Gallery) |
|
||||
| `--style <name>` | Visual style (17 options, default: craft-handmade) |
|
||||
| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang <code>` | Output language (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.
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--layout` | 20 options (see Layout Gallery), default: bento-grid |
|
||||
| `--style` | 17 options (see Style Gallery), default: craft-handmade |
|
||||
| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang` | en, zh, ja, etc. |
|
||||
|
||||
## Layout Gallery
|
||||
|
||||
| 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 |
|
||||
| `comparison-matrix` | Multi-factor comparisons |
|
||||
| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
|
||||
| `hierarchical-layers` | Pyramids, priority levels |
|
||||
| `tree-branching` | Categories, taxonomies |
|
||||
| `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) |
|
||||
| `iceberg` | Surface vs hidden aspects |
|
||||
| `bridge` | Problem-solution, gap-crossing |
|
||||
| `funnel` | Conversion processes, filtering |
|
||||
| `isometric-map` | Spatial relationships, locations |
|
||||
| `dashboard` | Metrics, KPIs, data display |
|
||||
| `bridge` | Problem-solution |
|
||||
| `funnel` | Conversion, filtering |
|
||||
| `isometric-map` | Spatial relationships |
|
||||
| `dashboard` | Metrics, KPIs |
|
||||
| `periodic-table` | Categorized collections |
|
||||
| `comic-strip` | Narratives, sequences |
|
||||
| `story-mountain` | Plot structure, tension arcs |
|
||||
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
|
||||
| `winding-roadmap` | Journey, milestones |
|
||||
| `circular-flow` | Cycles, recurring processes |
|
||||
|
||||
Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
Full definitions: `references/layouts/<layout>.md`
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description |
|
||||
|-------|-------------|
|
||||
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
|
||||
| `claymation` | 3D clay figures, playful stop-motion |
|
||||
| `kawaii` | Japanese cute, big eyes, pastel colors |
|
||||
| `storybook-watercolor` | Soft painted illustrations, whimsical |
|
||||
| `chalkboard` | Colorful chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow on dark, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone dots, high contrast |
|
||||
| `aged-academia` | Vintage science, sepia sketches |
|
||||
| `corporate-memphis` | Flat vector people, vibrant fills |
|
||||
| `technical-schematic` | Blueprint, isometric 3D, engineering |
|
||||
| `origami` | Folded paper forms, geometric |
|
||||
| `pixel-art` | Retro 8-bit, nostalgic gaming |
|
||||
| `ui-wireframe` | Grayscale boxes, interface mockup |
|
||||
| `subway-map` | Transit diagram, colored lines |
|
||||
| `ikea-manual` | Minimal line art, assembly style |
|
||||
| `knolling` | Organized flat-lay, top-down |
|
||||
| `lego-brick` | Toy brick construction, playful |
|
||||
| `craft-handmade` | Hand-drawn, paper craft (default) |
|
||||
| `claymation` | 3D clay figures, stop-motion |
|
||||
| `kawaii` | Japanese cute, pastels |
|
||||
| `storybook-watercolor` | Soft painted, whimsical |
|
||||
| `chalkboard` | Chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone |
|
||||
| `aged-academia` | Vintage science, sepia |
|
||||
| `corporate-memphis` | Flat vector, vibrant |
|
||||
| `technical-schematic` | Blueprint, engineering |
|
||||
| `origami` | Folded paper, geometric |
|
||||
| `pixel-art` | Retro 8-bit |
|
||||
| `ui-wireframe` | Grayscale interface mockup |
|
||||
| `subway-map` | Transit diagram |
|
||||
| `ikea-manual` | Minimal line art |
|
||||
| `knolling` | Organized flat-lay |
|
||||
| `lego-brick` | Toy brick construction |
|
||||
|
||||
Detailed style definitions: `references/styles/<style>.md`
|
||||
Full definitions: `references/styles/<style>.md`
|
||||
|
||||
## Recommended Combinations
|
||||
|
||||
Based on content analysis, the system recommends 3-5 layout×style combinations:
|
||||
|
||||
| Content Type | Recommended Combination |
|
||||
|--------------|------------------------|
|
||||
| Content Type | Layout + Style |
|
||||
|--------------|----------------|
|
||||
| Timeline/History | `linear-progression` + `craft-handmade` |
|
||||
| Step-by-step Process | `linear-progression` + `ikea-manual` |
|
||||
| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` |
|
||||
| Relationships/Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion/Sales | `funnel` + `corporate-memphis` |
|
||||
| Recurring Process | `circular-flow` + `craft-handmade` |
|
||||
| Technical/System | `structural-breakdown` + `technical-schematic` |
|
||||
| Data/Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational/Overview | `bento-grid` + `chalkboard` |
|
||||
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories/Types | `periodic-table` + `bold-graphic` |
|
||||
| Step-by-step | `linear-progression` + `ikea-manual` |
|
||||
| A vs B | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy | `hierarchical-layers` + `craft-handmade` |
|
||||
| Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion | `funnel` + `corporate-memphis` |
|
||||
| Cycles | `circular-flow` + `craft-handmade` |
|
||||
| Technical | `structural-breakdown` + `technical-schematic` |
|
||||
| Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational | `bento-grid` + `chalkboard` |
|
||||
| Journey | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories | `periodic-table` + `bold-graphic` |
|
||||
|
||||
**Default combination**: `bento-grid` + `craft-handmade`
|
||||
Default: `bento-grid` + `craft-handmade`
|
||||
|
||||
## File Structure
|
||||
|
||||
Each session creates an independent directory:
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
infographic/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files
|
||||
├── analysis.md # Deep content analysis
|
||||
├── structured-content.md # Instructional content structure
|
||||
├── prompts/
|
||||
│ └── infographic.md # Generated prompt
|
||||
└── infographic.png # Output image
|
||||
├── source-{slug}.{ext}
|
||||
├── analysis.md
|
||||
├── structured-content.md
|
||||
├── prompts/infographic.md
|
||||
└── infographic.png
|
||||
```
|
||||
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "Machine Learning Basics" → `ml-basics`
|
||||
Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
|
||||
|
||||
**Conflict Resolution**:
|
||||
If `infographic/{topic-slug}/` already exists:
|
||||
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
|
||||
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
|
||||
## Core Principles
|
||||
|
||||
## Instructional Design Approach
|
||||
|
||||
This skill applies a **world-class instructional designer** mindset to infographic creation:
|
||||
|
||||
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
|
||||
- Preserve all source data **verbatim**—no summarization or rephrasing
|
||||
- Define learning objectives before structuring content
|
||||
- Structure for visual communication (headlines, labels, visual elements)
|
||||
|
||||
## 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**:
|
||||
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
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
2. **Deep reading**:
|
||||
- Read the entire document thoroughly
|
||||
- Develop deep understanding before proceeding
|
||||
- Identify the core message and purpose
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
|
||||
|
||||
3. **Content analysis**:
|
||||
| Aspect | Questions to Answer |
|
||||
|--------|---------------------|
|
||||
| **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]
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ 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`
|
||||
|
||||
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**:
|
||||
- Title that captures the essence
|
||||
- List all main learning objectives
|
||||
- Identify the logical flow
|
||||
See `references/structured-content-template.md` for detailed format.
|
||||
|
||||
2. **Flesh out each section**:
|
||||
- For each learning objective, create a section
|
||||
- Mix conceptual explanations with practical elements
|
||||
- Preserve all source data **verbatim**—do not summarize or rephrase
|
||||
### Step 3: Recommend Combinations
|
||||
|
||||
3. **Structure for visual communication**:
|
||||
- Identify what becomes a headline
|
||||
- Identify what becomes supporting text
|
||||
- Identify what becomes a visual element
|
||||
- Identify data points, statistics, or quotes
|
||||
|
||||
**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]
|
||||
```
|
||||
Recommend 3-5 layout×style combinations based on:
|
||||
- Data structure → matching layout
|
||||
- Content tone → matching style
|
||||
- Audience expectations
|
||||
- User design instructions
|
||||
|
||||
### Step 4: Confirm Options
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion.
|
||||
|
||||
**Questions to ask**:
|
||||
|
||||
| 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
|
||||
Present all options in single confirmation:
|
||||
1. **Combination** (always): 3+ options with rationale
|
||||
2. **Aspect** (always): landscape/portrait/square
|
||||
3. **Language** (only if source ≠ user language): which language for text
|
||||
|
||||
### Step 5: Generate Prompt → `prompts/infographic.md`
|
||||
|
||||
Create the image generation prompt.
|
||||
|
||||
**Process**:
|
||||
1. Read layout definition from `references/layouts/<layout>.md`
|
||||
2. Read style definition from `references/styles/<style>.md`
|
||||
3. Read base prompt template from `references/base-prompt.md`
|
||||
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]
|
||||
```
|
||||
Combine:
|
||||
1. Layout definition from `references/layouts/<layout>.md`
|
||||
2. Style definition from `references/styles/<style>.md`
|
||||
3. Base template from `references/base-prompt.md`
|
||||
4. Structured content from Step 2
|
||||
5. All text in confirmed language
|
||||
|
||||
### Step 6: Generate Image
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
2. If multiple skills available, ask user to choose
|
||||
|
||||
**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
|
||||
1. Select available image generation skill (ask user if multiple)
|
||||
2. Call with prompt file and output path
|
||||
3. On failure, auto-retry once
|
||||
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
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
|
||||
Report: topic, layout, style, aspect, language, output path, files created.
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - Instructional design analysis methodology
|
||||
- `structured-content-template.md` - Structured content format and examples
|
||||
- `base-prompt.md` - Base prompt template for image generation
|
||||
- `layouts/<layout>.md` - Detailed layout definitions (20 files)
|
||||
- `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**
|
||||
- `references/analysis-framework.md` - Analysis methodology
|
||||
- `references/structured-content-template.md` - Content format
|
||||
- `references/base-prompt.md` - Prompt template
|
||||
- `references/layouts/<layout>.md` - 20 layout definitions
|
||||
- `references/styles/<style>.md` - 17 style definitions
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom styles and configurations via EXTEND.md.
|
||||
|
||||
**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.
|
||||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||
|
||||
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly overviews (default)
|
||||
- `craft-handmade`: Friendly overviews (default)
|
||||
- `corporate-memphis`: Business summaries
|
||||
- `pixel-art`: Retro feature grids
|
||||
|
||||
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
|
||||
- Organic, slightly imperfect shapes
|
||||
- Layered depth with shadows (paper variant)
|
||||
- Simple cartoon elements and icons
|
||||
- Character illustrations (people, personalities in cartoon form)
|
||||
- Ample whitespace, clean composition
|
||||
- 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
|
||||
|
||||
|
||||
+549
-376
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
|
||||
|
||||
[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
|
||||
|
||||
**Topic**: [topic description]
|
||||
**Style**: [selected style]
|
||||
**Style**: [preset name OR "custom"]
|
||||
**Dimensions**: [texture] + [mood] + [typography] + [density]
|
||||
**Audience**: [target audience]
|
||||
**Language**: [output language]
|
||||
**Slide Count**: N slides
|
||||
@@ -17,15 +18,15 @@ Standard structure for slide deck outlines with style instructions.
|
||||
---
|
||||
|
||||
<STYLE_INSTRUCTIONS>
|
||||
Design Aesthetic: [2-3 sentence description from style file]
|
||||
Design Aesthetic: [2-3 sentence description combining dimension characteristics]
|
||||
|
||||
Background:
|
||||
Color: [Name] ([Hex])
|
||||
Texture: [description]
|
||||
Texture: [from texture dimension]
|
||||
Base Color: [from mood dimension palette]
|
||||
|
||||
Typography:
|
||||
Primary Font: [detailed description for image generation]
|
||||
Secondary Font: [detailed description for image generation]
|
||||
Headlines: [from typography dimension - describe visual appearance]
|
||||
Body: [from typography dimension - describe visual appearance]
|
||||
|
||||
Color Palette:
|
||||
Primary Text: [Name] ([Hex]) - [usage]
|
||||
@@ -34,13 +35,17 @@ Color Palette:
|
||||
Accent 2: [Name] ([Hex]) - [usage]
|
||||
|
||||
Visual Elements:
|
||||
- [element 1 with rendering guidance]
|
||||
- [element 1 from texture + mood combination]
|
||||
- [element 2 with rendering guidance]
|
||||
- ...
|
||||
|
||||
Density Guidelines:
|
||||
- Content per slide: [from density dimension]
|
||||
- Whitespace: [from density dimension]
|
||||
|
||||
Style Rules:
|
||||
Do: [guidelines from style file]
|
||||
Don't: [anti-patterns from style file]
|
||||
Do: [guidelines from dimension combinations]
|
||||
Don't: [anti-patterns from dimension combinations]
|
||||
</STYLE_INSTRUCTIONS>
|
||||
|
||||
---
|
||||
@@ -48,6 +53,88 @@ Style Rules:
|
||||
[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
|
||||
|
||||
```markdown
|
||||
@@ -123,18 +210,33 @@ Layout: [optional: layout name from gallery]
|
||||
|
||||
## 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 |
|
||||
|---------|---------|
|
||||
| Design Aesthetic | Overall visual direction from style file |
|
||||
| Background | Base color and texture details |
|
||||
| Typography | Font descriptions for Gemini (no font names, describe appearance) |
|
||||
| Color Palette | Named colors with hex codes and usage guidance |
|
||||
| Visual Elements | Specific graphic elements with rendering instructions |
|
||||
| Style Rules | Do/Don't guidelines from style file |
|
||||
| Section | Content | Source |
|
||||
|---------|---------|--------|
|
||||
| Design Aesthetic | Overall visual direction | Combined from all dimensions |
|
||||
| Background | Base color and texture details | texture + mood dimensions |
|
||||
| Typography | Font descriptions (visual, not names) | typography dimension |
|
||||
| Color Palette | Named colors with hex codes and usage | mood dimension |
|
||||
| Visual Elements | Graphic elements with rendering instructions | texture + mood dimensions |
|
||||
| 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
|
||||
|
||||
|
||||
@@ -164,11 +164,11 @@ Copy and track 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 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
|
||||
- [ ] 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 6: Completion report
|
||||
```
|
||||
@@ -176,33 +176,48 @@ XHS Infographic Progress:
|
||||
### 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):
|
||||
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
|
||||
|
||||
**If preferences found**:
|
||||
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
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
**If NO preferences found**:
|
||||
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`)
|
||||
2. Create EXTEND.md with user choices
|
||||
3. Continue to Step 1
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
|
||||
|
||||
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`
|
||||
|
||||
@@ -262,6 +277,11 @@ strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
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
|
||||
image_count: 5
|
||||
---
|
||||
@@ -289,15 +309,15 @@ image_count: 5
|
||||
|
||||
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**:
|
||||
- Strategy name + page count + recommended style
|
||||
- Page-by-page summary (P1 → P2 → P3...)
|
||||
|
||||
**Use AskUserQuestion** with two questions:
|
||||
**Use AskUserQuestion** with three questions:
|
||||
|
||||
**Question 1: Outline Strategy**
|
||||
- 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 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**:
|
||||
- Single strategy → copy to `outline.md` with confirmed style
|
||||
- Combination → merge specified pages with confirmed style
|
||||
- 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
|
||||
|
||||
@@ -428,10 +459,4 @@ Detailed templates in `references/` directory:
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults.
|
||||
|
||||
**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`
|
||||
Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
|
||||
|
||||
@@ -31,7 +31,7 @@ No EXTEND.md found
|
||||
|
||||
## 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):
|
||||
|
||||
|
||||
Reference in New Issue
Block a user