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/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)
-- Texture: Subtle paper grain, warm tone
+- Color: Warm Cream Paper (#F5F0E8) — preferred; fallback Warm Off-White (#FAF8F0)
+- 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 |
-| Primary Text | Deep Charcoal | #2C3E50 | Main elements |
-| Alt Text | Deep Brown | #4A4A4A | Secondary elements |
-| Accent 1 | Soft Orange | #F4A261 | Highlights, emphasis |
-| Accent 2 | Mustard Yellow | #E9C46A | Secondary highlights |
-| Accent 3 | Sage Green | #87A96B | Nature, growth concepts |
-| Accent 4 | Light Blue | #7EC8E3 | Tech, digital elements |
-| Accent 5 | Red Brown | #A0522D | Earthy elements |
+| Background | Warm Cream | #F5F0E8 | Paper background |
+| Primary Ink | Black | #1A1A1A | ALL outlines, text, arrows, doodles |
+| Block Blue | Light Blue | #A8D8EA | Info block fill (cool / tech) |
+| Block Mint | Mint Green | #B5E5CF | Info block fill (growth / positive) |
+| Block Lavender | Lavender | #D5C6E0 | Info block fill (concept / abstract) |
+| Block Peach | Peach | #FFD5C2 | Info block fill (warm / human) |
+| Accent | Coral Red | #E8655A | One or two emphasis points only |
+| 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
-- Conceptual abstract icons illustrating ideas
-- Color fills don't completely fill outlines (hand-painted feel)
-- Simple geometric shapes with rounded corners
-- Arrows and pointers with sketchy style
-- Doodle decorations: stars, spirals, underlines
+- Bold hand-lettered title at the top (oversized, slightly wobbly)
+- Rounded-rectangle info boxes with clear sectioning (2–6 zones)
+- Short keyword labels inside boxes — never long paragraphs
+- Simple icons and sketchy cartoon elements (stick figures, tools, objects) to explain each idea
+- Hand-drawn arrows (straight, curved, or wavy) connecting related zones
+- 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
-- Emphasize information hierarchy
-- Use hand-drawn quality for all elements
-- Allow imperfection (slight wobbles add character)
-- Layer elements with subtle overlaps
+- Use warm cream paper background (no pure white)
+- Use black hand-drawn lines for ALL structural elements
+- Use soft pastel blocks (blue / mint / lavender / peach) for section fills
+- Keep text to short keywords and phrases only
+- 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
-- Create photorealistic elements
-- Overcrowd with too many elements
-- Use pure white backgrounds
-- Make it look computer-generated
+- Use pure white backgrounds (that's `ink-notes`' territory)
+- Render realistic or photographic images — this style is diagram-only
+- Fill zones with gradients, shadows, or digital effects
+- Use long paragraphs of text — keywords only
+- 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