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