mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-13 14:19:47 +08:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jim Liu 宝玉
|
b1cbd1d527 | ||
|
Jim Liu 宝玉
|
7500a3b106 | ||
|
Jim Liu 宝玉
|
658c5dee71 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.15.3"
|
||||
"version": "1.17.1"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -2,6 +2,39 @@
|
||||
|
||||
English | [中文](./CHANGELOG.zh.md)
|
||||
|
||||
## 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
|
||||
|
||||
@@ -2,6 +2,39 @@
|
||||
|
||||
[English](./CHANGELOG.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
|
||||
|
||||
### 重构
|
||||
|
||||
@@ -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**:
|
||||
@@ -426,42 +431,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 +477,10 @@ Smart article illustration skill. Analyzes article content and generates illustr
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| notion | elegant | warm |
|
||||
|  |  |  |
|
||||
| minimal | playful | nature |
|
||||
|  |  |  |
|
||||
| sketch | watercolor | vintage |
|
||||
|  |  |  |
|
||||
| scientific | chalkboard | editorial |
|
||||
|  |  |  |
|
||||
| flat | retro | blueprint |
|
||||
|  |  |  |
|
||||
| vector-illustration | sketch-notes | pixel-art |
|
||||
|  |  |  |
|
||||
| intuition-machine | fantasy-animation | flat-doodle |
|
||||
|  |  |  |
|
||||
| minimal | blueprint | watercolor |
|
||||
|  |  | |
|
||||
| editorial | scientific | |
|
||||
|
||||
#### baoyu-post-to-x
|
||||
|
||||
|
||||
+38
-38
@@ -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`
|
||||
|
||||
**风格预览**：
|
||||
@@ -426,42 +431,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 +477,10 @@ npx skills add jimliu/baoyu-skills
|
||||
|:---:|:---:|:---:|
|
||||
|  |  |  |
|
||||
| notion | elegant | warm |
|
||||
|  |  |  |
|
||||
| minimal | playful | nature |
|
||||
|  |  |  |
|
||||
| sketch | watercolor | vintage |
|
||||
|  |  |  |
|
||||
| scientific | chalkboard | editorial |
|
||||
|  |  |  |
|
||||
| flat | retro | blueprint |
|
||||
|  |  |  |
|
||||
| vector-illustration | sketch-notes | pixel-art |
|
||||
|  |  |  |
|
||||
| intuition-machine | fantasy-animation | flat-doodle |
|
||||
|  |  |  |
|
||||
| minimal | blueprint | watercolor |
|
||||
|  |  | |
|
||||
| editorial | scientific | |
|
||||
|
||||
#### baoyu-post-to-x
|
||||
|
||||
|
||||
@@ -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]
|
||||
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
```
|
||||
|
||||
**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
|
||||
+412
-199
@@ -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 |
|
||||
+133
-405
@@ -1,74 +1,47 @@
|
||||
---
|
||||
name: baoyu-infographic
|
||||
description: Generate professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", or "visual summary".
|
||||
description: Generates professional infographics with 20 layout types and 17 visual styles. Analyzes content, recommends layout×style combinations, and generates publication-ready infographics. Use when user asks to create "infographic", "信息图", "visual summary", or "可视化".
|
||||
---
|
||||
|
||||
# Infographic Generator
|
||||
|
||||
Generate professional infographics with two dimensions: layout (information structure) and style (visual aesthetics).
|
||||
Two dimensions: **layout** (information structure) × **style** (visual aesthetics). Freely combine any layout with any style.
|
||||
|
||||
## Usage
|
||||
|
||||
```bash
|
||||
# Auto-recommend combinations based on content
|
||||
/baoyu-infographic path/to/content.md
|
||||
|
||||
# Specify layout
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers
|
||||
|
||||
# Specify style (default: craft-handmade)
|
||||
/baoyu-infographic path/to/content.md --style technical-schematic
|
||||
|
||||
# Specify both
|
||||
/baoyu-infographic path/to/content.md --layout funnel --style corporate-memphis
|
||||
|
||||
# With aspect ratio
|
||||
/baoyu-infographic path/to/content.md --aspect portrait
|
||||
|
||||
# Direct content input
|
||||
/baoyu-infographic
|
||||
[paste content]
|
||||
|
||||
# Direct input with options
|
||||
/baoyu-infographic --layout linear-progression --style aged-academia
|
||||
[paste content]
|
||||
/baoyu-infographic path/to/content.md --layout hierarchical-layers --style technical-schematic
|
||||
/baoyu-infographic path/to/content.md --aspect portrait --lang zh
|
||||
/baoyu-infographic # then paste content
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Option | Description |
|
||||
|--------|-------------|
|
||||
| `--layout <name>` | Information layout (20 options, see Layout Gallery) |
|
||||
| `--style <name>` | Visual style (17 options, default: craft-handmade) |
|
||||
| `--aspect <ratio>` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang <code>` | Output language (en, zh, ja, etc.) |
|
||||
|
||||
## Two Dimensions
|
||||
|
||||
| Dimension | Controls | Count |
|
||||
|-----------|----------|-------|
|
||||
| **Layout** | Information structure: hierarchy, flow, relationships | 20 types |
|
||||
| **Style** | Visual aesthetics: colors, textures, artistic treatment | 17 types |
|
||||
|
||||
Layout × Style can be freely combined. Example: `--layout hierarchical-layers --style craft-handmade` creates a hierarchy with playful hand-drawn aesthetics.
|
||||
| Option | Values |
|
||||
|--------|--------|
|
||||
| `--layout` | 20 options (see Layout Gallery), default: bento-grid |
|
||||
| `--style` | 17 options (see Style Gallery), default: craft-handmade |
|
||||
| `--aspect` | landscape (16:9), portrait (9:16), square (1:1) |
|
||||
| `--lang` | en, zh, ja, etc. |
|
||||
|
||||
## Layout Gallery
|
||||
|
||||
| Layout | Best For |
|
||||
|--------|----------|
|
||||
| `linear-progression` | Timelines, step-by-step processes, tutorials |
|
||||
| `linear-progression` | Timelines, processes, tutorials |
|
||||
| `binary-comparison` | A vs B, before-after, pros-cons |
|
||||
| `comparison-matrix` | Multi-factor comparisons |
|
||||
| `hierarchical-layers` | Pyramids, concentric circles, priority levels |
|
||||
| `hierarchical-layers` | Pyramids, priority levels |
|
||||
| `tree-branching` | Categories, taxonomies |
|
||||
| `hub-spoke` | Central concept with related items |
|
||||
| `structural-breakdown` | Exploded views, cross-sections, part labeling |
|
||||
| `structural-breakdown` | Exploded views, cross-sections |
|
||||
| `bento-grid` | Multiple topics, overview (default) |
|
||||
| `iceberg` | Surface vs hidden aspects |
|
||||
| `bridge` | Problem-solution, gap-crossing |
|
||||
| `funnel` | Conversion processes, filtering |
|
||||
| `isometric-map` | Spatial relationships, locations |
|
||||
| `dashboard` | Metrics, KPIs, data display |
|
||||
| `bridge` | Problem-solution |
|
||||
| `funnel` | Conversion, filtering |
|
||||
| `isometric-map` | Spatial relationships |
|
||||
| `dashboard` | Metrics, KPIs |
|
||||
| `periodic-table` | Categorized collections |
|
||||
| `comic-strip` | Narratives, sequences |
|
||||
| `story-mountain` | Plot structure, tension arcs |
|
||||
@@ -77,415 +50,170 @@ Layout × Style can be freely combined. Example: `--layout hierarchical-layers -
|
||||
| `winding-roadmap` | Journey, milestones |
|
||||
| `circular-flow` | Cycles, recurring processes |
|
||||
|
||||
Detailed layout definitions: `references/layouts/<layout>.md`
|
||||
Full definitions: `references/layouts/<layout>.md`
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description |
|
||||
|-------|-------------|
|
||||
| `craft-handmade` (Default) | Hand-drawn illustration, paper craft aesthetic |
|
||||
| `claymation` | 3D clay figures, playful stop-motion |
|
||||
| `kawaii` | Japanese cute, big eyes, pastel colors |
|
||||
| `storybook-watercolor` | Soft painted illustrations, whimsical |
|
||||
| `chalkboard` | Colorful chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow on dark, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone dots, high contrast |
|
||||
| `aged-academia` | Vintage science, sepia sketches |
|
||||
| `corporate-memphis` | Flat vector people, vibrant fills |
|
||||
| `technical-schematic` | Blueprint, isometric 3D, engineering |
|
||||
| `origami` | Folded paper forms, geometric |
|
||||
| `pixel-art` | Retro 8-bit, nostalgic gaming |
|
||||
| `ui-wireframe` | Grayscale boxes, interface mockup |
|
||||
| `subway-map` | Transit diagram, colored lines |
|
||||
| `ikea-manual` | Minimal line art, assembly style |
|
||||
| `knolling` | Organized flat-lay, top-down |
|
||||
| `lego-brick` | Toy brick construction, playful |
|
||||
| `craft-handmade` | Hand-drawn, paper craft (default) |
|
||||
| `claymation` | 3D clay figures, stop-motion |
|
||||
| `kawaii` | Japanese cute, pastels |
|
||||
| `storybook-watercolor` | Soft painted, whimsical |
|
||||
| `chalkboard` | Chalk on black board |
|
||||
| `cyberpunk-neon` | Neon glow, futuristic |
|
||||
| `bold-graphic` | Comic style, halftone |
|
||||
| `aged-academia` | Vintage science, sepia |
|
||||
| `corporate-memphis` | Flat vector, vibrant |
|
||||
| `technical-schematic` | Blueprint, engineering |
|
||||
| `origami` | Folded paper, geometric |
|
||||
| `pixel-art` | Retro 8-bit |
|
||||
| `ui-wireframe` | Grayscale interface mockup |
|
||||
| `subway-map` | Transit diagram |
|
||||
| `ikea-manual` | Minimal line art |
|
||||
| `knolling` | Organized flat-lay |
|
||||
| `lego-brick` | Toy brick construction |
|
||||
|
||||
Detailed style definitions: `references/styles/<style>.md`
|
||||
Full definitions: `references/styles/<style>.md`
|
||||
|
||||
## Recommended Combinations
|
||||
|
||||
Based on content analysis, the system recommends 3-5 layout×style combinations:
|
||||
|
||||
| Content Type | Recommended Combination |
|
||||
|--------------|------------------------|
|
||||
| Content Type | Layout + Style |
|
||||
|--------------|----------------|
|
||||
| Timeline/History | `linear-progression` + `craft-handmade` |
|
||||
| Step-by-step Process | `linear-progression` + `ikea-manual` |
|
||||
| Comparison (A vs B) | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy/Levels | `hierarchical-layers` + `craft-handmade` |
|
||||
| Relationships/Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion/Sales | `funnel` + `corporate-memphis` |
|
||||
| Recurring Process | `circular-flow` + `craft-handmade` |
|
||||
| Technical/System | `structural-breakdown` + `technical-schematic` |
|
||||
| Data/Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational/Overview | `bento-grid` + `chalkboard` |
|
||||
| Journey/Roadmap | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories/Types | `periodic-table` + `bold-graphic` |
|
||||
| Step-by-step | `linear-progression` + `ikea-manual` |
|
||||
| A vs B | `binary-comparison` + `corporate-memphis` |
|
||||
| Hierarchy | `hierarchical-layers` + `craft-handmade` |
|
||||
| Overlap | `venn-diagram` + `craft-handmade` |
|
||||
| Conversion | `funnel` + `corporate-memphis` |
|
||||
| Cycles | `circular-flow` + `craft-handmade` |
|
||||
| Technical | `structural-breakdown` + `technical-schematic` |
|
||||
| Metrics | `dashboard` + `corporate-memphis` |
|
||||
| Educational | `bento-grid` + `chalkboard` |
|
||||
| Journey | `winding-roadmap` + `storybook-watercolor` |
|
||||
| Categories | `periodic-table` + `bold-graphic` |
|
||||
|
||||
**Default combination**: `bento-grid` + `craft-handmade`
|
||||
Default: `bento-grid` + `craft-handmade`
|
||||
|
||||
## File Structure
|
||||
|
||||
Each session creates an independent directory:
|
||||
## Output Structure
|
||||
|
||||
```
|
||||
infographic/{topic-slug}/
|
||||
├── source-{slug}.{ext} # Source files
|
||||
├── analysis.md # Deep content analysis
|
||||
├── structured-content.md # Instructional content structure
|
||||
├── prompts/
|
||||
│ └── infographic.md # Generated prompt
|
||||
└── infographic.png # Output image
|
||||
├── source-{slug}.{ext}
|
||||
├── analysis.md
|
||||
├── structured-content.md
|
||||
├── prompts/infographic.md
|
||||
└── infographic.png
|
||||
```
|
||||
|
||||
**Slug Generation**:
|
||||
1. Extract main topic from content (2-4 words, kebab-case)
|
||||
2. Example: "Machine Learning Basics" → `ml-basics`
|
||||
Slug: 2-4 words kebab-case from topic. Conflict: append `-YYYYMMDD-HHMMSS`.
|
||||
|
||||
**Conflict Resolution**:
|
||||
If `infographic/{topic-slug}/` already exists:
|
||||
- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS`
|
||||
- Example: `ml-basics` exists → `ml-basics-20260120-103052`
|
||||
## Core Principles
|
||||
|
||||
## Instructional Design Approach
|
||||
|
||||
This skill applies a **world-class instructional designer** mindset to infographic creation:
|
||||
|
||||
1. **Deep Understanding**: Read and comprehend the source material thoroughly
|
||||
2. **Learning Objectives**: Identify what the viewer should understand after seeing the infographic
|
||||
3. **Information Architecture**: Structure content for maximum clarity and retention
|
||||
4. **Visual Storytelling**: Use visuals to communicate complex ideas accessibly
|
||||
5. **Verbatim Data**: Preserve all source data exactly as written—no summarization or rephrasing of facts
|
||||
- Preserve all source data **verbatim**—no summarization or rephrasing
|
||||
- Define learning objectives before structuring content
|
||||
- Structure for visual communication (headlines, labels, visual elements)
|
||||
|
||||
## Workflow
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
### Step 1: Setup & Analyze
|
||||
|
||||
Read source content and perform deep instructional analysis.
|
||||
**1.1 Load Preferences (EXTEND.md)**
|
||||
|
||||
**Actions**:
|
||||
1. **Save source content** (if not already a file):
|
||||
- If user provides a file path: use as-is
|
||||
- If user pastes content: save to `source.md` in target directory
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
2. **Deep reading**:
|
||||
- Read the entire document thoroughly
|
||||
- Develop deep understanding before proceeding
|
||||
- Identify the core message and purpose
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-infographic/EXTEND.md && echo "project"
|
||||
|
||||
3. **Content analysis**:
|
||||
| Aspect | Questions to Answer |
|
||||
|--------|---------------------|
|
||||
| **Main Topic** | What is this content fundamentally about? |
|
||||
| **Data Type** | Timeline? Hierarchy? Comparison? Process? Relationships? |
|
||||
| **Complexity** | Simple (3-5 points) or complex (6-10+ points)? |
|
||||
| **Tone** | Technical, educational, playful, serious, persuasive? |
|
||||
| **Audience** | Who is the intended viewer? What do they already know? |
|
||||
|
||||
4. **Language detection**:
|
||||
- Detect **source language** from content
|
||||
- Detect **user language** from conversation
|
||||
- Note if source_language ≠ user_language (will ask in Step 4)
|
||||
|
||||
5. **Extract design instructions** from user input:
|
||||
- Style preferences (colors, mood, aesthetic)
|
||||
- Layout preferences (structure, organization)
|
||||
- Any specific visual requirements
|
||||
- Separate these from content—they go in the Design Instructions section
|
||||
|
||||
6. **Save to `analysis.md`**
|
||||
|
||||
**Analysis Output Format**:
|
||||
```yaml
|
||||
---
|
||||
title: "[Main topic title]"
|
||||
topic: "[Category: educational/technical/business/etc.]"
|
||||
data_type: "[timeline/hierarchy/comparison/process/etc.]"
|
||||
complexity: "[simple/moderate/complex]"
|
||||
source_language: "[detected language]"
|
||||
user_language: "[user's language]"
|
||||
---
|
||||
|
||||
## Main Topic
|
||||
[1-2 sentence summary of what this content is about]
|
||||
|
||||
## Learning Objectives
|
||||
After viewing this infographic, the viewer should understand:
|
||||
1. [Primary objective]
|
||||
2. [Secondary objective]
|
||||
3. [Tertiary objective if applicable]
|
||||
|
||||
## Target Audience
|
||||
- **Knowledge Level**: [Beginner/Intermediate/Expert]
|
||||
- **Context**: [Why they're viewing this]
|
||||
- **Expectations**: [What they hope to learn]
|
||||
|
||||
## Content Type Analysis
|
||||
- **Data Structure**: [How information relates to itself]
|
||||
- **Key Relationships**: [What connects to what]
|
||||
- **Visual Opportunities**: [What can be shown rather than told]
|
||||
|
||||
## Design Instructions (from user input)
|
||||
[Any style, color, layout, or visual preferences extracted from user's steering prompt]
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-infographic/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-infographic/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-infographic/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ Ask user with AskUserQuestion (see references/config/first-time-setup.md) │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**EXTEND.md Supports**: Preferred layout/style | Default aspect ratio | Custom style definitions | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
**1.2 Analyze Content → `analysis.md`**
|
||||
|
||||
1. Save source content (file path or paste → `source.md`)
|
||||
2. Analyze: topic, data type, complexity, tone, audience
|
||||
3. Detect source language and user language
|
||||
4. Extract design instructions from user input
|
||||
5. Save analysis
|
||||
|
||||
See `references/analysis-framework.md` for detailed format.
|
||||
|
||||
### Step 2: Generate Structured Content → `structured-content.md`
|
||||
|
||||
Transform analyzed content into a structured format for the infographic designer.
|
||||
Transform content into infographic structure:
|
||||
1. Title and learning objectives
|
||||
2. Sections with: key concept, content (verbatim), visual element, text labels
|
||||
3. Data points (all statistics/quotes copied exactly)
|
||||
4. Design instructions from user
|
||||
|
||||
**Instructional Design Process**:
|
||||
**Rules**: Markdown only. No new information. All data verbatim.
|
||||
|
||||
1. **Create high-level outline**:
|
||||
- Title that captures the essence
|
||||
- List all main learning objectives
|
||||
- Identify the logical flow
|
||||
See `references/structured-content-template.md` for detailed format.
|
||||
|
||||
2. **Flesh out each section**:
|
||||
- For each learning objective, create a section
|
||||
- Mix conceptual explanations with practical elements
|
||||
- Preserve all source data **verbatim**—do not summarize or rephrase
|
||||
### Step 3: Recommend Combinations
|
||||
|
||||
3. **Structure for visual communication**:
|
||||
- Identify what becomes a headline
|
||||
- Identify what becomes supporting text
|
||||
- Identify what becomes a visual element
|
||||
- Identify data points, statistics, or quotes
|
||||
|
||||
**Critical Rules**:
|
||||
| Rule | Requirement |
|
||||
|------|-------------|
|
||||
| **Output format** | Markdown only |
|
||||
| **Tone** | Expert trainer: knowledgeable, clear, encouraging |
|
||||
| **No new information** | Do not add anything not in the source |
|
||||
| **Verbatim data** | All statistics, quotes, and facts copied exactly |
|
||||
|
||||
**Structured Content Format**:
|
||||
```markdown
|
||||
# [Infographic Title]
|
||||
|
||||
## Overview
|
||||
[Brief description of what this infographic conveys]
|
||||
|
||||
## Learning Objectives
|
||||
The viewer will understand:
|
||||
1. [Objective 1]
|
||||
2. [Objective 2]
|
||||
3. [Objective 3]
|
||||
|
||||
---
|
||||
|
||||
## Section 1: [Section Title]
|
||||
|
||||
**Key Concept**: [One-sentence summary]
|
||||
|
||||
**Content**:
|
||||
- [Point 1 - verbatim from source]
|
||||
- [Point 2 - verbatim from source]
|
||||
- [Point 3 - verbatim from source]
|
||||
|
||||
**Visual Element**: [What to show visually]
|
||||
|
||||
**Text Labels**:
|
||||
- Headline: "[Exact text for headline]"
|
||||
- Subhead: "[Exact text for subhead]"
|
||||
- Labels: "[Label 1]", "[Label 2]", ...
|
||||
|
||||
---
|
||||
|
||||
## Section 2: [Section Title]
|
||||
[Continue pattern...]
|
||||
|
||||
---
|
||||
|
||||
## Data Points (Verbatim)
|
||||
[All statistics, numbers, quotes exactly as they appear in source]
|
||||
- "[Exact quote or statistic 1]"
|
||||
- "[Exact quote or statistic 2]"
|
||||
|
||||
---
|
||||
|
||||
## Design Instructions
|
||||
[Extracted from user's steering prompt]
|
||||
- Style: [preferences]
|
||||
- Colors: [preferences]
|
||||
- Layout: [preferences]
|
||||
- Other: [any other visual requirements]
|
||||
```
|
||||
|
||||
### Step 3: Generate Layout×Style Recommendations
|
||||
|
||||
Based on analysis and structured content, recommend 3-5 combinations.
|
||||
|
||||
**Selection Criteria**:
|
||||
| Factor | How to Match |
|
||||
|--------|--------------|
|
||||
| **Data structure** | Timeline→linear-progression, Hierarchy→hierarchical-layers, etc. |
|
||||
| **Content tone** | Technical→technical-schematic, Playful→kawaii, etc. |
|
||||
| **Audience** | Business→corporate-memphis, Educational→chalkboard, etc. |
|
||||
| **Complexity** | Simple→sparse layouts, Complex→dense layouts |
|
||||
| **User preferences** | Honor any design instructions from Step 1 |
|
||||
|
||||
**Format each recommendation**:
|
||||
```
|
||||
[Layout] + [Style]: [Brief rationale based on content analysis]
|
||||
```
|
||||
Recommend 3-5 layout×style combinations based on:
|
||||
- Data structure → matching layout
|
||||
- Content tone → matching style
|
||||
- Audience expectations
|
||||
- User design instructions
|
||||
|
||||
### Step 4: Confirm Options
|
||||
|
||||
**IMPORTANT**: Present ALL options in a single confirmation step using AskUserQuestion.
|
||||
|
||||
**Questions to ask**:
|
||||
|
||||
| Question | When to Ask |
|
||||
|----------|-------------|
|
||||
| Combination | Always (required) |
|
||||
| Aspect ratio | Always |
|
||||
| Language | Only if `source_language ≠ user_language` |
|
||||
|
||||
**AskUserQuestion format**:
|
||||
|
||||
**Question 1 (Combination)** - always:
|
||||
- Option A (Recommended): [layout] + [style] - [brief rationale]
|
||||
- Option B: [layout] + [style] - [brief rationale]
|
||||
- Option C: [layout] + [style] - [brief rationale]
|
||||
- Custom: Specify your own layout and/or style
|
||||
|
||||
**Question 2 (Aspect)** - always:
|
||||
- landscape (16:9, Recommended) - standard presentation
|
||||
- portrait (9:16) - mobile/social media
|
||||
- square (1:1) - social media posts
|
||||
|
||||
**Question 3 (Language)** - only if source ≠ user language:
|
||||
- [Source language] (matches content)
|
||||
- [User language] (your preference)
|
||||
|
||||
**Language handling**:
|
||||
- If source language = user language: Just inform user
|
||||
- If different: Ask which language to use for all text
|
||||
Present all options in single confirmation:
|
||||
1. **Combination** (always): 3+ options with rationale
|
||||
2. **Aspect** (always): landscape/portrait/square
|
||||
3. **Language** (only if source ≠ user language): which language for text
|
||||
|
||||
### Step 5: Generate Prompt → `prompts/infographic.md`
|
||||
|
||||
Create the image generation prompt.
|
||||
|
||||
**Process**:
|
||||
1. Read layout definition from `references/layouts/<layout>.md`
|
||||
2. Read style definition from `references/styles/<style>.md`
|
||||
3. Read base prompt template from `references/base-prompt.md`
|
||||
4. Combine with structured content from Step 2
|
||||
5. **All text in prompt uses confirmed language**
|
||||
|
||||
**Prompt Structure**:
|
||||
```markdown
|
||||
Topic: [main topic from analysis]
|
||||
Layout: [selected layout]
|
||||
Style: [selected style]
|
||||
Aspect: [confirmed ratio]
|
||||
Language: [confirmed language]
|
||||
|
||||
## Layout Guidelines
|
||||
[From layout definition file]
|
||||
|
||||
## Style Guidelines
|
||||
[From style definition file]
|
||||
|
||||
## Content to Visualize
|
||||
|
||||
### Learning Objectives
|
||||
[From structured-content.md]
|
||||
|
||||
### Sections
|
||||
[From structured-content.md - each section with its visual elements]
|
||||
|
||||
### Data Points (Verbatim)
|
||||
[All exact statistics, quotes, and facts from source]
|
||||
|
||||
## Text Labels (in [language])
|
||||
[All text that appears in the infographic, organized by section]
|
||||
|
||||
## Design Instructions
|
||||
[Any specific visual requirements from user's steering prompt]
|
||||
```
|
||||
Combine:
|
||||
1. Layout definition from `references/layouts/<layout>.md`
|
||||
2. Style definition from `references/styles/<style>.md`
|
||||
3. Base template from `references/base-prompt.md`
|
||||
4. Structured content from Step 2
|
||||
5. All text in confirmed language
|
||||
|
||||
### Step 6: Generate Image
|
||||
|
||||
**Image Generation Skill Selection**:
|
||||
1. Check available image generation skills
|
||||
2. If multiple skills available, ask user to choose
|
||||
|
||||
**Generation**:
|
||||
Call selected image generation skill with:
|
||||
- Prompt file path: `prompts/infographic.md`
|
||||
- Output path: `infographic.png`
|
||||
- Aspect ratio parameter if supported
|
||||
|
||||
**Error handling**:
|
||||
- On failure, auto-retry once before reporting error
|
||||
- If retry fails, inform user with error details
|
||||
1. Select available image generation skill (ask user if multiple)
|
||||
2. Call with prompt file and output path
|
||||
3. On failure, auto-retry once
|
||||
|
||||
### Step 7: Output Summary
|
||||
|
||||
```
|
||||
Infographic Generated!
|
||||
|
||||
Topic: [topic from analysis]
|
||||
Layout: [layout name]
|
||||
Style: [style name]
|
||||
Aspect: [aspect ratio]
|
||||
Language: [confirmed language]
|
||||
Location: [output directory path]
|
||||
|
||||
Learning Objectives Covered:
|
||||
1. [Objective 1] ✓
|
||||
2. [Objective 2] ✓
|
||||
3. [Objective 3] ✓
|
||||
|
||||
Files:
|
||||
✓ analysis.md
|
||||
✓ structured-content.md
|
||||
✓ prompts/infographic.md
|
||||
✓ infographic.png
|
||||
|
||||
Preview the image to verify it matches your expectations.
|
||||
```
|
||||
|
||||
## Quality Checklist
|
||||
|
||||
Before generating the final image, verify:
|
||||
|
||||
- [ ] All source data preserved verbatim (no summarization)
|
||||
- [ ] Learning objectives clearly represented
|
||||
- [ ] Layout matches information structure
|
||||
- [ ] Style matches content tone and audience
|
||||
- [ ] All text labels in correct language
|
||||
- [ ] Design instructions from user honored
|
||||
- [ ] Visual hierarchy supports comprehension
|
||||
Report: topic, layout, style, aspect, language, output path, files created.
|
||||
|
||||
## References
|
||||
|
||||
Detailed templates and guidelines in `references/` directory:
|
||||
- `analysis-framework.md` - Instructional design analysis methodology
|
||||
- `structured-content-template.md` - Structured content format and examples
|
||||
- `base-prompt.md` - Base prompt template for image generation
|
||||
- `layouts/<layout>.md` - Detailed layout definitions (20 files)
|
||||
- `styles/<style>.md` - Detailed style definitions (17 files)
|
||||
|
||||
## Notes
|
||||
|
||||
- Layout determines information architecture; style determines visual treatment
|
||||
- Default style `craft-handmade` works well with most layouts
|
||||
- Technical content benefits from `technical-schematic` or `ui-wireframe`
|
||||
- Educational content works well with `chalkboard`, `storybook-watercolor`
|
||||
- Business content pairs with `corporate-memphis`, `dashboard`
|
||||
- All text in the infographic uses the confirmed language
|
||||
- **Never add information not present in the source document**
|
||||
- **Statistics and quotes must be copied exactly—no paraphrasing**
|
||||
- `references/analysis-framework.md` - Analysis methodology
|
||||
- `references/structured-content-template.md` - Content format
|
||||
- `references/base-prompt.md` - Prompt template
|
||||
- `references/layouts/<layout>.md` - 20 layout definitions
|
||||
- `references/styles/<style>.md` - 17 style definitions
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom styles and configurations via EXTEND.md.
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-infographic/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-infographic/EXTEND.md` (user)
|
||||
|
||||
If found, load before Step 1. Extension content overrides defaults.
|
||||
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||
|
||||
@@ -36,6 +36,6 @@ Modular grid layout with varied cell sizes, like a bento box.
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly overviews (default)
|
||||
- `craft-handmade`: Friendly overviews (default)
|
||||
- `corporate-memphis`: Business summaries
|
||||
- `pixel-art`: Retro feature grids
|
||||
|
||||
@@ -21,8 +21,16 @@ Hand-drawn and paper craft aesthetic with warm, organic feel.
|
||||
- Organic, slightly imperfect shapes
|
||||
- Layered depth with shadows (paper variant)
|
||||
- Simple cartoon elements and icons
|
||||
- Character illustrations (people, personalities in cartoon form)
|
||||
- Ample whitespace, clean composition
|
||||
- Keywords and core concepts highlighted
|
||||
- **Strictly hand-drawn—no realistic or photographic elements**
|
||||
|
||||
## Style Enforcement
|
||||
|
||||
- All imagery must maintain cartoon/illustrated aesthetic
|
||||
- Replace real photos or realistic figures with hand-drawn equivalents
|
||||
- Maintain consistent line weight and illustration style throughout
|
||||
|
||||
## Typography
|
||||
|
||||
|
||||
@@ -164,11 +164,11 @@ Copy and track progress:
|
||||
|
||||
```
|
||||
XHS Infographic Progress:
|
||||
- [ ] Step 0: Check preferences (EXTEND.md)
|
||||
- [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found
|
||||
- [ ] Step 1: Analyze content → analysis.md
|
||||
- [ ] Step 2: Confirmation 1 - Content understanding ⚠️ REQUIRED
|
||||
- [ ] Step 3: Generate 3 outline + style variants
|
||||
- [ ] Step 4: Confirmation 2 - Outline & style selection ⚠️ REQUIRED
|
||||
- [ ] Step 4: Confirmation 2 - Outline & style & elements selection ⚠️ REQUIRED
|
||||
- [ ] Step 5: Generate images (sequential)
|
||||
- [ ] Step 6: Completion report
|
||||
```
|
||||
@@ -176,33 +176,48 @@ XHS Infographic Progress:
|
||||
### Flow
|
||||
|
||||
```
|
||||
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style] → Generate → Complete
|
||||
Input → Analyze → [Confirm 1] → 3 Outlines → [Confirm 2: Outline + Style + Elements] → Generate → Complete
|
||||
```
|
||||
|
||||
### Step 0: Check Preferences
|
||||
### Step 0: Load Preferences (EXTEND.md) ⚠️
|
||||
|
||||
**Check paths** (priority order):
|
||||
1. `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project)
|
||||
2. `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
**Purpose**: Load user preferences or run first-time setup. **Do NOT skip setup if EXTEND.md not found.**
|
||||
|
||||
**If preferences found**:
|
||||
1. Parse YAML frontmatter
|
||||
2. Display current preferences summary:
|
||||
```
|
||||
Loaded preferences from [path]:
|
||||
- Watermark: [enabled/disabled] "[content]" at [position]
|
||||
- Style: [name] - [description]
|
||||
- Layout: [layout]
|
||||
- Language: [lang]
|
||||
```
|
||||
3. Continue to Step 1
|
||||
Use Bash to check EXTEND.md existence (priority order):
|
||||
|
||||
**If NO preferences found**:
|
||||
1. Ask user with AskUserQuestion (see `references/config/first-time-setup.md`)
|
||||
2. Create EXTEND.md with user choices
|
||||
3. Continue to Step 1
|
||||
```bash
|
||||
# Check project-level first
|
||||
test -f .baoyu-skills/baoyu-xhs-images/EXTEND.md && echo "project"
|
||||
|
||||
Schema reference: `references/config/preferences-schema.md`
|
||||
# Then user-level (cross-platform: $HOME works on macOS/Linux/WSL)
|
||||
test -f "$HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md" && echo "user"
|
||||
```
|
||||
|
||||
┌────────────────────────────────────────────────────┬───────────────────┐
|
||||
│ Path │ Location │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ .baoyu-skills/baoyu-xhs-images/EXTEND.md │ Project directory │
|
||||
├────────────────────────────────────────────────────┼───────────────────┤
|
||||
│ $HOME/.baoyu-skills/baoyu-xhs-images/EXTEND.md │ User home │
|
||||
└────────────────────────────────────────────────────┴───────────────────┘
|
||||
|
||||
┌───────────┬───────────────────────────────────────────────────────────────────────────┐
|
||||
│ Result │ Action │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Found │ Read, parse, display summary → Continue to Step 1 │
|
||||
├───────────┼───────────────────────────────────────────────────────────────────────────┤
|
||||
│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │
|
||||
└───────────┴───────────────────────────────────────────────────────────────────────────┘
|
||||
|
||||
**First-Time Setup** (when EXTEND.md not found):
|
||||
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use AskUserQuestion with ALL questions in ONE call. See `references/config/first-time-setup.md` for question details.
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred style/layout | Custom style definitions | Language preference
|
||||
|
||||
Schema: `references/config/preferences-schema.md`
|
||||
|
||||
### Step 1: Analyze Content → `analysis.md`
|
||||
|
||||
@@ -262,6 +277,11 @@ strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
style_reason: "Warm tones enhance emotional storytelling and personal connection"
|
||||
elements: # from style preset, can be customized in Step 4
|
||||
background: solid-pastel
|
||||
decorations: [clouds, stars-sparkles]
|
||||
emphasis: star-burst
|
||||
typography: highlight
|
||||
layout: balanced # primary layout
|
||||
image_count: 5
|
||||
---
|
||||
@@ -289,15 +309,15 @@ image_count: 5
|
||||
|
||||
Reference: `references/workflows/outline-template.md`
|
||||
|
||||
### Step 4: Confirmation 2 - Outline & Style Selection ⚠️
|
||||
### Step 4: Confirmation 2 - Outline & Style & Elements Selection ⚠️
|
||||
|
||||
**Purpose**: User chooses outline strategy AND confirms visual style. **Do NOT skip.**
|
||||
**Purpose**: User chooses outline strategy, confirms visual style, and customizes elements. **Do NOT skip.**
|
||||
|
||||
**Display each strategy**:
|
||||
- Strategy name + page count + recommended style
|
||||
- Page-by-page summary (P1 → P2 → P3...)
|
||||
|
||||
**Use AskUserQuestion** with two questions:
|
||||
**Use AskUserQuestion** with three questions:
|
||||
|
||||
**Question 1: Outline Strategy**
|
||||
- Strategy A (Recommended if "authentic sharing")
|
||||
@@ -310,11 +330,22 @@ Reference: `references/workflows/outline-template.md`
|
||||
- Or select from: cute / fresh / warm / bold / minimal / retro / pop / notion / chalkboard
|
||||
- Or type custom style description
|
||||
|
||||
**Question 3: Visual Elements** (show after style selection)
|
||||
Display the selected style's default elements from preset, then ask:
|
||||
- Use style defaults (Recommended) - show preview: background, decorations, emphasis
|
||||
- Adjust background - options: solid-pastel / solid-saturated / gradient-linear / gradient-radial / paper-texture / grid
|
||||
- Adjust decorations - options: hearts / stars-sparkles / flowers / clouds / leaves / confetti
|
||||
- Type custom element preferences
|
||||
|
||||
**After response**:
|
||||
- Single strategy → copy to `outline.md` with confirmed style
|
||||
- Combination → merge specified pages with confirmed style
|
||||
- Custom request → regenerate based on feedback
|
||||
- Update `outline.md` frontmatter with final style choice
|
||||
- Style defaults → use preset's Element Combination as-is
|
||||
- Background adjustment → update elements.background with user choice
|
||||
- Decorations adjustment → update elements.decorations with user choice
|
||||
- Custom elements → parse user's preferences into elements fields
|
||||
- Update `outline.md` frontmatter with final style and elements
|
||||
|
||||
### Step 5: Generate Images
|
||||
|
||||
@@ -428,10 +459,4 @@ Detailed templates in `references/` directory:
|
||||
|
||||
## Extension Support
|
||||
|
||||
Custom configurations via EXTEND.md. Loaded in Step 0, overrides defaults.
|
||||
|
||||
**Check paths** (priority): `.baoyu-skills/baoyu-xhs-images/EXTEND.md` (project) → `~/.baoyu-skills/baoyu-xhs-images/EXTEND.md` (user)
|
||||
|
||||
**Supports**: Watermark | Preferred style/layout | Custom style definitions
|
||||
|
||||
**References**: `config/preferences-schema.md` | `config/first-time-setup.md`
|
||||
Custom configurations via EXTEND.md. See **Step 0** for paths and supported options.
|
||||
|
||||
@@ -31,7 +31,7 @@ No EXTEND.md found
|
||||
|
||||
## Questions
|
||||
|
||||
**Language**: Use user's input language or preferred language for all questions. Do not always use English.
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option):
|
||||
|
||||
|
||||
Reference in New Issue
Block a user