mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-13 22:29:48 +08:00
Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Jim Liu 宝玉
|
b1cbd1d527 | ||
|
Jim Liu 宝玉
|
7500a3b106 |
@@ -6,7 +6,7 @@
|
||||
},
|
||||
"metadata": {
|
||||
"description": "Skills shared by Baoyu for improving daily work efficiency",
|
||||
"version": "1.16.0"
|
||||
"version": "1.17.1"
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
|
||||
@@ -2,6 +2,27 @@
|
||||
|
||||
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
|
||||
|
||||
@@ -2,6 +2,27 @@
|
||||
|
||||
[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
|
||||
|
||||
### 新功能
|
||||
|
||||
@@ -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**:
|
||||
|
||||
+9
-4
@@ -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`
|
||||
|
||||
**风格预览**：
|
||||
|
||||
+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