feat(baoyu-article-illustrator): default to sketch-notes educational infographic style

Make `hand-drawn-edu` (infographic + sketch-notes + macaron) the universal
fallback preset when content analysis surfaces no strong signal. Rework
sketch-notes style spec around warm cream paper + black hand-drawn lines +
soft pastel section blocks.

- Change `hand-drawn-edu` preset type from flowchart to infographic; add
  `hand-drawn-edu-flow` (flowchart) and `hand-drawn-edu-compare` (comparison)
  as variants for users who need those layouts in the same warm style
- Elevate `sketch-notes` to primary style across infographic / flowchart /
  comparison / framework auto-selection; add sketch-notes column to
  Type x Style compatibility matrix
- Rewrite sketch-notes.md: macaron pastel palette, canonical single-page
  layout (title / sectioned boxes / takeaway), diagram-only rule
- Add infographic + sketch-notes + macaron prompt block to
  prompt-construction.md
- Update workflow, style-presets, and first-time-setup defaults to match

skills/baoyu-article-illustrator/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: baoyu-article-illustrator
 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.1
+version: 1.58.0
 metadata:
   openclaw:
     homepage: https://github.com/JimLiu/baoyu-skills#baoyu-article-illustrator

skills/baoyu-article-illustrator/references/config/first-time-setup.md

@@ -61,8 +61,10 @@ Position defaults to bottom-right.
 header: "Style"
 question: "Default illustration style preference? Or type another style name or your custom style"
 options:
-  - label: "None (Recommended)"
+  - label: "sketch-notes (Recommended)"
-    description: "Auto-select based on content analysis"
+    description: "Warm cream paper, black hand-drawn lines, soft pastel blocks — educational infographic feel. Great default for most articles."
+  - label: "None"
+    description: "Auto-select based on content analysis (falls back to sketch-notes when no strong signal)"
   - label: "notion"
     description: "Minimalist hand-drawn line art"
   - label: "warm"

skills/baoyu-article-illustrator/references/prompt-construction.md

