chore: release v1.16.0
This commit is contained in:
Jim Liu 宝玉
parent
8d04b71700
commit
658c5dee71
|
|
@ -6,7 +6,7 @@
|
||||||
},
|
},
|
||||||
"metadata": {
|
"metadata": {
|
||||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||||
"version": "1.15.3"
|
"version": "1.16.0"
|
||||||
},
|
},
|
||||||
"plugins": [
|
"plugins": [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
12
CHANGELOG.md
12
CHANGELOG.md
|
|
@ -2,6 +2,18 @@
|
||||||
|
|
||||||
English | [中文](./CHANGELOG.zh.md)
|
English | [中文](./CHANGELOG.zh.md)
|
||||||
|
|
||||||
|
## 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
|
## 1.15.3 - 2026-01-23
|
||||||
|
|
||||||
### Refactor
|
### Refactor
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,18 @@
|
||||||
|
|
||||||
[English](./CHANGELOG.md) | 中文
|
[English](./CHANGELOG.md) | 中文
|
||||||
|
|
||||||
|
## 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
|
## 1.15.3 - 2026-01-23
|
||||||
|
|
||||||
### 重构
|
### 重构
|
||||||
|
|
|
||||||
65
README.md
65
README.md
|
|
@ -426,42 +426,45 @@ Knowledge comic creator with flexible art style × tone combinations. Creates or
|
||||||
|
|
||||||
#### baoyu-article-illustrator
|
#### 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
|
```bash
|
||||||
# Auto-select style based on content
|
# Auto-select type and style based on content
|
||||||
/baoyu-article-illustrator path/to/article.md
|
/baoyu-article-illustrator path/to/article.md
|
||||||
|
|
||||||
# Specify a style
|
# Specify type
|
||||||
/baoyu-article-illustrator path/to/article.md --style warm
|
/baoyu-article-illustrator path/to/article.md --type infographic
|
||||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
|
||||||
|
# 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):
|
**Styles** (visual aesthetics):
|
||||||
|
|
||||||
| Style | Description | Best For |
|
| Style | Description | Best For |
|
||||||
|-------|-------------|----------|
|
|-------|-------------|----------|
|
||||||
| `notion` (default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
|
| `notion` (default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
|
||||||
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
|
| `elegant` | Refined, sophisticated | Business, thought leadership |
|
||||||
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle |
|
| `warm` | Friendly, approachable | Personal growth, lifestyle |
|
||||||
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism |
|
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism |
|
||||||
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides |
|
| `blueprint` | Technical schematics | Architecture, system design |
|
||||||
| `nature` | Organic, calm, earthy | Sustainability, wellness |
|
|
||||||
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming |
|
|
||||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
| `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 |
|
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||||
| `flat` | Modern flat vector illustration | Startups, digital |
|
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
|
||||||
| `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 |
|
|
||||||
|
|
||||||
**Style Previews**:
|
**Style Previews**:
|
||||||
|
|
||||||
|
|
@ -469,18 +472,10 @@ Smart article illustration skill. Analyzes article content and generates illustr
|
||||||
|:---:|:---:|:---:|
|
|:---:|:---:|:---:|
|
||||||
|  |  |  |
|
|  |  |  |
|
||||||
| notion | elegant | warm |
|
| notion | elegant | warm |
|
||||||
|  |  |  |
|
|  |  |  |
|
||||||
| minimal | playful | nature |
|
| minimal | blueprint | watercolor |
|
||||||
|  |  |  |
|
|  |  | |
|
||||||
| sketch | watercolor | vintage |
|
| editorial | scientific | |
|
||||||
|  |  |  |
|
|
||||||
| scientific | chalkboard | editorial |
|
|
||||||
|  |  |  |
|
|
||||||
| flat | retro | blueprint |
|
|
||||||
|  |  |  |
|
|
||||||
| vector-illustration | sketch-notes | pixel-art |
|
|
||||||
|  |  |  |
|
|
||||||
| intuition-machine | fantasy-animation | flat-doodle |
|
|
||||||
|
|
||||||
#### baoyu-post-to-x
|
#### baoyu-post-to-x
|
||||||
|
|
||||||
|
|
|
||||||
63
README.zh.md
63
README.zh.md
|
|
@ -426,42 +426,45 @@ npx skills add jimliu/baoyu-skills
|
||||||
|
|
||||||
#### baoyu-article-illustrator
|
#### baoyu-article-illustrator
|
||||||
|
|
||||||
智能文章插图技能。分析文章内容，在需要视觉辅助的位置生成插图。
|
智能文章插图技能，采用类型 × 风格二维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# 根据内容自动选择风格
|
# 根据内容自动选择类型和风格
|
||||||
/baoyu-article-illustrator path/to/article.md
|
/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 blueprint
|
||||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
|
||||||
|
# 组合类型和风格
|
||||||
|
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**类型**（信息结构）：
|
||||||
|
|
||||||
|
| 类型 | 描述 | 适用场景 |
|
||||||
|
|------|------|----------|
|
||||||
|
| `infographic` | 数据可视化、图表、指标 | 技术文章、数据分析 |
|
||||||
|
| `scene` | 氛围插图、情绪渲染 | 叙事、个人故事 |
|
||||||
|
| `flowchart` | 流程图、步骤可视化 | 教程、工作流 |
|
||||||
|
| `comparison` | 并排对比、前后对照 | 产品比较 |
|
||||||
|
| `framework` | 概念图、关系图 | 方法论、架构 |
|
||||||
|
| `timeline` | 时间线进展 | 历史、项目进度 |
|
||||||
|
|
||||||
**风格**（视觉美学）：
|
**风格**（视觉美学）：
|
||||||
|
|
||||||
| 风格 | 描述 | 适用场景 |
|
| 风格 | 描述 | 适用场景 |
|
||||||
|------|------|----------|
|
|------|------|----------|
|
||||||
| `notion`（默认） | 极简手绘线条画 | 知识分享、SaaS、生产力 |
|
| `notion`（默认） | 极简手绘线条画 | 知识分享、SaaS、生产力 |
|
||||||
| `elegant` | 精致、优雅、专业 | 商业、思想领导力 |
|
| `elegant` | 精致、优雅 | 商业、思想领导力 |
|
||||||
| `warm` | 友好、亲切、人文关怀 | 个人成长、生活方式 |
|
| `warm` | 友好、亲切 | 个人成长、生活方式 |
|
||||||
| `minimal` | 极简、禅意、专注 | 哲学、极简主义 |
|
| `minimal` | 极简、禅意 | 哲学、极简主义 |
|
||||||
| `playful` | 有趣、创意、俏皮 | 教程、新手指南 |
|
| `blueprint` | 技术蓝图 | 架构、系统设计 |
|
||||||
| `nature` | 自然、平静、质朴 | 可持续发展、健康 |
|
|
||||||
| `sketch` | 原始、真实、笔记风格 | 想法、头脑风暴 |
|
|
||||||
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
|
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
|
||||||
| `vintage` | 怀旧做旧纸张美学 | 历史、传记 |
|
|
||||||
| `scientific` | 学术精确图表 | 生物、化学、技术 |
|
|
||||||
| `chalkboard` | 教室粉笔画风格 | 教育、教程 |
|
|
||||||
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
|
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
|
||||||
| `flat` | 现代扁平矢量插画 | 创业公司、数字化 |
|
| `scientific` | 学术精确图表 | 生物、化学、技术 |
|
||||||
| `flat-doodle` | 粗轮廓、粉彩色、可爱风 | 生产力、SaaS、工作流 |
|
|
||||||
| `retro` | 80/90 年代复古鲜艳 | 流行文化、娱乐 |
|
|
||||||
| `blueprint` | 技术蓝图、工程精度 | 架构、系统设计 |
|
|
||||||
| `vector-illustration` | 扁平矢量、黑色轮廓、复古 | 教育、创意、品牌 |
|
|
||||||
| `sketch-notes` | 柔和手绘、温暖感 | 知识分享、教程 |
|
|
||||||
| `pixel-art` | 复古 8-bit 游戏风格 | 游戏、技术、开发者 |
|
|
||||||
| `intuition-machine` | 技术简报、双语标签 | 学术、技术、研究 |
|
|
||||||
| `fantasy-animation` | 吉卜力/迪士尼童话风格 | 故事、儿童、创意 |
|
|
||||||
|
|
||||||
**风格预览**：
|
**风格预览**：
|
||||||
|
|
||||||
|
|
@ -469,18 +472,10 @@ npx skills add jimliu/baoyu-skills
|
||||||
|:---:|:---:|:---:|
|
|:---:|:---:|:---:|
|
||||||
|  |  |  |
|
|  |  |  |
|
||||||
| notion | elegant | warm |
|
| notion | elegant | warm |
|
||||||
|  |  |  |
|
|  |  |  |
|
||||||
| minimal | playful | nature |
|
| minimal | blueprint | watercolor |
|
||||||
|  |  |  |
|
|  |  | |
|
||||||
| sketch | watercolor | vintage |
|
| editorial | scientific | |
|
||||||
|  |  |  |
|
|
||||||
| scientific | chalkboard | editorial |
|
|
||||||
|  |  |  |
|
|
||||||
| flat | retro | blueprint |
|
|
||||||
|  |  |  |
|
|
||||||
| vector-illustration | sketch-notes | pixel-art |
|
|
||||||
|  |  |  |
|
|
||||||
| intuition-machine | fantasy-animation | flat-doodle |
|
|
||||||
|
|
||||||
#### baoyu-post-to-x
|
#### baoyu-post-to-x
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,376 +1,452 @@
|
||||||
---
|
---
|
||||||
name: baoyu-article-illustrator
|
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
|
## Usage
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Auto-select style based on content
|
# Auto-select type and style based on content
|
||||||
/baoyu-article-illustrator path/to/article.md
|
/baoyu-article-illustrator path/to/article.md
|
||||||
|
|
||||||
# Specify a style
|
# Specify type
|
||||||
/baoyu-article-illustrator path/to/article.md --style warm
|
/baoyu-article-illustrator path/to/article.md --type infographic
|
||||||
/baoyu-article-illustrator path/to/article.md --style minimal
|
|
||||||
/baoyu-article-illustrator path/to/article.md --style watercolor
|
|
||||||
|
|
||||||
# Combine with other options
|
# Specify style
|
||||||
/baoyu-article-illustrator path/to/article.md --style playful
|
/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
|
## Options
|
||||||
|
|
||||||
| Option | Description |
|
| 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 Gallery
|
||||||
|
|
||||||
| Style | Description | Best For |
|
| Style | Description | Best For |
|
||||||
|-------|-------------|----------|
|
|-------|-------------|----------|
|
||||||
| `notion` (Default) | Minimalist hand-drawn line art, intellectual | Knowledge sharing, SaaS, productivity |
|
| `notion` (Default) | Minimalist hand-drawn line art | Knowledge sharing, SaaS, productivity |
|
||||||
| `elegant` | Refined, sophisticated, professional | Business, thought leadership |
|
| `elegant` | Refined, sophisticated | Business, thought leadership |
|
||||||
| `warm` | Friendly, approachable, human-centered | Personal growth, lifestyle, education |
|
| `warm` | Friendly, approachable | Personal growth, lifestyle, education |
|
||||||
| `minimal` | Ultra-clean, zen-like, focused | Philosophy, minimalism, core concepts |
|
| `minimal` | Ultra-clean, zen-like | Philosophy, minimalism, core concepts |
|
||||||
| `playful` | Fun, creative, whimsical | Tutorials, beginner guides, fun topics |
|
| `blueprint` | Technical schematics | Architecture, system design, engineering |
|
||||||
| `nature` | Organic, calm, earthy | Sustainability, wellness, outdoor |
|
|
||||||
| `sketch` | Raw, authentic, notebook-style | Ideas, brainstorming, drafts |
|
|
||||||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
| `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 |
|
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||||
| `flat` | Modern flat vector illustration | Startups, digital, contemporary |
|
| `scientific` | Academic precise diagrams | Biology, chemistry, technical research |
|
||||||
| `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 |
|
|
||||||
|
|
||||||
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 |
|
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||||
|----------------|----------------|
|
|
||||||
| 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` |
|
|
||||||
|
|
||||||
## 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}/
|
illustrations/{topic-slug}/
|
||||||
├── source-{slug}.{ext} # Source files (text, images, etc.)
|
├── source-{slug}.{ext}
|
||||||
├── outline.md
|
├── outline.md
|
||||||
├── outline-{style}.md # Style variant outlines
|
|
||||||
├── prompts/
|
├── prompts/
|
||||||
│ ├── illustration-concept-a.md
|
│ └── illustration-{slug}.md
|
||||||
│ ├── illustration-concept-b.md
|
└── NN-{type}-{slug}.png
|
||||||
│ └── ...
|
|
||||||
├── illustration-concept-a.png
|
|
||||||
├── illustration-concept-b.png
|
|
||||||
└── ...
|
|
||||||
```
|
```
|
||||||
|
|
||||||
**Slug Generation**:
|
**Slug**: Extract 2-4 word topic in kebab-case.
|
||||||
1. Extract main topic from content (2-4 words, kebab-case)
|
**Conflict**: Append `-YYYYMMDD-HHMMSS` if exists.
|
||||||
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.
|
|
||||||
|
|
||||||
## Workflow
|
## Workflow
|
||||||
|
|
||||||
### Step 1: Analyze Content & Select Style
|
### Progress
|
||||||
|
|
||||||
1. Read article content
|
```
|
||||||
2. If `--style` specified, use that style
|
- [ ] Step 1: Setup & Analyze
|
||||||
3. Otherwise, scan for style signals and auto-select
|
- [ ] Step 2: Confirm Settings ⚠️ REQUIRED
|
||||||
4. **Language detection**:
|
- [ ] Step 3: Generate Outline
|
||||||
- Detect **source language** from article content
|
- [ ] Step 4: Generate Images
|
||||||
- Detect **user language** from conversation context
|
- [ ] Step 5: Finalize
|
||||||
- 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 2: Identify Illustration Positions
|
### Step 1: Setup & Analyze
|
||||||
|
|
||||||
**Three Purposes of Illustrations**:
|
**1.1 Load Preferences (EXTEND.md)**
|
||||||
1. **Information Supplement**: Help understand abstract concepts
|
|
||||||
2. **Concept Visualization**: Transform abstract ideas into concrete visuals
|
|
||||||
3. **Imagination Guidance**: Create atmosphere, enhance reading experience
|
|
||||||
|
|
||||||
**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
|
- Abstract concepts needing visualization
|
||||||
- Processes/steps needing diagrams
|
- Data comparisons, metrics
|
||||||
- Comparisons needing visual representation
|
- Processes, workflows
|
||||||
- Core arguments needing reinforcement
|
|
||||||
- Scenarios needing imagination guidance
|
|
||||||
|
|
||||||
**Illustration Count**:
|
**What NOT to Illustrate**:
|
||||||
- Consider at least 1 image per major section
|
- Metaphors literally
|
||||||
- Prioritize core arguments and abstract concepts
|
- Decorative scenes without information
|
||||||
- **Principle: More is better than fewer**
|
- Generic illustrations
|
||||||
|
|
||||||
### Step 3: Generate Illustration Plan
|
### Step 2: Confirm Settings ⚠️
|
||||||
|
|
||||||
```markdown
|
**Do NOT skip.** Use AskUserQuestion with 3-4 questions in ONE call.
|
||||||
# Illustration Plan
|
|
||||||
|
|
||||||
**Article**: [article path]
|
**Question 1: Illustration Type**
|
||||||
**Style**: [selected style]
|
|
||||||
**Illustration Count**: N images
|
|
||||||
|
|
||||||
|
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
|
## Illustration 1
|
||||||
|
|
||||||
**Insert Position**: [section name] / [paragraph description]
|
**Position**: [section] / [paragraph]
|
||||||
**Purpose**: [why illustration needed here]
|
**Purpose**: [why this illustration helps]
|
||||||
**Visual Content**: [what the image should show]
|
**Visual Content**: [what to show]
|
||||||
**Filename**: illustration-[slug].png
|
**Type Application**: [how type applies here]
|
||||||
|
**Filename**: 01-infographic-concept-name.png
|
||||||
---
|
|
||||||
|
|
||||||
## Illustration 2
|
## 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**:
|
Follow Prompt Construction principles below. Save each to `prompts/illustration-{slug}.md`.
|
||||||
- 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`)
|
|
||||||
|
|
||||||
2. **Determine which questions to ask**:
|
**4.2 Select Generation Skill**
|
||||||
|
|
||||||
| Question | When to Ask |
|
Check available image generation skills. If multiple, ask user to choose.
|
||||||
|----------|-------------|
|
|
||||||
| Style variant | Always (required) |
|
|
||||||
| Language | Only if `source_language ≠ user_language` |
|
|
||||||
|
|
||||||
3. **Present options** (use AskUserQuestion with all applicable questions):
|
**4.3 Apply Watermark** (if enabled in preferences)
|
||||||
|
|
||||||
**Question 1 (Style)** - always:
|
Add to prompt: `Include a subtle watermark "[content]" positioned at [position] with approximately [opacity*100]% visibility.`
|
||||||
- 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 (Language)** - only if source ≠ user language:
|
**4.4 Generate**
|
||||||
- [Source language] (matches article language)
|
|
||||||
- [User language] (your preference)
|
|
||||||
|
|
||||||
**Language handling**:
|
1. Generate sequentially
|
||||||
- If source language = user language: Just inform user (e.g., "Prompts will be in Chinese")
|
2. After each: "Generated X/N"
|
||||||
- If different: Ask which language to use for prompts
|
3. On failure: auto-retry once, then log and continue
|
||||||
|
|
||||||
4. **Apply selection**:
|
### Step 5: Finalize
|
||||||
- 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
|
|
||||||
|
|
||||||
5. **Proceed only after explicit user confirmation**
|
**5.1 Update Article**
|
||||||
|
|
||||||
### 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**:
|
|
||||||
|
|
||||||
|
Insert after corresponding paragraph:
|
||||||
```markdown
|
```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**:
|
**5.2 Output Summary**
|
||||||
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
|
|
||||||
|
|
||||||
```
|
```
|
||||||
Article Illustration Complete!
|
Article Illustration Complete!
|
||||||
|
|
||||||
Article: [article path]
|
Article: [path]
|
||||||
|
Type: [type name]
|
||||||
|
Density: [minimal/balanced/rich]
|
||||||
Style: [style name]
|
Style: [style name]
|
||||||
Generated: X/N images successful
|
Location: [directory path]
|
||||||
|
Images: X/N generated
|
||||||
|
|
||||||
Illustration Positions:
|
Positions:
|
||||||
- illustration-xxx.png → After section "Section Name"
|
- 01-infographic-xxx.png → After "[Section]"
|
||||||
- illustration-yyy.png → After section "Another 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]
|
CONNECTIONS: [arrow types, decision points]
|
||||||
Failed:
|
STYLE: [style characteristics]
|
||||||
- illustration-zzz.png: [failure reason]
|
ASPECT: 16:9
|
||||||
```
|
```
|
||||||
|
|
||||||
## Illustration Modification
|
**Comparison**:
|
||||||
|
|
||||||
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:
|
|
||||||
```
|
```
|
||||||
illustration-[slug].png
|
[Title] - Comparison View
|
||||||
illustration-[slug].md (in prompts/)
|
|
||||||
|
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:
|
**Framework**:
|
||||||
- `illustration-concept-overview.png`
|
```
|
||||||
- `illustration-workflow-diagram.png`
|
[Title] - Conceptual Framework
|
||||||
- `illustration-key-benefits.png`
|
|
||||||
|
|
||||||
**Slug rules**:
|
STRUCTURE: [hierarchical/network/matrix]
|
||||||
- Derived from illustration purpose/content (kebab-case)
|
|
||||||
- Must be unique within the article
|
NODES:
|
||||||
- When content changes significantly, update slug accordingly
|
- [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
|
## References
|
||||||
|
|
||||||
| File | Content |
|
| File | Content |
|
||||||
|------|---------|
|
|------|---------|
|
||||||
| `references/styles/<style>.md` | Full style specifications with colors, elements, rules |
|
| [references/styles.md](references/styles.md) | Style gallery & compatibility matrix |
|
||||||
|
| `references/styles/<style>.md` | Full style specifications |
|
||||||
## Notes
|
| `references/config/preferences-schema.md` | EXTEND.md schema |
|
||||||
|
| `references/config/first-time-setup.md` | First-time setup flow |
|
||||||
- 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
|
|
||||||
|
|
||||||
## Extension Support
|
## Extension Support
|
||||||
|
|
||||||
Custom styles and configurations via EXTEND.md.
|
Custom configurations via EXTEND.md. See **Step 1.1** for paths and supported options.
|
||||||
|
|
||||||
**Check paths** (priority order):
|
|
||||||
1. `.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (project)
|
|
||||||
2. `~/.baoyu-skills/baoyu-article-illustrator/EXTEND.md` (user)
|
|
||||||
|
|
||||||
If found, load before Step 1. Extension content overrides defaults.
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
Loading…
Reference in New Issue