zhens
/
JimLiu-baoyu-skills
mirror of https://github.com/JimLiu/baoyu-skills.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(baoyu-article-illustrator): extract palette as independent third dimension 

- Create palettes/ directory with macaron, warm, neon palette files
- Move macaron from styles/ to palettes/ (color scheme, not rendering style)
- Extract warm palette variant from vector-illustration into shared palette
- Add neon palette extracted from retro style colors
- Update architecture from Type × Style to Type × Style × Palette
- Add Palette Gallery and override rules to styles.md
- Add Palette Override section to prompt-construction.md
- Update presets table with Palette column
- Add palette selection step to workflow
- Add preferred_palette to EXTEND.md schema
This commit is contained in:
Jim Liu 宝玉 2026-04-08 14:35:51 -05:00
parent 049462d6dd
commit 038e67fd9b
13 changed files with 253 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -473,20 +473,17 @@ Knowledge comic creator with flexible art style × tone combinations. Creates or
#### baoyu-article-illustrator #### baoyu-article-illustrator
Smart article illustration skill with Type × Style two-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations. Smart article illustration skill with Type × Style × Palette three-dimension approach. Analyzes article structure, identifies positions requiring visual aids, and generates illustrations.
```bash ```bash
# Auto-select type and style based on content # Auto-select type and style based on content
/baoyu-article-illustrator path/to/article.md /baoyu-article-illustrator path/to/article.md
# Specify type # Specify type and style
/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 /baoyu-article-illustrator path/to/article.md --type flowchart --style notion
# With palette override
/baoyu-article-illustrator path/to/article.md --style vector-illustration --palette macaron
``` ```
**Types** (information structure): **Types** (information structure):
@ -500,7 +497,7 @@ Smart article illustration skill with Type × Style two-dimension approach. Anal
| `framework` | Concept maps, relationship diagrams | Methodologies, architecture | | `framework` | Concept maps, relationship diagrams | Methodologies, architecture |
| `timeline` | Chronological progression | History, project progress | | `timeline` | Chronological progression | History, project progress |
**Styles** (visual aesthetics): **Styles** (rendering approach):
| Style | Description | Best For | | Style | Description | Best For |
|-------|-------------|----------| |-------|-------------|----------|
@ -512,7 +509,14 @@ Smart article illustration skill with Type × Style two-dimension approach. Anal
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative | | `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
| `editorial` | Magazine-style infographic | Tech explainers, journalism | | `editorial` | Magazine-style infographic | Tech explainers, journalism |
| `scientific` | Academic precise diagrams | Biology, chemistry, technical | | `scientific` | Academic precise diagrams | Biology, chemistry, technical |
| `macaron` | Soft macaron pastel blocks on warm cream | Educational, knowledge, tutorials |
**Palettes** (optional color override):
| Palette | Description | Best For |
|---------|-------------|----------|
| `macaron` | Soft pastel blocks (blue, mint, lavender, peach) on warm cream | Educational, knowledge, tutorials |
| `warm` | Warm earth tones on soft peach, no cool colors | Brand, product, lifestyle |
| `neon` | Vibrant neon on dark purple | Gaming, retro, pop culture |
**Style Previews**: **Style Previews**:

22
README.zh.md
View File

@ -473,20 +473,17 @@ clawhub install baoyu-markdown-to-html
#### baoyu-article-illustrator #### baoyu-article-illustrator
智能文章插图技能，采用类型 × 风格二维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。 智能文章插图技能，采用类型 × 风格 × 色板三维系统。分析文章结构，识别需要视觉辅助的位置，生成插图。
```bash ```bash
# 根据内容自动选择类型和风格 # 根据内容自动选择类型和风格
/baoyu-article-illustrator path/to/article.md /baoyu-article-illustrator path/to/article.md
# 指定类型
/baoyu-article-illustrator path/to/article.md --type infographic
# 指定风格
/baoyu-article-illustrator path/to/article.md --style blueprint
# 组合类型和风格 # 组合类型和风格
/baoyu-article-illustrator path/to/article.md --type flowchart --style notion /baoyu-article-illustrator path/to/article.md --type flowchart --style notion
# 使用色板覆盖
/baoyu-article-illustrator path/to/article.md --style vector-illustration --palette macaron
``` ```
**类型**（信息结构）： **类型**（信息结构）：
@ -500,7 +497,7 @@ clawhub install baoyu-markdown-to-html
| `framework` | 概念图、关系图 | 方法论、架构 | | `framework` | 概念图、关系图 | 方法论、架构 |
| `timeline` | 时间线进展 | 历史、项目进度 | | `timeline` | 时间线进展 | 历史、项目进度 |
**风格**（视觉美学）： **风格**（渲染手法）：
| 风格 | 描述 | 适用场景 | | 风格 | 描述 | 适用场景 |
|------|------|----------| |------|------|----------|
@ -512,7 +509,14 @@ clawhub install baoyu-markdown-to-html
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 | | `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
| `editorial` | 杂志风格信息图 | 科技解说、新闻 | | `editorial` | 杂志风格信息图 | 科技解说、新闻 |
| `scientific` | 学术精确图表 | 生物、化学、技术 | | `scientific` | 学术精确图表 | 生物、化学、技术 |
| `macaron` | 马卡龙柔和色块、暖白底色 | 教育、知识分享、教程 |
**色板**（可选配色覆盖）：
| 色板 | 描述 | 适用场景 |
|------|------|----------|
| `macaron` | 马卡龙柔和色块（浅蓝、浅绿、浅紫、浅橙）暖白底 | 教育、知识分享、教程 |
| `warm` | 暖色系（橙、赭石、金）无冷色 | 品牌、产品、生活方式 |
| `neon` | 霓虹色（粉、青、黄）深色底 | 游戏、复古、潮流 |
**风格预览**： **风格预览**：