@@ -139,6 +139,39 @@ STYLE: [style characteristics]
 ASPECT: 16:9
 ```
 
+**Infographic + sketch-notes + macaron palette** (default / `hand-drawn-edu` preset):
+```
+Single-page hand-drawn educational infographic in a clean presentation style.
+Warm cream paper background, black hand-drawn lines with slight wobble, soft
+pastel color blocks. Feels simple, friendly, and easy to understand at a glance.
+Diagram-style visuals ONLY — no realistic or photographic images.
+
+PALETTE: macaron — soft pastel blocks on warm cream
+COLORS: Warm Cream background (#F5F0E8); Black (#1A1A1A) for ALL lines, text,
+        arrows, and doodles; section fills in Light Blue (#A8D8EA), Mint Green
+        (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2); Coral Red (#E8655A)
+        sparingly for one or two emphasis points only.
+
+LAYOUT (top → bottom):
+- TOP: Bold hand-lettered title, oversized, slightly wobbly, with an optional
+       decorative underline or small doodle.
+- MIDDLE: 2–6 rounded-rectangle info boxes arranged in a clean grid, row, or
+          radial pattern. Each box = one section, one pastel fill color, one
+          simple icon or sketchy cartoon element, one short keyword/phrase.
+          Hand-drawn arrows connect related zones.
+- BOTTOM: One short hand-lettered takeaway sentence summarizing the main idea.
+
+ELEMENTS: Rounded info boxes with clear sectioning, wavy/straight hand-drawn
+          arrows with small inline labels, simple icons and sketchy cartoon
+          elements (stick figures, tools, objects), small doodle decorations
+          (stars, sparkles, underlines, dots, asterisks) used sparingly.
+
+STYLE: Minimal, well-organized, airy. Color fills don't completely fill
+       outlines (slight "hand-painted" overshoot). ALL text hand-lettered —
+       no computer fonts. Short labels and keywords only, never long
+       paragraphs. Generous white space between sections.
+```
+
 **Infographic + vector-illustration**:
 ```
 Flat vector illustration infographic. Clean black outlines on all elements.

skills/baoyu-article-illustrator/references/style-presets.md

@@ -2,6 +2,10 @@
 
 `--preset X` expands to a type + style + optional palette combination. Users can override any dimension.
 
+## Default Preset
+
+When content analysis surfaces no strong signal (generic knowledge article, mixed-topic post, no clear data/comparison/narrative cue), recommend **`hand-drawn-edu`** as the primary option in Step 3 Q1. It is the warm, friendly educational-infographic default — safe for most articles and universally readable.
+
 ## By Category
 
 ### Technical & Engineering
@@ -23,7 +27,9 @@
 | `process-flow` | `flowchart` | `notion` | — | Workflow documentation, onboarding flows |
 | `warm-knowledge` | `infographic` | `vector-illustration` | `warm` | Product showcases, team intros, feature cards, brand content |
 | `edu-visual` | `infographic` | `vector-illustration` | `macaron` | Knowledge summaries, concept explainers, educational articles |
-| `hand-drawn-edu` | `flowchart` | `sketch-notes` | `macaron` | Hand-drawn educational diagrams, process explainers, onboarding visuals |
+| `hand-drawn-edu` | `infographic` | `sketch-notes` | `macaron` | **Default preset.** Hand-drawn educational infographic — warm cream paper, black lines, pastel blocks. Great for single-page explainers, concept summaries, onboarding, general knowledge articles |
+| `hand-drawn-edu-flow` | `flowchart` | `sketch-notes` | `macaron` | Hand-drawn process explainer — step-by-step workflow in the same warm educational style |
+| `hand-drawn-edu-compare` | `comparison` | `sketch-notes` | `macaron` | Hand-drawn side-by-side comparison in the warm educational style |
 | `ink-notes-compare` | `comparison` | `ink-notes` | `mono-ink` | Before/After essays, Traditional vs New, OS-style comparisons, mindset-shift narratives |
 | `ink-notes-flow` | `flowchart` | `ink-notes` | `mono-ink` | Professional process explainers, workforce pipelines, hand-drawn technical walkthroughs |
 | `ink-notes-framework` | `framework` | `ink-notes` | `mono-ink` | System analogies, command-center diagrams, architecture-as-metaphor, tech manifestos |
@@ -59,18 +65,19 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
 
 | Content Type (Step 2) | Primary Preset | Alternatives |
 |------------------------|----------------|--------------|
-| Technical | `tech-explainer` | `system-design`, `architecture` |
+| **General / No strong signal** | `hand-drawn-edu` | `edu-visual`, `knowledge-base` |
-| Tutorial | `tutorial` | `process-flow`, `knowledge-base`, `edu-visual` |
+| Education / Knowledge | `hand-drawn-edu` | `edu-visual`, `knowledge-base`, `tutorial` |
+| Tutorial | `hand-drawn-edu-flow` | `tutorial`, `process-flow`, `hand-drawn-edu` |
+| SaaS / Product | `hand-drawn-edu` | `saas-guide`, `knowledge-base`, `process-flow`, `warm-knowledge` |
+| Technical | `tech-explainer` | `system-design`, `architecture`, `hand-drawn-edu` |
 | Methodology / Framework | `system-design` | `architecture`, `process-flow` |
 | Data / Metrics | `data-report` | `versus`, `tech-explainer` |
-| Comparison / Review | `versus` | `business-compare`, `editorial-poster`, `ink-notes-compare` |
+| Comparison / Review | `versus` | `business-compare`, `hand-drawn-edu-compare`, `editorial-poster`, `ink-notes-compare` |
 | Manifesto / Mindset shift / Professional visual note | `ink-notes-compare` | `ink-notes-framework`, `ink-notes-flow` |
 | Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
 | Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
 | Historical / Timeline | `history` | `evolution` |
 | Academic / Research | `science-paper` | `tech-explainer`, `data-report` |
-| SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` |
-| Education / Knowledge | `edu-visual` | `knowledge-base`, `tutorial`, `hand-drawn-edu` |
 
 ## Override Examples
 

skills/baoyu-article-illustrator/references/styles.md

@@ -6,15 +6,15 @@ Simplified style tier for quick selection:
 
 | Core Style | Maps To | Best For |
 |------------|---------|----------|
+| `hand-drawn` | sketch-notes | **Default.** Warm cream paper, black hand-drawn lines, pastel blocks — educational infographics, concept explainers, onboarding, general knowledge articles |
 | `vector` | vector-illustration | Knowledge articles, tutorials, tech content |
 | `minimal-flat` | notion | General, knowledge sharing, SaaS |
 | `sci-fi` | blueprint | AI, frontier tech, system design |
-| `hand-drawn` | sketch/warm | Relaxed, reflective, casual content |
 | `editorial` | editorial | Processes, data, journalism |
 | `scene` | warm/watercolor | Narratives, emotional, lifestyle |
 | `poster` | screen-print | Opinion, editorial, cultural, cinematic |
 
-Use Core Styles for most cases. See full Style Gallery below for granular control.
+Use Core Styles for most cases. **When no strong content signal is detected, default to `hand-drawn` (→ sketch-notes).** See full Style Gallery below for granular control.
 
 ---
 
@@ -50,42 +50,45 @@ Full specifications: `references/styles/<style>.md`
 
 ## Type × Style Compatibility Matrix
 
-| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
+| | sketch-notes | 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
 
 ## Auto Selection by Type
 
+When no content signal matches strongly, `sketch-notes` is the default primary for every diagrammatic type. Only override with another primary when the content analysis in Step 2 surfaces a clear signal (technical/data/narrative/opinion).
+
 | Type | Primary Style | Secondary Styles |
 |------|---------------|------------------|
-| infographic | vector-illustration | notion, blueprint, editorial |
+| infographic | sketch-notes | vector-illustration, notion, blueprint, editorial |
 | scene | warm | watercolor, elegant |
-| flowchart | vector-illustration | notion, blueprint |
+| flowchart | sketch-notes | vector-illustration, notion, blueprint |
-| comparison | vector-illustration | notion, elegant |
+| comparison | sketch-notes | vector-illustration, notion, elegant |
-| framework | blueprint | vector-illustration, notion |
+| framework | sketch-notes | blueprint, vector-illustration, notion |
-| timeline | elegant | warm, editorial |
+| timeline | elegant | sketch-notes, warm, editorial |
 
 ## Auto Selection by Content Signals
 
 | Content Signals | Recommended Type | Recommended Style |
 |-----------------|------------------|-------------------|
+| **(no strong signal / general article)** | **infographic** | **sketch-notes** |
+| Knowledge, concept, tutorial, learning, guide, onboarding | infographic | sketch-notes, vector-illustration, notion |
+| Productivity, SaaS, tool, app, software | infographic | sketch-notes, notion, vector-illustration |
+| How-to, steps, workflow, process, tutorial | flowchart | sketch-notes, vector-illustration, notion |
 | API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
-| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion |
+| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint, sketch-notes |
-| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint |
+| Framework, model, architecture, principles | framework | blueprint, vector-illustration, sketch-notes |
-| How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion |
+| vs, pros/cons, before/after, alternatives | comparison | vector-illustration, notion, sketch-notes |
-| Framework, model, architecture, principles | framework | blueprint, vector-illustration |
-| vs, pros/cons, before/after, alternatives | comparison | vector-illustration, notion |
 | Manifesto, mindset shift, workforce, OS, whiteboard, professional visual note | comparison / framework | ink-notes |
 | Story, emotion, journey, experience, personal | scene | warm, watercolor |
 | History, timeline, progress, evolution | timeline | elegant, warm |
-| Productivity, SaaS, tool, app, software | infographic | notion, vector-illustration |
 | Business, professional, strategy, corporate | framework | elegant |
 | Opinion, editorial, culture, philosophy, cinematic, dramatic, poster | scene | screen-print |
 | Biology, chemistry, medical, scientific | infographic | scientific |
@@ -93,6 +96,15 @@ Full specifications: `references/styles/<style>.md`
 
 ## Style Characteristics by Type
 
+### infographic + sketch-notes (default)
+- Warm cream paper background, black hand-drawn lines with slight wobble
+- 2–6 rounded pastel info boxes (light blue / mint / lavender / peach)
+- Bold hand-lettered title at the top
+- Short keyword labels, simple icons, small doodles (stars, underlines, sparkles)
+- One-line hand-lettered takeaway sentence at the bottom
+- Airy, minimal, diagram-style — never realistic
+- Perfect for single-page educational explainers and concept summaries
+
 ### infographic + vector-illustration
 - Clean flat vector shapes, bold geometric forms
 - Vibrant but harmonious color palette

skills/baoyu-article-illustrator/references/styles/sketch-notes.md

@@ -1,56 +1,91 @@
 # sketch-notes
 
-Soft hand-drawn illustration style with warm, educational feel
+Hand-drawn educational infographic style with warm cream paper, black hand-drawn lines, and soft pastel section blocks. Optimized for single-page visual explainers.
 
 ## Design Aesthetic
 
-Hand-drawn feel with soft, relaxed brush strokes. Fresh, refined style with minimalist editorial approach. Emphasis on precision, clarity and intelligent elegance while prioritizing warmth, approachability and friendliness.
+Hand-drawn educational infographic in a clean presentation style. Feels like a visual explainer slide: simple, friendly, and easy to understand at a glance. Bold handwritten-style title at the top, clearly sectioned content in the middle with rounded boxes and small doodles, and one short takeaway sentence at the bottom. Neat, airy, and visually similar to a hand-drawn concept diagram — never realistic or photographic.
 
 ## Background
 
-- Color: Warm Off-White (#FAF8F0)
+- Color: Warm Cream Paper (#F5F0E8) — preferred; fallback Warm Off-White (#FAF8F0)
-- Texture: Subtle paper grain, warm tone
+- Texture: Subtle warm paper grain, matte finish, no gloss
 
 ## Color Palette
 
+Default sketch-notes palette is the **macaron** pastel set. Lines are always black; pastel blocks are used only as rounded card fills for information sections.
+
 | Role | Color | Hex | Usage |
 |------|-------|-----|-------|
-| Background | Warm Off-White | #FAF8F0 | Primary background |
+| Background | Warm Cream | #F5F0E8 | Paper background |
-| Primary Text | Deep Charcoal | #2C3E50 | Main elements |
+| Primary Ink | Black | #1A1A1A | ALL outlines, text, arrows, doodles |
-| Alt Text | Deep Brown | #4A4A4A | Secondary elements |
+| Block Blue | Light Blue | #A8D8EA | Info block fill (cool / tech) |
-| Accent 1 | Soft Orange | #F4A261 | Highlights, emphasis |
+| Block Mint | Mint Green | #B5E5CF | Info block fill (growth / positive) |
-| Accent 2 | Mustard Yellow | #E9C46A | Secondary highlights |
+| Block Lavender | Lavender | #D5C6E0 | Info block fill (concept / abstract) |
-| Accent 3 | Sage Green | #87A96B | Nature, growth concepts |
+| Block Peach | Peach | #FFD5C2 | Info block fill (warm / human) |
-| Accent 4 | Light Blue | #7EC8E3 | Tech, digital elements |
+| Accent | Coral Red | #E8655A | One or two emphasis points only |
-| Accent 5 | Red Brown | #A0522D | Earthy elements |
+| Muted Text | Warm Gray | #6B6B6B | Small annotations |
+
+Use **4 pastel block colors max** per image, one color per section. Black ink does all the structural line work.
 
 ## Visual Elements
 
-- Connection lines with hand-drawn wavy feel
+- Bold hand-lettered title at the top (oversized, slightly wobbly)
-- Conceptual abstract icons illustrating ideas
+- Rounded-rectangle info boxes with clear sectioning (2–6 zones)
-- Color fills don't completely fill outlines (hand-painted feel)
+- Short keyword labels inside boxes — never long paragraphs
-- Simple geometric shapes with rounded corners
+- Simple icons and sketchy cartoon elements (stick figures, tools, objects) to explain each idea
-- Arrows and pointers with sketchy style
+- Hand-drawn arrows (straight, curved, or wavy) connecting related zones
-- Doodle decorations: stars, spirals, underlines
+- Small doodle decorations: stars, sparkles, underlines, dots, asterisks — used sparingly for emphasis
+- Single-line hand-lettered takeaway sentence at the bottom
+- Color fills do not completely fill outlines (slight "hand-painted" overshoot/undershoot)
+- Generous white space between sections — airy, never crowded
+
+## Layout Guidelines
+
+Canonical single-page layout (16:9 or 4:3):
+
+1. **Top (10–15%)** — Bold hand-lettered title, optionally with a small decorative underline or doodle.
+2. **Middle (70–80%)** — 2–6 rounded pastel info boxes arranged in a clear grid, row, or radial pattern. Each box = one section, one color, one icon, one keyword/phrase.
+3. **Bottom (10–15%)** — One short hand-lettered takeaway sentence summarizing the core insight.
+
+Keep margins generous. Aim for breathing room around every element.
 
 ## Style Rules
 
 ### Do
 
-- Keep layouts open and well-structured
+- Use warm cream paper background (no pure white)
-- Emphasize information hierarchy
+- Use black hand-drawn lines for ALL structural elements
-- Use hand-drawn quality for all elements
+- Use soft pastel blocks (blue / mint / lavender / peach) for section fills
-- Allow imperfection (slight wobbles add character)
+- Keep text to short keywords and phrases only
-- Layer elements with subtle overlaps
+- Include a bold handwritten title at the top
+- Include a short takeaway sentence at the bottom
+- Use diagram-style visuals (icons, doodles, simple shapes)
+- Allow slight wobble — hand-drawn imperfection is the point
+- Maintain clear sectioning with rounded boxes
 
 ### Don't
 
-- Use perfect geometric shapes
+- Use pure white backgrounds (that's `ink-notes`' territory)
-- Create photorealistic elements
+- Render realistic or photographic images — this style is diagram-only
-- Overcrowd with too many elements
+- Fill zones with gradients, shadows, or digital effects
-- Use pure white backgrounds
+- Use long paragraphs of text — keywords only
-- Make it look computer-generated
+- Use computer-generated / sans-serif body fonts — ALL text must be hand-lettered
+- Use more than 4 pastel block colors per image
+- Overcrowd the canvas — keep it airy and minimal
+- Use perfect geometric shapes — preserve the hand-drawn wobble
+
+## Type Compatibility
+
+| Type | Rating | Notes |
+|------|--------|-------|
+| infographic | ✓✓ | **Best fit** — single-page visual explainers, concept summaries, educational slides |
+| framework | ✓✓ | Labeled zones and connectors render well |
+| flowchart | ✓✓ | Rounded step boxes with wavy arrows |
+| comparison | ✓✓ | Two pastel blocks side by side; prefer `ink-notes` for strict Before/After contrasts |
+| timeline | ✓ | Hand-drawn horizontal arrow with milestone cards |
+| scene | ✗ | Not recommended — too diagrammatic |
 
 ## Best For
 
-Educational content, knowledge sharing, technical explanations, tutorials, onboarding materials, friendly articles
+Educational content, knowledge sharing, concept explainers, tutorials, onboarding materials, product walkthroughs, single-page visual summaries, "how things work" posts, friendly technical articles

skills/baoyu-article-illustrator/references/workflow.md

@@ -176,6 +176,8 @@ Based on Step 2 content analysis, recommend a preset first (sets both type & sty
 - [Alternative preset] — [brief]
 - Or choose type manually: infographic / scene / flowchart / comparison / framework / timeline / mixed
 
+**Default**: if Step 2 found no strong content signal, the recommended preset MUST be `hand-drawn-edu` (infographic + sketch-notes + macaron — warm cream paper, black hand-drawn lines, soft pastel blocks). This is the universal fallback.
+
 **If user picks a preset → skip Q3** (type & style both resolved).
 **If user picks a type → Q3 is REQUIRED.**
 
@@ -203,13 +205,15 @@ If no `preferred_style` (present Core Styles first):
 
 | Core Style | Maps To | Best For |
 |------------|---------|----------|
+| `hand-drawn` | sketch-notes | **Default.** Warm cream paper, black hand-drawn lines, pastel blocks — educational infographics, concept explainers, onboarding, general knowledge articles |
 | `minimal-flat` | notion | General, knowledge sharing, SaaS |
 | `sci-fi` | blueprint | AI, frontier tech, system design |
-| `hand-drawn` | sketch/warm | Relaxed, reflective, casual |
 | `editorial` | editorial | Processes, data, journalism |
 | `scene` | warm/watercolor | Narratives, emotional, lifestyle |
 | `poster` | screen-print | Opinion, editorial, cultural, cinematic |
 
+**Default recommendation**: when Step 2 surfaces no strong content signal, recommend **`hand-drawn-edu`** preset (→ infographic + sketch-notes + macaron) as the primary option in Q1. When the user picks a type manually without a preferred_style, recommend `sketch-notes` first in Q3.
+
 Style selection based on Type × Style compatibility matrix (styles.md).
 **In Step 5.1**, read `styles/<style>.md` for visual elements and rendering rules.