feat: Update version number to 0.3.1 in marketplace.json

.claude-plugin/marketplace.json

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

.gitignore

@@ -139,3 +139,4 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 tests-data/
 
+.DS_Store

README.md

@@ -56,16 +56,37 @@ Interacts with Gemini Web to generate text and images.
 
 ### xhs-images
 
-Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics.
+Xiaohongshu (RedNote) infographic series generator. Breaks down content into 1-10 cartoon-style infographics with **Style × Layout** two-dimensional system.
 
 ```bash
-# Specify article path
+# Auto-select style and layout
 /xhs-images posts/ai-future/article.md
 
+# Specify style
+/xhs-images posts/ai-future/article.md --style notion
+
+# Specify layout
+/xhs-images posts/ai-future/article.md --layout dense
+
+# Combine style and layout
+/xhs-images posts/ai-future/article.md --style tech --layout list
+
 # Direct content input
 /xhs-images 今日星座运势
 ```
 
+**Styles** (visual aesthetics): `cute` (default), `fresh`, `tech`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`
+
+**Layouts** (information density):
+| Layout | Density | Best for |
+|--------|---------|----------|
+| `sparse` | 1-2 pts | Covers, quotes |
+| `balanced` | 3-4 pts | Regular content |
+| `dense` | 5-8 pts | Knowledge cards, cheat sheets |
+| `list` | 4-7 items | Checklists, rankings |
+| `comparison` | 2 sides | Before/after, pros/cons |
+| `flow` | 3-6 steps | Processes, timelines |
+
 ### cover-image
 
 Generate hand-drawn style cover images for articles with multiple style options.
@@ -103,7 +124,7 @@ Generate professional slide deck images from content. Creates comprehensive outl
 /slide-deck path/to/article.md --lang zh
 ```
 
-Available styles: `editorial` (default), `corporate`, `technical`, `playful`, `minimal`, `storytelling`, `warm`, `retro-flat`
+Available styles: `editorial` (default), `corporate`, `technical`, `playful`, `minimal`, `storytelling`, `warm`, `retro-flat`, `notion`
 
 ### post-to-wechat
 

README.zh.md

@@ -56,16 +56,37 @@
 
 ### xhs-images
 
-小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图。
+小红书信息图系列生成器。将内容拆解为 1-10 张卡通风格信息图，支持 **风格 × 布局** 二维系统。
 
 ```bash
-# 指定文章路径
+# 自动选择风格和布局
 /xhs-images posts/ai-future/article.md
 
+# 指定风格
+/xhs-images posts/ai-future/article.md --style notion
+
+# 指定布局
+/xhs-images posts/ai-future/article.md --layout dense
+
+# 组合风格和布局
+/xhs-images posts/ai-future/article.md --style tech --layout list
+
 # 直接输入内容
 /xhs-images 今日星座运势
 ```
 
+**风格**（视觉美学）：`cute`（默认）、`fresh`、`tech`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`
+
+**布局**（信息密度）：
+| 布局 | 密度 | 适用场景 |
+|------|------|----------|
+| `sparse` | 1-2 点 | 封面、金句 |
+| `balanced` | 3-4 点 | 常规内容 |
+| `dense` | 5-8 点 | 知识卡片、干货总结 |
+| `list` | 4-7 项 | 清单、排行 |
+| `comparison` | 双栏 | 对比、优劣 |
+| `flow` | 3-6 步 | 流程、时间线 |
+
 ### cover-image
 
 为文章生成手绘风格封面图，支持多种风格选项。
@@ -103,7 +124,7 @@
 /slide-deck path/to/article.md --lang zh
 ```
 
-可用风格：`editorial`（默认）、`corporate`、`technical`、`playful`、`minimal`、`storytelling`、`warm`、`retro-flat`
+可用风格：`editorial`（默认）、`corporate`、`technical`、`playful`、`minimal`、`storytelling`、`warm`、`retro-flat`、`notion`
 
 ### post-to-wechat
 

skills/article-illustrator/SKILL.md