24
skills/baoyu-article-illustrator/SKILL.md
View File

@ -1,6 +1,6 @@
--- ---
name: baoyu-article-illustrator name: baoyu-article-illustrator
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 "为文章配图". description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
version: 1.57.0 version: 1.57.0
metadata: metadata:
openclaw: openclaw:
@ -9,18 +9,19 @@ metadata:
# Article Illustrator # Article Illustrator
Analyze articles, identify illustration positions, generate images with Type × Style consistency. Analyze articles, identify illustration positions, generate images with Type × Style × Palette consistency.
## Two Dimensions ## Three Dimensions
| Dimension | Controls | Examples | | Dimension | Controls | Examples |
|-----------|----------|----------| |-----------|----------|----------|
| **Type** | Information structure | infographic, scene, flowchart, comparison, framework, timeline | | **Type** | Information structure | infographic, scene, flowchart, comparison, framework, timeline |
| **Style** | Visual aesthetics | notion, warm, minimal, blueprint, watercolor, elegant | | **Style** | Rendering approach | notion, warm, minimal, blueprint, watercolor, elegant |
| **Palette** | Color scheme (optional) | macaron, warm, neon — overrides style's default colors |
Combine freely: `--type infographic --style blueprint` Combine freely: `--type infographic --style vector-illustration --palette macaron`
Or use presets: `--preset tech-explainer` → type + style in one flag. See [Style Presets](references/style-presets.md). Or use presets: `--preset edu-visual` → type + style + palette in one flag. See [Style Presets](references/style-presets.md).
## Types ## Types
@ -96,13 +97,14 @@ Full procedures: [references/workflow.md](references/workflow.md#step-2-setup--a
| **Q1: Preset or Type** | [Recommended preset], [alt preset], or manual: infographic, scene, flowchart, comparison, framework, timeline, mixed | | **Q1: Preset or Type** | [Recommended preset], [alt preset], or manual: infographic, scene, flowchart, comparison, framework, timeline, mixed |
| **Q2: Density** | minimal (1-2), balanced (3-5), per-section (Recommended), rich (6+) | | **Q2: Density** | minimal (1-2), balanced (3-5), per-section (Recommended), rich (6+) |
| **Q3: Style** | [Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, poster, Other — **skip if preset chosen** | | **Q3: Style** | [Recommended], minimal-flat, sci-fi, hand-drawn, editorial, scene, poster, Other — **skip if preset chosen** |
| Q4: Language | When article language ≠ EXTEND.md setting | | Q4: Palette | Default (style colors), macaron, warm, neon — **skip if preset includes palette or preferred_palette set** |
| Q5: Language | When article language ≠ EXTEND.md setting |
Full procedures: [references/workflow.md](references/workflow.md#step-3-confirm-settings-) Full procedures: [references/workflow.md](references/workflow.md#step-3-confirm-settings-)
### Step 4: Generate Outline ### Step 4: Generate Outline
Save `outline.md` with frontmatter (type, density, style, image_count) and entries: Save `outline.md` with frontmatter (type, density, style, palette, image_count) and entries:
```yaml ```yaml
## Illustration 1 ## Illustration 1
@ -137,7 +139,7 @@ Insert `![description]({relative-path}/NN-{type}-{slug}.png)` after paragraphs.
``` ```
Article Illustration Complete! Article Illustration Complete!
Article: [path] | Type: [type] | Density: [level] | Style: [style] Article: [path] | Type: [type] | Density: [level] | Style: [style] | Palette: [palette or default]
Images: X/N generated Images: X/N generated
``` ```
@ -180,7 +182,7 @@ When input is **pasted content** (no file path), always uses `illustrations/{top
|------|---------| |------|---------|
| [references/workflow.md](references/workflow.md) | Detailed procedures | | [references/workflow.md](references/workflow.md) | Detailed procedures |
| [references/usage.md](references/usage.md) | Command syntax | | [references/usage.md](references/usage.md) | Command syntax |
| [references/styles.md](references/styles.md) | Style gallery | | [references/styles.md](references/styles.md) | Style gallery + Palette gallery |
| [references/style-presets.md](references/style-presets.md) | Preset shortcuts (type + style) | | [references/style-presets.md](references/style-presets.md) | Preset shortcuts (type + style + palette) |
| [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates | | [references/prompt-construction.md](references/prompt-construction.md) | Prompt templates |
| [references/config/first-time-setup.md](references/config/first-time-setup.md) | First-time setup | | [references/config/first-time-setup.md](references/config/first-time-setup.md) | First-time setup |

3
skills/baoyu-article-illustrator/references/config/preferences-schema.md
View File

@ -20,6 +20,8 @@ preferred_style:
name: null # Built-in or custom style name name: null # Built-in or custom style name
description: "" # Override/notes description: "" # Override/notes
preferred_palette: null # Built-in palette name (macaron|warm|neon) or null
language: null # zh|en|ja|ko|auto language: null # zh|en|ja|ko|auto
default_output_dir: null # same-dir|illustrations-subdir|independent default_output_dir: null # same-dir|illustrations-subdir|independent
@ -47,6 +49,7 @@ custom_styles:
| `watermark.position` | enum | bottom-right | Position on image | | `watermark.position` | enum | bottom-right | Position on image |
| `preferred_style.name` | string | null | Style name or null | | `preferred_style.name` | string | null | Style name or null |
| `preferred_style.description` | string | "" | Custom notes/override | | `preferred_style.description` | string | "" | Custom notes/override |
| `preferred_palette` | string | null | Palette override (macaron, warm, neon, or null) |
| `language` | string | null | Output language (null = auto-detect) | | `language` | string | null | Output language (null = auto-detect) |
| `default_output_dir` | enum | null | Output directory preference (null = ask each time) | | `default_output_dir` | enum | null | Output directory preference (null = ask each time) |
| `custom_styles` | array | [] | User-defined styles | | `custom_styles` | array | [] | User-defined styles |

29
skills/baoyu-article-illustrator/references/palettes/macaron.md Normal file
View File

@ -0,0 +1,29 @@
# macaron
Soft macaron pastel color blocks on warm cream
## Background
- Color: Warm Cream (#F5F0E8)
- Texture: Subtle warm paper grain
## Colors
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Warm Cream | #F5F0E8 | Primary background |
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis |
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
## Accent
Coral Red (#E8655A) for key data, warnings, and emphasis highlights. Use sparingly — one or two elements per illustration.
## Best For
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials

29
skills/baoyu-article-illustrator/references/palettes/neon.md Normal file
View File

@ -0,0 +1,29 @@
# neon
Vibrant neon colors on dark backgrounds
## Background
- Color: Deep Purple (#2D1B4E)
- Texture: Subtle grid pattern or solid dark
## Colors
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Deep Purple | #2D1B4E | Primary background |
| Alt Background | Dark Teal | #0F4C5C | Alternative sections |
| Primary | Hot Pink | #FF1493 | Main accent |
| Secondary | Electric Cyan | #00FFFF | Supporting elements |
| Tertiary | Neon Yellow | #FFFF00 | Highlights |
| Accent 1 | Lime Green | #32CD32 | Energy, success |
| Accent 2 | Orange | #FF6B35 | Warmth |
| Text | White | #FFFFFF | Text elements |
## Accent
Hot Pink (#FF1493) for primary emphasis. High contrast neon-on-dark creates immediate visual impact.
## Best For
Gaming, retro tech, 80s/90s nostalgic content, bold editorial, trend and pop culture

28
skills/baoyu-article-illustrator/references/palettes/warm.md Normal file
View File

@ -0,0 +1,28 @@
# warm
Warm earth tones on soft peach, no cool colors
## Background
- Color: Soft Peach (#FFECD2)
- Texture: Warm paper texture
## Colors
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Soft Peach | #FFECD2 | Primary background |
| Outlines | Deep Charcoal | #2D2D2D | All element outlines |
| Primary | Warm Orange | #ED8936 | Main accent color |
| Secondary | Terracotta | #C05621 | Warm depth |
| Tertiary | Golden Yellow | #F6AD55 | Highlights, energy |
| Accent | Deep Brown | #744210 | Grounding, anchoring |
| Text | Warm Charcoal | #4A4A4A | Text elements |
## Accent
Warm Orange (#ED8936) for primary emphasis. Warm-only palette — no cool colors (no green, blue, purple). Modern-retro feel.
## Best For
Product showcases, team introductions, feature grids, brand content, personal growth, lifestyle

76
skills/baoyu-article-illustrator/references/prompt-construction.md
View File

@ -135,10 +135,10 @@ COLORS: Cream background (#F5F0E6), Coral Red (#E07A5F), Mint Green (#81B29A), M
ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars) ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars)
``` ```
**Infographic + vector-illustration (warm palette)**: **Infographic + vector-illustration + warm palette**:
``` ```
Flat vector illustration infographic. Clean black outlines on all elements. Flat vector illustration infographic. Clean black outlines on all elements.
Warm-only color palette, no cool colors. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
COLORS: Soft Peach background (#FFECD2), Warm Orange (#ED8936), COLORS: Soft Peach background (#FFECD2), Warm Orange (#ED8936),
Terracotta (#C05621), Golden Yellow (#F6AD55), Deep Brown (#744210) Terracotta (#C05621), Golden Yellow (#F6AD55), Deep Brown (#744210)
ELEMENTS: Geometric simplified icons, no gradients, rounded corners, ELEMENTS: Geometric simplified icons, no gradients, rounded corners,
@ -207,10 +207,10 @@ COLORS: Left side Coral (#E07A5F), Right side Mint (#81B29A), cream background
ELEMENTS: Bold icons, black outlines, centered divider line ELEMENTS: Bold icons, black outlines, centered divider line
``` ```
**Comparison + vector-illustration (warm palette)**: **Comparison + vector-illustration + warm palette**:
``` ```
Flat vector comparison with split layout. Clear visual separation. Flat vector comparison with split layout. Clear visual separation.
Warm-only color palette, no cool colors. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621), COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621),
Soft Peach background (#FFECD2), Deep Brown (#744210) accents Soft Peach background (#FFECD2), Deep Brown (#744210) accents
ELEMENTS: Bold icons, black outlines, centered divider line ELEMENTS: Bold icons, black outlines, centered divider line
@ -239,10 +239,10 @@ COLORS: Cream background (#F5F0E6), nodes in Coral/Mint/Mustard/Blue, black outl
ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
``` ```
**Framework + vector-illustration (warm palette)**: **Framework + vector-illustration + warm palette**:
``` ```
Flat vector framework diagram with geometric nodes and bold connectors. Flat vector framework diagram with geometric nodes and bold connectors.
Warm-only color palette, no cool colors. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936), COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936),
Terracotta (#C05621), Golden Yellow (#F6AD55), black outlines Terracotta (#C05621), Golden Yellow (#F6AD55), black outlines
ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
@ -264,37 +264,6 @@ STYLE: [style characteristics]
ASPECT: 16:9 ASPECT: 16:9
``` ```
### Macaron Style Instructions
When `style: macaron`, add these style instructions:
```
Educational infographic with soft macaron pastel color blocks on warm cream paper.
COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Macaron Mint (#B5E5CF),
Macaron Lavender (#D5C6E0), Macaron Peach (#FFD5C2), Coral Red (#E8655A) for emphasis,
Deep Charcoal (#2D2D2D) text, Warm Gray (#6B6B6B) annotations
CONTAINERS: Rounded cards, bubbles, dashed-box frames with pastel fills to separate info zones
TYPOGRAPHY: Bold large title, bold keywords, smaller muted annotations
STRUCTURE: Auto-select best layout for content (flow→arrows, compare→columns, cycle→ring, cards→grid)
BOTTOM: Bold summary quote at bottom capturing core insight
```
**Infographic + macaron**:
```
Educational infographic on warm cream paper (#F5F0E8). Soft macaron pastel blocks as info zones.
COLORS: Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
Coral Red (#E8655A) for key data, Deep Charcoal (#2D2D2D) text
ELEMENTS: Rounded-corner cards with pastel fills, clear labels, bold title, summary quote at bottom
```
**Flowchart + macaron**:
```
Process flow on warm cream paper (#F5F0E8). Each step in a macaron pastel card.
COLORS: Steps alternate Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
Coral Red (#E8655A) for decision points, Deep Charcoal (#2D2D2D) outlines
ELEMENTS: Rounded step containers, soft arrow connectors, bold step labels
```
### Screen-Print Style Override ### Screen-Print Style Override
When `style: screen-print`, replace standard style instructions with: When `style: screen-print`, replace standard style instructions with:
@ -327,6 +296,39 @@ TEXTURE: Halftone transitions between sides
--- ---
## Palette Override
When a palette is specified (via `--palette` or preset), it overrides the style's default colors:
1. Read style file → get rendering rules (Visual Elements, Style Rules, line treatment)
2. Read palette file (`palettes/<palette>.md`) → get Colors + Background
3. Palette Colors **replace** style's default Color Palette in prompt
4. Palette Background **replaces** style's Background color (keep style's texture description)
5. Build prompt: style rendering instructions + palette colors
**Prompt frontmatter** includes palette when specified:
```yaml
---
illustration_id: 01
type: infographic
style: vector-illustration
palette: macaron
---
```
**Example**: `vector-illustration` + `macaron` palette:
```
Flat vector illustration infographic. Clean black outlines on all elements.
PALETTE: macaron — soft pastel color blocks
COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Mint (#B5E5CF),
Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for emphasis
ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements
```
When no palette is specified, use the style's built-in Color Palette as before.
---
## What to Avoid ## What to Avoid
- Vague descriptions ("a nice image") - Vague descriptions ("a nice image")

65
skills/baoyu-article-illustrator/references/style-presets.md
View File

@ -1,53 +1,53 @@
# Style Presets # Style Presets
`--preset X` expands to a type + style combination. Users can override either dimension. `--preset X` expands to a type + style + optional palette combination. Users can override any dimension.
## By Category ## By Category
### Technical & Engineering ### Technical & Engineering
| --preset | Type | Style | Best For | | --preset | Type | Style | Palette | Best For |
|----------|------|-------|----------| |----------|------|-------|---------|----------|
| `tech-explainer` | `infographic` | `blueprint` | API docs, system metrics, technical deep-dives | | `tech-explainer` | `infographic` | `blueprint` | — | API docs, system metrics, technical deep-dives |
| `system-design` | `framework` | `blueprint` | Architecture diagrams, system design | | `system-design` | `framework` | `blueprint` | — | Architecture diagrams, system design |
| `architecture` | `framework` | `vector-illustration` | Component relationships, module structure | | `architecture` | `framework` | `vector-illustration` | — | Component relationships, module structure |
| `science-paper` | `infographic` | `scientific` | Research findings, lab results, academic | | `science-paper` | `infographic` | `scientific` | — | Research findings, lab results, academic |
### Knowledge & Education ### Knowledge & Education
| --preset | Type | Style | Best For | | --preset | Type | Style | Palette | Best For |
|----------|------|-------|----------| |----------|------|-------|---------|----------|
| `knowledge-base` | `infographic` | `vector-illustration` | Concept explainers, tutorials, how-to | | `knowledge-base` | `infographic` | `vector-illustration` | — | Concept explainers, tutorials, how-to |
| `saas-guide` | `infographic` | `notion` | Product guides, SaaS docs, tool walkthroughs | | `saas-guide` | `infographic` | `notion` | — | Product guides, SaaS docs, tool walkthroughs |
| `tutorial` | `flowchart` | `vector-illustration` | Step-by-step tutorials, setup guides | | `tutorial` | `flowchart` | `vector-illustration` | — | Step-by-step tutorials, setup guides |
| `process-flow` | `flowchart` | `notion` | Workflow documentation, onboarding flows | | `process-flow` | `flowchart` | `notion` | — | Workflow documentation, onboarding flows |
| `warm-knowledge` | `infographic` | `vector-illustration` (warm palette) | Product showcases, team intros, feature cards, brand content | | `warm-knowledge` | `infographic` | `vector-illustration` | `warm` | Product showcases, team intros, feature cards, brand content |
| `edu-visual` | `infographic` | `macaron` | Knowledge summaries, concept explainers, educational articles | | `edu-visual` | `infographic` | `vector-illustration` | `macaron` | Knowledge summaries, concept explainers, educational articles |
### Data & Analysis ### Data & Analysis
| --preset | Type | Style | Best For | | --preset | Type | Style | Palette | Best For |
|----------|------|-------|----------| |----------|------|-------|---------|----------|
| `data-report` | `infographic` | `editorial` | Data journalism, metrics reports, dashboards | | `data-report` | `infographic` | `editorial` | — | Data journalism, metrics reports, dashboards |
| `versus` | `comparison` | `vector-illustration` | Tech comparisons, framework shootouts | | `versus` | `comparison` | `vector-illustration` | — | Tech comparisons, framework shootouts |
| `business-compare` | `comparison` | `elegant` | Product evaluations, strategy options | | `business-compare` | `comparison` | `elegant` | — | Product evaluations, strategy options |
### Narrative & Creative ### Narrative & Creative
| --preset | Type | Style | Best For | | --preset | Type | Style | Palette | Best For |
|----------|------|-------|----------| |----------|------|-------|---------|----------|
| `storytelling` | `scene` | `warm` | Personal essays, reflections, growth stories | | `storytelling` | `scene` | `warm` | — | Personal essays, reflections, growth stories |
| `lifestyle` | `scene` | `watercolor` | Travel, wellness, lifestyle, creative | | `lifestyle` | `scene` | `watercolor` | — | Travel, wellness, lifestyle, creative |
| `history` | `timeline` | `elegant` | Historical overviews, milestones | | `history` | `timeline` | `elegant` | — | Historical overviews, milestones |
| `evolution` | `timeline` | `warm` | Progress narratives, growth journeys | | `evolution` | `timeline` | `warm` | — | Progress narratives, growth journeys |
### Editorial & Opinion ### Editorial & Opinion
| --preset | Type | Style | Best For | | --preset | Type | Style | Palette | Best For |
|----------|------|-------|----------| |----------|------|-------|---------|----------|
| `opinion-piece` | `scene` | `screen-print` | Op-eds, commentary, critical essays | | `opinion-piece` | `scene` | `screen-print` | — | Op-eds, commentary, critical essays |
| `editorial-poster` | `comparison` | `screen-print` | Debate, contrasting viewpoints | | `editorial-poster` | `comparison` | `screen-print` | — | Debate, contrasting viewpoints |
| `cinematic` | `scene` | `screen-print` | Dramatic narratives, cultural essays | | `cinematic` | `scene` | `screen-print` | — | Dramatic narratives, cultural essays |
## Content Type → Preset Recommendations ## Content Type → Preset Recommendations
@ -63,8 +63,9 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
| Narrative / Personal | `storytelling` | `lifestyle`, `evolution` | | Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
| Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` | | Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
| Historical / Timeline | `history` | `evolution` | | Historical / Timeline | `history` | `evolution` |
| Academic / Research | `science-paper` | `tech-explainer`, `data-report`, `edu-visual` | | Academic / Research | `science-paper` | `tech-explainer`, `data-report` |
| SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` | | SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` |
| Education / Knowledge | `edu-visual` | `knowledge-base`, `tutorial` |
## Override Examples ## Override Examples

67
skills/baoyu-article-illustrator/references/styles.md
View File

@ -43,21 +43,20 @@ Use Core Styles for most cases. See full Style Gallery below for granular contro
| `sketch` | Raw pencil notebook style | Brainstorming, creative exploration | | `sketch` | Raw pencil notebook style | Brainstorming, creative exploration |
| `screen-print` | Bold poster art, halftone textures, limited colors | Opinion, editorial, cultural, cinematic | | `screen-print` | Bold poster art, halftone textures, limited colors | Opinion, editorial, cultural, cinematic |
| `sketch-notes` | Soft hand-drawn warm notes | Educational, warm notes | | `sketch-notes` | Soft hand-drawn warm notes | Educational, warm notes |
| `macaron` | Soft macaron pastel blocks on warm cream, clean educational layouts | Educational, knowledge, tutorials, concept explainers |
| `vintage` | Aged parchment historical | Historical, heritage | | `vintage` | Aged parchment historical | Historical, heritage |
Full specifications: `references/styles/<style>.md` Full specifications: `references/styles/<style>.md`
## Type × Style Compatibility Matrix ## Type × Style Compatibility Matrix
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print | macaron | | | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| |---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | | infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ | ✓ | | scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | | flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | | comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ | | framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | | timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended ✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
@ -77,7 +76,7 @@ Full specifications: `references/styles/<style>.md`
| Content Signals | Recommended Type | Recommended Style | | Content Signals | Recommended Type | Recommended Style |
|-----------------|------------------|-------------------| |-----------------|------------------|-------------------|
| API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration | | API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion, macaron | | Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion |
| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint | | Tech, AI, programming, development, code | infographic | vector-illustration, blueprint |
| How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion | | How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion |
| Framework, model, architecture, principles | framework | blueprint, vector-illustration | | Framework, model, architecture, principles | framework | blueprint, vector-illustration |
@ -99,12 +98,6 @@ Full specifications: `references/styles/<style>.md`
- Modern, professional, highly readable - Modern, professional, highly readable
- Perfect for knowledge articles and tutorials - Perfect for knowledge articles and tutorials
### infographic + vector-illustration (warm palette)
- Same rendering: flat vector, black outlines, geometric simplification
- Warm-only palette: terracotta, gold, brown tones on soft peach
- Modern-retro feel, approachable and brand-friendly
- Best for product showcases, team intros, feature grids, brand content
### flowchart + vector-illustration ### flowchart + vector-illustration
- Bold arrows and connectors - Bold arrows and connectors
- Distinct step containers with icons - Distinct step containers with icons
@ -202,27 +195,27 @@ Full specifications: `references/styles/<style>.md`
- Clean silhouette-based iconography - Clean silhouette-based iconography
- Poster-style hierarchy with bold typography - Poster-style hierarchy with bold typography
### infographic + macaron ---
- Soft pastel color blocks (blue, mint, lavender, peach) as info zone backgrounds
- Warm cream base with clear typography hierarchy
- Rounded-corner cards and bubble containers
- Coral Red accents for key data and emphasis
- Bold summary quote at bottom
### flowchart + macaron ## Palette Gallery
- Each step in a distinct macaron pastel card
- Arrow chains connecting pastel containers
- Clear progression with color-coded stages
- Generous spacing between steps
### comparison + macaron Palettes override a style's default colors. Combine any style with any palette: `--style vector-illustration --palette macaron`.
- Split columns with different pastel fills per side
- Soft visual separation, not harsh dividers | Palette | Description | Best For |
- Coral Red highlights for key differentiators |---------|-------------|----------|
- Bottom summary capturing the comparison insight | `macaron` | Soft pastel blocks (blue, mint, lavender, peach) on warm cream | Educational, knowledge, tutorials |
| `warm` | Warm earth tones (orange, terracotta, gold) on soft peach, no cool colors | Brand, product, lifestyle |
| `neon` | Vibrant neon (pink, cyan, yellow) on dark purple | Gaming, retro, pop culture |
Full specifications: `references/palettes/<palette>.md`
When no palette is specified, the style's built-in Color Palette is used.
## Palette Override Rules
1. Read style file → rendering rules (Visual Elements, Style Rules)
2. Read palette file → Colors + Background
3. Palette colors **replace** style's default Color Palette
4. Palette Background **replaces** style's default Background color
5. Style's texture description is preserved
### framework + macaron
- Nodes as rounded pastel-filled cards
- Hierarchical or network layout with soft connectors
- Each concept level in a different macaron color
- Clean labels with bold keywords

67
skills/baoyu-article-illustrator/references/styles/macaron.md
View File

@ -1,67 +0,0 @@
# macaron
Soft macaron pastel color blocks on warm cream, clean and readable educational layouts
## Design Aesthetic
Clean, approachable infographic style built around soft macaron pastel color blocks as information containers. Each content zone sits on a distinct pastel fill — blue, mint, lavender, or peach — against a warm cream paper background. Emphasis on clarity, information hierarchy, and moderate density. Pairs well with hand-drawn line treatment (optional) or clean flat vector rendering.
## Background
- Color: Warm Cream (#F5F0E8)
- Texture: Subtle warm paper grain
## Color Palette
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Warm Cream | #F5F0E8 | Primary background |
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis highlights |
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
## Visual Elements
- Rounded-corner cards, speech bubbles, and dashed-box frames as content containers
- Each container filled with a distinct macaron pastel color
- Clear typography hierarchy: bold large title → bold keywords → smaller muted annotations
- Bold summary quote at the bottom of the image capturing the core insight
- Auto-selected visual structure based on content: flow → arrow chains, compare → split columns, cycle → ring layout, composition → parallel cards, hierarchy → nested containers
- Generous whitespace between zones, moderate information density
## Optional Hand-Drawn Mode
Can be combined with hand-drawn rendering for a warmer feel:
- Slight wobble on lines and shape edges (not perfectly straight)
- Simple stick-figure cartoon characters or hand-drawn icons
- Color fills that don't completely fill outlines (hand-painted feel)
- Doodle decorations: small stars, underlines, arrows
When not using hand-drawn mode, renders as clean flat shapes with smooth edges.
## Style Rules
### Do
- Use pastel color blocks to visually separate information zones
- Maintain clear information hierarchy through typography weight and size
- Include a bold summary quote at the bottom
- Choose the best visual structure for the content (don't force one layout)
- Keep generous whitespace and moderate density
- Use Coral Red sparingly for emphasis on key data or warnings
### Don't
- Use pure white backgrounds
- Overcrowd with too many elements or decorations
- Mix too many accent colors beyond the macaron palette
- Create dark or moody compositions
- Use tiny text that's hard to read
## Best For
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials, visual study notes

20
skills/baoyu-article-illustrator/references/styles/vector-illustration.md
View File

@ -24,26 +24,6 @@ Flat vector illustration with no gradients or 3D effects. Clear, uniform-thickne
| Accent 2 | Rock Blue | #577590 | Cool balance | | Accent 2 | Rock Blue | #577590 | Cool balance |
| Text | Black | #1A1A1A | Text elements | | Text | Black | #1A1A1A | Text elements |
## Palette Variants
### Warm Palette
Use with `--preset warm-knowledge` or specify in prompt. For product showcases, team introductions, feature grids, brand content.
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Soft Peach | #FFECD2 | Primary background |
| Outlines | Deep Charcoal | #2D2D2D | All element outlines |
| Primary | Warm Orange | #ED8936 | Main accent color |
| Secondary | Terracotta | #C05621 | Warm depth |
| Tertiary | Golden Yellow | #F6AD55 | Highlights, energy |
| Accent | Deep Brown | #744210 | Grounding, anchoring |
| Text | Warm Charcoal | #4A4A4A | Text elements |
Warm-only palette, no cool colors (no green, blue, purple). Modern-retro feel.
Default palette includes Mint Green (#81B29A) and Rock Blue (#577590) for colorful educational content. Warm palette uses exclusively warm tones for brand/product/team content.
## Visual Elements ## Visual Elements
- All objects have closed black outlines (coloring book style) - All objects have closed black outlines (coloring book style)

30
skills/baoyu-article-illustrator/references/workflow.md
View File

@ -211,9 +211,22 @@ If no `preferred_style` (present Core Styles first):
| `poster` | screen-print | Opinion, editorial, cultural, cinematic | | `poster` | screen-print | Opinion, editorial, cultural, cinematic |
Style selection based on Type × Style compatibility matrix (styles.md). Style selection based on Type × Style compatibility matrix (styles.md).
**In Step 5.1**, read `styles/<style>.md` for full color palette, visual elements, and rendering rules. **In Step 5.1**, read `styles/<style>.md` for visual elements and rendering rules.
### Q4: Image Text Language ⚠️ REQUIRED when article language ≠ EXTEND.md `language` ### Q4: Palette (optional)
If preset did not specify a palette, and the user may benefit from a palette override, offer available palettes:
- Default (use style's built-in colors) (Recommended)
- `macaron` — soft pastel blocks on warm cream
- `warm` — warm earth tones, no cool colors
- `neon` — vibrant neon on dark backgrounds
**Skip if**: preset already resolved palette, or `preferred_palette` set in EXTEND.md.
See Palette Gallery in [styles.md](styles.md#palette-gallery) and full specs in `palettes/<palette>.md`.
### Q5: Image Text Language ⚠️ REQUIRED when article language ≠ EXTEND.md `language`
Detect article language from content. If different from EXTEND.md `language` setting, MUST ask: Detect article language from content. If different from EXTEND.md `language` setting, MUST ask:
- Article language (match article content) (Recommended) - Article language (match article content) (Recommended)
@ -294,17 +307,18 @@ For each illustration in the outline:
style: custom-flat-vector style: custom-flat-vector
--- ---
``` ```
3. **Load style specs**: Read `styles/<style>.md` for the selected style's full color palette, visual elements, and style rules 3. **Load style specs**: Read `styles/<style>.md` for visual elements, style rules, and rendering instructions
4. **Follow type-specific template** from [prompt-construction.md](prompt-construction.md), using colors and elements from the style spec 4. **Load palette specs** (if palette specified): Read `palettes/<palette>.md` for colors and background. Palette colors **replace** the style's default Color Palette. If no palette specified, use the style's built-in colors.
5. **Prompt quality requirements** (all REQUIRED): 5. **Follow type-specific template** from [prompt-construction.md](prompt-construction.md), using rendering from style + colors from palette (or style default)
6. **Prompt quality requirements** (all REQUIRED):
- `Layout`: Describe overall composition (grid / radial / hierarchical / left-right / top-down) - `Layout`: Describe overall composition (grid / radial / hierarchical / left-right / top-down)
- `ZONES`: Describe each visual area with specific content, not vague descriptions - `ZONES`: Describe each visual area with specific content, not vague descriptions
- `LABELS`: Use **actual numbers, terms, metrics, quotes from the article** — NOT generic placeholders - `LABELS`: Use **actual numbers, terms, metrics, quotes from the article** — NOT generic placeholders
- `COLORS`: Specify hex codes from the style spec with semantic meaning (e.g., `Coral (#E07A5F) for emphasis`) - `COLORS`: Specify hex codes from palette (or style default) with semantic meaning
- `STYLE`: Describe line treatment, texture, mood, character rendering per style rules - `STYLE`: Describe line treatment, texture, mood, character rendering per style rules
- `ASPECT`: Specify ratio (e.g., `16:9`) - `ASPECT`: Specify ratio (e.g., `16:9`)
6. **Apply defaults**: composition requirements, character rendering, text guidelines, watermark 7. **Apply defaults**: composition requirements, character rendering, text guidelines, watermark
7. **Backup rule**: If prompt file exists, rename to `prompts/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.md` 8. **Backup rule**: If prompt file exists, rename to `prompts/NN-{type}-{slug}-backup-YYYYMMDD-HHMMSS.md`
**Verification** ⛔: Before proceeding to 5.2, confirm ALL prompt files exist: **Verification** ⛔: Before proceeding to 5.2, confirm ALL prompt files exist:
``` ```