feat(baoyu-xhs-images): add notebook and study-notes styles with mindmap and quadrant layouts

- notebook: hand-drawn infographic style with watercolor rendering and Morandi palette
- study-notes: realistic handwritten photo style with blue pen, red annotations, yellow highlighter
- mindmap: center radial layout (4-8 branches)
- quadrant: four-quadrant / circular section layout

skills/baoyu-xhs-images/references/presets/notebook.md

@@ -0,0 +1,76 @@
+---
+name: notebook
+category: educational
+---
+
+# Notebook Style
+
+Hand-drawn infographic / study notes aesthetic with watercolor rendering and Morandi color palette.
+
+## Element Combination
+
+```yaml
+canvas:
+  ratio: portrait-3-4
+  grid: single | dual | triptych
+
+image_effects:
+  cutout: soft
+  stroke: none | watercolor-edge
+  filter: muted-tones | morandi
+
+typography:
+  decorated: watercolor-highlight | handwritten-bold
+  tags: pill | rounded-rect
+  direction: horizontal
+
+decorations:
+  emphasis: circle-mark | underline | checkmark
+  background: paper-texture | watercolor-wash
+  doodles: hand-drawn-lines | mindmap-nodes | speech-bubbles | hearts | peace-dove
+  frames: rounded-rect | none
+```
+
+## Color Palette (Morandi Tones)
+
+| Role | Colors | Hex |
+|------|--------|-----|
+| Primary | Sage green, Teal | #A8B5A0, #4A7C7C |
+| Background | Off-white, Warm paper | #FAF8F5, #F5F0E8 |
+| Accents | Dust blue, Warm grey, Terracotta | #8FA3B0, #9A9590, #C4A484 |
+
+## Visual Elements
+
+- Bold handwritten titles with watercolor wash blocks (sage green/teal backgrounds)
+- Black line illustrations, slightly imperfect, simulating ink effect
+- Soft paper texture background, mimicking watercolor paper
+- Mindmap nodes, list boxes, explanatory doodles
+- Symbolic icons: hearts, speech bubbles, peace dove, handshake
+- Flat lighting, vector illustration feel with analog texture
+
+## Typography
+
+- Bold handwritten fonts
+- Watercolor wash effect backgrounds
+- Clear and readable, CJK optimized
+
+## Best Layout Pairings
+
+| Layout | Compatibility | Use Case |
+|--------|---------------|----------|
+| sparse | ✓✓ | Covers, quotes |
+| balanced | ✓✓ | Standard content cards |
+| dense | ✓✓ | Knowledge cards, checklists |
+| list | ✓✓ | Step guides, rankings |
+| comparison | ✓✓ | Before/after, contrasts |
+| flow | ✓✓ | Processes, timelines |
+| mindmap | ✓✓ | Mind maps |
+| quadrant | ✓✓ | Quadrant analysis, circular sections |
+
+## Best For
+
+- Study notes, knowledge summaries
+- Mind maps, infographics
+- Tutorials, knowledge sharing
+- Bullet journal style content
+- Concept explanations, framework overviews

skills/baoyu-xhs-images/references/presets/study-notes.md

@@ -0,0 +1,115 @@
+---
+name: study-notes
+category: realistic
+---
+
+# Study Notes Style
+
+Realistic handwritten photo aesthetic - student notes style, dense and messy but readable.
+
+## Element Combination
+
+```yaml
+canvas:
+  ratio: portrait-3-4
+  grid: single
+
+image_effects:
+  cutout: none
+  stroke: none
+  filter: natural-photo
+
+typography:
+  decorated: none
+  tags: none
+  direction: horizontal
+
+decorations:
+  emphasis: circle-mark | underline | checkmark | cross | star-simple
+  background: lined-paper-white
+  doodles: arrows-simple | margin-notes | corrections | explanatory-diagrams
+  frames: none
+```
+
+## Color Palette (Three-Color Annotation System)
+
+| Role | Colors | Hex |
+|------|--------|-----|
+| Primary | Blue ballpoint, Black ink | #1E3A5F, #1A1A1A |
+| Highlights | Yellow highlighter | #FFFF00 (50% opacity) |
+| Accents | Red pen (circles, underlines) | #CC0000 |
+| Background | White lined paper | #FFFFFF |
+
+## Visual Elements
+
+- Realistic photo perspective: top-down view of study desk
+- Hand holding blue ballpoint pen, actively underlining
+- Extremely dense handwritten content, filling entire page
+- Red pen annotations: circles, underlines, stars, boxes
+- Yellow highlighter marking key terms
+- Correction marks, cramped notes squeezed into margins
+- Simple hand-drawn symbols: → * ✓ ✗ !
+- Varying pen pressure creating lighter and darker strokes
+
+## Typography
+
+- Authentic student handwriting
+- Messy but readable, clear structure maintained
+- Varying font sizes (large titles, small body, tiny margin notes)
+- CJK optimized
+
+## Content Structure
+
+Three-section layout:
+
+### Top Section
+- Core topic (circled multiple times in red)
+- First section title + 3-4 key points
+- Arrow connections, red underlines
+
+### Middle Section
+- Second section title (red pen box)
+- Numbered steps ①②③
+- Specific methods and supplementary notes
+
+### Bottom Section
+- Third section title (red star)
+- Time points / key metrics
+- Key quotes / core tips (tiny corner notes)
+
+## Best Layout Pairings
+
+| Layout | Compatibility | Use Case |
+|--------|---------------|----------|
+| sparse | ✗ | Not suitable - style requires dense content |
+| balanced | ✓ | When content is lighter |
+| dense | ✓✓ | Best fit - knowledge notes, summaries |
+| list | ✓✓ | Step checklists, rankings |
+| comparison | ✓ | Comparative analysis |
+| flow | ✓ | Process flows |
+| mindmap | ✓✓ | Mind map notes |
+| quadrant | ✓ | Quadrant analysis |
+
+## Best For
+
+- Study guides, exam notes
+- Knowledge organization, framework summaries
+- Tutorial summaries, quick notes
+- "Top student notes" style content
+- Knowledge sharing requiring authentic feel
+
+## Style Rules
+
+### DO ✓
+- Keep content extremely dense
+- Use simple symbols (→ * ✓ ✗ !)
+- Annotate key points with red pen
+- Include correction marks
+- Squeeze tiny notes into margins
+
+### DON'T ✗
+- Use complex emojis
+- Leave too much whitespace
+- Make neat, tidy layouts
+- Add colorful decorations
+- Include cartoon elements