@@ -30,7 +30,7 @@ Analyze article structure and content, identify positions requiring visual aids,
 
 ## Style Gallery
 
-### 1. `elegant` (Default)
+### 1. `elegant`
 Refined, sophisticated, professional
 - **Colors**: Soft coral, muted teal, dusty rose, cream background
 - **Elements**: Delicate line work, subtle icons, balanced composition
@@ -78,6 +78,12 @@ Raw, authentic, notebook-style
 - **Elements**: Rough lines, sketch marks, handwritten notes, arrows
 - **Best for**: Ideas in progress, brainstorming, thought processes
 
+### 9. `notion` (Default)
+Minimalist hand-drawn line art, intellectual
+- **Colors**: Black outlines, white background, 1-2 pastel accents
+- **Elements**: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
+- **Best for**: Knowledge sharing, concept explanations, SaaS content, productivity articles
+
 ## Auto Style Selection
 
 When no `--style` is specified, analyze content to select the best style:
@@ -92,6 +98,7 @@ When no `--style` is specified, analyze content to select the best style:
 | Nature, eco, wellness, health, organic, green | `nature` |
 | Idea, thought, concept, draft, brainstorm | `sketch` |
 | Business, professional, strategy, analysis | `elegant` |
+| Knowledge, concept, productivity, SaaS, notion | `notion` |
 
 ## File Management
 
@@ -194,17 +201,16 @@ Style notes: [specific style characteristics]
 
 ### Step 5: Generate Images
 
-For each illustration, call:
+**Image Generation Skill Selection**:
+1. Check available image generation skills
+2. If multiple skills available, ask user to choose
 
-```bash
-/gemini-web --promptfiles [SKILL_ROOT]/skills/article-illustrator/prompts/system.md [ARTICLE_DIR]/imgs/prompts/illustration-[slug].md --image [ARTICLE_DIR]/imgs/illustration-[slug].png
-```
-
-Generation flow:
-1. Generate images sequentially
-2. After each image, output progress: "Generated X/N"
-3. On failure, auto-retry once
-4. If retry fails, log reason, continue to next
+**Generation Flow**:
+1. Call selected image generation skill with prompt file and output path
+2. Generate images sequentially
+3. After each image, output progress: "Generated X/N"
+4. On failure, auto-retry once
+5. If retry fails, log reason, continue to next
 
 ### Step 6: Update Article
 
