feat(baoyu-image-cards): add sketch-notes style, palette system, and 3 new presets

2026-08-08 09:53:02 +08:00 · 2026-04-09 13:04:57 -05:00
parent b7725a4ba8
commit ee1fc3c823
9 changed files with 348 additions and 52 deletions
@@ -0,0 +1,33 @@
+# Macaron Palette
+
+Soft pastel color blocks on warm cream background. Gentle, approachable, educational feel.
+
+## Background
+
+- Color: Warm cream (#F5F0E8)
+- Texture: Subtle paper grain, warm tone
+
+## Colors
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Warm Cream | #F5F0E8 | Primary background |
+| Text | Deep Charcoal | #2C3E50 | Titles, main content |
+| Secondary Text | Warm Gray | #6B6B6B | Annotations, labels |
+| Zone 1 | Macaron Blue | #A8D8EA | Information blocks |
+| Zone 2 | Macaron Lavender | #D5C6E0 | Information blocks |
+| Zone 3 | Macaron Mint | #B5E5CF | Information blocks |
+| Zone 4 | Macaron Peach | #F8D5C4 | Information blocks |
+| Accent | Coral Red | #E8655A | Emphasis, highlights |
+
+## Semantic Constraint
+
+Soft pastel macaron color palette. Use zone colors as rounded card backgrounds for distinct information blocks. Accent coral red sparingly for emphasis on key terms only. All colors should feel gentle and approachable — no saturated or neon tones.
+
+## Best Paired With
+
+- `sketch-notes` — natural pairing for hand-drawn educational content
+- `notion` — macaron accents soften the monochrome aesthetic
+- `chalkboard` — pastel chalk tones replace standard chalk colors
+- `warm` — reinforces the cozy, friendly feel
+- `fresh` — complements the clean, natural aesthetic
@@ -0,0 +1,32 @@
+# Neon Palette
+
+Vibrant neon colors on dark background. High-energy, futuristic, eye-catching.
+
+## Background
+
+- Color: Dark Purple (#1A1025)
+- Texture: Smooth, deep
+
+## Colors
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Dark Purple | #1A1025 | Primary background |
+| Text | Bright White | #F0F0F0 | Titles, main content |
+| Secondary Text | Light Lavender | #B8B8D4 | Annotations, labels |
+| Zone 1 | Neon Cyan | #00F5FF | Information blocks |
+| Zone 2 | Neon Magenta | #FF00FF | Information blocks |
+| Zone 3 | Neon Green | #39FF14 | Information blocks |
+| Zone 4 | Neon Pink | #FF6EC7 | Information blocks |
+| Accent | Electric Yellow | #FFFF00 | Emphasis, highlights |
+
+## Semantic Constraint
+
+Vibrant neon color palette on dark background. Colors should glow against the dark base. High contrast, futuristic feel. Use neon sparingly — too many glowing elements become chaotic. Let dark background breathe.
+
+## Best Paired With
+
+- `bold` — amplifies high-impact energy
+- `pop` — neon takes the vibrancy further
+- `minimal` — neon accents on dark create striking contrast
+- `notion` — futuristic knowledge card aesthetic
@@ -0,0 +1,32 @@
+# Warm Palette
+
+Warm earth tones on soft peach background. Cozy, inviting, no cool colors.
+
+## Background
+
+- Color: Soft Peach (#FFECD2)
+- Texture: Warm, slightly textured
+
+## Colors
+
+| Role | Color | Hex | Usage |
+|------|-------|-----|-------|
+| Background | Soft Peach | #FFECD2 | Primary background |
+| Text | Deep Brown | #744210 | Titles, main content |
+| Secondary Text | Warm Brown | #9C6644 | Annotations, labels |
+| Zone 1 | Warm Orange | #ED8936 | Information blocks |
+| Zone 2 | Terracotta | #C05621 | Information blocks |
+| Zone 3 | Golden Yellow | #F6AD55 | Information blocks |
+| Zone 4 | Dusty Rose | #D4A09A | Information blocks |
+| Accent | Burnt Sienna | #A0522D | Emphasis, highlights |
+
+## Semantic Constraint
+
+Warm-only color palette, no cool colors (no blue, green, purple). Earth tones throughout. Evokes comfort, warmth, and trust. All colors should feel like autumn sunlight.
+
+## Best Paired With
+
+- `warm` — natural pairing, amplifies cozy feel
+- `cute` — warm pastels enhance the sweet aesthetic
+- `retro` — earth tones complement vintage style
+- `sketch-notes` — warm educational feel
@@ -0,0 +1,100 @@
+---
+name: sketch-notes
+category: educational
+default_palette: macaron
+---
+
+# Sketch Notes Style
+
+Hand-drawn educational infographic with slight line wobble, like a high-quality presentation visual summary.
+
+## Element Combination
+
+```yaml
+canvas:
+  ratio: portrait-3-4
+  grid: single | dual
+
+image_effects:
+  cutout: stylized
+  stroke: none
+  filter: none
+
+typography:
+  decorated: handwritten
+  tags: rounded-badge
+  direction: horizontal
+
+decorations:
+  emphasis: underline | circle-mark | arrows-curvy | star-burst
+  background: paper-texture
+  doodles: hand-drawn-lines | stars-sparkles | arrows-curvy | squiggles
+  frames: rounded-rect
+```
+
+## Color Palette
+
+Default: **macaron** palette (see `palettes/macaron.md`)
+
+When no `--palette` is specified, uses macaron colors: warm cream background (#F5F0E8), macaron blue/lavender/mint/peach zone blocks, coral red accent.
+
+## Visual Elements
+
+- Hand-drawn wobble on all lines and shapes
+- Simple stick-figure characters at desks, working, thinking
+- Rounded cards with pastel color blocks as information zones
+- Color fills do NOT completely fill outlines (hand-painted feel)
+- Doodle decorations: small stars, underlines, checkmarks, lock icons, clipboard icons
+- Wavy hand-drawn arrows connecting zones with small text labels
+- Thought bubbles and speech bubbles with sketchy outlines
+- Simple conceptual icons (documents, lightbulbs, gears, arrows)
+- Generous whitespace between zones for clean composition
+
+## Typography
+
+- Bold hand-drawn lettering for titles (large, prominent)
+- Bold keywords within content zones
+- Smaller annotations in secondary text color
+- Hand-drawn quality on ALL text, no computer-generated fonts
+- Clear information hierarchy: title > zone labels > body text > annotations
+
+## Style Rules
+
+### Do
+- Maintain slight wobble on every line, shape, and border
+- Use palette zone colors as distinct information block backgrounds
+- Leave color fills intentionally incomplete at edges
+- Include simple doodle icons relevant to content
+- Keep generous whitespace between zones
+- Use accent color sparingly for emphasis on key terms
+- Draw connecting arrows with hand-drawn wavy feel
+
+### Don't
+- Use perfect geometric shapes or straight lines
+- Create photorealistic elements
+- Fill colors completely to edges (maintain hand-painted gap)
+- Use dark or saturated backgrounds
+- Overcrowd with too many decorative elements
+- Use gradient fills or glossy effects
+
+## Best Layout Pairings
+
+| Layout | Compatibility | Use Case |
+|--------|---------------|----------|
+| sparse | ✓ | Simple covers with single zone |
+| balanced | ✓✓ | Standard educational summaries |
+| dense | ✓✓ | Knowledge cards, concept maps |
+| list | ✓✓ | Step-by-step guides, checklists |
+| comparison | ✓ | Side-by-side concept contrast |
+| flow | ✓✓ | Process diagrams, workflows, tutorials |
+| mindmap | ✓✓ | Concept maps, radial knowledge maps |
+| quadrant | ✓ | Classification matrices |
+
+## Best For
+
+- Educational content, tutorials, how-to guides
+- Process and workflow explanations
+- Knowledge summaries, concept diagrams
+- Technical explanations made approachable
+- Visual summaries of articles or talks
+- Onboarding materials, friendly guides
@@ -1,36 +1,43 @@
 # Style Presets

-`--preset X` expands to a style + layout combination. Users can override either dimension.
+`--preset X` expands to a style + layout + optional palette combination. Users can override any dimension.

-| --preset | Style | Layout |
-|----------|-------|--------|
-| `knowledge-card` | `notion` | `dense` |
-| `checklist` | `notion` | `list` |
-| `concept-map` | `notion` | `mindmap` |
-| `swot` | `notion` | `quadrant` |
-| `tutorial` | `chalkboard` | `flow` |
-| `classroom` | `chalkboard` | `balanced` |
-| `study-guide` | `study-notes` | `dense` |
-| `cute-share` | `cute` | `balanced` |
-| `girly` | `cute` | `sparse` |
-| `cozy-story` | `warm` | `balanced` |
-| `product-review` | `fresh` | `comparison` |
-| `nature-flow` | `fresh` | `flow` |
-| `warning` | `bold` | `list` |
-| `versus` | `bold` | `comparison` |
-| `clean-quote` | `minimal` | `sparse` |
-| `pro-summary` | `minimal` | `balanced` |
-| `retro-ranking` | `retro` | `list` |
-| `throwback` | `retro` | `balanced` |
-| `pop-facts` | `pop` | `list` |
-| `hype` | `pop` | `sparse` |
-| `poster` | `screen-print` | `sparse` |
-| `editorial` | `screen-print` | `balanced` |
-| `cinematic` | `screen-print` | `comparison` |
+| --preset | Style | Layout | Palette |
+|----------|-------|--------|---------|
+| `knowledge-card` | `notion` | `dense` | |
+| `checklist` | `notion` | `list` | |
+| `concept-map` | `notion` | `mindmap` | |
+| `swot` | `notion` | `quadrant` | |
+| `tutorial` | `chalkboard` | `flow` | |
+| `classroom` | `chalkboard` | `balanced` | |
+| `study-guide` | `study-notes` | `dense` | |
+| `cute-share` | `cute` | `balanced` | |
+| `girly` | `cute` | `sparse` | |
+| `cozy-story` | `warm` | `balanced` | |
+| `product-review` | `fresh` | `comparison` | |
+| `nature-flow` | `fresh` | `flow` | |
+| `warning` | `bold` | `list` | |
+| `versus` | `bold` | `comparison` | |
+| `clean-quote` | `minimal` | `sparse` | |
+| `pro-summary` | `minimal` | `balanced` | |
+| `retro-ranking` | `retro` | `list` | |
+| `throwback` | `retro` | `balanced` | |
+| `pop-facts` | `pop` | `list` | |
+| `hype` | `pop` | `sparse` | |
+| `poster` | `screen-print` | `sparse` | |
+| `editorial` | `screen-print` | `balanced` | |
+| `cinematic` | `screen-print` | `comparison` | |
+| `hand-drawn-edu` | `sketch-notes` | `flow` | `macaron` |
+| `sketch-card` | `sketch-notes` | `dense` | `macaron` |
+| `sketch-summary` | `sketch-notes` | `balanced` | `macaron` |
+
+Empty Palette = use style's built-in colors (or style's `default_palette` if defined in frontmatter).

 ## Override Examples

 - `--preset knowledge-card --style chalkboard` = chalkboard style with dense layout
 - `--preset poster --layout quadrant` = screen-print style with quadrant layout
+- `--preset hand-drawn-edu --palette warm` = sketch-notes style with flow layout, warm palette instead of macaron
+- `--style notion --palette macaron` = notion rendering rules with macaron colors

-Explicit `--style`/`--layout` flags always override preset values.
+Explicit `--style`/`--layout`/`--palette` flags always override preset values.
@@ -112,6 +112,37 @@ When `style: screen-print`, replace the standard Core Principles and Text Style
 - Paper grain texture beneath all colors
 ```

+## Palette Override
+
+When `--palette` is specified (or style has `default_palette` in frontmatter and no explicit `--palette`), palette colors **replace** the style's Color Palette in the prompt. Style rendering rules (Visual Elements, Typography, Style Rules) remain unchanged.
+
+Load from `palettes/{palette}.md` and override:
+
+```markdown
+## Palette Override: {palette_name}
+
+**Background**: {palette background color and hex}
+
+**Colors**:
+- Text: {text color and hex}
+- Secondary: {secondary text color and hex}
+- Zone 1: {zone color and hex}
+- Zone 2: {zone color and hex}
+- Zone 3: {zone color and hex}
+- Zone 4: {zone color and hex}
+- Accent: {accent color and hex}
+
+**Constraint**: {semantic constraint from palette}
+```
+
+**Override rules**:
+1. Palette Background **replaces** style's background color (keep style's texture description)
+2. Palette Colors **replace** style's Color Palette section entirely
+3. Palette Semantic Constraint is appended to the style section
+4. If no `--palette` and style has `default_palette` → load that palette
+5. If no `--palette` and no `default_palette` → use style's built-in colors (no override)
+6. Explicit `--palette` always overrides style's `default_palette`
+
 ## Layout Section Assembly

 Load from `elements/canvas.md` and extract relevant layout:
@@ -159,26 +190,38 @@ be legible but not distracting from the main content.

 ### Step 0: Resolve Style Preset (if `--preset` used)

-If user specified `--preset`, resolve to style + layout from `references/style-presets.md`:
+If user specified `--preset`, resolve to style + layout + palette from `references/style-presets.md`:

 ```python
-# e.g., --preset knowledge-card → style=notion, layout=dense
-style, layout = resolve_preset(preset_name)
+# e.g., --preset hand-drawn-edu → style=sketch-notes, layout=flow, palette=macaron
+style, layout, palette = resolve_preset(preset_name)
 ```

-Explicit `--style`/`--layout` flags override preset values.
+Explicit `--style`/`--layout`/`--palette` flags override preset values.

 ### Step 1: Load Style Definition

 ```python
-preset = load_preset(style_name)  # e.g., "notion"
+preset = load_preset(style_name)  # e.g., "sketch-notes"
 ```

 Extract:
- Color palette
+- Color palette (may be overridden by palette)
 - Visual elements
 - Typography style
 - Best practices (do/don't)
+- `default_palette` from frontmatter (if present)
+
+### Step 1.5: Apply Palette Override (if applicable)
+
+```python
+# Priority: explicit --palette > preset palette > style default_palette > none
+palette = resolve_palette(cli_palette, preset_palette, style_default_palette)
+if palette:
+    palette_def = load_palette(palette)  # e.g., "macaron"
+    # Replace style colors with palette colors
+    # Keep style rendering rules (visual elements, typography, style rules)
+```

 ### Step 2: Load Layout

@@ -327,6 +370,7 @@ Please use nano banana pro to generate the infographic based on the specificatio
 Before generating, verify:

 - [ ] Style section loaded from correct preset
+- [ ] Palette override applied (if `--palette` specified or style has `default_palette`)
 - [ ] Layout section matches outline specification
 - [ ] Content accurately reflects outline entry
 - [ ] Language matches source content