Compare commits

...

6 Commits

Author SHA1 Message Date
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
Jim Liu 宝玉 658c5dee71 chore: release v1.16.0 2026-01-23 12:15:56 -06:00
38 changed files with 4175 additions and 2290 deletions
+1 -1
View File
@@ -6,7 +6,7 @@
},
"metadata": {
"description": "Skills shared by Baoyu for improving daily work efficiency",
"version": "1.15.3"
"version": "1.18.2"
},
"plugins": [
{
+3
View File
@@ -149,3 +149,6 @@ xhs-images/
url-to-markdown/
cover-image/
slide-deck/
infographic/
illustrations/
comic/
+59
View File
@@ -2,6 +2,65 @@
English | [中文](./CHANGELOG.zh.md)
## 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
- `baoyu-article-illustrator`: adds user preferences support via EXTEND.md—configure watermark (content, position, opacity), preferred type/style, and custom styles. New Step 1.1 checks for preferences at project (`.baoyu-skills/`) or user (`~/.baoyu-skills/`) level with first-time setup flow.
### Refactor
- `baoyu-article-illustrator`: restructures to Type × Style two-dimension system—replaces 20+ single-dimension styles with modular Type (infographic, scene, flowchart, comparison, framework, timeline) × Style (notion, elegant, warm, minimal, blueprint, watercolor, editorial, scientific) architecture. Adds `--type` and `--density` options, Type × Style compatibility matrix, and structured prompt construction templates.
### Documentation
- `baoyu-article-illustrator`: adds three reference documents—`references/styles.md` (style gallery and compatibility matrix), `references/config/preferences-schema.md` (EXTEND.md YAML schema), `references/config/first-time-setup.md` (setup flow).
- `README.md`, `README.zh.md`: updates baoyu-article-illustrator documentation to reflect new Type × Style system with `--type` and `--style` options.
## 1.15.3 - 2026-01-23
### Refactor
+59
View File
@@ -2,6 +2,65 @@
[English](./CHANGELOG.md) | 中文
## 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
### 新功能
- `baoyu-article-illustrator`:新增用户偏好设置支持(通过 EXTEND.md 配置)——可设置水印(内容、位置、透明度)、首选类型/风格和自定义风格。新增 Step 1.1 检查项目级(`.baoyu-skills/`)或用户级(`~/.baoyu-skills/`)偏好设置,首次使用时引导设置。
### 重构
- `baoyu-article-illustrator`:重构为类型 × 风格二维系统——将 20+ 种单维风格替换为模块化的类型(infographic 信息图、scene 场景、flowchart 流程图、comparison 对比、framework 框架、timeline 时间线)× 风格(notion、elegant、warm、minimal、blueprint、watercolor、editorial、scientific)架构。新增 `--type``--density` 选项、类型 × 风格兼容性矩阵,以及结构化提示词构建模板。
### 文档
- `baoyu-article-illustrator`:新增三个参考文档——`references/styles.md`(风格库和兼容性矩阵)、`references/config/preferences-schema.md`EXTEND.md YAML 配置模式)、`references/config/first-time-setup.md`(首次设置流程)。
- `README.md``README.zh.md`:更新 baoyu-article-illustrator 文档,反映新的类型 × 风格系统及 `--type``--style` 选项。
## 1.15.3 - 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
+86 -58
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
@@ -426,42 +459,45 @@ Knowledge comic creator with flexible art style × tone combinations. Creates or
#### baoyu-article-illustrator
Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids.
Smart article illustration skill with Type × Style two-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations.
```bash
# Auto-select style based on content
# Auto-select type and style based on content
/baoyu-article-illustrator path/to/article.md
# Specify a style
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style watercolor
# Specify type
/baoyu-article-illustrator path/to/article.md --type infographic
# Specify style
/baoyu-article-illustrator path/to/article.md --style blueprint
# Combine type and style
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
```
**Types** (information structure):
| Type | Description | Best For |
|------|-------------|----------|
| `infographic` | Data visualization, charts, metrics | Technical articles, data analysis |
| `scene` | Atmospheric illustration, mood rendering | Narrative, personal stories |
| `flowchart` | Process diagrams, step visualization | Tutorials, workflows |
| `comparison` | Side-by-side, before/after contrast | Product comparisons |
| `framework` | Concept maps, relationship diagrams | Methodologies, architecture |
| `timeline` | Chronological progression | History, project progress |
**Styles** (visual aesthetics):
| Style | Description | Best For |
|-------|-------------|----------|
| `notion` (default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle |
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism |
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides |
| `nature` | Organic, calm, earthy | Sustainability, wellness |
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming |
| `elegant` | Refined, sophisticated | Business, thought leadership |
| `warm` | Friendly, approachable | Personal growth, lifestyle |
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism |
| `blueprint` | Technical schematics | Architecture, system design |
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
| `chalkboard` | Classroom chalk drawing style | Education, tutorials |
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
| `flat` | Modern flat vector illustration | Startups, digital |
| `flat-doodle` | Bold outlines, pastel colors, cute | Productivity, SaaS, workflows |
| `retro` | 80s/90s vibrant nostalgic | Pop culture, entertainment |
| `blueprint` | Technical schematics, engineering | Architecture, system design |
| `vector-illustration` | Flat vector, black outlines, retro | Educational, creative, brand |
| `sketch-notes` | Soft hand-drawn, warm feel | Knowledge sharing, tutorials |
| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer |
| `intuition-machine` | Technical briefing, bilingual | Academic, technical, research |
| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
**Style Previews**:
@@ -469,18 +505,10 @@ Smart article illustration skill. Analyzes article content and generates illustr
|:---:|:---:|:---:|
| ![notion](./screenshots/article-illustrator-styles/notion.webp) | ![elegant](./screenshots/article-illustrator-styles/elegant.webp) | ![warm](./screenshots/article-illustrator-styles/warm.webp) |
| notion | elegant | warm |
| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![playful](./screenshots/article-illustrator-styles/playful.webp) | ![nature](./screenshots/article-illustrator-styles/nature.webp) |
| minimal | playful | nature |
| ![sketch](./screenshots/article-illustrator-styles/sketch.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) | ![vintage](./screenshots/article-illustrator-styles/vintage.webp) |
| sketch | watercolor | vintage |
| ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | ![chalkboard](./screenshots/article-illustrator-styles/chalkboard.webp) | ![editorial](./screenshots/article-illustrator-styles/editorial.webp) |
| scientific | chalkboard | editorial |
| ![flat](./screenshots/article-illustrator-styles/flat.webp) | ![retro](./screenshots/article-illustrator-styles/retro.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) |
| flat | retro | blueprint |
| ![vector-illustration](./screenshots/article-illustrator-styles/vector-illustration.webp) | ![sketch-notes](./screenshots/article-illustrator-styles/sketch-notes.webp) | ![pixel-art](./screenshots/article-illustrator-styles/pixel-art.webp) |
| vector-illustration | sketch-notes | pixel-art |
| ![intuition-machine](./screenshots/article-illustrator-styles/intuition-machine.webp) | ![fantasy-animation](./screenshots/article-illustrator-styles/fantasy-animation.webp) | ![flat-doodle](./screenshots/article-illustrator-styles/flat-doodle.webp) |
| intuition-machine | fantasy-animation | flat-doodle |
| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) |
| minimal | blueprint | watercolor |
| ![editorial](./screenshots/article-illustrator-styles/editorial.webp) | ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | |
| editorial | scientific | |
#### baoyu-post-to-x
+85 -57
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
@@ -426,42 +459,45 @@ npx skills add jimliu/baoyu-skills
#### baoyu-article-illustrator
智能文章插图技能。分析文章内容,在需要视觉辅助的位置生成插图。
智能文章插图技能,采用类型 × 风格二维系统。分析文章结构,识别需要视觉辅助的位置生成插图。
```bash
# 根据内容自动选择风格
# 根据内容自动选择类型和风格
/baoyu-article-illustrator path/to/article.md
# 指定类型
/baoyu-article-illustrator path/to/article.md --type infographic
# 指定风格
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style watercolor
/baoyu-article-illustrator path/to/article.md --style blueprint
# 组合类型和风格
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
```
**类型**(信息结构):
| 类型 | 描述 | 适用场景 |
|------|------|----------|
| `infographic` | 数据可视化、图表、指标 | 技术文章、数据分析 |
| `scene` | 氛围插图、情绪渲染 | 叙事、个人故事 |
| `flowchart` | 流程图、步骤可视化 | 教程、工作流 |
| `comparison` | 并排对比、前后对照 | 产品比较 |
| `framework` | 概念图、关系图 | 方法论、架构 |
| `timeline` | 时间线进展 | 历史、项目进度 |
**风格**(视觉美学):
| 风格 | 描述 | 适用场景 |
|------|------|----------|
| `notion`(默认) | 极简手绘线条画 | 知识分享、SaaS、生产力 |
| `elegant` | 精致、优雅、专业 | 商业、思想领导力 |
| `warm` | 友好、亲切、人文关怀 | 个人成长、生活方式 |
| `minimal` | 极简、禅意、专注 | 哲学、极简主义 |
| `playful` | 有趣、创意、俏皮 | 教程、新手指南 |
| `nature` | 自然、平静、质朴 | 可持续发展、健康 |
| `sketch` | 原始、真实、笔记风格 | 想法、头脑风暴 |
| `elegant` | 精致、优雅 | 商业、思想领导力 |
| `warm` | 友好、亲切 | 个人成长、生活方式 |
| `minimal` | 极简、禅意 | 哲学、极简主义 |
| `blueprint` | 技术蓝图 | 架构、系统设计 |
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
| `vintage` | 怀旧做旧纸张美学 | 历史、传记 |
| `scientific` | 学术精确图表 | 生物、化学、技术 |
| `chalkboard` | 教室粉笔画风格 | 教育、教程 |
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
| `flat` | 现代扁平矢量插画 | 创业公司、数字化 |
| `flat-doodle` | 粗轮廓、粉彩色、可爱风 | 生产力、SaaS、工作流 |
| `retro` | 80/90 年代复古鲜艳 | 流行文化、娱乐 |
| `blueprint` | 技术蓝图、工程精度 | 架构、系统设计 |
| `vector-illustration` | 扁平矢量、黑色轮廓、复古 | 教育、创意、品牌 |
| `sketch-notes` | 柔和手绘、温暖感 | 知识分享、教程 |
| `pixel-art` | 复古 8-bit 游戏风格 | 游戏、技术、开发者 |
| `intuition-machine` | 技术简报、双语标签 | 学术、技术、研究 |
| `fantasy-animation` | 吉卜力/迪士尼童话风格 | 故事、儿童、创意 |
| `scientific` | 学术精确图表 | 生物、化学、技术 |
**风格预览**
@@ -469,18 +505,10 @@ npx skills add jimliu/baoyu-skills
|:---:|:---:|:---:|
| ![notion](./screenshots/article-illustrator-styles/notion.webp) | ![elegant](./screenshots/article-illustrator-styles/elegant.webp) | ![warm](./screenshots/article-illustrator-styles/warm.webp) |
| notion | elegant | warm |
| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![playful](./screenshots/article-illustrator-styles/playful.webp) | ![nature](./screenshots/article-illustrator-styles/nature.webp) |
| minimal | playful | nature |
| ![sketch](./screenshots/article-illustrator-styles/sketch.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) | ![vintage](./screenshots/article-illustrator-styles/vintage.webp) |
| sketch | watercolor | vintage |
| ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | ![chalkboard](./screenshots/article-illustrator-styles/chalkboard.webp) | ![editorial](./screenshots/article-illustrator-styles/editorial.webp) |
| scientific | chalkboard | editorial |
| ![flat](./screenshots/article-illustrator-styles/flat.webp) | ![retro](./screenshots/article-illustrator-styles/retro.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) |
| flat | retro | blueprint |
| ![vector-illustration](./screenshots/article-illustrator-styles/vector-illustration.webp) | ![sketch-notes](./screenshots/article-illustrator-styles/sketch-notes.webp) | ![pixel-art](./screenshots/article-illustrator-styles/pixel-art.webp) |
| vector-illustration | sketch-notes | pixel-art |
| ![intuition-machine](./screenshots/article-illustrator-styles/intuition-machine.webp) | ![fantasy-animation](./screenshots/article-illustrator-styles/fantasy-animation.webp) | ![flat-doodle](./screenshots/article-illustrator-styles/flat-doodle.webp) |
| intuition-machine | fantasy-animation | flat-doodle |
| ![minimal](./screenshots/article-illustrator-styles/minimal.webp) | ![blueprint](./screenshots/article-illustrator-styles/blueprint.webp) | ![watercolor](./screenshots/article-illustrator-styles/watercolor.webp) |
| minimal | blueprint | watercolor |
| ![editorial](./screenshots/article-illustrator-styles/editorial.webp) | ![scientific](./screenshots/article-illustrator-styles/scientific.webp) | |
| editorial | scientific | |
#### baoyu-post-to-x
+353 -277
View File
@@ -1,376 +1,452 @@
---
name: baoyu-article-illustrator
description: Smart article illustration skill. Analyzes article content and generates illustrations at positions requiring visual aids with multiple style options. Use when user asks to "add illustrations to article", "generate images for article", or "illustrate article".
description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style two-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
---
# Smart Article Illustration Skill
# Article Illustrator
Analyze article structure and content, identify positions requiring visual aids, and generate illustrations with flexible style options.
Analyze articles, identify illustration positions, generate images with Type × Style consistency.
## Usage
```bash
# Auto-select style based on content
# Auto-select type and style based on content
/baoyu-article-illustrator path/to/article.md
# Specify a style
/baoyu-article-illustrator path/to/article.md --style warm
/baoyu-article-illustrator path/to/article.md --style minimal
/baoyu-article-illustrator path/to/article.md --style watercolor
# Specify type
/baoyu-article-illustrator path/to/article.md --type infographic
# Combine with other options
/baoyu-article-illustrator path/to/article.md --style playful
# Specify style
/baoyu-article-illustrator path/to/article.md --style blueprint
# Combine type and style
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
# Specify density
/baoyu-article-illustrator path/to/article.md --density rich
# Direct content input
/baoyu-article-illustrator
[paste content]
```
## Options
| Option | Description |
|--------|-------------|
| `--style <name>` | Specify illustration style (see Style Gallery below) |
| `--type <name>` | Illustration type (see Type Gallery) |
| `--style <name>` | Visual style (see Style Gallery) |
| `--density <level>` | Image count: minimal / balanced / rich |
## Two Dimensions
| Dimension | Controls | Examples |
|-----------|----------|----------|
| **Type** | Information structure, content layout | infographic, scene, flowchart, comparison, framework, timeline |
| **Style** | Visual aesthetics, colors, mood | notion, warm, minimal, blueprint, watercolor, elegant |
Type × Style can be freely combined. Example: `--type infographic --style blueprint` creates technical data visualization with schematic aesthetics.
## Type Gallery
| Type | Description | Best For |
|------|-------------|----------|
| `infographic` | Data visualization, charts, metrics | Technical articles, data analysis, comparisons |
| `scene` | Atmospheric illustration, mood rendering | Narrative articles, personal stories, emotional content |
| `flowchart` | Process diagrams, step visualization | Tutorials, workflows, decision trees |
| `comparison` | Side-by-side, before/after contrast | Product comparisons, option evaluations |
| `framework` | Concept maps, relationship diagrams | Methodologies, models, architecture design |
| `timeline` | Chronological progression | History, project progress, evolution |
## Density Options
| Density | Count | Description |
|---------|-------|-------------|
| `minimal` | 1-2 | Core concepts only |
| `balanced` (Default) | 3-5 | Major sections coverage |
| `rich` | 6+ | Rich visual support |
## Style Gallery
| Style | Description | Best For |
|-------|-------------|----------|
| `notion` (Default) | Minimalist hand-drawn line art, intellectual | Knowledge sharing, SaaS, productivity |
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle, education |
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism, core concepts |
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides, fun topics |
| `nature` | Organic, calm, earthy | Sustainability, wellness, outdoor |
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming, drafts |
| `notion` (Default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
| `elegant` | Refined, sophisticated | Business, thought leadership |
| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
| `blueprint` | Technical schematics | Architecture, system design, engineering |
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
| `vintage` | Nostalgic aged-paper aesthetic | Historical, biography, heritage |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
| `chalkboard` | Classroom chalk drawing style | Education, tutorials, workshops |
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
| `flat` | Modern flat vector illustration | Startups, digital, contemporary |
| `flat-doodle` | Bold outlines, pastel colors, cute | Productivity, SaaS, workflows |
| `retro` | 80s/90s vibrant nostalgic | Pop culture, gaming, entertainment |
| `blueprint` | Technical schematics, engineering precision | Architecture, system design |
| `vector-illustration` | Flat vector with black outlines, retro colors | Educational, creative, brand content |
| `sketch-notes` | Soft hand-drawn, warm educational feel | Knowledge sharing, tutorials |
| `pixel-art` | Retro 8-bit gaming aesthetic | Gaming, tech, developer content |
| `intuition-machine` | Technical briefing with bilingual labels | Academic, technical, bilingual |
| `fantasy-animation` | Ghibli/Disney whimsical style | Storytelling, children's, creative |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |
Full style specifications in `references/styles/<style>.md`
Full style specifications: `references/styles/<style>.md`
## Auto Style Selection
## Type × Style Compatibility
When no `--style` is specified, analyze content to select the best style:
| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| infographic | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
| scene | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ |
| flowchart | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ |
| comparison | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
| framework | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ |
| timeline | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
| Content Signals | Selected Style |
|----------------|----------------|
| Personal story, emotion, growth, life, feeling, relationship | `warm` |
| Simple, zen, focus, essential, core, minimalist | `minimal` |
| Fun, easy, beginner, tutorial, guide, how-to, learn | `playful` |
| Nature, eco, wellness, health, organic, green, outdoor | `nature` |
| Idea, thought, concept, draft, brainstorm, sketch | `sketch` |
| Business, professional, strategy, analysis, corporate | `elegant` |
| Knowledge, concept, productivity, SaaS, notion, tool | `notion` |
| Lifestyle, travel, food, art, creative, artistic | `watercolor` |
| History, heritage, vintage, biography, classic, expedition | `vintage` |
| Biology, chemistry, medical, scientific, research, academic | `scientific` |
| Education, classroom, teaching, school, lecture, workshop | `chalkboard` |
| Explainer, journalism, magazine, in-depth, investigation | `editorial` |
| Modern, startup, app, product, digital marketing, saas | `flat` |
| Productivity, workflow, cute, tools, app tutorial | `flat-doodle` |
| 80s, 90s, retro, pop culture, music, nostalgia | `retro` |
| Architecture, system, infrastructure, engineering, technical | `blueprint` |
| Brand, explainer, children, cute, toy, geometric | `vector-illustration` |
| Notes, doodle, friendly, warm tutorial, onboarding | `sketch-notes` |
| Gaming, 8-bit, pixel, developer, retro tech | `pixel-art` |
| Bilingual, briefing, academic, research, documentation | `intuition-machine` |
| Fantasy, story, magical, Ghibli, Disney, children | `fantasy-animation` |
| Default | `notion` |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
## File Management
## Auto Selection
### Output Directory
| Content Signals | Recommended Type | Recommended Style |
|-----------------|------------------|-------------------|
| API, metrics, data, comparison, numbers | infographic | blueprint, notion |
| Story, emotion, journey, experience, personal | scene | warm, watercolor |
| How-to, steps, workflow, process, tutorial | flowchart | notion, minimal |
| vs, pros/cons, before/after, alternatives | comparison | notion, elegant |
| Framework, model, architecture, principles | framework | blueprint, notion |
| History, timeline, progress, evolution | timeline | elegant, warm |
Each session creates an independent directory named by content slug:
## Output Directory
```
illustrations/{topic-slug}/
├── source-{slug}.{ext} # Source files (text, images, etc.)
├── source-{slug}.{ext}
├── outline.md
├── outline-{style}.md # Style variant outlines
├── prompts/
── illustration-concept-a.md
│ ├── illustration-concept-b.md
│ └── ...
├── illustration-concept-a.png
├── illustration-concept-b.png
└── ...
── illustration-{slug}.md
└── NN-{type}-{slug}.png
```
**Slug Generation**:
1. Extract main topic from content (2-4 words, kebab-case)
2. Example: "The Future of AI" → `future-of-ai`
### Conflict Resolution
If `illustrations/{topic-slug}/` already exists:
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
- Example: `ai-future` exists → `ai-future-20260118-143052`
### Source Files
Copy all sources with naming `source-{slug}.{ext}`:
- `source-article.md` (main text content)
- `source-photo.jpg` (image from conversation)
- `source-reference.pdf` (additional file)
Multiple sources supported: text, images, files from conversation.
**Slug**: Extract 2-4 word topic in kebab-case.
**Conflict**: Append `-YYYYMMDD-HHMMSS` if exists.
## Workflow
### Step 1: Analyze Content & Select Style
### Progress
1. Read article content
2. If `--style` specified, use that style
3. Otherwise, scan for style signals and auto-select
4. **Language detection**:
- Detect **source language** from article content
- Detect **user language** from conversation context
- Note if source_language ≠ user_language (will ask in Step 4)
5. Extract key information:
- Main topic and themes
- Core messages per section
- Abstract concepts needing visualization
```
- [ ] Step 1: Setup & Analyze
- [ ] Step 2: Confirm Settings ⚠️ REQUIRED
- [ ] Step 3: Generate Outline
- [ ] Step 4: Generate Images
- [ ] Step 5: Finalize
```
### Step 2: Identify Illustration Positions
### Step 1: Setup & Analyze
**Three Purposes of Illustrations**:
1. **Information Supplement**: Help understand abstract concepts
2. **Concept Visualization**: Transform abstract ideas into concrete visuals
3. **Imagination Guidance**: Create atmosphere, enhance reading experience
**1.1 Load Preferences (EXTEND.md)**
**Content Suitable for Illustrations**:
Use Bash to check EXTEND.md existence (priority order):
```bash
# Check project-level first
test -f .baoyu-skills/baoyu-article-illustrator/EXTEND.md && echo "project"
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
test -f "$HOME/.baoyu-skills/baoyu-article-illustrator/EXTEND.md" && echo "user"
```
┌──────────────────────────────────────────────────────────┬───────────────────┐
│ Path │ Location │
├──────────────────────────────────────────────────────────┼───────────────────┤
│ .baoyu-skills/baoyu-article-illustrator/EXTEND.md │ Project directory │
├──────────────────────────────────────────────────────────┼───────────────────┤
│ $HOME/.baoyu-skills/baoyu-article-illustrator/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**: Watermark | Preferred type/style | Custom style definitions | Language preference
Schema: `references/config/preferences-schema.md`
**1.2 Analyze Content**
Read article, detect language, classify content.
| Analysis | Description |
|----------|-------------|
| Content type | Technical / Tutorial / Methodology / Narrative |
| Core arguments | 2-5 main points that MUST be visualized |
| Visual opportunities | Positions where illustrations add value |
| Recommended type | Based on content signals |
| Recommended density | Based on article length and complexity |
**1.3 Extract Core Arguments**
Extract 2-5 core arguments that MUST be visualized:
- Main thesis
- Key concepts reader needs
- Comparisons/contrasts being made
- Framework/model proposed
**CRITICAL**: If article uses metaphors (e.g., "电锯切西瓜"), do NOT illustrate literally. Visualize the **underlying concept** instead.
**1.4 Identify Positions**
**What to Illustrate**:
- Core arguments (REQUIRED)
- Abstract concepts needing visualization
- Processes/steps needing diagrams
- Comparisons needing visual representation
- Core arguments needing reinforcement
- Scenarios needing imagination guidance
- Data comparisons, metrics
- Processes, workflows
**Illustration Count**:
- Consider at least 1 image per major section
- Prioritize core arguments and abstract concepts
- **Principle: More is better than fewer**
**What NOT to Illustrate**:
- Metaphors literally
- Decorative scenes without information
- Generic illustrations
### Step 3: Generate Illustration Plan
### Step 2: Confirm Settings ⚠️
```markdown
# Illustration Plan
**Do NOT skip.** Use AskUserQuestion with 3-4 questions in ONE call.
**Article**: [article path]
**Style**: [selected style]
**Illustration Count**: N images
**Question 1: Illustration Type**
Based on content analysis, recommend type:
- [Recommended type based on signals] (Recommended)
- infographic - Data visualization, charts
- scene - Atmospheric, mood rendering
- flowchart - Process, steps
- comparison - Side-by-side contrast
- framework - Concept relationships
- timeline - Chronological progression
- mixed - Combine multiple types
**Question 2: Density**
- minimal (1-2 images) - Core concepts only
- balanced (3-5 images) (Recommended) - Major sections
- rich (6+ images) - Comprehensive visual support
**Question 3: Style**
Based on recommended Type, suggest compatible styles (see Type × Style Compatibility matrix):
- [Best compatible style for recommended type] (Recommended)
- [Other highly compatible styles: ✓✓ from matrix]
- [Compatible styles: ✓ from matrix]
**Question 4** (only if source ≠ user language):
- Language: Source language / User language
### Step 3: Generate Outline
Based on confirmed Type + Density + Style, generate illustration outline.
**Outline Format** (`outline.md`):
```yaml
---
type: infographic
density: balanced
style: blueprint
image_count: 4
---
## Illustration 1
**Insert Position**: [section name] / [paragraph description]
**Purpose**: [why illustration needed here]
**Visual Content**: [what the image should show]
**Filename**: illustration-[slug].png
---
**Position**: [section] / [paragraph]
**Purpose**: [why this illustration helps]
**Visual Content**: [what to show]
**Type Application**: [how type applies here]
**Filename**: 01-infographic-concept-name.png
## Illustration 2
...
```
### Step 4: Review & Confirm
**Outline Requirements**:
- Each illustration position justified by content needs
- Type applied consistently across all illustrations
- Style characteristics reflected in visual descriptions
- Count matches density selection
**Purpose**: Let user confirm all options in a single step before image generation.
### Step 4: Generate Images
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion. Do NOT interrupt workflow with multiple separate confirmations.
**4.1 Create Prompts**
1. **Generate 3 style variants**:
- Analyze content to select 3 most suitable styles
- Generate complete illustration plan for each style variant
- Save as `outline-{style}.md` (e.g., `outline-notion.md`, `outline-tech.md`, `outline-warm.md`)
Follow Prompt Construction principles below. Save each to `prompts/illustration-{slug}.md`.
2. **Determine which questions to ask**:
**4.2 Select Generation Skill**
| Question | When to Ask |
|----------|-------------|
| Style variant | Always (required) |
| Language | Only if `source_language ≠ user_language` |
Check available image generation skills. If multiple, ask user to choose.
3. **Present options** (use AskUserQuestion with all applicable questions):
**4.3 Apply Watermark** (if enabled in preferences)
**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
Add to prompt: `Include a subtle watermark "[content]" positioned at [position] with approximately [opacity*100]% visibility.`
**Question 2 (Language)** - only if source ≠ user language:
- [Source language] (matches article language)
- [User language] (your preference)
**4.4 Generate**
**Language handling**:
- If source language = user language: Just inform user (e.g., "Prompts will be in Chinese")
- If different: Ask which language to use for prompts
1. Generate sequentially
2. After each: "Generated X/N"
3. On failure: auto-retry once, then log and continue
4. **Apply selection**:
- Copy selected `outline-{style}.md` to `outline.md`
- If custom style provided, generate new plan with that style
- If different language selected, regenerate outline in that language
- User may edit `outline.md` directly for fine-tuning
- If modified, reload plan before proceeding
### Step 5: Finalize
5. **Proceed only after explicit user confirmation**
### Step 5: Create Prompt Files
Save prompts to `prompts/` directory with style-specific details.
**All prompts are written in the user's confirmed language preference.**
**Prompt Format**:
**5.1 Update Article**
Insert after corresponding paragraph:
```markdown
Illustration theme: [concept in 2-3 words]
Style: [style name]
Visual composition:
- Main visual: [description matching style]
- Layout: [element positioning]
- Decorative elements: [style-appropriate decorations]
Color scheme:
- Primary: [style primary color]
- Background: [style background color]
- Accent: [style accent color]
Text content (if any):
- [Any labels or captions in content language]
Style notes: [specific style characteristics]
![description](illustrations/{slug}/NN-{type}-{slug}.png)
```
### Step 6: Generate Images
Alt text: concise description in article's language.
**Image Generation Skill Selection**:
1. Check available image generation skills
2. If multiple skills available, ask user to choose
**Generation Flow**:
1. Call selected image generation skill with prompt file and output path
2. Generate images sequentially
3. After each image, output progress: "Generated X/N"
4. On failure, auto-retry once
5. If retry fails, log reason, continue to next
### Step 7: Update Article
Insert generated images at corresponding positions:
```markdown
![illustration description]([article-name]/illustrations/illustration-[slug].png)
```
**Insertion Rules**:
- Insert image after corresponding paragraph
- Leave one blank line before and after image
- Alt text uses concise description in article's language
### Step 8: Output Summary
**5.2 Output Summary**
```
Article Illustration Complete!
Article: [article path]
Article: [path]
Type: [type name]
Density: [minimal/balanced/rich]
Style: [style name]
Generated: X/N images successful
Location: [directory path]
Images: X/N generated
Illustration Positions:
- illustration-xxx.png → After section "Section Name"
- illustration-yyy.png → After section "Another Section"
Positions:
- 01-infographic-xxx.png → After "[Section]"
- 02-infographic-yyy.png → After "[Section]"
[If failures]
Failed:
- NN-type-zzz.png: [reason]
```
## Prompt Construction
### Principles
Good prompts must include:
1. **Layout Structure First**: Describe composition, zones, flow direction
2. **Specific Data/Labels**: Use actual numbers, terms from article
3. **Visual Relationships**: How elements connect
4. **Semantic Colors**: Meaning-based color choices (red=warning, green=efficient)
5. **Style Characteristics**: Line treatment, texture, mood
6. **Aspect Ratio**: End with ratio and complexity level
### Type-Specific Prompts
**Infographic**:
```
[Title] - Data Visualization
Layout: [grid/radial/hierarchical]
ZONES:
- Zone 1: [data point with specific values]
- Zone 2: [comparison with metrics]
- Zone 3: [summary/conclusion]
LABELS: [specific numbers, percentages, terms from article]
COLORS: [semantic color mapping]
STYLE: [style characteristics]
ASPECT: 16:9
```
**Scene**:
```
[Title] - Atmospheric Scene
FOCAL POINT: [main subject]
ATMOSPHERE: [lighting, mood, environment]
MOOD: [emotion to convey]
COLOR TEMPERATURE: [warm/cool/neutral]
STYLE: [style characteristics]
ASPECT: 16:9
```
**Flowchart**:
```
[Title] - Process Flow
Layout: [left-right/top-down/circular]
STEPS:
1. [Step name] - [brief description]
2. [Step name] - [brief description]
...
[If any failures]
Failed:
- illustration-zzz.png: [failure reason]
CONNECTIONS: [arrow types, decision points]
STYLE: [style characteristics]
ASPECT: 16:9
```
## Illustration Modification
Support for modifying individual illustrations after initial generation.
### Edit Single Illustration
Regenerate a specific illustration with modified prompt:
1. Identify illustration to edit (e.g., `illustration-concept-overview.png`)
2. Update prompt in `prompts/illustration-concept-overview.md` if needed
3. If content changes significantly, update slug in filename
4. Regenerate image
5. Update article if image reference changed
### Add New Illustration
Add a new illustration to the article:
1. Identify insertion position in article
2. Create new prompt with appropriate slug (e.g., `illustration-new-concept.md`)
3. Generate new illustration image
4. Update `outline.md` with new illustration entry
5. Insert image reference in article at the specified position
### Delete Illustration
Remove an illustration from the article:
1. Identify illustration to delete (e.g., `illustration-concept-overview.png`)
2. Remove image file and prompt file
3. Remove image reference from article
4. Update `outline.md` to remove illustration entry
### File Naming Convention
Files use meaningful slugs for better readability:
**Comparison**:
```
illustration-[slug].png
illustration-[slug].md (in prompts/)
[Title] - Comparison View
LEFT SIDE - [Option A]:
- [Point 1]
- [Point 2]
RIGHT SIDE - [Option B]:
- [Point 1]
- [Point 2]
DIVIDER: [visual separator]
STYLE: [style characteristics]
ASPECT: 16:9
```
Examples:
- `illustration-concept-overview.png`
- `illustration-workflow-diagram.png`
- `illustration-key-benefits.png`
**Framework**:
```
[Title] - Conceptual Framework
**Slug rules**:
- Derived from illustration purpose/content (kebab-case)
- Must be unique within the article
- When content changes significantly, update slug accordingly
STRUCTURE: [hierarchical/network/matrix]
NODES:
- [Concept 1] - [role]
- [Concept 2] - [role]
RELATIONSHIPS: [how nodes connect]
STYLE: [style characteristics]
ASPECT: 16:9
```
**Timeline**:
```
[Title] - Chronological View
DIRECTION: [horizontal/vertical]
EVENTS:
- [Date/Period 1]: [milestone]
- [Date/Period 2]: [milestone]
MARKERS: [visual indicators]
STYLE: [style characteristics]
ASPECT: 16:9
```
### What to Avoid
- Vague descriptions ("a nice image")
- Literal metaphor illustrations
- Missing concrete labels/annotations
- Generic decorative elements
## Modification
| Action | Steps |
|--------|-------|
| **Edit** | Update prompt → Regenerate → Update reference |
| **Add** | Identify position → Create prompt → Generate → Update outline → Insert reference |
| **Delete** | Delete files → Remove reference → Update outline |
## References
| File | Content |
|------|---------|
| `references/styles/<style>.md` | Full style specifications with colors, elements, rules |
## Notes
- Illustrations serve the content: supplement information, visualize concepts
- Maintain selected style consistency across all illustrations in one article
- Image generation typically takes 10-30 seconds per image
- Sensitive figures should use cartoon alternatives
- Prompts written in user's confirmed language preference
- Illustration text (labels, captions) should match article language
| [references/styles.md](references/styles.md) | Style gallery & compatibility matrix |
| `references/styles/<style>.md` | Full style specifications |
| `references/config/preferences-schema.md` | EXTEND.md schema |
| `references/config/first-time-setup.md` | First-time setup flow |
## Extension Support
Custom styles and configurations via EXTEND.md.
**Check paths** (priority order):
1. `.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (project)
2. `~/.baoyu-skills/baoyu-article-illustrator/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.
@@ -0,0 +1,113 @@
---
name: first-time-setup
description: First-time setup flow for baoyu-article-illustrator 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 preferred language for all questions. Do not always use English.
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
### Question 1: Watermark
```
header: "Watermark"
question: "Watermark text for generated illustrations? 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 Style
```
header: "Style"
question: "Default illustration style preference? Or type another style name or your custom style"
options:
- label: "None (Recommended)"
description: "Auto-select based on content analysis"
- label: "notion"
description: "Minimalist hand-drawn line art"
- label: "warm"
description: "Friendly, approachable, personal"
```
### Question 3: 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-article-illustrator/EXTEND.md` | Current project |
| User | `~/.baoyu-skills/baoyu-article-illustrator/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_style:
name: [selected style or null]
description: ""
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,116 @@
---
name: preferences-schema
description: EXTEND.md YAML schema for baoyu-article-illustrator 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_style:
name: null # Built-in or custom style name
description: "" # Override/notes
language: null # zh|en|ja|ko|auto
custom_styles:
- name: my-style
description: "Style description"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8", "#48CAE4"]
visual_elements: "Clean lines, geometric shapes"
typography: "Modern sans-serif"
best_for: "Business, education"
---
```
## 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_style.name` | string | null | Style name or null |
| `preferred_style.description` | string | "" | Custom notes/override |
| `language` | string | null | Output language (null = auto-detect) |
| `custom_styles` | array | [] | User-defined styles |
## 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 |
## 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: "@myusername"
preferred_style:
name: notion
---
```
## Example: Full Preferences
```yaml
---
version: 1
watermark:
enabled: true
content: "@myaccount"
position: bottom-right
opacity: 0.5
preferred_style:
name: notion
description: "Clean illustrations for tech articles"
language: zh
custom_styles:
- name: corporate
description: "Professional B2B style"
color_palette:
primary: ["#1E3A5F", "#4A90D9"]
background: "#F5F7FA"
accents: ["#00B4D8", "#48CAE4"]
visual_elements: "Clean lines, subtle gradients, geometric shapes"
typography: "Modern sans-serif, professional"
best_for: "Business, SaaS, enterprise"
---
```
@@ -0,0 +1,117 @@
# Style Reference
## Style Gallery
| Style | Description | Best For |
|-------|-------------|----------|
| `notion` (Default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
| `elegant` | Refined, sophisticated | Business, thought leadership |
| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
| `blueprint` | Technical schematics | Architecture, system design, engineering |
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |
Full specifications: `references/styles/<style>.md`
## Type × Style Compatibility Matrix
| | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific |
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| infographic | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ |
| scene | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ |
| flowchart | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ |
| comparison | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
| framework | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ |
| timeline | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
## Auto Selection by Type
| Type | Primary Style | Secondary Styles |
|------|---------------|------------------|
| infographic | blueprint | notion, editorial, scientific |
| scene | warm | watercolor, elegant |
| flowchart | notion | blueprint, editorial |
| comparison | notion | elegant, editorial |
| framework | blueprint | notion, scientific |
| timeline | elegant | warm, editorial |
## Auto Selection by Content Signals
| Content Signals | Recommended Type | Recommended Style |
|-----------------|------------------|-------------------|
| API, metrics, data, comparison, numbers | infographic | blueprint, notion |
| Story, emotion, journey, experience, personal | scene | warm, watercolor |
| How-to, steps, workflow, process, tutorial | flowchart | notion, minimal |
| vs, pros/cons, before/after, alternatives | comparison | notion, elegant |
| Framework, model, architecture, principles | framework | blueprint, notion |
| History, timeline, progress, evolution | timeline | elegant, warm |
| Knowledge, concept, productivity, SaaS, tool | infographic | notion |
| Business, professional, strategy, corporate | framework | elegant |
| Biology, chemistry, medical, scientific | infographic | scientific |
| Explainer, journalism, magazine, investigation | infographic | editorial |
## Style Characteristics by Type
### infographic + blueprint
- Technical precision, schematic lines
- Grid-based layout, clear zones
- Monospace labels, data-focused
- Blue/white color scheme
### infographic + notion
- Hand-drawn feel, approachable
- Soft icons, rounded elements
- Neutral palette, clean backgrounds
- Perfect for SaaS/productivity
### scene + warm
- Golden hour lighting, cozy atmosphere
- Soft gradients, natural textures
- Inviting, personal feeling
- Great for storytelling
### scene + watercolor
- Artistic, painterly effect
- Soft edges, color bleeding
- Dreamy, creative mood
- Best for lifestyle/travel
### flowchart + notion
- Clear step indicators
- Simple arrow connections
- Minimal decoration
- Focus on process clarity
### flowchart + blueprint
- Technical precision
- Detailed connection points
- Engineering aesthetic
- For complex systems
### comparison + elegant
- Refined dividers
- Balanced typography
- Professional appearance
- Business comparisons
### framework + blueprint
- Precise node connections
- Hierarchical clarity
- System architecture feel
- Technical frameworks
### timeline + elegant
- Sophisticated markers
- Refined typography
- Historical gravitas
- Professional presentations
### timeline + warm
- Friendly progression
- Organic flow
- Personal journey feel
- Growth narratives
+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.
+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):