chore: release v1.26.0

- 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

.claude-plugin/marketplace.json

@@ -6,7 +6,7 @@
   },
   "metadata": {
     "description": "Skills shared by Baoyu for improving daily work efficiency",
-    "version": "1.25.3"
+    "version": "1.26.0"
   },
   "plugins": [
     {

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 English | [中文](./CHANGELOG.zh.md)
 
+## 1.26.0 - 2026-01-29
+
+### Features
+- `baoyu-xhs-images`: add `notebook` style (hand-drawn infographic with watercolor rendering and Morandi palette) and `study-notes` style (realistic handwritten photo aesthetic).
+- `baoyu-xhs-images`: add `mindmap` (center radial) and `quadrant` (four-section grid) layouts.
+
+## 1.25.4 - 2026-01-29
+
+### Fixes
+- `baoyu-markdown-to-html`: generate proper `<img>` tags with `data-local-path` attribute instead of text placeholders.
+- `baoyu-post-to-wechat`: fix API publishing to read image paths from `data-local-path` attribute; fix title/cover extraction from corresponding `.md` frontmatter when publishing HTML files.
+- `baoyu-post-to-wechat`: fix CLI argument parsing to handle unknown parameters gracefully; add `--summary` parameter support.
+- `baoyu-post-to-wechat`: fix browser publishing to convert `<img>` tags back to text placeholders before paste.
+
 ## 1.25.3 - 2026-01-28
 
 ### Features

CHANGELOG.zh.md

@@ -2,6 +2,20 @@
 
 [English](./CHANGELOG.md) | 中文
 
+## 1.26.0 - 2026-01-29
+
+### 新功能
+- `baoyu-xhs-images`：新增 `notebook` 风格（水彩渲染手绘信息图 + 莫兰迪配色）和 `study-notes` 风格（真实手写照片美学）。
+- `baoyu-xhs-images`：新增 `mindmap`（中心发散式）和 `quadrant`（四象限）布局。
+
+## 1.25.4 - 2026-01-29
+
+### 修复
+- `baoyu-markdown-to-html`：生成带 `data-local-path` 属性的 `<img>` 标签，而非纯文本占位符。
+- `baoyu-post-to-wechat`：修复 API 发布时从 `data-local-path` 属性读取图片路径；修复发布 HTML 文件时从对应 `.md` 的 frontmatter 提取标题和封面图。
+- `baoyu-post-to-wechat`：修复命令行参数解析，正确跳过未知参数；新增 `--summary` 参数支持。
+- `baoyu-post-to-wechat`：修复浏览器发布模式，粘贴前将 `<img>` 标签转换回文本占位符。
+
 ## 1.25.3 - 2026-01-28
 
 ### 新功能

skills/baoyu-markdown-to-html/scripts/main.ts

@@ -214,7 +214,6 @@ export async function convertMarkdown(markdownPath: string, options?: { title?:
   }
 
   fs.copyFileSync(tempHtmlPath, finalHtmlPath);
-  console.error(`[markdown-to-html] HTML saved to: ${finalHtmlPath}`);
 
   const contentImages: ImageInfo[] = [];
   for (const img of images) {
@@ -226,6 +225,15 @@ export async function convertMarkdown(markdownPath: string, options?: { title?:
     });
   }
 
+  let htmlContent = fs.readFileSync(finalHtmlPath, 'utf-8');
+  for (const img of contentImages) {
+    const imgTag = `<img src="${img.placeholder}" data-local-path="${img.localPath}" style="display: block; width: 100%; margin: 1.5em auto;">`;
+    htmlContent = htmlContent.replace(img.placeholder, imgTag);
+  }
+  fs.writeFileSync(finalHtmlPath, htmlContent, 'utf-8');
+
+  console.error(`[markdown-to-html] HTML saved to: ${finalHtmlPath}`);
+
   return {
     title,
     author,

skills/baoyu-post-to-wechat/scripts/wechat-api.ts

@@ -177,7 +177,7 @@ async function uploadImagesInHtml(
   accessToken: string,
   baseDir: string
 ): Promise<{ html: string; firstMediaId: string }> {
-  const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
+  const imgRegex = /<img[^>]*\ssrc=["']([^"']+)["'][^>]*>/gi;
   const matches = [...html.matchAll(imgRegex)];
 
   if (matches.length === 0) {
@@ -188,7 +188,7 @@ async function uploadImagesInHtml(
   let updatedHtml = html;
 
   for (const match of matches) {
-    const [, src] = match;
+    const [fullTag, src] = match;
     if (!src) continue;
 
     if (src.startsWith("https://mmbiz.qpic.cn")) {
@@ -198,15 +198,21 @@ async function uploadImagesInHtml(
       continue;
     }
 
-    console.error(`[wechat-api] Uploading image: ${src}`);
+    const localPathMatch = fullTag.match(/data-local-path=["']([^"']+)["']/);
+    const imagePath = localPathMatch ? localPathMatch[1]! : src;
+
+    console.error(`[wechat-api] Uploading image: ${imagePath}`);
     try {
-      const resp = await uploadImage(src, accessToken, baseDir);
-      updatedHtml = updatedHtml.replace(src, resp.url);
+      const resp = await uploadImage(imagePath, accessToken, baseDir);
+      const newTag = fullTag
+        .replace(/\ssrc=["'][^"']+["']/, ` src="${resp.url}"`)
+        .replace(/\sdata-local-path=["'][^"']+["']/, "");
+      updatedHtml = updatedHtml.replace(fullTag, newTag);
       if (!firstMediaId) {
         firstMediaId = resp.media_id;
       }
     } catch (err) {
-      console.error(`[wechat-api] Failed to upload ${src}:`, err);
+      console.error(`[wechat-api] Failed to upload ${imagePath}:`, err);
     }
   }
 
@@ -310,6 +316,7 @@ Arguments:
 
 Options:
   --title <title>     Override title
+  --summary <text>    Article summary (for future use)
   --theme <name>      Theme name for markdown (default, grace, simple). Default: default
   --cover <path>      Cover image path (local or URL)
   --dry-run           Parse and render only, don't publish
@@ -337,6 +344,7 @@ interface CliArgs {
   filePath: string;
   isHtml: boolean;
   title?: string;
+  summary?: string;
   theme: string;
   cover?: string;
   dryRun: boolean;
@@ -358,12 +366,16 @@ function parseArgs(argv: string[]): CliArgs {
     const arg = argv[i]!;
     if (arg === "--title" && argv[i + 1]) {
       args.title = argv[++i];
+    } else if (arg === "--summary" && argv[i + 1]) {
+      args.summary = argv[++i];
     } else if (arg === "--theme" && argv[i + 1]) {
       args.theme = argv[++i]!;
     } else if (arg === "--cover" && argv[i + 1]) {
       args.cover = argv[++i];
     } else if (arg === "--dry-run") {
       args.dryRun = true;
+    } else if (arg.startsWith("--") && argv[i + 1] && !argv[i + 1]!.startsWith("-")) {
+      i++;
     } else if (!arg.startsWith("-")) {
       args.filePath = arg;
     }
@@ -405,6 +417,15 @@ async function main(): Promise<void> {
   if (args.isHtml) {
     htmlPath = filePath;
     htmlContent = extractHtmlContent(htmlPath);
+    const mdPath = filePath.replace(/\.html$/i, ".md");
+    if (fs.existsSync(mdPath)) {
+      const mdContent = fs.readFileSync(mdPath, "utf-8");
+      const parsed = parseFrontmatter(mdContent);
+      frontmatter = parsed.frontmatter;
+      if (!title && frontmatter.title) {
+        title = frontmatter.title;
+      }
+    }
     if (!title) {
       title = extractHtmlTitle(fs.readFileSync(htmlPath, "utf-8"));
     }

skills/baoyu-post-to-wechat/scripts/wechat-article.ts

@@ -115,7 +115,7 @@ async function sendPaste(cdp?: CdpConnection, sessionId?: string): Promise<void>
   }
 }
 
-async function copyHtmlFromBrowser(cdp: CdpConnection, htmlFilePath: string): Promise<void> {
+async function copyHtmlFromBrowser(cdp: CdpConnection, htmlFilePath: string, contentImages: ImageInfo[] = []): Promise<void> {
   const absolutePath = path.isAbsolute(htmlFilePath) ? htmlFilePath : path.resolve(process.cwd(), htmlFilePath);
   const fileUrl = `file://${absolutePath}`;
 
@@ -128,6 +128,28 @@ async function copyHtmlFromBrowser(cdp: CdpConnection, htmlFilePath: string): Pr
   await cdp.send('Runtime.enable', {}, { sessionId });
   await sleep(2000);
 
+  if (contentImages.length > 0) {
+    console.log('[wechat] Replacing img tags with placeholders for browser paste...');
+    const replacements = contentImages.map(img => ({ placeholder: img.placeholder, localPath: img.localPath }));
+    await cdp.send<{ result: { value: unknown } }>('Runtime.evaluate', {
+      expression: `
+        (function() {
+          const replacements = ${JSON.stringify(replacements)};
+          for (const r of replacements) {
+            const imgs = document.querySelectorAll('img[src="' + r.placeholder + '"], img[data-local-path="' + r.localPath + '"]');
+            for (const img of imgs) {
+              const text = document.createTextNode(r.placeholder);
+              img.parentNode.replaceChild(text, img);
+            }
+          }
+          return true;
+        })()
+      `,
+      returnByValue: true,
+    }, { sessionId });
+    await sleep(500);
+  }
+
   console.log('[wechat] Selecting #output content...');
   await cdp.send<{ result: { value: unknown } }>('Runtime.evaluate', {
     expression: `
@@ -176,7 +198,7 @@ async function parseMarkdownWithPlaceholders(markdownPath: string, theme?: strin
   return JSON.parse(output);
 }
 
-function parseHtmlMeta(htmlPath: string): { title: string; author: string; summary: string } {
+function parseHtmlMeta(htmlPath: string): { title: string; author: string; summary: string; contentImages: ImageInfo[] } {
   const content = fs.readFileSync(htmlPath, 'utf-8');
 
   let title = '';
@@ -203,7 +225,45 @@ function parseHtmlMeta(htmlPath: string): { title: string; author: string; summa
     }
   }
 
-  return { title, author, summary };
+  const mdPath = htmlPath.replace(/\.html$/i, '.md');
+  if (fs.existsSync(mdPath)) {
+    const mdContent = fs.readFileSync(mdPath, 'utf-8');
+    const fmMatch = mdContent.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+    if (fmMatch) {
+      const lines = fmMatch[1]!.split('\n');
+      for (const line of lines) {
+        const colonIdx = line.indexOf(':');
+        if (colonIdx > 0) {
+          const key = line.slice(0, colonIdx).trim();
+          let value = line.slice(colonIdx + 1).trim();
+          if ((value.startsWith('"') && value.endsWith('"')) || (value.startsWith("'") && value.endsWith("'"))) {
+            value = value.slice(1, -1);
+          }
+          if (key === 'title' && !title) title = value;
+          if (key === 'author' && !author) author = value;
+          if ((key === 'description' || key === 'summary') && !summary) summary = value;
+        }
+      }
+    }
+  }
+
+  const contentImages: ImageInfo[] = [];
+  const imgRegex = /<img[^>]*\ssrc=["']([^"']+)["'][^>]*>/gi;
+  const matches = [...content.matchAll(imgRegex)];
+  for (const match of matches) {
+    const [fullTag, src] = match;
+    if (!src || src.startsWith('http')) continue;
+    const localPathMatch = fullTag.match(/data-local-path=["']([^"']+)["']/);
+    if (localPathMatch) {
+      contentImages.push({
+        placeholder: src,
+        localPath: localPathMatch[1]!,
+        originalPath: src,
+      });
+    }
+  }
+
+  return { title, author, summary, contentImages };
 }
 
 async function selectAndReplacePlaceholder(session: ChromeSession, placeholder: string): Promise<boolean> {
@@ -273,9 +333,13 @@ export async function postArticle(options: ArticleOptions): Promise<void> {
     effectiveAuthor = effectiveAuthor || meta.author;
     effectiveSummary = effectiveSummary || meta.summary;
     effectiveHtmlFile = htmlFile;
+    if (meta.contentImages.length > 0) {
+      contentImages = meta.contentImages;
+    }
     console.log(`[wechat] Title: ${effectiveTitle || '(empty)'}`);
     console.log(`[wechat] Author: ${effectiveAuthor || '(empty)'}`);
     console.log(`[wechat] Summary: ${effectiveSummary || '(empty)'}`);
+    console.log(`[wechat] Found ${contentImages.length} images to insert`);
   }
 
   if (effectiveTitle && effectiveTitle.length > 64) throw new Error(`Title too long: ${effectiveTitle.length} chars (max 64)`);
@@ -416,7 +480,7 @@ export async function postArticle(options: ArticleOptions): Promise<void> {
 
     if (effectiveHtmlFile && fs.existsSync(effectiveHtmlFile)) {
       console.log(`[wechat] Copying HTML content from: ${effectiveHtmlFile}`);
-      await copyHtmlFromBrowser(cdp, effectiveHtmlFile);
+      await copyHtmlFromBrowser(cdp, effectiveHtmlFile, contentImages);
       await sleep(500);
       console.log('[wechat] Pasting into editor...');
       await pasteFromClipboardInEditor(session);

skills/baoyu-xhs-images/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: baoyu-xhs-images
-description: Generates Xiaohongshu (Little Red Book) infographic series with 9 visual styles and 6 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
+description: Generates Xiaohongshu (Little Red Book) infographic series with 11 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style images optimized for XHS engagement. Use when user mentions "小红书图片", "XHS images", "RedNote infographics", "小红书种草", or wants social media infographics for Chinese platforms.
 ---
 
 # Xiaohongshu Infographic Series Generator
@@ -42,8 +42,8 @@ Break down complex content into eye-catching infographic series for Xiaohongshu
 
 | Dimension | Controls | Options |
 |-----------|----------|---------|
-| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard |
-| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow |
+| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, notebook, study-notes |
+| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow, mindmap, quadrant |
 
 Style × Layout can be freely combined. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density.
 
@@ -60,6 +60,8 @@ Style × Layout can be freely combined. Example: `--style notion --layout dense`
 | `pop` | Vibrant, energetic, eye-catching |
 | `notion` | Minimalist hand-drawn line art, intellectual |
 | `chalkboard` | Colorful chalk on black board, educational |
+| `notebook` | Hand-drawn infographic style, watercolor rendering + Morandi palette |
+| `study-notes` | Realistic handwritten photo style, blue pen + red annotations + yellow highlighter |
 
 Detailed style definitions: `references/presets/<style>.md`
 
@@ -73,6 +75,8 @@ Detailed style definitions: `references/presets/<style>.md`
 | `list` | Enumeration and ranking format (4-7 items) |
 | `comparison` | Side-by-side contrast layout |
 | `flow` | Process and timeline layout (3-6 steps) |
+| `mindmap` | Center radial mind map layout (4-8 branches) |
+| `quadrant` | Four-quadrant / circular section layout |
 
 Detailed layout definitions: `references/elements/canvas.md`
 
@@ -89,6 +93,8 @@ Detailed layout definitions: `references/elements/canvas.md`
 | Fun, exciting, wow, amazing | `pop` | sparse/list |
 | Knowledge, concept, productivity, SaaS | `notion` | dense/list |
 | Education, tutorial, learning, teaching, classroom | `chalkboard` | balanced/dense |
+| Notes, hand-drawn, infographic, study, mindmap, Morandi | `notebook` | mindmap/balanced/dense |
+| Notes, handwritten, study guide, knowledge, realistic, photo | `study-notes` | dense/list/mindmap |
 
 ## Outline Strategies
 
@@ -417,17 +423,19 @@ Files:
 
 **Style × Layout Matrix** (✓✓ = highly recommended, ✓ = works well):
 
-| | sparse | balanced | dense | list | comparison | flow |
-|---|:---:|:---:|:---:|:---:|:---:|:---:|
-| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
-| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ |
-| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
-| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
-| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
-| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
-| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
-| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
-| chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
+| | sparse | balanced | dense | list | comparison | flow | mindmap | quadrant |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
+| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
+| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ |
+| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ |
+| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
+| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
+| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ |
+| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
+| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+| chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| notebook | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+| study-notes | ✗ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
 
 ## References
 

skills/baoyu-xhs-images/references/elements/canvas.md

@@ -51,6 +51,8 @@ Avoid placing critical content in these areas:
 | list | Vertical enumeration | 4-7 | Rankings, checklists, step guides |
 | comparison | Left vs Right | 2 sections | Before/after, pros/cons |
 | flow | Connected nodes | 3-6 steps | Processes, timelines, workflows |
+| mindmap | Center radial | 4-8 branches | Concept maps, brainstorming, topic overview |
+| quadrant | 4-section grid | 4 sections | SWOT analysis, priority matrix, classification |
 
 ## Layout by Position
 
@@ -106,3 +108,15 @@ For multi-element compositions:
 - Directional flow (top→bottom or left→right)
 - Connected nodes with arrows
 - Clear progression indicators
+
+### Mindmap Layout
+- Central topic node
+- Radial branches outward
+- Hierarchical sub-branches
+- Organic curved connections
+
+### Quadrant Layout
+- 4-section grid (2×2)
+- Clear axis labels
+- Each quadrant with distinct content
+- Optional circular variant for cycles

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