Compare commits

...

6 Commits

Author SHA1 Message Date
Jim Liu 宝玉 07af3c4c21 chore: release v1.18.3 2026-01-23 21:08:11 -06:00
Jim Liu 宝玉 7842e4d188 chore: release v1.18.2 2026-01-23 16:10:04 -06:00
Jim Liu 宝玉 fcd49cd5ea chore: release v1.18.1 2026-01-23 14:59:23 -06:00
Jim Liu 宝玉 f454257b5c chore: release v1.18.0 2026-01-23 14:32:21 -06:00
Jim Liu 宝玉 b1cbd1d527 chore: release v1.17.1 2026-01-23 12:23:13 -06:00
Jim Liu 宝玉 7500a3b106 chore: release v1.17.0 2026-01-23 12:19:26 -06:00
36 changed files with 3452 additions and 1964 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
},
"metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.16.0"
"version": "1.18.3"
},
"plugins": [
{
+3
View File
@@ -149,3 +149,6 @@ xhs-images/
url-to-markdown/
cover-image/
slide-deck/
infographic/
illustrations/
comic/
+55
View File
@@ -2,6 +2,61 @@
English | [中文](./CHANGELOG.zh.md)
## 1.18.3 - 2026-01-23
### Documentation
- `baoyu-comic`: improves character reference handling with explicit Strategy A/B selection—Strategy A uses `--ref` parameter for skills that support it, Strategy B embeds character descriptions in prompts for skills that don't. Includes concrete code examples for both approaches.
### Fixes
- `baoyu-image-gen`: removes unsupported Gemini models (`gemini-2.0-flash-exp-image-generation`, `gemini-2.5-flash-preview-native-audio-dialog`) from multimodal model list.
## 1.18.2 - 2026-01-23
### Refactor
- Streamline SKILL.md documentation across 7 skills (`baoyu-compress-image`, `baoyu-danger-gemini-web`, `baoyu-danger-x-to-markdown`, `baoyu-image-gen`, `baoyu-post-to-wechat`, `baoyu-post-to-x`, `baoyu-url-to-markdown`) following official best practices—reduces total documentation by ~300 lines while preserving all functionality.
### Documentation
- `CLAUDE.md`: adds official skill authoring best practices link, skill loading rules, description writing guidelines, and progressive disclosure patterns.
## 1.18.1 - 2026-01-23
### Documentation
- `baoyu-slide-deck`: adds detailed sub-steps (1.1-1.3) to progress checklist, marks Step 1.3 as required with explicit Bash check command for existing directory detection.
## 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
- `baoyu-cover-image`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred type/style, default aspect ratio, and custom styles. New Step 0 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
### Refactor
- `baoyu-cover-image`: restructures to Type × Style two-dimension system—adds 6 types (`hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`) that control visual composition, while 20 styles control aesthetics. New `--type` and `--aspect` options, Type × Style compatibility matrix, and structured workflow with progress checklist.
### Documentation
- `baoyu-cover-image`: adds three reference documents—`references/config/preferences-schema.md` (EXTEND.md YAML schema), `references/config/first-time-setup.md` (setup flow), `references/config/watermark-guide.md` (watermark configuration).
- `README.md`, `README.zh.md`: updates baoyu-cover-image documentation to reflect new Type × Style system with `--type` and `--aspect` options.
## 1.16.0 - 2026-01-23
### Features
+55
View File
@@ -2,6 +2,61 @@
[English](./CHANGELOG.md) | 中文
## 1.18.3 - 2026-01-23
### 文档
- `baoyu-comic`:改进角色参考处理流程,新增明确的 Strategy A/B 选择逻辑——Strategy A 使用 `--ref` 参数(适用于支持该参数的技能),Strategy B 将角色描述嵌入提示词(适用于不支持的技能)。包含两种方法的具体代码示例。
### 修复
- `baoyu-image-gen`:从多模态模型列表中移除不支持的 Gemini 模型(`gemini-2.0-flash-exp-image-generation``gemini-2.5-flash-preview-native-audio-dialog`)。
## 1.18.2 - 2026-01-23
### 重构
- 精简 7 个技能的 SKILL.md 文档(`baoyu-compress-image``baoyu-danger-gemini-web``baoyu-danger-x-to-markdown``baoyu-image-gen``baoyu-post-to-wechat``baoyu-post-to-x``baoyu-url-to-markdown`),遵循官方最佳实践——总文档量减少约 300 行,功能完整保留。
### 文档
- `CLAUDE.md`:新增官方技能编写最佳实践链接、技能加载规则、描述编写指南和渐进式披露模式。
## 1.18.1 - 2026-01-23
### 文档
- `baoyu-slide-deck`:进度清单新增详细子步骤(1.1-1.3),标记 Step 1.3 为必须步骤并提供明确的 Bash 检查命令用于检测已存在目录。
## 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
### 新功能
- `baoyu-cover-image`:新增用户偏好设置支持(通过 EXTEND.md 配置)——可设置水印(内容、位置、透明度)、首选类型/风格、默认宽高比和自定义风格。新增 Step 0 检查项目级(`.baoyu-skills/`)或用户级(`~/.baoyu-skills/`)偏好设置,首次使用时引导设置。
### 重构
- `baoyu-cover-image`:重构为类型 × 风格二维系统——新增 6 种类型(`hero` 主视觉、`conceptual` 概念、`typography` 文字、`metaphor` 隐喻、`scene` 场景、`minimal` 极简)控制视觉构图,20 种风格控制美学表现。新增 `--type``--aspect` 选项、类型 × 风格兼容性矩阵,以及带进度清单的结构化工作流。
### 文档
- `baoyu-cover-image`:新增三个参考文档——`references/config/preferences-schema.md`EXTEND.md YAML 配置模式)、`references/config/first-time-setup.md`(首次设置流程)、`references/config/watermark-guide.md`(水印配置指南)。
- `README.md``README.zh.md`:更新 baoyu-cover-image 文档,反映新的类型 × 风格系统及 `--type``--aspect` 选项。
## 1.16.0 - 2026-01-23
### 新功能
+127 -12
View File
@@ -78,6 +78,20 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
`.claude-plugin/marketplace.json` defines plugin metadata and skill paths. Version follows semver.
## Skill Loading Rules
**IMPORTANT**: When working in this project, follow these rules:
| Rule | Description |
|------|-------------|
| **Load project skills first** | MUST load all skills from `skills/` directory in current project. Project skills take priority over system/user-level skills with same name. |
| **Default image generation** | When image generation is needed, use `skills/baoyu-image-gen/SKILL.md` by default (unless user specifies otherwise). |
**Loading Priority** (highest → lowest):
1. Current project `skills/` directory
2. User-level skills (`$HOME/.baoyu-skills/`)
3. System-level skills
## Release Process
**IMPORTANT**: When user requests release/发布/push, ALWAYS use `/release-skills` workflow.
@@ -92,6 +106,22 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
**IMPORTANT**: All skills MUST use `baoyu-` prefix to avoid conflicts when users import this plugin.
**REQUIRED READING**: Before creating a new skill, read the official [Skill authoring best practices](https://platform.claude.com/docs/en/agents-and-tools/agent-skills/best-practices).
### Key Requirements from Official Best Practices
| Requirement | Details |
|-------------|---------|
| **Concise is key** | Claude is smart—only add context it doesn't have. Challenge each token. |
| **name field** | Max 64 chars, lowercase letters/numbers/hyphens only, no "anthropic"/"claude" |
| **description field** | Max 1024 chars, non-empty, MUST be third person, include what + when to use |
| **SKILL.md body** | Keep under 500 lines; use separate files for additional content |
| **Naming convention** | Gerund form preferred (e.g., `processing-pdfs`), but `baoyu-` prefix required here |
| **References** | Keep one level deep from SKILL.md; avoid nested references |
| **No time-sensitive info** | Avoid dates/versions that become outdated |
### Steps
1. Create `skills/baoyu-<name>/SKILL.md` with YAML front matter
- Directory name: `baoyu-<name>`
- SKILL.md `name` field: `baoyu-<name>`
@@ -119,6 +149,21 @@ npx -y bun skills/baoyu-danger-gemini-web/scripts/main.ts --promptfiles system.m
- `description`: Brief description of the category
- `skills`: Array with the skill path
### Writing Effective Descriptions
**MUST write in third person** (not "I can help you" or "You can use this"):
```yaml
# Good
description: Generates Xiaohongshu infographic series from content. Use when user asks for "小红书图片", "XHS images", or "RedNote infographics".
# Bad
description: I can help you create Xiaohongshu images
description: You can use this to generate XHS content
```
Include both **what** the skill does and **when** to use it (triggers/keywords).
### Script Directory Template
Every SKILL.md with scripts MUST include this section after Usage:
@@ -142,6 +187,26 @@ Every SKILL.md with scripts MUST include this section after Usage:
When referencing scripts in workflow sections, use `${SKILL_DIR}/scripts/<name>.ts` so agents can resolve the correct path.
### Progressive Disclosure
For skills with extensive content, use separate reference files:
```
skills/baoyu-example/
├── SKILL.md # Main instructions (<500 lines)
├── references/
│ ├── styles.md # Style definitions (loaded as needed)
│ └── examples.md # Usage examples (loaded as needed)
└── scripts/
└── main.ts # Executable script
```
In SKILL.md, link to reference files (one level deep only):
```markdown
**Available styles**: See [references/styles.md](references/styles.md)
**Examples**: See [references/examples.md](references/examples.md)
```
## Code Style
- TypeScript throughout, no comments
@@ -155,9 +220,11 @@ Skills that require image generation MUST delegate to available image generation
### Image Generation Skill Selection
1. Check available image generation skills in `skills/` directory
2. Read each skill's SKILL.md to understand parameters and capabilities
3. If multiple image generation skills available, ask user to choose preferred skill
**Default**: Use `skills/baoyu-image-gen/SKILL.md` (unless user specifies otherwise).
1. Read `skills/baoyu-image-gen/SKILL.md` for parameters and capabilities
2. If user explicitly requests a different skill, check `skills/` directory for alternatives
3. Only ask user to choose when they haven't specified and multiple viable options exist
### Generation Flow Template
@@ -298,18 +365,66 @@ READMEs use 3-column tables for style previews:
## Extension Support
Every SKILL.md MUST include an Extension Support section at the end:
Every SKILL.md MUST include two parts for extension support:
### 1. Load Preferences Section (in Step 1 or as "Preferences" section)
For skills with workflows, add as Step 1.1. For utility skills, add as "Preferences (EXTEND.md)" section before Usage:
```markdown
**1.1 Load Preferences (EXTEND.md)**
Use Bash to check EXTEND.md existence (priority order):
\`\`\`bash
# Check project-level first
test -f .baoyu-skills/<skill-name>/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/<skill-name>/EXTEND.md" && echo "user"
\`\`\`
┌────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/<skill-name>/EXTEND.md │ Project directory │
├────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/<skill-name>/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**: [List supported configuration options for this skill]
Schema: `references/config/preferences-schema.md`
```
### 2. Extension Support Section (at the end)
Simplified section that references the preferences section:
```markdown
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/<skill-name>/EXTEND.md` (project)
2. `~/.baoyu-skills/<skill-name>/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.
```
Replace `<skill-name>` with the actual skill name (e.g., `baoyu-cover-image`).
Or for utility skills without workflow steps:
```markdown
## Extension Support
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
```
**Notes**:
- Replace `<skill-name>` with actual skill name (e.g., `baoyu-cover-image`)
- Use `$HOME` instead of `~` for cross-platform compatibility (macOS/Linux/WSL)
- Use `test -f` Bash command for explicit file existence check
- ASCII tables for clear visual formatting
+56 -23
View File
@@ -245,20 +245,25 @@ Generate professional infographics with 20 layout types and 17 visual styles. An
#### baoyu-cover-image
Generate hand-drawn style cover images for articles with multiple style options.
Generate cover images for articles with Type × Style two-dimension system.
```bash
# From markdown file (auto-select style)
# Auto-select type and style based on content
/baoyu-cover-image path/to/article.md
# Specify a style
/baoyu-cover-image path/to/article.md --style tech
# Specify type and/or style
/baoyu-cover-image path/to/article.md --type conceptual --style blueprint
/baoyu-cover-image path/to/article.md --style warm
# Specify aspect ratio (default: 2.35:1)
/baoyu-cover-image path/to/article.md --aspect 16:9
# Without title text
/baoyu-cover-image path/to/article.md --no-title
```
Available types: `hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal`
Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `flat-doodle`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor`
**Style Previews**:
@@ -292,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
@@ -299,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**:
@@ -336,7 +369,7 @@ Generate professional slide deck images from content. Creates comprehensive outl
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| 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
+56 -23
View File
@@ -245,20 +245,25 @@ npx skills add jimliu/baoyu-skills
#### baoyu-cover-image
为文章生成手绘风格封面图,支持多种风格选项
为文章生成封面图,支持类型 × 风格二维系统
```bash
# 从 markdown 文件生成(自动选择风格
# 根据内容自动选择类型和风格
/baoyu-cover-image path/to/article.md
# 指定风格
/baoyu-cover-image path/to/article.md --style tech
# 指定类型和/或风格
/baoyu-cover-image path/to/article.md --type conceptual --style blueprint
/baoyu-cover-image path/to/article.md --style warm
# 指定宽高比(默认:2.35:1
/baoyu-cover-image path/to/article.md --aspect 16:9
# 不包含标题文字
/baoyu-cover-image path/to/article.md --no-title
```
可用类型:`hero``conceptual``typography``metaphor``scene``minimal`
可用风格:`elegant`(默认)、`blueprint``bold-editorial``chalkboard``dark-atmospheric``editorial-infographic``fantasy-animation``flat-doodle``intuition-machine``minimal``nature``notion``pixel-art``playful``retro``sketch-notes``vector-illustration``vintage``warm``watercolor`
**风格预览**
@@ -292,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
@@ -299,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 | 历史、传记 |
**风格预览**
@@ -336,7 +369,7 @@ npx skills add jimliu/baoyu-skills
| ![watercolor](./screenshots/slide-deck-styles/watercolor.webp) | | |
| watercolor | | |
生成完成后,所有幻灯片会自动合并为 `.pptx` 文件,方便分享。
生成完成后,所有幻灯片会自动合并为 `.pptx``.pdf` 文件,方便分享。
#### baoyu-comic
+43 -18
View File
@@ -380,9 +380,50 @@ With confirmed storyboard + art style + tone + aspect ratio:
**5.2 Generate Comic Pages**:
**CRITICAL: Character Reference is MANDATORY** for visual consistency across all pages.
**Before generating any page**:
1. Read the image generation skill's SKILL.md
2. Check if it supports reference image input (`--ref`, `--reference`, etc.)
3. Choose the appropriate strategy below
**Character Reference Strategy**:
| Skill Capability | Strategy | Action |
|------------------|----------|--------|
| Supports `--ref` | **Strategy A** | Pass `characters/characters.png` with EVERY page |
| Does NOT support `--ref` | **Strategy B** | Prepend character descriptions to EVERY prompt |
**Strategy A: Using `--ref` parameter** (e.g., baoyu-image-gen)
```bash
# Each page generation MUST include --ref
npx -y bun ${SKILL_DIR}/../baoyu-image-gen/scripts/main.ts \
--promptfiles prompts/01-page-xxx.md \
--image 01-page-xxx.png \
--ar 3:4 \
--ref characters/characters.png
```
**Strategy B: Embedding character descriptions in prompt**
When skill does NOT support reference images, create combined prompt files:
```markdown
# prompts/01-page-xxx.md (with embedded character reference)
## Character Reference (maintain consistency)
[Copy relevant sections from characters/characters.md here]
- 大雄: Japanese boy, round glasses, yellow shirt, navy shorts...
- 哆啦A梦: Round blue robot cat, white belly, red nose, golden bell...
## Page Content
[Original page prompt here]
```
**For each page (cover + pages)**:
1. Save prompt to `prompts/NN-{cover|page}-[slug].md` (in user's preferred language)
2. Generate image using confirmed art style and tone guidelines
1. Save prompt to `prompts/NN-{cover|page}-[slug].md`
2. Generate image using Strategy A or B (based on skill capability)
3. Report progress after each generation
**Watermark Application** (if enabled in preferences):
@@ -395,22 +436,6 @@ Ensure watermark does not overlap speech bubbles or key action.
```
Reference: `references/config/watermark-guide.md`
**Image Generation Skill Selection**:
- Check available image generation skills
- If multiple skills available, ask user preference
**Character Reference Handling** (IMPORTANT for visual consistency):
1. Read the selected image generation skill's SKILL.md
2. Check if it supports reference image input (look for parameters like `--ref`, `--reference`, `--image-ref`, etc.)
| Skill Support | Action |
|---------------|--------|
| **Supports reference image** | Pass `characters/characters.png` using the skill's reference parameter |
| **Does NOT support reference image** | Prepend `characters/characters.md` content to each page prompt |
Always verify the exact parameter name from the skill's documentation before calling.
**Session Management**:
If image generation skill supports `--sessionId`:
1. Generate unique session ID: `comic-{topic-slug}-{timestamp}`
+49 -148
View File
@@ -1,188 +1,89 @@
---
name: baoyu-compress-image
description: Cross-platform image compression skill. Converts images to WebP by default with PNG-to-PNG support. Uses system tools (sips, cwebp, ImageMagick) with Sharp fallback.
description: Compresses images to WebP (default) or PNG with automatic tool selection. Use when user asks to "compress image", "optimize image", "convert to webp", or reduce image file size.
---
# Image Compressor
Cross-platform image compression with WebP default output, PNG-to-PNG support, preferring system tools with Sharp fallback.
Compresses images using best available tool (sips → cwebp → ImageMagick → Sharp).
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
Scripts in `scripts/` subdirectory. Replace `${SKILL_DIR}` with this SKILL.md's directory path.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | CLI entry point for image compression |
| `scripts/main.ts` | Image compression CLI |
## Quick Start
## Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
```bash
# Compress to WebP (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# Check project-level first
test -f .baoyu-skills/baoyu-compress-image/EXTEND.md && echo "project"
# Keep original format (PNG → PNG)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --format png
# Custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
# Process directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md" && echo "user"
```
## Commands
┌────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-compress-image/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-compress-image/EXTEND.md │ User home │
└────────────────────────────────────────────────────────┴───────────────────┘
### Single File Compression
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default format | Default quality | Keep original preference
## Usage
```bash
# Basic (converts to WebP, replaces original)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# Custom output path
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -o compressed.webp
# Keep original file
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --keep
# Custom quality (0-100, default: 80)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -q 75
# Keep original format
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png
```
### Directory Processing
```bash
# Process all images in directory
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/
# Recursive processing
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r
# With custom quality
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
```
### Output Formats
```bash
# Plain text (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
npx -y bun ${SKILL_DIR}/scripts/main.ts <input> [options]
```
## Options
| Option | Short | Description | Default |
|--------|-------|-------------|---------|
| `<input>` | | Input file or directory | Required |
| `--output <path>` | `-o` | Output path | Same path, new extension |
| `--format <fmt>` | `-f` | webp, png, jpeg | webp |
| `--quality <n>` | `-q` | Quality 0-100 | 80 |
| `--keep` | `-k` | Keep original file | false |
| `--recursive` | `-r` | Process directories recursively | false |
| `<input>` | | File or directory | Required |
| `--output` | `-o` | Output path | Same path, new ext |
| `--format` | `-f` | webp, png, jpeg | webp |
| `--quality` | `-q` | Quality 0-100 | 80 |
| `--keep` | `-k` | Keep original | false |
| `--recursive` | `-r` | Process subdirs | false |
| `--json` | | JSON output | false |
| `--help` | `-h` | Show help | |
## Compressor Selection
## Examples
Priority order (auto-detected):
```bash
# Single file → WebP (replaces original)
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png
1. **sips** (macOS built-in, WebP support since macOS 11)
2. **cwebp** (Google's official WebP tool)
3. **ImageMagick** (`convert` command)
4. **Sharp** (npm package, auto-installed by Bun)
# Keep PNG format
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png -f png --keep
The skill automatically selects the best available compressor.
# Directory recursive
npx -y bun ${SKILL_DIR}/scripts/main.ts ./images/ -r -q 75
## Output Format
### Text Mode (default)
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json
```
**Output**:
```
image.png → image.webp (245KB → 89KB, 64% reduction)
```
### JSON Mode
```json
{
"input": "image.png",
"output": "image.webp",
"inputSize": 250880,
"outputSize": 91136,
"ratio": 0.36,
"compressor": "sips"
}
```
### Directory JSON Mode
```json
{
"files": [...],
"summary": {
"totalFiles": 10,
"totalInputSize": 2508800,
"totalOutputSize": 911360,
"ratio": 0.36,
"compressor": "sips"
}
}
```
## Examples
### Compress single image
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png
# photo.png → photo.webp (1.2MB → 340KB, 72% reduction)
```
### Compress with custom quality
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts photo.png -q 60
# photo.png → photo.webp (1.2MB → 280KB, 77% reduction)
```
### Keep original format
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts screenshot.png -f png --keep
# screenshot.png → screenshot-compressed.png (500KB → 380KB, 24% reduction)
```
### Process entire directory
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts ./screenshots/ -r
# Processed 15 files: 12.5MB → 4.2MB (66% reduction)
```
### Get JSON for scripting
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts image.png --json | jq '.ratio'
```
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-compress-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-compress-image/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+412 -199
View File
@@ -1,35 +1,33 @@
---
name: baoyu-cover-image
description: Generate elegant cover images for articles. Analyzes content and creates eye-catching hand-drawn style cover images with multiple style options. Use when user asks to "generate cover image", "create article cover", or "make a cover for article".
description: Generates article cover images with 20 hand-drawn styles and auto-style selection. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", "make cover", or mentions "封面图".
---
# Cover Image Generator
Generate hand-drawn style cover images for articles with multiple style options.
Generate elegant cover images for articles with multiple style options.
## Usage
```bash
# From markdown file (auto-select style based on content)
# Auto-select style and aspect based on content
/baoyu-cover-image path/to/article.md
# Specify a style
/baoyu-cover-image path/to/article.md --style blueprint
/baoyu-cover-image path/to/article.md --style warm
/baoyu-cover-image path/to/article.md --style dark-atmospheric
# Specify style
/baoyu-cover-image article.md --style blueprint
# Without title text
/baoyu-cover-image path/to/article.md --no-title
# Specify aspect ratio
/baoyu-cover-image article.md --aspect 16:9
# Combine options
/baoyu-cover-image path/to/article.md --style minimal --no-title
# Visual only (no title text)
/baoyu-cover-image article.md --no-title
# From direct text input
# Direct content input
/baoyu-cover-image
[paste content or describe the topic]
[paste content]
# Direct input with style
/baoyu-cover-image --style playful
# Direct input with options
/baoyu-cover-image --style notion --aspect 1:1
[paste content]
```
@@ -37,249 +35,464 @@ Generate hand-drawn style cover images for articles with multiple style options.
| Option | Description |
|--------|-------------|
| `--style <name>` | Specify cover style (see Style Gallery below) |
| `--aspect <ratio>` | Aspect ratio: 2.35:1 (cinematic, default), 16:9 (widescreen), 1:1 (social) |
| `--lang <code>` | Output language for title text (en, zh, ja, etc.) |
| `--no-title` | Generate cover without title text (visual only) |
| `--type <name>` | Cover type (see Type Gallery) |
| `--style <name>` | Cover style (see Style Gallery) |
| `--aspect <ratio>` | 2.35:1 (default), 16:9, 1:1 |
| `--lang <code>` | Title language (en, zh, ja, etc.) |
| `--no-title` | Visual only, no title text |
## Two Dimensions
| Dimension | Controls | Examples |
|-----------|----------|----------|
| **Type** | Visual composition, information structure | hero, conceptual, typography, metaphor, scene, minimal |
| **Style** | Visual aesthetics, colors, mood | elegant, blueprint, notion, warm, minimal, watercolor |
Type × Style can be freely combined. Example: `--type conceptual --style blueprint` creates technical concept visualization with schematic aesthetics.
## Type Gallery
| Type | Description | Best For |
|------|-------------|----------|
| `hero` | Large visual impact, title overlay | Product launch, brand promotion, major announcements |
| `conceptual` | Concept visualization, abstract core ideas | Technical articles, methodology, architecture design |
| `typography` | Text-focused layout, prominent title | Opinion pieces, quotes, insights |
| `metaphor` | Visual metaphor, concrete expressing abstract | Philosophy, growth, personal development |
| `scene` | Atmospheric scene, narrative feel | Stories, travel, lifestyle |
| `minimal` | Minimalist composition, generous whitespace | Zen, focus, core concepts |
## Auto Type Selection
When `--type` is omitted, select based on content signals:
| Signals | Type |
|---------|------|
| Product, launch, announcement, release, reveal | `hero` |
| Architecture, framework, system, API, technical, model | `conceptual` |
| Quote, opinion, insight, thought, headline, statement | `typography` |
| Philosophy, growth, abstract, meaning, reflection | `metaphor` |
| Story, journey, travel, lifestyle, experience, narrative | `scene` |
| Zen, focus, essential, core, simple, pure | `minimal` |
## Style Gallery
| Style | Description |
|-------|-------------|
| `elegant` (Default) | Refined, sophisticated, understated |
| `flat-doodle` | Bold outlines, pastel colors, cute rounded shapes |
| `blueprint` | Technical schematics, engineering precision |
| `bold-editorial` | Magazine cover impact, dramatic typography |
| `chalkboard` | Black chalkboard, colorful chalk drawings |
| `dark-atmospheric` | Cinematic dark mode, glowing accents |
| `editorial-infographic` | Magazine explainer, visual storytelling |
| `fantasy-animation` | Ghibli/Disney inspired, whimsical charm |
| `intuition-machine` | Technical briefing, bilingual labels |
| `minimal` | Ultra-clean, zen-like, focused |
| `nature` | Organic, calm, earthy |
| `notion` | Clean SaaS dashboard, productivity styling |
| `pixel-art` | Retro 8-bit, nostalgic gaming aesthetic |
| `playful` | Fun, creative, whimsical |
| `retro` | Halftone dots, vintage badges, classic |
| `sketch-notes` | Hand-drawn, educational, warm |
| `vector-illustration` | Flat vector, black outlines, retro colors |
| `vintage` | Aged paper, historical, expedition style |
| `warm` | Friendly, approachable, human-centered |
| `watercolor` | Soft hand-painted, natural warmth |
| `elegant` (default) | Refined, sophisticated |
| `blueprint` | Technical schematics |
| `bold-editorial` | Magazine impact |
| `chalkboard` | Chalk on blackboard |
| `dark-atmospheric` | Cinematic dark mode |
| `editorial-infographic` | Visual storytelling |
| `fantasy-animation` | Ghibli/Disney inspired |
| `flat-doodle` | Pastel, cute shapes |
| `intuition-machine` | Technical, bilingual |
| `minimal` | Ultra-clean, zen |
| `nature` | Organic, earthy |
| `notion` | SaaS dashboard |
| `pixel-art` | Retro 8-bit |
| `playful` | Fun, whimsical |
| `retro` | Halftone, vintage |
| `sketch-notes` | Hand-drawn, warm |
| `vector-illustration` | Flat vector |
| `vintage` | Aged, expedition |
| `warm` | Friendly, human |
| `watercolor` | Soft hand-painted |
Detailed style definitions: `references/styles/<style>.md`
Style definitions: [references/styles/](references/styles/)
## Type × Style Compatibility
| | elegant | blueprint | notion | warm | minimal | watercolor | bold-editorial | dark-atmospheric |
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| hero | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
| conceptual | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✓ | ✓ |
| typography | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
| metaphor | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
| scene | ✓ | ✗ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
| minimal | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓ |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
## Auto Style Selection
When no `--style` is specified, the system analyzes content to select the best style:
When `--style` is omitted, select based on content signals:
| Content Signals | Selected Style |
|----------------|----------------|
| Architecture, system design, engineering | `blueprint` |
| Product launch, keynote, marketing, brand | `bold-editorial` |
| Education, classroom, tutorial, teaching | `chalkboard` |
| Entertainment, creative, premium, cinematic | `dark-atmospheric` |
| Technology explainer, science, research | `editorial-infographic` |
| Storytelling, children, fantasy, magical | `fantasy-animation` |
| Technical docs, academic, bilingual | `intuition-machine` |
| Personal story, emotion, growth, life | `warm` |
| Simple, zen, focus, essential | `minimal` |
| Fun, easy, beginner, casual | `playful` |
| Nature, eco, wellness, health, organic | `nature` |
| Pop culture, 80s/90s nostalgia, badges | `retro` |
| Product, SaaS, dashboard, productivity | `notion` |
| Productivity, workflow, app, tools, cute | `flat-doodle` |
| Gaming, retro tech, developer, 8-bit | `pixel-art` |
| Educational, tutorial, knowledge sharing | `sketch-notes` |
| Creative proposals, brand, toy-like | `vector-illustration` |
| History, exploration, heritage, biography | `vintage` |
| Lifestyle, travel, food, personal | `watercolor` |
| Business, professional, strategy, analysis | `elegant` |
| Signals | Style |
|---------|-------|
| Architecture, system design | `blueprint` |
| Product launch, marketing | `bold-editorial` |
| Education, tutorial | `chalkboard` |
| Entertainment, premium | `dark-atmospheric` |
| Tech explainer, research | `editorial-infographic` |
| Fantasy, children | `fantasy-animation` |
| Technical docs, bilingual | `intuition-machine` |
| Personal story, emotion | `warm` |
| Zen, focus, essential | `minimal` |
| Fun, beginner, casual | `playful` |
| Nature, wellness, eco | `nature` |
| SaaS, dashboard | `notion` |
| Workflow, productivity | `flat-doodle` |
| Gaming, retro tech | `pixel-art` |
| Knowledge sharing | `sketch-notes` |
| Creative proposals | `vector-illustration` |
| History, exploration | `vintage` |
| Lifestyle, travel | `watercolor` |
| Business, professional | `elegant` |
## File Management
### Output Directory
## File Structure
Each session creates an independent directory named by content slug:
```
cover-image/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.)
├── prompts/
└── cover.md
└── cover.png
├── prompts/cover.md # Generation prompt
└── cover.png # Output image
```
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "The Future of AI" → `future-of-ai`
### Conflict Resolution
**Conflict Resolution**:
If `cover-image/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
### Source Files
**Source Files**:
Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-logo.png` (image from conversation)
Multiple sources supported: text, images, files from conversation.
- `source-article.md`, `source-reference.png`, etc.
- Multiple sources supported: text, images, files from conversation
## Workflow
### Progress Checklist
Copy and track progress:
```
Cover Image Progress:
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
- [ ] Step 1: Analyze content
- [ ] Step 2: Confirm options (type + style + aspect) ⚠️ REQUIRED
- [ ] Step 3: Create prompt
- [ ] Step 4: Generate image
- [ ] Step 5: Completion report
```
### Flow
```
Input → [Step 0: Preferences/Setup] → Analyze → [Confirm: Type + Style + Aspect] → Prompt → Generate → Complete
```
### Step 0: Load Preferences (EXTEND.md) ⚠️
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
Use Bash to check EXTEND.md existence (priority order):
```bash
# Check project-level first
test -f .baoyu-skills/baoyu-cover-image/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-cover-image/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md │ User home │
└──────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, display preferences summary (see below) → Continue to Step 1 │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**Preferences Summary** (when EXTEND.md found):
Display loaded preferences:
```
Preferences loaded from [project/user]:
• Watermark: [enabled/disabled] [content if enabled]
• Type: [preferred_type or "auto"]
• Style: [preferred_style or "auto"]
• Aspect: [default_aspect]
• Language: [language or "auto"]
```
**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:
**Q1: Watermark**
```yaml
header: "Watermark"
question: "Watermark text for generated cover images?"
options:
- label: "No watermark (Recommended)"
description: "Clean covers, can enable later in EXTEND.md"
```
**Q2: Preferred Type**
```yaml
header: "Type"
question: "Default cover type preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "hero"
description: "Large visual impact - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
```
**Q3: Preferred Style**
```yaml
header: "Style"
question: "Default cover style preference?"
options:
- label: "Auto-select (Recommended)"
description: "Choose based on content analysis each time"
- label: "elegant"
description: "Refined, sophisticated - professional business"
- label: "notion"
description: "SaaS dashboard - productivity/tech content"
```
**Q4: Default Aspect Ratio**
```yaml
header: "Aspect"
question: "Default aspect ratio for cover images?"
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
**Q5: Save Location**
```yaml
header: "Save"
question: "Where to save preferences?"
options:
- label: "Project (Recommended)"
description: ".baoyu-skills/ (this project only)"
- label: "User"
description: "~/.baoyu-skills/ (all projects)"
```
**After setup**: Create EXTEND.md with user choices, then continue to Step 1.
Full setup details: `references/config/first-time-setup.md`
**EXTEND.md Supports**: Watermark | Preferred type | Preferred style | Default aspect ratio | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
### Step 1: Analyze Content
Read source content, save it if needed, and perform analysis.
**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
2. Read source content
3. **Content analysis**:
- Extract: topic, core message, tone, keywords
- Identify visual metaphor opportunities
- Detect content type (technical/personal/business/creative)
4. **Language detection**:
- Detect source content language
- Note user's input language (from conversation)
- Compare with language preference in EXTEND.md
2. **Extract key information**:
- **Main topic**: What is the article about?
- **Core message**: What's the key takeaway?
- **Tone**: Serious, playful, inspiring, educational?
- **Keywords**: Identify style-signaling words
### Step 2: Confirm Options ⚠️
3. **Language detection**:
- Detect **source language** from content
- Detect **user language** from conversation context
- Note if source_language ≠ user_language (will ask in Step 3)
**Purpose**: Validate type, style and aspect ratio. **Do NOT skip.**
### Step 2: Determine Options
**Language**: Auto-determined (user's input language > saved preference > source language). No need to ask.
1. **Style selection**:
- If `--style` specified, use that style
- Otherwise, scan content for style signals and auto-select 3 candidates
- Default to `elegant` if no clear signals
Present options using AskUserQuestion:
2. **Aspect ratio**:
- If `--aspect` specified, use that ratio
- Otherwise, prepare options: 2.35:1 (cinematic), 16:9 (widescreen), 1:1 (social)
**Question 1: Type** (if not specified via `--type`)
- Show recommended type based on content analysis + preferred type from EXTEND.md
### Step 3: Confirm Options
**Purpose**: Let user confirm all options in a single step before generation.
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
**Determine which questions to ask**:
| Question | When to Ask |
|----------|-------------|
| Style | Always (required) |
| Aspect ratio | Always (offer common options) |
| Language | Only if `source_language ≠ user_language` |
**Present options** (use AskUserQuestion with all applicable questions):
**Question 1 (Style)** - always:
- Style A (recommended): [style name] - [brief description]
- Style B: [style name] - [brief description]
- Style C: [style name] - [brief description]
- Custom: Provide custom style reference
**Question 2 (Aspect)** - always:
- 2.35:1 Cinematic (Recommended) - ultra-wide, dramatic
- 16:9 Widescreen - standard video/presentation
- 1:1 Square - social media optimized
**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 (e.g., "Title will be in Chinese")
- If different: Ask which language to use for title text
### Step 4: Generate Cover Concept
Create a cover image concept based on selected style:
**Title** (if included, max 8 characters):
- Distill the core message into a punchy headline
- Use hooks: numbers, questions, contrasts, pain points
- Skip if `--no-title` flag is used
**Visual Elements**:
- Style-appropriate imagery and icons
- 1-2 symbolic elements representing the topic
- Metaphors or analogies that fit the style
### Step 5: Create Prompt File
Save prompt to `prompts/cover.md` with confirmed options.
**All prompts are written in the user's confirmed language preference.**
**Prompt Format**:
```markdown
Cover theme: [topic in 2-3 words]
Style: [selected style name]
Aspect ratio: [confirmed aspect ratio]
[If title included:]
Title text: [8 characters or less, in confirmed language]
Subtitle: [optional, in confirmed language]
Visual composition:
- Main visual: [description matching style]
- Layout: [positioning based on title inclusion and aspect ratio]
- Decorative elements: [style-appropriate elements]
Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
Style notes: [specific style characteristics to emphasize]
[If no title:]
Note: No title text, pure visual illustration only.
```yaml
header: "Type"
question: "Which cover type?"
multiSelect: false
options:
- label: "[auto-recommended type] (Recommended)"
description: "[reason based on content signals]"
- label: "hero"
description: "Large visual impact, title overlay - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
- label: "typography"
description: "Text-focused layout - opinions, quotes"
```
### Step 6: Generate Image
**Question 2: Style** (if not specified via `--style`)
- Based on selected Type, show compatible styles (✓✓ first from compatibility matrix)
- Format: `[style name] - [why it fits this content]`
```yaml
header: "Style"
question: "Which cover style?"
multiSelect: false
options:
- label: "[best compatible style] (Recommended)"
description: "[reason based on type + content]"
- label: "[style2]"
description: "[reason]"
- label: "[style3]"
description: "[reason]"
```
**Question 3: Aspect Ratio** (if not specified via `--aspect`)
```yaml
header: "Aspect"
question: "Cover aspect ratio?"
multiSelect: false
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
**After response**: Proceed to Step 3 with confirmed type + style + aspect ratio.
### Step 3: Create Prompt
Save to `prompts/cover.md`:
```markdown
Cover theme: [2-3 words]
Type: [confirmed type]
Style: [confirmed style]
Aspect ratio: [confirmed ratio]
Title text: [max 8 chars, or "none" if --no-title]
Language: [confirmed language]
Type composition:
- [Type-specific layout and structure]
Visual composition:
- Main visual: [type + style appropriate metaphor]
- Layout: [positioning based on type and aspect ratio]
- Decorative: [style elements]
Color scheme: [primary, background, accent from style]
Type notes: [key characteristics from type definition]
Style notes: [key characteristics from style definition]
[Watermark section if enabled]
```
**Type-Specific Composition**:
| Type | Composition Guidelines |
|------|------------------------|
| `hero` | Large focal visual (60-70% area), title overlay on visual, dramatic composition |
| `conceptual` | Abstract shapes representing core concepts, information hierarchy, clean zones |
| `typography` | Title as primary element (40%+ area), minimal supporting visuals, strong hierarchy |
| `metaphor` | Concrete object/scene representing abstract idea, symbolic elements, emotional resonance |
| `scene` | Atmospheric environment, narrative elements, mood-setting lighting and colors |
| `minimal` | Single focal element, generous whitespace (60%+), essential shapes only |
**Title guidelines** (if included):
- Max 8 characters, punchy headline
- Use hooks: numbers, questions, contrasts
- Match confirmed language
**Watermark Application** (if enabled in preferences):
Add to prompt:
```
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
```
Reference: `references/config/watermark-guide.md`
### Step 4: Generate Image
**Image Generation Skill Selection**:
1. Check available image generation skills
2. If multiple skills available, ask user to choose
2. If multiple skills available, ask user preference
3. Call selected skill with:
- Prompt file path
- Output image path: `cover.png`
- Aspect ratio parameter
**Generation**:
Call selected image generation skill with prompt file, output path, and confirmed aspect ratio.
**On failure**: Auto-retry once before reporting error.
### Step 7: Output Summary
### Step 5: Completion Report
```
Cover Image Generated!
Cover Generated!
Topic: [topic]
Type: [type name]
Style: [style name]
Aspect: [aspect ratio]
Title: [cover title] (or "No title - visual only")
Language: [confirmed language]
Location: [output path]
Aspect: [ratio]
Title: [title or "visual only"]
Language: [lang]
Watermark: [enabled/disabled]
Location: [directory path]
Preview the image to verify it matches your expectations.
Files:
✓ source-{slug}.{ext}
✓ prompts/cover.md
✓ cover.png
```
## Image Modification
| Action | Steps |
|--------|-------|
| **Regenerate** | Update prompt → Regenerate with same settings |
| **Change type** | Confirm new type → Update prompt → Regenerate |
| **Change style** | Confirm new style → Update prompt → Regenerate |
| **Change aspect** | Confirm new aspect → Update prompt → Regenerate |
## Notes
- Cover should be instantly understandable at small preview sizes
- Title (if included) must be readable and impactful
- Visual metaphors work better than literal representations
- Maintain style consistency throughout the cover
- Image generation typically takes 10-30 seconds
- Title text uses user's confirmed language preference
- Aspect ratio: 2.35:1 for cinematic/dramatic, 16:9 for widescreen, 1:1 for social media
- Cover must be readable at small preview sizes
- Visual metaphors > literal representations
- Title: max 8 chars, readable, impactful
- **Two confirmation points**: Step 0 (first-time setup if no EXTEND.md) + Step 2 (options) - do NOT skip
- Use confirmed language for title text
- Maintain watermark consistency if enabled
- Check Type × Style compatibility matrix when selecting combinations
## References
**Styles**: `references/styles/<name>.md` - Style definitions
**Config**:
- `references/config/preferences-schema.md` - EXTEND.md schema
- `references/config/first-time-setup.md` - First-time setup flow
- `references/config/watermark-guide.md` - Watermark configuration
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-cover-image/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` (user)
If found, load before Step 1. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
@@ -0,0 +1,145 @@
---
name: first-time-setup
description: First-time setup flow for baoyu-cover-image preferences
---
# First-Time Setup
## Overview
When no EXTEND.md is found, guide user through preference setup.
## Setup Flow
```
No EXTEND.md found
┌─────────────────────┐
│ AskUserQuestion │
│ (all questions) │
└─────────────────────┘
┌─────────────────────┐
│ Create EXTEND.md │
└─────────────────────┘
Continue to Step 1
```
## Questions
**Language**: Use user's input language or saved language preference.
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
### Question 1: Watermark
```
header: "Watermark"
question: "Watermark text for generated cover images? Type your watermark content (e.g., name, @handle)"
options:
- label: "No watermark (Recommended)"
description: "No watermark, can enable later in EXTEND.md"
```
Position defaults to bottom-right.
### Question 2: Preferred Type
```
header: "Type"
question: "Default cover type preference?"
options:
- label: "None (Recommended)"
description: "Auto-select based on content analysis"
- label: "hero"
description: "Large visual impact - product launch, announcements"
- label: "conceptual"
description: "Concept visualization - technical, architecture"
- label: "typography"
description: "Text-focused layout - opinions, quotes"
```
### Question 3: Preferred Style
```
header: "Style"
question: "Default cover style preference? Or type another style name"
options:
- label: "None (Recommended)"
description: "Auto-select based on content analysis"
- label: "elegant"
description: "Refined, sophisticated - professional business"
- label: "blueprint"
description: "Technical schematics - architecture/system design"
- label: "notion"
description: "SaaS dashboard - productivity/tech content"
```
### Question 4: Default Aspect Ratio
```
header: "Aspect"
question: "Default aspect ratio for cover images?"
options:
- label: "2.35:1 (Recommended)"
description: "Cinematic widescreen, best for article headers"
- label: "16:9"
description: "Standard widescreen, versatile"
- label: "1:1"
description: "Square, social media friendly"
```
### Question 5: Save Location
```
header: "Save"
question: "Where to save preferences?"
options:
- label: "Project"
description: ".baoyu-skills/ (this project only)"
- label: "User"
description: "~/.baoyu-skills/ (all projects)"
```
## Save Locations
| Choice | Path | Scope |
|--------|------|-------|
| Project | `.baoyu-skills/baoyu-cover-image/EXTEND.md` | Current project |
| User | `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` | All projects |
## After Setup
1. Create directory if needed
2. Write EXTEND.md with frontmatter
3. Confirm: "Preferences saved to [path]"
4. Continue to Step 1
## EXTEND.md Template
```yaml
---
version: 1
watermark:
enabled: [true/false]
content: "[user input or empty]"
position: bottom-right
opacity: 0.7
preferred_type: [selected type or null]
preferred_style: [selected style or null]
default_aspect: [2.35:1/16:9/1:1]
language: null
custom_styles: []
---
```
## Modifying Preferences Later
Users can edit EXTEND.md directly or run setup again:
- Delete EXTEND.md to trigger setup
- Edit YAML frontmatter for quick changes
- Full schema: `config/preferences-schema.md`
@@ -0,0 +1,140 @@
---
name: preferences-schema
description: EXTEND.md YAML schema for baoyu-cover-image user preferences
---
# Preferences Schema
## Full Schema
```yaml
---
version: 1
watermark:
enabled: false
content: ""
position: bottom-right # bottom-right|bottom-left|bottom-center|top-right
opacity: 0.7 # 0.1-1.0
preferred_type: null # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select
preferred_style: null # Built-in style name or null for auto-select
default_aspect: "2.35:1" # 2.35:1|16:9|1:1
language: null # zh|en|ja|ko|auto (null = auto-detect)
custom_styles:
- name: my-style
description: "Style description"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8"]
visual_elements: "Clean lines, geometric shapes"
typography: "Modern sans-serif"
best_for: "Business, tech content"
---
```
## Field Reference
| Field | Type | Default | Description |
|-------|------|---------|-------------|
| `version` | int | 1 | Schema version |
| `watermark.enabled` | bool | false | Enable watermark |
| `watermark.content` | string | "" | Watermark text (@username or custom) |
| `watermark.position` | enum | bottom-right | Position on image |
| `watermark.opacity` | float | 0.7 | Transparency (0.1-1.0) |
| `preferred_type` | string | null | Type name or null for auto |
| `preferred_style` | string | null | Style name or null for auto |
| `default_aspect` | string | "2.35:1" | Default aspect ratio |
| `language` | string | null | Output language (null = auto-detect) |
| `custom_styles` | array | [] | User-defined styles |
## Type Options
| Value | Description |
|-------|-------------|
| `hero` | Large visual impact, title overlay |
| `conceptual` | Concept visualization, abstract core ideas |
| `typography` | Text-focused layout, prominent title |
| `metaphor` | Visual metaphor, concrete expressing abstract |
| `scene` | Atmospheric scene, narrative feel |
| `minimal` | Minimalist composition, generous whitespace |
## Position Options
| Value | Description |
|-------|-------------|
| `bottom-right` | Lower right corner (default, most common) |
| `bottom-left` | Lower left corner |
| `bottom-center` | Bottom center |
| `top-right` | Upper right corner |
## Aspect Ratio Options
| Value | Description | Best For |
|-------|-------------|----------|
| `2.35:1` | Cinematic widescreen | Article headers, blog covers |
| `16:9` | Standard widescreen | Presentations, video thumbnails |
| `1:1` | Square | Social media, profile images |
## Custom Style Fields
| Field | Required | Description |
|-------|----------|-------------|
| `name` | Yes | Unique style identifier (kebab-case) |
| `description` | Yes | What the style conveys |
| `color_palette.primary` | No | Main colors (array) |
| `color_palette.background` | No | Background color |
| `color_palette.accents` | No | Accent colors (array) |
| `visual_elements` | No | Decorative elements |
| `typography` | No | Font/lettering style |
| `best_for` | No | Recommended content types |
## Example: Minimal Preferences
```yaml
---
version: 1
watermark:
enabled: true
content: "@myhandle"
preferred_type: null
preferred_style: elegant
---
```
## Example: Full Preferences
```yaml
---
version: 1
watermark:
enabled: true
content: "myblog.com"
position: bottom-right
opacity: 0.5
preferred_type: conceptual
preferred_style: blueprint
default_aspect: "16:9"
language: en
custom_styles:
- name: corporate-tech
description: "Professional B2B tech style"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8", "#48CAE4"]
visual_elements: "Clean lines, subtle gradients, circuit patterns"
typography: "Modern sans-serif, professional"
best_for: "SaaS, enterprise, technical"
---
```
@@ -0,0 +1,81 @@
---
name: watermark-guide
description: Watermark configuration guide for baoyu-cover-image
---
# Watermark Guide
## Position Diagram
```
┌─────────────────────────────┐
│ [top-right]│
│ │
│ │
│ COVER IMAGE │
│ │
│ │
│[bottom-left][bottom-center][bottom-right]│
└─────────────────────────────┘
```
## Position Recommendations
| Position | Best For | Avoid When |
|----------|----------|------------|
| `bottom-right` | Default choice, most common | Title in bottom-right |
| `bottom-left` | Right-heavy layouts | Key visual in bottom-left |
| `bottom-center` | Centered designs | Text-heavy bottom area |
| `top-right` | Bottom-heavy content | Title/header in top-right |
## Opacity Examples
| Opacity | Visual Effect | Use Case |
|---------|---------------|----------|
| 0.3 | Very subtle, barely visible | Clean aesthetic priority |
| 0.5 | Balanced, noticeable but not distracting | Default recommendation |
| 0.7 | Clearly visible | Brand recognition priority |
| 0.9 | Strong presence | Anti-copy protection |
## Content Format
| Format | Example | Style |
|--------|---------|-------|
| Handle | `@username` | Social media |
| Domain | `myblog.com` | Cross-platform |
| Brand | `MyBrand` | Simple branding |
| Chinese | `博客名` | Chinese platforms |
## Best Practices
1. **Consistency**: Use same watermark across all covers
2. **Legibility**: Ensure watermark readable on both light/dark areas
3. **Size**: Keep subtle - should not distract from content
4. **Contrast**: Adjust opacity based on cover background
## Prompt Integration
When watermark is enabled, add to image generation prompt:
```
Include a subtle watermark "[content]" positioned at [position]
with approximately [opacity*100]% visibility. The watermark should
be legible but not distracting from the main content.
```
## Cover-Specific Considerations
| Aspect Ratio | Recommended Position | Notes |
|--------------|---------------------|-------|
| 2.35:1 | bottom-right | Cinematic - keep corners clean |
| 16:9 | bottom-right | Standard - flexible placement |
| 1:1 | bottom-center | Square - centered often works better |
## Common Issues
| Issue | Solution |
|-------|----------|
| Watermark invisible | Increase opacity or adjust position |
| Watermark too prominent | Decrease opacity (0.3-0.5) |
| Watermark overlaps title | Change position or reduce title area |
| Inconsistent appearance | Use fixed opacity/position in preferences |
+81 -226
View File
@@ -1,15 +1,11 @@
---
name: baoyu-danger-gemini-web
description: Image generation skill using Gemini Web. Generates images from text prompts via Google Gemini. Also supports text generation. Use as the image generation backend for other skills like cover-image, xhs-images, article-illustrator.
description: Generates images and text via reverse-engineered Gemini Web API. Supports text generation, image generation from prompts, reference images for vision input, and multi-turn conversations. Use when other skills need image generation backend, or when user requests "generate image with Gemini", "Gemini text generation", or needs vision-capable AI generation.
---
# Gemini Web Client
Supports:
- Text generation
- Image generation (download + save)
- Reference images for vision input (attach local images)
- Multi-turn conversations via persisted `--sessionId`
Text/image generation via Gemini Web API. Supports reference images and multi-turn conversations.
## Script Directory
@@ -26,146 +22,73 @@ Supports:
| `scripts/main.ts` | CLI entry point for text/image generation |
| `scripts/gemini-webapi/*` | TypeScript port of `gemini_webapi` (GeminiClient, types, utils) |
## ⚠️ Disclaimer (REQUIRED)
## Consent Check (REQUIRED)
**Before using this skill**, the consent check MUST be performed.
Before first use, verify user consent for reverse-engineered API usage.
### Consent Check Flow
**Consent file locations**:
- macOS: `~/Library/Application Support/baoyu-skills/gemini-web/consent.json`
- Linux: `~/.local/share/baoyu-skills/gemini-web/consent.json`
- Windows: `%APPDATA%\baoyu-skills\gemini-web\consent.json`
**Step 1**: Check consent file
```bash
# macOS
cat ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json 2>/dev/null
# Linux
cat ~/.local/share/baoyu-skills/gemini-web/consent.json 2>/dev/null
# Windows (PowerShell)
Get-Content "$env:APPDATA\baoyu-skills\gemini-web\consent.json" 2>$null
```
**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
Print warning and proceed:
```
⚠️ Warning: Using reverse-engineered Gemini Web API (not official). Accepted on: <acceptedAt date>
```
**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
Display disclaimer and ask user:
```
⚠️ DISCLAIMER
This tool uses a reverse-engineered Gemini Web API, NOT an official Google API.
Risks:
- May break without notice if Google changes their API
- No official support or guarantees
- Use at your own risk
Do you accept these terms and wish to continue?
```
Use `AskUserQuestion` tool with options:
- **Yes, I accept** - Continue and save consent
- **No, I decline** - Exit immediately
**Step 4**: On acceptance, create consent file:
```bash
# macOS
mkdir -p ~/Library/Application\ Support/baoyu-skills/gemini-web
cat > ~/Library/Application\ Support/baoyu-skills/gemini-web/consent.json << 'EOF'
{
"version": 1,
"accepted": true,
"acceptedAt": "<ISO timestamp>",
"disclaimerVersion": "1.0"
}
EOF
# Linux
mkdir -p ~/.local/share/baoyu-skills/gemini-web
cat > ~/.local/share/baoyu-skills/gemini-web/consent.json << 'EOF'
{
"version": 1,
"accepted": true,
"acceptedAt": "<ISO timestamp>",
"disclaimerVersion": "1.0"
}
EOF
```
**Step 5**: On decline, output message and stop:
```
User declined the disclaimer. Exiting.
```
**Flow**:
1. Check if consent file exists with `accepted: true` and `disclaimerVersion: "1.0"`
2. If valid consent exists → print warning with `acceptedAt` date, proceed
3. If no consent → show disclaimer, ask user via `AskUserQuestion`:
- "Yes, I accept" → create consent file with ISO timestamp, proceed
- "No, I decline" → output decline message, stop
4. Consent file format: `{"version":1,"accepted":true,"acceptedAt":"<ISO>","disclaimerVersion":"1.0"}`
---
## Quick start
## Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello, Gemini"
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Explain quantum computing"
# Check project-level first
test -f .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-danger-gemini-web/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md │ User home │
└──────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default model | Proxy settings | Custom data directory
## Usage
```bash
# Text generation
npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt"
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt" --model gemini-2.5-pro
# Image generation
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute cat" --image cat.png
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
# Multi-turn conversation (agent generates unique sessionId)
npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember this: 42" --sessionId my-unique-id-123
npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId my-unique-id-123
```
# Vision input (reference images)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this" --reference image.png
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Create variation" --reference a.png --image out.png
## Commands
### Text generation
```bash
# Simple prompt (positional)
npx -y bun ${SKILL_DIR}/scripts/main.ts "Your prompt here"
# Explicit prompt flag
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Your prompt here"
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Your prompt here"
# With model selection
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "Hello" -m gemini-2.5-pro
# Pipe from stdin
echo "Summarize this" | npx -y bun ${SKILL_DIR}/scripts/main.ts
```
### Image generation
```bash
# Generate image with default path (./generated.png)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image
# Generate image with custom path
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cute robot" --image robot.png
# Shorthand
npx -y bun ${SKILL_DIR}/scripts/main.ts "A dragon" --image=dragon.png
```
### Vision input (reference images)
```bash
# Text + image -> text
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Describe this image" --reference a.png
# Text + image -> image
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Generate a variation" --reference a.png --image out.png
```
### Output formats
```bash
# Plain text (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
# Multi-turn conversation
npx -y bun ${SKILL_DIR}/scripts/main.ts "Remember: 42" --sessionId session-abc
npx -y bun ${SKILL_DIR}/scripts/main.ts "What number?" --sessionId session-abc
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json
@@ -175,45 +98,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json
| Option | Description |
|--------|-------------|
| `--prompt <text>`, `-p` | Prompt text |
| `--promptfiles <files...>` | Read prompt from files (concatenated in order) |
| `--model <id>`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
| `--image [path]` | Generate image, save to path (default: generated.png) |
| `--reference <files...>`, `--ref <files...>` | Reference images for vision input |
| `--sessionId <id>` | Session ID for multi-turn conversation (agent generates unique ID) |
| `--list-sessions` | List saved sessions (max 100, sorted by update time) |
| `--prompt`, `-p` | Prompt text |
| `--promptfiles` | Read prompt from files (concatenated) |
| `--model`, `-m` | Model: gemini-3-pro (default), gemini-2.5-pro, gemini-2.5-flash |
| `--image [path]` | Generate image (default: generated.png) |
| `--reference`, `--ref` | Reference images for vision input |
| `--sessionId` | Session ID for multi-turn conversation |
| `--list-sessions` | List saved sessions |
| `--json` | Output as JSON |
| `--login` | Refresh cookies only, then exit |
| `--cookie-path <path>` | Custom cookie file path |
| `--profile-dir <path>` | Chrome profile directory |
| `--help`, `-h` | Show help |
CLI note: `scripts/main.ts` supports text generation, image generation, reference images (`--reference/--ref`), and multi-turn conversations via `--sessionId`.
| `--login` | Refresh cookies, then exit |
| `--cookie-path` | Custom cookie file path |
| `--profile-dir` | Chrome profile directory |
## Models
- `gemini-3-pro` - Default, latest model
- `gemini-2.5-pro` - Previous generation pro
- `gemini-2.5-flash` - Fast, lightweight
| Model | Description |
|-------|-------------|
| `gemini-3-pro` | Default, latest |
| `gemini-2.5-pro` | Previous pro |
| `gemini-2.5-flash` | Fast, lightweight |
## Authentication
First run opens a browser to authenticate with Google. Cookies are cached for subsequent runs.
First run opens browser for Google auth. Cookies cached automatically.
**Supported browsers** (auto-detected in order):
- Google Chrome
- Google Chrome Canary / Beta
- Chromium
- Microsoft Edge
Supported browsers (auto-detected): Chrome, Chrome Canary/Beta, Chromium, Edge.
Override with `GEMINI_WEB_CHROME_PATH` environment variable if needed.
Force refresh: `--login` flag. Override browser: `GEMINI_WEB_CHROME_PATH` env var.
```bash
# Force cookie refresh
npx -y bun ${SKILL_DIR}/scripts/main.ts --login
```
## Environment variables
## Environment Variables
| Variable | Description |
|----------|-------------|
@@ -221,72 +134,14 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts --login
| `GEMINI_WEB_COOKIE_PATH` | Cookie file path |
| `GEMINI_WEB_CHROME_PROFILE_DIR` | Chrome profile directory |
| `GEMINI_WEB_CHROME_PATH` | Chrome executable path |
| `HTTP_PROXY`, `HTTPS_PROXY` | Proxy for Google access (set inline with command) |
## Proxy Configuration
## Sessions
If you need a proxy to access Google services (e.g., in China), set `HTTP_PROXY` and `HTTPS_PROXY` environment variables before running:
Session files stored in data directory under `sessions/<id>.json`.
```bash
# Example with local proxy
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello"
# Image generation with proxy
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
# Cookie refresh with proxy
HTTP_PROXY=http://127.0.0.1:7890 HTTPS_PROXY=http://127.0.0.1:7890 npx -y bun ${SKILL_DIR}/scripts/main.ts --login
```
**Note**: Environment variables must be set inline with the command. Shell profile settings (e.g., `.bashrc`) may not be inherited by subprocesses.
## Examples
### Generate text response
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "What is the capital of France?"
```
### Generate image
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "A photorealistic image of a golden retriever puppy" --image puppy.png
```
### Get JSON output for parsing
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts "Hello" --json | jq '.text'
```
### Generate image from prompt files
```bash
# Concatenate system.md + content.md as prompt
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image output.png
```
### Multi-turn conversation
```bash
# Start a session with unique ID (agent generates this)
npx -y bun ${SKILL_DIR}/scripts/main.ts "You are a helpful math tutor." --sessionId task-abc123
# Continue the conversation (remembers context)
npx -y bun ${SKILL_DIR}/scripts/main.ts "What is 2+2?" --sessionId task-abc123
npx -y bun ${SKILL_DIR}/scripts/main.ts "Now multiply that by 10" --sessionId task-abc123
# List recent sessions (max 100, sorted by update time)
npx -y bun ${SKILL_DIR}/scripts/main.ts --list-sessions
```
Session files are stored in `~/Library/Application Support/baoyu-skills/gemini-web/sessions/<id>.json` and contain:
- `id`: Session ID
- `metadata`: Gemini chat metadata for continuation
- `messages`: Array of `{role, content, timestamp, error?}`
- `createdAt`, `updatedAt`: Timestamps
Contains: `id`, `metadata` (Gemini chat state), `messages` array, timestamps.
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-danger-gemini-web/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+69 -102
View File
@@ -1,119 +1,107 @@
---
name: baoyu-danger-x-to-markdown
description: Convert X (Twitter) tweet or article URL to markdown. Uses reverse-engineered X API (private). Requires user consent before use.
description: Converts X (Twitter) tweets and articles to markdown with YAML front matter. Uses reverse-engineered API requiring user consent. Use when user mentions "X to markdown", "tweet to markdown", "save tweet", or provides x.com/twitter.com URLs for conversion.
---
# X to Markdown
Converts X (Twitter) content to markdown format:
- Tweet threads → Markdown with YAML front matter
- X Articles → Full article content extraction
Converts X content to markdown:
- Tweets/threads → Markdown with YAML front matter
- X Articles → Full content extraction
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
Scripts located in `scripts/` subdirectory.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Path Resolution**:
1. `SKILL_DIR` = this SKILL.md's directory
2. Script path = `${SKILL_DIR}/scripts/main.ts`
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | CLI entry point for URL conversion |
## Consent Requirement
## ⚠️ Disclaimer (REQUIRED)
**Before any conversion**, check and obtain consent.
**Before using this skill**, the consent check MUST be performed.
### Consent Check Flow
### Consent Flow
**Step 1**: Check consent file
```bash
# macOS
cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
cat ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json
# Linux
cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json 2>/dev/null
# Windows (PowerShell)
Get-Content "$env:APPDATA\baoyu-skills\x-to-markdown\consent.json" 2>$null
cat ~/.local/share/baoyu-skills/x-to-markdown/consent.json
```
**Step 2**: If consent exists and `accepted: true` with matching `disclaimerVersion: "1.0"`:
Print warning and proceed:
**Step 2**: If `accepted: true` and `disclaimerVersion: "1.0"` → print warning and proceed:
```
⚠️ Warning: Using reverse-engineered X API (not official). Accepted on: <acceptedAt date>
Warning: Using reverse-engineered X API. Accepted on: <acceptedAt>
```
**Step 3**: If consent file doesn't exist or `disclaimerVersion` mismatch:
Display disclaimer and ask user:
**Step 3**: If missing or version mismatch → display disclaimer:
```
⚠️ DISCLAIMER
DISCLAIMER
This tool uses a reverse-engineered X (Twitter) API, NOT an official API.
This tool uses a reverse-engineered X API, NOT official.
Risks:
- May break without notice if X changes their API
- No official support or guarantees
- Account restrictions possible if API usage detected
- May break if X changes API
- No guarantees or support
- Possible account restrictions
- Use at your own risk
Do you accept these terms and wish to continue?
Accept terms and continue?
```
Use `AskUserQuestion` tool with options:
- **Yes, I accept** - Continue and save consent
- **No, I decline** - Exit immediately
Use `AskUserQuestion` with options: "Yes, I accept" | "No, I decline"
**Step 4**: On acceptance, create consent file:
**Step 4**: On accept create consent file:
```json
{
"version": 1,
"accepted": true,
"acceptedAt": "<ISO timestamp>",
"disclaimerVersion": "1.0"
}
```
**Step 5**: On decline → output "User declined. Exiting." and stop.
## Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
```bash
# macOS
mkdir -p ~/Library/Application\ Support/baoyu-skills/x-to-markdown
cat > ~/Library/Application\ Support/baoyu-skills/x-to-markdown/consent.json << 'EOF'
{
"version": 1,
"accepted": true,
"acceptedAt": "<ISO timestamp>",
"disclaimerVersion": "1.0"
}
EOF
# Check project-level first
test -f .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md && echo "project"
# Linux
mkdir -p ~/.local/share/baoyu-skills/x-to-markdown
cat > ~/.local/share/baoyu-skills/x-to-markdown/consent.json << 'EOF'
{
"version": 1,
"accepted": true,
"acceptedAt": "<ISO timestamp>",
"disclaimerVersion": "1.0"
}
EOF
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md" && echo "user"
```
**Step 5**: On decline, output message and stop:
```
User declined the disclaimer. Exiting.
```
┌────────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md │ User home │
└────────────────────────────────────────────────────────────┴───────────────────┘
---
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default output directory | Output format preferences
## Usage
```bash
# Convert tweet (outputs markdown path)
npx -y bun ${SKILL_DIR}/scripts/main.ts <url>
# Save to specific file
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
```
@@ -122,56 +110,35 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <url> --json
| Option | Description |
|--------|-------------|
| `<url>` | Tweet or article URL |
| `-o <path>` | Output path (file or dir) |
| `--json` | Output as JSON |
| `-o <path>` | Output path |
| `--json` | JSON output |
| `--login` | Refresh cookies only |
## File Structure
```
x-to-markdown/
└── {username}/
└── {tweet-id}.md
```
## Supported URLs
- `https://x.com/<user>/status/<id>`
- `https://twitter.com/<user>/status/<id>`
- `https://x.com/i/article/<id>`
## Output Format
## Output
```markdown
---
url: https://x.com/username/status/123
author: "Display Name (@username)"
url: https://x.com/user/status/123
author: "Name (@user)"
tweet_count: 3
---
Tweet content...
---
Thread continuation...
Content...
```
**File structure**: `x-to-markdown/{username}/{tweet-id}.md`
## Authentication
**Option 1**: Environment variables (recommended)
- `X_AUTH_TOKEN` - auth_token cookie
- `X_CT0` - ct0 cookie
**Option 2**: Chrome login (auto if env vars not set)
- First run opens Chrome for login
- Cookies cached locally
1. **Environment variables** (preferred): `X_AUTH_TOKEN`, `X_CT0`
2. **Chrome login** (fallback): Auto-opens Chrome, caches cookies locally
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-danger-x-to-markdown/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+67 -160
View File
@@ -1,98 +1,68 @@
---
name: baoyu-image-gen
description: AI SDK-based image generation using official OpenAI and Google APIs. Supports text-to-image, reference images, aspect ratios, and quality presets.
description: Generates images using official OpenAI and Google APIs via AI SDK. Supports text-to-image, reference images, aspect ratios, and quality presets. Use when user asks to "generate image with API", "use official API for images", "create image with OpenAI/Google", or needs API-based generation instead of browser-based.
---
# Image Generation (AI SDK)
Official API-based image generation via AI SDK. Supports OpenAI (DALL-E, GPT Image) and Google (Imagen, Gemini multimodal).
Official API-based image generation. Supports OpenAI and Google providers.
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
**Agent Execution**:
1. `SKILL_DIR` = this SKILL.md file's directory
2. Script path = `${SKILL_DIR}/scripts/main.ts`
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
## Preferences (EXTEND.md)
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/main.ts` | CLI entry point for image generation |
## Quick Start
Use Bash to check EXTEND.md existence (priority order):
```bash
# Basic generation (auto-detect provider)
# Check project-level first
test -f .baoyu-skills/baoyu-image-gen/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-image-gen/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-image-gen/EXTEND.md │ User home │
└──────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default provider | Default quality | Default aspect ratio
## Usage
```bash
# Basic
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
# With aspect ratio
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A landscape" --image landscape.png --ar 16:9
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A landscape" --image out.png --ar 16:9
# High quality (2k)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
# Specific provider
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --provider openai
# High quality
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --quality 2k
# From prompt files
npx -y bun ${SKILL_DIR}/scripts/main.ts --promptfiles system.md content.md --image out.png
# With reference images (Google multimodal only)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make blue" --image out.png --ref source.png
```
## Commands
### Basic Image Generation
```bash
# Generate with prompt
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A sunset over mountains" --image sunset.png
# Shorthand
npx -y bun ${SKILL_DIR}/scripts/main.ts -p "A cute robot" --image robot.png
```
### Aspect Ratios
```bash
# Common ratios: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A portrait" --image portrait.png --ar 3:4
# Or specify exact size
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Banner" --image banner.png --size 1792x1024
```
### Reference Images (Google Multimodal)
```bash
# Image editing with reference
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Make it blue" --image blue.png --ref original.png
# Multiple references
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "Combine these styles" --image out.png --ref a.png b.png
```
### Quality Presets
```bash
# Normal quality (default)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality normal
# High quality (2k resolution)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --quality 2k
```
### Output Formats
```bash
# Plain output (prints saved path)
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png
# JSON output
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --json
# Specific provider
npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image out.png --provider openai
```
## Options
@@ -110,110 +80,47 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts --prompt "A cat" --image cat.png --json
| `--ref <files...>` | Reference images (Google multimodal only) |
| `--n <count>` | Number of images |
| `--json` | JSON output |
| `--help`, `-h` | Show help |
## Environment Variables
| Variable | Description | Default |
|----------|-------------|---------|
| `OPENAI_API_KEY` | OpenAI API key | - |
| `GOOGLE_API_KEY` | Google API key | - |
| `OPENAI_IMAGE_MODEL` | OpenAI model | `gpt-image-1.5` |
| `GOOGLE_IMAGE_MODEL` | Google model | `gemini-3-pro-image-preview` |
| `OPENAI_BASE_URL` | Custom OpenAI endpoint | - |
| `GOOGLE_BASE_URL` | Custom Google endpoint | - |
| Variable | Description |
|----------|-------------|
| `OPENAI_API_KEY` | OpenAI API key |
| `GOOGLE_API_KEY` | Google API key |
| `OPENAI_IMAGE_MODEL` | OpenAI model override |
| `GOOGLE_IMAGE_MODEL` | Google model override |
| `OPENAI_BASE_URL` | Custom OpenAI endpoint |
| `GOOGLE_BASE_URL` | Custom Google endpoint |
**Load Priority**: CLI args > `process.env` > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
**Load Priority**: CLI args > env vars > `<cwd>/.baoyu-skills/.env` > `~/.baoyu-skills/.env`
## Provider & Model Strategy
## Provider Selection
### Auto-Selection
1. If `--provider` specified → use it
2. If only one API key available → use that provider
3. If both available → default to Google (multimodal LLMs more versatile)
### API Selection by Model Type
| Model Category | API Function | Example Models |
|----------------|--------------|----------------|
| Google Multimodal | `generateText` | `gemini-2.0-flash-exp-image-generation` |
| Google Imagen | `experimental_generateImage` | `imagen-3.0-generate-002` |
| OpenAI | `experimental_generateImage` | `gpt-image-1`, `dall-e-3` |
### Available Models
**Google**:
- `gemini-3-pro-image-preview` - Default, multimodal generation
- `gemini-2.0-flash-exp-image-generation` - Gemini 2.0 Flash
- `imagen-3.0-generate-002` - Imagen 3
**OpenAI**:
- `gpt-image-1.5` - Default, GPT Image 1.5
- `gpt-image-1` - GPT Image 1
- `dall-e-3` - DALL-E 3
1. `--provider` specified → use it
2. Only one API key available → use that provider
3. Both available → default to Google
## Quality Presets
| Preset | OpenAI | Google | Use Case |
|--------|--------|--------|----------|
| `normal` | 1024x1024 | Default | Covers, illustrations |
| `2k` | 2048x2048 | "2048px" in prompt | Infographics, slides |
| Preset | Resolution | Use Case |
|--------|------------|----------|
| `normal` | ~1024px | Covers, illustrations |
| `2k` | ~2048px | Infographics, slides |
## Aspect Ratio Handling
## Aspect Ratios
- **Multimodal LLMs**: Embedded in prompt (e.g., `"... aspect ratio 16:9"`)
- **Image-only models**: Uses `aspectRatio` or `size` parameter
- **Common ratios**: 1:1, 16:9, 9:16, 4:3, 3:4, 2.35:1
Supported: `1:1`, `16:9`, `9:16`, `4:3`, `3:4`, `2.35:1`
## Examples
### Generate Cover Image
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts \
--prompt "A minimalist tech illustration with blue gradients" \
--image cover.png --ar 2.35:1 --quality 2k
```
### Generate Social Media Post
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts \
--prompt "Instagram post about coffee" \
--image post.png --ar 1:1
```
### Edit Image with Reference
```bash
npx -y bun ${SKILL_DIR}/scripts/main.ts \
--prompt "Change the background to sunset" \
--image edited.png --ref original.png --provider google
```
### Batch Generation from Prompt File
```bash
# Create prompt file with detailed instructions
npx -y bun ${SKILL_DIR}/scripts/main.ts \
--promptfiles style-guide.md scene-description.md \
--image scene.png
```
- Multimodal models: embedded in prompt
- Image-only models: uses `aspectRatio` or `size` parameter
## Error Handling
- **Missing API key**: Clear error with setup instructions
- **Generation failure**: Auto-retry once, then error
- **Invalid aspect ratio**: Warning, proceed with default
- **Reference images with image-only model**: Warning, ignore refs
- Missing API key error with setup instructions
- Generation failure → auto-retry once
- Invalid aspect ratio → warning, proceed with default
- Reference images with non-multimodal model → warning, ignore refs
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-image-gen/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-image-gen/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
-2
View File
@@ -24,8 +24,6 @@ type CliArgs = {
const GOOGLE_MULTIMODAL_MODELS = [
"gemini-3-pro-image-preview",
"gemini-2.0-flash-exp-image-generation",
"gemini-2.5-flash-preview-native-audio-dialog",
];
const GOOGLE_IMAGEN_MODELS = ["imagen-3.0-generate-002", "imagen-3.0-generate-001"];
+133 -405
View File
@@ -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
+57 -47
View File
@@ -1,84 +1,94 @@
---
name: baoyu-post-to-wechat
description: Post content to WeChat Official Account (微信公众号). Supports both article posting (文章) and image-text posting (图文).
description: Posts content to WeChat Official Account (微信公众号) via Chrome CDP automation. Supports article posting (文章) with full markdown formatting and image-text posting (图文) with multiple images. Use when user mentions "发布公众号", "post to wechat", "微信公众号", or "图文/文章".
---
# Post to WeChat Official Account (微信公众号)
Post content to WeChat Official Account using Chrome CDP automation.
# Post to WeChat Official Account
## Script Directory
**Important**: All scripts are located in the `scripts/` subdirectory of this skill.
**Agent Execution**: Determine this SKILL.md directory as `SKILL_DIR`, then use `${SKILL_DIR}/scripts/<name>.ts`.
**Agent Execution Instructions**:
1. Determine this SKILL.md file's directory path as `SKILL_DIR`
2. Script path = `${SKILL_DIR}/scripts/<script-name>.ts`
3. Replace all `${SKILL_DIR}` in this document with the actual path
**Script Reference**:
| Script | Purpose |
|--------|---------|
| `scripts/wechat-browser.ts` | Image-text posts (图文) |
| `scripts/wechat-article.ts` | Full article posting (文章) |
| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML conversion |
| `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
| `scripts/paste-from-clipboard.ts` | Send real paste keystroke |
| `scripts/wechat-article.ts` | Article posting (文章) |
| `scripts/md-to-wechat.ts` | Markdown → WeChat HTML |
## Quick Usage
## Preferences (EXTEND.md)
### Image-Text (图文) - Multiple images with title/content
Use Bash to check EXTEND.md existence (priority order):
```bash
# From markdown file and image directory
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
# Check project-level first
test -f .baoyu-skills/baoyu-post-to-wechat/EXTEND.md && echo "project"
# With explicit parameters
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img1.png --image img2.png --submit
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md" && echo "user"
```
### Article (文章) - Full markdown with formatting
┌────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md │ User home │
└────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default theme | Auto-submit preference | Chrome profile path
## Usage
### Image-Text (图文)
```bash
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --markdown article.md --images ./images/
npx -y bun ${SKILL_DIR}/scripts/wechat-browser.ts --title "标题" --content "内容" --image img.png --submit
```
### Article (文章)
```bash
# Post markdown article
npx -y bun ${SKILL_DIR}/scripts/wechat-article.ts --markdown article.md --theme grace
```
> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
## Detailed References
## References
| Topic | Reference |
|-------|-----------|
| Image-text parameters, auto-compression | [references/image-text-posting.md](references/image-text-posting.md) |
| Article themes, image handling | [references/article-posting.md](references/article-posting.md) |
- **Image-Text Posting**: See `references/image-text-posting.md` for detailed image-text posting guide
- **Article Posting**: See `references/article-posting.md` for detailed article posting guide
## Prerequisites
- Google Chrome installed
- `bun` runtime (via `npx -y bun`)
- First run: log in to WeChat Official Account in the opened browser window
## Features
## Feature Comparison
| Feature | Image-Text | Article |
|---------|------------|---------|
| Multiple images | ✓ (up to 9) | ✓ (inline) |
| Markdown support | Title/content extraction | Full formatting |
| Auto title compression | ✓ (to 20 chars) | ✗ |
| Content compression | ✓ (to 1000 chars) | ✗ |
| Auto compression | ✓ (title: 20, content: 1000 chars) | ✗ |
| Themes | ✗ | ✓ (default, grace, simple) |
## Prerequisites
- Google Chrome
- First run: log in to WeChat Official Account (session preserved)
## Troubleshooting
- **Not logged in**: First run opens browser - scan QR code to log in, session is preserved
- **Chrome not found**: Set `WECHAT_BROWSER_CHROME_PATH` environment variable
- **Paste fails**: Check system clipboard permissions
| Issue | Solution |
|-------|----------|
| Not logged in | First run opens browser - scan QR to log in |
| Chrome not found | Set `WECHAT_BROWSER_CHROME_PATH` env var |
| Paste fails | Check system clipboard permissions |
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-post-to-wechat/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+68 -71
View File
@@ -1,11 +1,11 @@
---
name: baoyu-post-to-x
description: Post content and articles to X (Twitter). Supports regular posts with images/videos and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation.
description: Posts content and articles to X (Twitter). Supports regular posts with images/videos and X Articles (long-form Markdown). Uses real Chrome with CDP to bypass anti-automation. Use when user asks to "post to X", "tweet", "publish to Twitter", or "share on X".
---
# Post to X (Twitter)
Post content, images, videos, and long-form articles to X using real Chrome browser (bypasses anti-bot detection).
Posts text, images, videos, and long-form articles to X via real Chrome browser (bypasses anti-bot detection).
## Script Directory
@@ -27,11 +27,41 @@ Post content, images, videos, and long-form articles to X using real Chrome brow
| `scripts/copy-to-clipboard.ts` | Copy content to clipboard |
| `scripts/paste-from-clipboard.ts` | Send real paste keystroke |
## Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
```bash
# Check project-level first
test -f .baoyu-skills/baoyu-post-to-x/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-post-to-x/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-post-to-x/EXTEND.md │ User home │
└──────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default Chrome profile | Auto-submit preference
## Prerequisites
- Google Chrome or Chromium installed
- `bun` installed (for running scripts)
- First run: log in to X in the opened browser window
- Google Chrome or Chromium
- `bun` runtime
- First run: log in to X manually (session saved)
## References
@@ -45,72 +75,57 @@ Post content, images, videos, and long-form articles to X using real Chrome brow
Text + up to 4 images.
```bash
# Preview mode (doesn't post)
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello from Claude!" --image ./screenshot.png
# Actually post
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png # Preview
npx -y bun ${SKILL_DIR}/scripts/x-browser.ts "Hello!" --image ./photo.png --submit # Post
```
> **Note**: `${SKILL_DIR}` represents this skill's installation directory. Agent replaces with actual path at runtime.
**Parameters**:
| Parameter | Description |
|-----------|-------------|
| `<text>` | Post content (positional argument) |
| `--image <path>` | Image file path (can be repeated, max 4) |
| `--submit` | Actually post (default: preview only) |
| `--profile <dir>` | Custom Chrome profile directory |
| `<text>` | Post content (positional) |
| `--image <path>` | Image file (repeatable, max 4) |
| `--submit` | Post (default: preview) |
| `--profile <dir>` | Custom Chrome profile |
---
## Video Posts
Text + video file (MP4, MOV, WebM).
Text + video file.
```bash
# Preview mode (doesn't post)
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Check out this video!" --video ./clip.mp4
# Actually post
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Amazing content" --video ./demo.mp4 --submit
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Check this out!" --video ./clip.mp4 # Preview
npx -y bun ${SKILL_DIR}/scripts/x-video.ts "Amazing content" --video ./demo.mp4 --submit # Post
```
**Parameters**:
| Parameter | Description |
|-----------|-------------|
| `<text>` | Post content (positional argument) |
| `--video <path>` | Video file path (required) |
| `--submit` | Actually post (default: preview only) |
| `--profile <dir>` | Custom Chrome profile directory |
| `<text>` | Post content (positional) |
| `--video <path>` | Video file (MP4, MOV, WebM) |
| `--submit` | Post (default: preview) |
| `--profile <dir>` | Custom Chrome profile |
**Video Limits**:
- Regular accounts: 140 seconds max
- X Premium: up to 60 minutes
- Supported formats: MP4, MOV, WebM
- Processing time: 30-60 seconds depending on file size
**Limits**: Regular 140s max, Premium 60min. Processing: 30-60s.
---
## Quote Tweets
Quote an existing tweet with your comment - a way to share content while giving credit to the original creator.
Quote an existing tweet with comment.
```bash
# Preview mode (doesn't post)
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "Great insight!"
# Actually post
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "I agree!" --submit
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "Great insight!" # Preview
npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123 "I agree!" --submit # Post
```
**Parameters**:
| Parameter | Description |
|-----------|-------------|
| `<tweet-url>` | URL of the tweet to quote (positional argument) |
| `<comment>` | Your comment text (positional argument, optional) |
| `--submit` | Actually post (default: preview only) |
| `--profile <dir>` | Custom Chrome profile directory |
| `<tweet-url>` | URL to quote (positional) |
| `<comment>` | Comment text (positional, optional) |
| `--submit` | Post (default: preview) |
| `--profile <dir>` | Custom Chrome profile |
---
@@ -119,47 +134,29 @@ npx -y bun ${SKILL_DIR}/scripts/x-quote.ts https://x.com/user/status/123456789 "
Long-form Markdown articles (requires X Premium).
```bash
# Preview mode
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md
# With cover image
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg
# Publish
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md # Preview
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --cover ./cover.jpg # With cover
npx -y bun ${SKILL_DIR}/scripts/x-article.ts article.md --submit # Publish
```
**Parameters**:
| Parameter | Description |
|-----------|-------------|
| `<markdown>` | Markdown file path (positional argument) |
| `--cover <path>` | Cover image path |
| `--title <text>` | Override article title |
| `--submit` | Actually publish (default: preview only) |
| `<markdown>` | Markdown file (positional) |
| `--cover <path>` | Cover image |
| `--title <text>` | Override title |
| `--submit` | Publish (default: preview) |
**Frontmatter** (optional):
```yaml
---
title: My Article Title
cover_image: /path/to/cover.jpg
---
```
**Frontmatter**: `title`, `cover_image` supported in YAML front matter.
---
## Notes
- First run requires manual login (session is saved)
- Always preview before using `--submit`
- Browser closes automatically after operation
- Supports macOS, Linux, and Windows
- First run: manual login required (session persists)
- Always preview before `--submit`
- Cross-platform: macOS, Linux, Windows
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-post-to-x/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-post-to-x/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
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
+45 -94
View File
@@ -21,6 +21,36 @@ Fetches any URL via Chrome CDP and converts HTML to clean markdown.
|--------|---------|
| `scripts/main.ts` | CLI entry point for URL fetching |
## Preferences (EXTEND.md)
Use Bash to check EXTEND.md existence (priority order):
```bash
# Check project-level first
test -f .baoyu-skills/baoyu-url-to-markdown/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md" && echo "user"
```
┌────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-url-to-markdown/EXTEND.md │ Project directory │
├────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md │ User home │
└────────────────────────────────────────────────────────┴───────────────────┘
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
│ Result │ Action │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Found │ Read, parse, apply settings │
├───────────┼───────────────────────────────────────────────────────────────────────────┤
│ Not found │ Use defaults │
└───────────┴───────────────────────────────────────────────────────────────────────────┘
**EXTEND.md Supports**: Default output directory | Default capture mode | Timeout settings
## Features
- Chrome CDP for full JavaScript rendering
@@ -52,103 +82,28 @@ npx -y bun ${SKILL_DIR}/scripts/main.ts <url> -o output.md
## Capture Modes
### Auto Mode (default)
| Mode | Behavior | Use When |
|------|----------|----------|
| Auto (default) | Capture on network idle | Public pages, static content |
| Wait (`--wait`) | User signals when ready | Login-required, lazy loading, paywalls |
Page loads → waits for network idle → captures immediately.
Best for:
- Public pages
- Static content
- No login required
### Wait Mode (`--wait`)
Page opens → user can interact (login, scroll, etc.) → user signals ready → captures.
Best for:
- Login-required pages
- Dynamic content needing interaction
- Pages with lazy loading
**Agent workflow for wait mode**:
1. Run script with `--wait` flag
2. Script outputs: `Page opened. Press Enter when ready to capture...`
3. Use `AskUserQuestion` to ask user if page is ready
4. When user confirms, send newline to stdin to trigger capture
**Wait mode workflow**:
1. Run with `--wait` → script outputs "Press Enter when ready"
2. Ask user to confirm page is ready
3. Send newline to stdin to trigger capture
## Output Format
```markdown
---
url: https://example.com/page
title: "Page Title"
description: "Meta description if available"
author: "Author if available"
published: "2024-01-01"
captured_at: "2024-01-15T10:30:00Z"
---
# Page Title
Converted markdown content...
```
## Mode Selection Guide
When user requests URL capture, help select appropriate mode:
**Suggest Auto Mode when**:
- URL is public (no login wall visible)
- Content appears static
- User doesn't mention login requirements
**Suggest Wait Mode when**:
- User mentions needing to log in
- Site known to require authentication
- User wants to scroll/interact before capture
- Content is behind paywall
**Ask user when unclear**:
```
The page may require login or interaction before capturing.
Which mode should I use?
1. Auto - Capture immediately when loaded
2. Wait - Wait for you to interact first
```
YAML front matter with `url`, `title`, `description`, `author`, `published`, `captured_at` fields, followed by converted markdown content.
## Output Directory
Each capture creates a file organized by domain:
```
url-to-markdown/
└── <domain>/
└── <slug>.md
url-to-markdown/<domain>/<slug>.md
```
**Path Components**:
- `<domain>`: Site domain (e.g., `example.com`, `github.com`)
- `<slug>`: Generated from page title or URL path (kebab-case)
**Slug Generation**:
1. Extract from page title (preferred) or URL path
2. Convert to kebab-case, 2-6 words
3. Example: "Getting Started with React" → `getting-started-with-react`
**Conflict Resolution**:
If `url-to-markdown/<domain>/<slug>.md` already exists:
- Append timestamp: `<slug>-YYYYMMDD-HHMMSS.md`
- Example: `getting-started.md` exists → `getting-started-20260118-143052.md`
## Error Handling
| Error | Resolution |
|-------|------------|
| Chrome not found | Install Chrome or set `URL_CHROME_PATH` env |
| Page timeout | Increase `--timeout` value |
| Capture failed | Try wait mode for complex pages |
| Empty content | Page may need JS rendering time |
- `<slug>`: From page title or URL path (kebab-case, 2-6 words)
- Conflict resolution: Append timestamp `<slug>-YYYYMMDD-HHMMSS.md`
## Environment Variables
@@ -158,12 +113,8 @@ If `url-to-markdown/<domain>/<slug>.md` already exists:
| `URL_DATA_DIR` | Custom data directory |
| `URL_CHROME_PROFILE_DIR` | Custom Chrome profile directory |
**Troubleshooting**: Chrome not found → set `URL_CHROME_PATH`. Timeout → increase `--timeout`. Complex pages → try `--wait` mode.
## Extension Support
Custom configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-url-to-markdown/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-url-to-markdown/EXTEND.md` (user)
If found, load before workflow. Extension content overrides defaults.
Custom configurations via EXTEND.md. See **Preferences** section for paths and supported options.
+59 -34
View File
@@ -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):