@@ -304,6 +310,15 @@ Accents: Single highlight color (blue, red, or yellow)
 Elements: Rough sketch lines, arrows, handwritten labels, crossed-out marks
 ```
 
+### notion
+```
+Colors: Black (#1A1A1A), dark gray (#4A4A4A)
+Background: Pure white (#FFFFFF), off-white (#FAFAFA)
+Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
+Elements: Simple line doodles, hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace
+Typography: Clean hand-drawn lettering, simple sans-serif labels
+```
+
 ## Notes
 
 - Illustrations serve the content: supplement information, visualize concepts

skills/cover-image/SKILL.md

@@ -191,11 +191,12 @@ Note: No title text, pure visual illustration only.
 
 ### Step 5: Generate Image
 
-Call gemini-web to generate the cover:
+**Image Generation Skill Selection**:
+1. Check available image generation skills
+2. If multiple skills available, ask user to choose
 
-```bash
-/gemini-web --promptfiles [SKILL_ROOT]/skills/cover-image/prompts/system.md [PROMPT_PATH] --image [OUTPUT_PATH]
-```
+**Generation**:
+Call selected image generation skill with prompt file and output path.
 
 ### Step 6: Output Summary
 

skills/slide-deck/SKILL.md

@@ -94,6 +94,12 @@ Flat vector illustration with retro palette
 - **Colors**: Retro muted palette - dusty pink (#E8B4B8), sage green (#A8C686), mustard yellow (#E8B84A), off-white background (#F5F0E6)
 - **Best for**: Tutorials, explainers, product introductions, educational content
 
+### 9. `notion`
+Minimalist hand-drawn line art, intellectual
+- **Aesthetic**: Simple line doodles with hand-drawn wobble, geometric shapes, maximum whitespace, SaaS product feel
+- **Colors**: Black outlines (#1A1A1A), white background (#FFFFFF), 1-2 pastel accents (blue #A8D4F0, yellow #F9E79F)
+- **Best for**: Knowledge sharing, concept explanations, productivity content, SaaS presentations
+
 ## Audience Presets
 
 | Audience | Approach |
@@ -152,6 +158,7 @@ path/to/
 | Research, analysis, thought leadership | `editorial` |
 | Wellness, healing, cozy, self-care, lifestyle, comfort | `warm` |
 | Tutorial, explainer, how-to, beginner, product, guide | `retro-flat` |
+| Knowledge, concept, productivity, SaaS, notion, intellectual | `notion` |
 
 4. Extract key information:
    - Core narrative and key messages
@@ -389,6 +396,18 @@ Visual Elements: Clear black monoline outlines (uniform width), flat color fills
 Style Rules: MUST use clear black outlines on all elements, NO 3D effects, NO gradients, simple flat color blocks only
 ```
 
+### notion
+```
+Design Aesthetic: Minimalist hand-drawn line art with intellectual SaaS product feel, Notion-style doodles
+Background Color: Pure white #FFFFFF, off-white #FAFAFA
+Primary Font: Clean hand-drawn lettering, simple sans-serif
+Secondary Font: Simple sans-serif labels
+Primary Text Color: Black #1A1A1A, dark gray #4A4A4A
+Primary Accent Color: Pastel blue #A8D4F0, Pastel yellow #F9E79F, Pastel pink #FADBD8
+Visual Elements: Simple line doodles with hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace, single-weight ink lines
+Style Rules: Single color lines (black/dark gray), 1-2 pastel accents only, NO complex gradients, NO heavy shadows, imperfect hand-drawn feel
+```
+
 ## Notes
 
 ### Design Philosophy

skills/xhs-images/SKILL.md

@@ -10,20 +10,24 @@ Break down complex content into eye-catching infographic series for Xiaohongshu
 ## Usage
 
 ```bash
-# Auto-select style based on content
+# Auto-select style and layout based on content
 /xhs-images posts/ai-future/article.md
 
-# Specify a style
-/xhs-images posts/ai-future/article.md --style cute
-/xhs-images posts/ai-future/article.md --style tech
-/xhs-images posts/ai-future/article.md --style minimal
+# Specify style
+/xhs-images posts/ai-future/article.md --style notion
+
+# Specify layout
+/xhs-images posts/ai-future/article.md --layout dense
+
+# Combine style and layout
+/xhs-images posts/ai-future/article.md --style tech --layout list
 
 # Direct content input
 /xhs-images
 [paste content]
 
-# Direct input with style
-/xhs-images --style bold
+# Direct input with options
+/xhs-images --style bold --layout comparison
 [paste content]
 ```
 
@@ -31,7 +35,17 @@ Break down complex content into eye-catching infographic series for Xiaohongshu
 
 | Option | Description |
 |--------|-------------|
-| `--style <name>` | Specify infographic style (see Style Gallery below) |
+| `--style <name>` | Visual style (see Style Gallery) |
+| `--layout <name>` | Information layout (see Layout Gallery) |
+
+## Two Dimensions
+
+| Dimension | Controls | Options |
+|-----------|----------|---------|
+| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, tech, warm, bold, minimal, retro, pop, notion |
+| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow |
+
+Style × Layout can be freely combined. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density.
 
 ## Style Gallery
 
@@ -83,6 +97,56 @@ Vibrant, energetic, eye-catching
 - **Elements**: Bold shapes, comic-style elements, dynamic compositions
 - **Best for**: Exciting announcements, fun facts, engaging tutorials
 
+### 9. `notion`
+Minimalist hand-drawn line art, intellectual
+- **Colors**: Black outlines, white background, 1-2 pastel accents
+- **Elements**: Simple line doodles, geometric shapes, hand-drawn wobble, maximum whitespace
+- **Best for**: Knowledge sharing, concept explanations, SaaS content, productivity tips
+
+## Layout Gallery
+
+### 1. `sparse` (Default)
+Minimal information, maximum impact
+- **Density**: 1-2 key points per image
+- **Whitespace**: 60-70% of canvas
+- **Structure**: Single focal point, one core message
+- **Best for**: Covers, quotes, impactful statements, emotional content
+
+### 2. `balanced`
+Standard content layout
+- **Density**: 3-4 key points per image
+- **Whitespace**: 40-50% of canvas
+- **Structure**: Title + 3-4 bullet points or sections
+- **Best for**: Regular content pages, tutorials, explanations
+
+### 3. `dense`
+High information density, knowledge card style
+- **Density**: 5-8 key points per image
+- **Whitespace**: 20-30% of canvas
+- **Structure**: Multiple sections, structured grid, more text
+- **Best for**: Summary cards, cheat sheets, comprehensive guides, 干货总结
+
+### 4. `list`
+Enumeration and ranking format
+- **Density**: 4-7 items
+- **Whitespace**: 30-40% of canvas
+- **Structure**: Numbered or bulleted vertical list, consistent item format
+- **Best for**: Top N lists, checklists, step-by-step guides, rankings
+
+### 5. `comparison`
+Side-by-side contrast layout
+- **Density**: 2 main sections with 2-4 points each
+- **Whitespace**: 30-40% of canvas
+- **Structure**: Left vs Right, Before/After, Pros/Cons
+- **Best for**: Comparisons, transformations, decision helpers, 对比图
+
+### 6. `flow`
+Process and timeline layout
+- **Density**: 3-6 steps/stages
+- **Whitespace**: 30-40% of canvas
+- **Structure**: Connected nodes with arrows, sequential flow
+- **Best for**: Processes, timelines, cause-effect chains, workflows
+
 ## Auto Style Selection
 
 When no `--style` is specified, analyze content to select:
@@ -97,6 +161,27 @@ When no `--style` is specified, analyze content to select:
 | Professional, business, elegant, simple | `minimal` |
 | Classic, vintage, old, traditional | `retro` |
 | Fun, exciting, wow, amazing | `pop` |
+| Knowledge, concept, productivity, SaaS, notion | `notion` |
+
+## Auto Layout Selection
+
+When no `--layout` is specified, analyze content structure to select:
+
+| Content Signals | Selected Layout |
+|----------------|-----------------|
+| Single quote, one key point, cover | `sparse` |
+| 3-4 points, explanation, tutorial | `balanced` |
+| 5+ points, summary, cheat sheet, 干货 | `dense` |
+| Numbered items, top N, checklist, steps | `list` |
+| vs, compare, before/after, pros/cons | `comparison` |
+| Process, flow, timeline, steps with order | `flow` |
+
+**Layout by Position**:
+| Position | Recommended Layout |
+|----------|-------------------|
+| Cover | `sparse` |
+| Content | `balanced` or content-appropriate |
+| Ending | `sparse` or `balanced` |
 
 ## File Management
 
@@ -136,11 +221,11 @@ xhs-outputs/
 
 ## Workflow
 
-### Step 1: Analyze Content & Select Style
+### Step 1: Analyze Content & Select Style/Layout
 
 1. Read content
-2. If `--style` specified, use that style
-3. Otherwise, scan for style signals and auto-select
+2. If `--style` specified, use that style; otherwise auto-select
+3. If `--layout` specified, use that layout; otherwise auto-select per image
 4. Determine image count based on content complexity:
 
 | Content Type | Image Count |
@@ -149,15 +234,18 @@ xhs-outputs/
 | Medium complexity / tutorial | 4-6 |
 | Deep dive / multi-dimensional | 7-10 |
 
+**Note**: Layout can vary per image in a series. Cover typically uses `sparse`, content pages use `balanced`/`dense`/`list` as appropriate.
+
 ### Step 2: Generate Outline
 
-Plan for each image with style-specific approach:
+Plan for each image with style and layout specifications:
 
 ```markdown
 # Xiaohongshu Infographic Series Outline
 
 **Topic**: [topic description]
 **Style**: [selected style]
+**Default Layout**: [selected layout or "varies"]
 **Image Count**: N
 **Generated**: YYYY-MM-DD HH:mm
 
@@ -166,6 +254,7 @@ Plan for each image with style-specific approach:
 ## Image 1 of N
 
 **Position**: Cover
+**Layout**: sparse
 **Core Message**: [one-liner]
 **Filename**: 01-cover.png
 
@@ -173,11 +262,24 @@ Plan for each image with style-specific approach:
 - Title: xxx
 - Subtitle: xxx
 
-**Visual Concept**: [style-appropriate description]
+**Visual Concept**: [style + layout appropriate description]
 
 ---
 
 ## Image 2 of N
+
+**Position**: Content
+**Layout**: [balanced/dense/list/comparison/flow]
+**Core Message**: [one-liner]
+**Filename**: 02-xxx.png
+
+**Text Content**:
+- Title: xxx
+- Points: [list based on layout density]
+
+**Visual Concept**: [description matching style + layout]
+
+---
 ...
 ```
 
@@ -187,18 +289,19 @@ Save outline as `outline.md`.
 
 ### Step 4: Generate Images One by One
 
-For each image, create a style-specific prompt file.
+For each image, create a prompt file with style and layout specifications.
 
 **Prompt Format**:
 
 ```markdown
 Infographic theme: [topic]
 Style: [style name]
+Layout: [layout name]
 Position: [cover/content/ending]
 
 Visual composition:
 - Main visual: [style-appropriate description]
-- Layout: [element positioning for 3:4 vertical format]
+- Arrangement: [layout-specific structure]
 - Decorative elements: [style-specific decorations]
 
 Color scheme:
@@ -208,21 +311,32 @@ Color scheme:
 
 Text content:
 - Title: 「xxx」(large, prominent)
-- Key points: 「xxx」「xxx」
+- Key points: [based on layout density]
 
-Style notes: [specific style characteristics]
+Layout instructions: [layout-specific guidance]
+Style notes: [style-specific characteristics]
 ```
 
-Then generate using:
+**Layout-Specific Instructions**:
 
-```bash
-/gemini-web --promptfiles [SKILL_ROOT]/skills/xhs-images/prompts/system.md [TARGET_DIR]/prompts/01-cover.md --image [TARGET_DIR]/01-cover.png
-```
+| Layout | Arrangement Instructions |
+|--------|-------------------------|
+| `sparse` | Single focal point centered, 1-2 text elements, maximum breathing room |
+| `balanced` | Title at top, 3-4 points in clear sections, moderate spacing |
+| `dense` | Grid or multi-section layout, 5-8 points, compact but organized |
+| `list` | Vertical numbered/bulleted list, consistent item spacing, clear hierarchy |
+| `comparison` | Two-column split, clear divider, mirrored structure left/right |
+| `flow` | Horizontal or vertical flow with arrows, connected nodes/steps |
 
-After each image:
-1. Confirm generation success
-2. Report progress: "Generated X/N"
-3. Continue to next
+**Image Generation Skill Selection**:
+1. Check available image generation skills
+2. If multiple skills available, ask user to choose
+
+**Generation Flow**:
+1. Call selected image generation skill with prompt file and output path
+2. Confirm generation success
+3. Report progress: "Generated X/N"
+4. Continue to next
 
 ### Step 5: Completion Report
 
@@ -231,13 +345,14 @@ Xiaohongshu Infographic Series Complete!
 
 Topic: [topic]
 Style: [style name]
+Layout: [layout name or "varies"]
 Location: [directory path]
 Images: N total
 
-- 01-cover.png ✓ Cover
-- 02-content-1.png ✓ Content
-- 03-content-2.png ✓ Content
-- 04-ending.png ✓ Ending
+- 01-cover.png ✓ Cover (sparse)
+- 02-content-1.png ✓ Content (balanced)
+- 03-content-2.png ✓ Content (dense)
+- 04-ending.png ✓ Ending (sparse)
 
 Outline: outline.md
 ```
@@ -316,11 +431,98 @@ Elements: Bold shapes, speech bubbles, comic-style effects, starburst
 Typography: Dynamic, energetic hand lettering with outlines
 ```
 
+### notion
+```
+Colors: Black (#1A1A1A), dark gray (#4A4A4A)
+Background: Pure white (#FFFFFF), off-white (#FAFAFA)
+Accents: Pastel blue (#A8D4F0), pastel yellow (#F9E79F), pastel pink (#FADBD8)
+Elements: Simple line doodles, hand-drawn wobble effect, geometric shapes, stick figures, maximum whitespace
+Typography: Clean hand-drawn lettering, simple sans-serif labels
+```
+
+## Layout Reference Details
+
+### sparse
+```
+Information Density: Very Low (1-2 points)
+Whitespace: 60-70%
+Structure: Single centered focal point
+Text Elements: Title only, or title + one subtitle/tagline
+Visual Balance: Centered, symmetrical, breathing room on all sides
+Best Pairing: Any style, especially effective with bold, minimal, notion
+```
+
+### balanced
+```
+Information Density: Medium (3-4 points)
+Whitespace: 40-50%
+Structure: Title at top, content sections below
+Text Elements: Title + 3-4 bullet points or key messages
+Visual Balance: Top-weighted title, evenly distributed content below
+Best Pairing: All styles work well
+```
+
+### dense
+```
+Information Density: High (5-8 points)
+Whitespace: 20-30%
+Structure: Multi-section grid or stacked blocks
+Text Elements: Title + multiple sections with headers + numerous points
+Visual Balance: Organized chaos, clear section boundaries, compact spacing
+Best Pairing: tech, notion, minimal (clean styles prevent visual overload)
+```
+
+### list
+```
+Information Density: Medium-High (4-7 items)
+Whitespace: 30-40%
+Structure: Vertical enumeration with numbers or bullets
+Text Elements: Title + numbered/bulleted items, consistent format per item
+Visual Balance: Left-aligned list, clear number/bullet hierarchy
+Best Pairing: All styles, especially cute (checklist), bold (rankings)
+```
+
+### comparison
+```
+Information Density: Medium (2×2-4 points)
+Whitespace: 30-40%
+Structure: Two-column split with center divider
+Text Elements: Title + left label + right label + mirrored points
+Visual Balance: Symmetrical left/right, clear visual contrast
+Best Pairing: bold (dramatic contrast), tech (data comparison), warm (before/after stories)
+```
+
+### flow
+```
+Information Density: Medium (3-6 steps)
+Whitespace: 30-40%
+Structure: Connected nodes with directional arrows
+Text Elements: Title + step labels + optional descriptions per step
+Visual Balance: Directional flow (top→bottom or left→right), clear progression
+Best Pairing: tech (process diagrams), notion (simple flows), fresh (organic flows)
+```
+
 ## Content Breakdown Principles
 
-1. **Cover (Image 1)**: Strong visual impact, core title, attention hook
-2. **Content (Middle)**: One core point per image, moderate information density
-3. **Ending (Last)**: Summary / call-to-action / memorable quote
+1. **Cover (Image 1)**: Strong visual impact, core title, attention hook → `sparse` layout
+2. **Content (Middle)**: Core points per image, density varies by content → `balanced`/`dense`/`list`/`comparison`/`flow`
+3. **Ending (Last)**: Summary / call-to-action / memorable quote → `sparse` or `balanced`
+
+**Style × Layout Matrix** (recommended combinations):
+
+| | sparse | balanced | dense | list | comparison | flow |
+|---|:---:|:---:|:---:|:---:|:---:|:---:|
+| cute | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
+| fresh | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ |
+| tech | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
+| bold | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| minimal | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
+| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ |
+| pop | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
+| notion | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓✓ |
+
+✓✓ = highly recommended, ✓ = works well
 
 ## Notes