feat(baoyu-image-cards): add sketch-notes style, palette system, and 3 new presets
This commit is contained in:
Jim Liu 宝玉
parent
b7725a4ba8
commit
ee1fc3c823
|
|
@ -99,7 +99,7 @@ Content generation and publishing skills.
|
|||
|
||||
#### baoyu-image-cards
|
||||
|
||||
Image card series generator. Breaks down content into 1-10 cartoon-style image cards with **Style × Layout** two-dimensional system.
|
||||
Image card series generator. Breaks down content into 1-10 cartoon-style image cards with **Style × Layout** system and optional palette override.
|
||||
|
||||
```bash
|
||||
# Auto-select style and layout
|
||||
|
|
@ -114,6 +114,9 @@ Image card series generator. Breaks down content into 1-10 cartoon-style image c
|
|||
# Combine style and layout
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# Override palette
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --palette macaron
|
||||
|
||||
# Direct content input
|
||||
/baoyu-image-cards 今日星座运势
|
||||
|
||||
|
|
@ -122,7 +125,9 @@ Image card series generator. Breaks down content into 1-10 cartoon-style image c
|
|||
/baoyu-image-cards posts/ai-future/article.md --yes --preset knowledge-card
|
||||
```
|
||||
|
||||
**Styles** (visual aesthetics): `cute` (default), `fresh`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`, `chalkboard`
|
||||
**Styles** (visual aesthetics): `cute` (default), `fresh`, `warm`, `bold`, `minimal`, `retro`, `pop`, `notion`, `chalkboard`, `study-notes`, `screen-print`, `sketch-notes`
|
||||
|
||||
**Palettes** (optional color override): `macaron`, `warm`, `neon`
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
|
|
|
|||
|
|
@ -99,7 +99,7 @@ clawhub install baoyu-markdown-to-html
|
|||
|
||||
#### baoyu-image-cards
|
||||
|
||||
图片卡片系列生成器。将内容拆解为 1-10 张卡通风格图片卡片，支持 **风格 × 布局** 二维系统。
|
||||
图片卡片系列生成器。将内容拆解为 1-10 张卡通风格图片卡片，支持 **风格 × 布局** 系统和可选配色覆盖。
|
||||
|
||||
```bash
|
||||
# 自动选择风格和布局
|
||||
|
|
@ -114,6 +114,9 @@ clawhub install baoyu-markdown-to-html
|
|||
# 组合风格和布局
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# 覆盖配色
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --palette macaron
|
||||
|
||||
# 直接输入内容
|
||||
/baoyu-image-cards 今日星座运势
|
||||
|
||||
|
|
@ -122,7 +125,9 @@ clawhub install baoyu-markdown-to-html
|
|||
/baoyu-image-cards posts/ai-future/article.md --yes --preset knowledge-card
|
||||
```
|
||||
|
||||
**风格**（视觉美学）：`cute`（默认）、`fresh`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`、`chalkboard`
|
||||
**风格**（视觉美学）：`cute`（默认）、`fresh`、`warm`、`bold`、`minimal`、`retro`、`pop`、`notion`、`chalkboard`、`study-notes`、`screen-print`、`sketch-notes`
|
||||
|
||||
**配色**（可选颜色覆盖）：`macaron`、`warm`、`neon`
|
||||
|
||||
**风格预览**：
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
name: baoyu-image-cards
|
||||
description: Generates infographic image card series with 11 visual styles and 8 layouts. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", or wants social media infographic series.
|
||||
description: Generates infographic image card series with 12 visual styles, 8 layouts, and 3 color palettes. Breaks content into 1-10 cartoon-style image cards optimized for social media engagement. Use when user mentions "小红书图片", "小红书种草", "小绿书", "微信图文", "微信贴图", "image cards", "图片卡片", or wants social media infographic series.
|
||||
version: 1.56.1
|
||||
metadata:
|
||||
openclaw:
|
||||
|
|
@ -26,12 +26,18 @@ Break down complex content into eye-catching image card series with multiple sty
|
|||
# Combine style and layout
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --layout list
|
||||
|
||||
# Use preset (style + layout shorthand)
|
||||
# Specify palette (override style colors)
|
||||
/baoyu-image-cards posts/ai-future/article.md --style notion --palette macaron
|
||||
|
||||
# Use preset (style + layout + optional palette shorthand)
|
||||
/baoyu-image-cards posts/ai-future/article.md --preset knowledge-card
|
||||
|
||||
# Preset with override
|
||||
/baoyu-image-cards posts/ai-future/article.md --preset poster --layout quadrant
|
||||
|
||||
# Preset with palette override
|
||||
/baoyu-image-cards posts/ai-future/article.md --preset hand-drawn-edu --palette warm
|
||||
|
||||
# Direct content input
|
||||
/baoyu-image-cards
|
||||
[paste content]
|
||||
|
|
@ -51,20 +57,28 @@ Break down complex content into eye-catching image card series with multiple sty
|
|||
|--------|-------------|
|
||||
| `--style <name>` | Visual style (see Style Gallery) |
|
||||
| `--layout <name>` | Information layout (see Layout Gallery) |
|
||||
| `--preset <name>` | Style + layout shorthand (see [Style Presets](references/style-presets.md)) |
|
||||
| `--palette <name>` | Color palette override (see Palette Gallery) |
|
||||
| `--preset <name>` | Style + layout + optional palette shorthand (see [Style Presets](references/style-presets.md)) |
|
||||
| `--yes` | Non-interactive mode: skip all confirmations. Uses EXTEND.md preferences if found, otherwise uses defaults (no watermark, auto style/layout). Auto-confirms recommended plan (Path A). Suitable for scheduled tasks and automation. |
|
||||
|
||||
## Two Dimensions
|
||||
## Dimensions
|
||||
|
||||
| Dimension | Controls | Options |
|
||||
|-----------|----------|---------|
|
||||
| **Style** | Visual aesthetics: colors, lines, decorations | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, study-notes, screen-print |
|
||||
| **Style** | Visual aesthetics: lines, decorations, rendering | cute, fresh, warm, bold, minimal, retro, pop, notion, chalkboard, study-notes, screen-print, sketch-notes |
|
||||
| **Layout** | Information structure: density, arrangement | sparse, balanced, dense, list, comparison, flow, mindmap, quadrant |
|
||||
| **Palette** (optional) | Color override: replaces style's default colors | macaron, warm, neon |
|
||||
|
||||
Style × Layout can be freely combined. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density.
|
||||
Style × Layout can be freely combined, with optional palette override. Example: `--style notion --layout dense` creates an intellectual-looking knowledge card with high information density. Add `--palette macaron` to swap colors to soft pastels while keeping notion's rendering style.
|
||||
|
||||
Or use presets: `--preset knowledge-card` → style + layout in one flag. See [Style Presets](references/style-presets.md).
|
||||
|
||||
**Palette behavior**:
|
||||
- No `--palette` → style uses its built-in colors (or its `default_palette` if defined)
|
||||
- `--palette macaron` → overrides any style's colors with macaron palette
|
||||
- Palette replaces colors only; style rendering rules (line treatment, elements, textures) stay unchanged
|
||||
- Some styles declare a `default_palette` (e.g., sketch-notes defaults to macaron)
|
||||
|
||||
## Style Gallery
|
||||
|
||||
| Style | Description |
|
||||
|
|
@ -80,6 +94,7 @@ Or use presets: `--preset knowledge-card` → style + layout in one flag. See [S
|
|||
| `chalkboard` | Colorful chalk on black board, educational |
|
||||
| `study-notes` | Realistic handwritten photo style, blue pen + red annotations + yellow highlighter |
|
||||
| `screen-print` | Bold poster art, halftone textures, limited colors, symbolic storytelling |
|
||||
| `sketch-notes` | Hand-drawn educational infographic, macaron pastels on warm cream, wobble lines |
|
||||
|
||||
Detailed style definitions: `references/presets/<style>.md`
|
||||
|
||||
|
|
@ -98,6 +113,9 @@ Quick-start presets by content scenario. Use `--preset <name>` or recommend duri
|
|||
| `tutorial` | chalkboard | flow | 教程步骤、操作流程 |
|
||||
| `classroom` | chalkboard | balanced | 课堂笔记、知识讲解 |
|
||||
| `study-guide` | study-notes | dense | 学习笔记、考试重点 |
|
||||
| `hand-drawn-edu` | sketch-notes | flow | 手绘教程、流程图解 |
|
||||
| `sketch-card` | sketch-notes | dense | 手绘知识卡、概念科普 |
|
||||
| `sketch-summary` | sketch-notes | balanced | 手绘总结、图文笔记 |
|
||||
|
||||
**Lifestyle & Sharing**:
|
||||
|
||||
|
|
@ -152,6 +170,18 @@ Full preset definitions: [references/style-presets.md](references/style-presets.
|
|||
|
||||
Detailed layout definitions: `references/elements/canvas.md`
|
||||
|
||||
## Palette Gallery
|
||||
|
||||
Optional color override. Replaces style's built-in colors while preserving rendering rules.
|
||||
|
||||
| Palette | Background | Zone Colors | Accent | Feel |
|
||||
|---------|------------|-------------|--------|------|
|
||||
| `macaron` | Warm cream #F5F0E8 | Blue #A8D8EA, Lavender #D5C6E0, Mint #B5E5CF, Peach #F8D5C4 | Coral Red #E8655A | Soft, educational, approachable |
|
||||
| `warm` | Soft Peach #FFECD2 | Orange #ED8936, Terracotta #C05621, Golden #F6AD55, Rose #D4A09A | Burnt Sienna #A0522D | Cozy, earth tones, no cool colors |
|
||||
| `neon` | Dark Purple #1A1025 | Cyan #00F5FF, Magenta #FF00FF, Green #39FF14, Pink #FF6EC7 | Electric Yellow #FFFF00 | High-energy, futuristic |
|
||||
|
||||
Detailed palette definitions: `references/palettes/<palette>.md`
|
||||
|
||||
## Auto Selection
|
||||
|
||||
| Content Signals | Style | Layout | Recommended Preset |
|
||||
|
|
@ -167,6 +197,7 @@ Detailed layout definitions: `references/elements/canvas.md`
|
|||
| Education, tutorial, learning, teaching, classroom | `chalkboard` | balanced/dense | `tutorial`, `classroom` |
|
||||
| Notes, handwritten, study guide, knowledge, realistic, photo | `study-notes` | dense/list/mindmap | `study-guide` |
|
||||
| Movie, album, concert, poster, opinion, editorial, dramatic, cinematic | `screen-print` | sparse/comparison | `poster`, `editorial`, `cinematic` |
|
||||
| Hand-drawn, infographic, diagram, visual summary, 手绘, 图解, workflow, process | `sketch-notes` | flow/balanced/dense | `hand-drawn-edu`, `sketch-card`, `sketch-summary` |
|
||||
|
||||
## Outline Strategies
|
||||
|
||||
|
|
@ -344,21 +375,21 @@ Read source content, save it if needed, and perform deep analysis.
|
|||
- Swipe flow design
|
||||
4. Detect source language
|
||||
5. Determine recommended image count (2-10)
|
||||
6. **Auto-recommend** best strategy + style + layout based on content signals
|
||||
6. **Auto-recommend** best strategy + style + layout + palette based on content signals
|
||||
7. **Save to `analysis.md`**
|
||||
|
||||
### Step 2: Smart Confirm ⚠️
|
||||
|
||||
**Purpose**: Present auto-recommended plan, let user confirm or adjust.
|
||||
|
||||
**`--yes` mode**: Skip this entire step. Use auto-recommended strategy + style + layout from Step 1 analysis (or `--style`/`--layout`/`--preset` if provided). Generate outline directly using Path A logic → save to `outline.md` → proceed to Step 3. No AskUserQuestion calls.
|
||||
**`--yes` mode**: Skip this entire step. Use auto-recommended strategy + style + layout + palette from Step 1 analysis (or `--style`/`--layout`/`--palette`/`--preset` if provided). Generate outline directly using Path A logic → save to `outline.md` → proceed to Step 3. No AskUserQuestion calls.
|
||||
|
||||
**Interactive mode**: Do NOT skip.
|
||||
|
||||
**Auto-Recommendation Logic**:
|
||||
1. Use Auto Selection table to match content signals → best strategy + style + layout
|
||||
1. Use Auto Selection table to match content signals → best strategy + style + layout + palette
|
||||
2. Infer optimal image count from content density
|
||||
3. Load style's default elements from preset
|
||||
3. Load style's default elements from preset (apply palette override if applicable)
|
||||
|
||||
**Display** (analysis summary + recommended plan):
|
||||
|
||||
|
|
@ -371,7 +402,7 @@ Read source content, save it if needed, and perform deep analysis.
|
|||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
🎨 推荐方案（自动匹配）
|
||||
策略：[A/B/C] [strategy name]（[reason]）
|
||||
风格：[style] · 布局：[layout] · 预设：[preset]
|
||||
风格：[style] · 布局：[layout] · 配色：[palette or "默认"] · 预设：[preset]
|
||||
图片：[N]张（封面+[N-2]内容+结尾）
|
||||
元素：[background] / [decorations] / [emphasis]
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
|
@ -393,10 +424,11 @@ Generate single outline using recommended strategy + style → save to `outline.
|
|||
|
||||
**Use AskUserQuestion** with adjustable options (leave blank = keep recommended):
|
||||
|
||||
1. **策略风格**: Current: [strategy + style]. Options: A Story-Driven(warm) | B Information-Dense(notion) | C Visual-First(screen-print). Or specify style directly: cute/fresh/warm/bold/minimal/retro/pop/notion/chalkboard/study-notes/screen-print. Or use preset: knowledge-card / checklist / tutorial / poster / cinematic / etc.
|
||||
1. **策略风格**: Current: [strategy + style]. Options: A Story-Driven(warm) | B Information-Dense(notion) | C Visual-First(screen-print). Or specify style directly: cute/fresh/warm/bold/minimal/retro/pop/notion/chalkboard/study-notes/screen-print/sketch-notes. Or use preset: knowledge-card / checklist / tutorial / poster / hand-drawn-edu / etc.
|
||||
2. **布局**: Current: [layout]. Options: sparse | balanced | dense | list | comparison | flow | mindmap | quadrant
|
||||
3. **图片数量**: Current: [N]. Range: 2-10
|
||||
4. **补充说明**（可选）: Selling point emphasis, audience adjustment, color preference, etc.
|
||||
3. **配色**: Current: [palette or "默认"]. Options: 默认 | macaron | warm | neon
|
||||
4. **图片数量**: Current: [N]. Range: 2-10
|
||||
5. **补充说明**（可选）: Selling point emphasis, audience adjustment, custom color preference, etc.
|
||||
|
||||
**After response**: Generate single outline with user's choices → save to `outline.md` → Step 3.
|
||||
|
||||
|
|
@ -428,6 +460,7 @@ Full two-confirmation flow for maximum control:
|
|||
strategy: a # a, b, or c
|
||||
name: Story-Driven
|
||||
style: warm # recommended style for this strategy
|
||||
palette: ~ # optional palette override (macaron, warm, neon, or ~ for style default)
|
||||
style_reason: "Warm tones enhance emotional storytelling and personal connection"
|
||||
elements: # from style preset, can be customized
|
||||
background: solid-pastel
|
||||
|
|
@ -521,6 +554,7 @@ Topic: [topic]
|
|||
Mode: [Quick / Custom / Detailed]
|
||||
Strategy: [A/B/C/Combined]
|
||||
Style: [style name]
|
||||
Palette: [palette name or "default"]
|
||||
Layout: [layout name or "varies"]
|
||||
Location: [directory path]
|
||||
Images: N total
|
||||
|
|
@ -567,6 +601,7 @@ Files:
|
|||
| chalkboard | ✓✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| study-notes | ✗ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓ |
|
||||
| screen-print | ✓✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| sketch-notes | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
|
||||
## References
|
||||
|
||||
|
|
@ -580,7 +615,10 @@ Detailed templates in `references/` directory:
|
|||
|
||||
**Presets** (Style presets):
|
||||
- `presets/<name>.md` - Element combination definitions (cute, notion, warm...)
|
||||
- `style-presets.md` - Preset shortcuts (style + layout combos)
|
||||
- `style-presets.md` - Preset shortcuts (style + layout + palette combos)
|
||||
|
||||
**Palettes** (Color overrides):
|
||||
- `palettes/<name>.md` - Color palette definitions (macaron, warm, neon)
|
||||
|
||||
**Workflows** (Process guides):
|
||||
- `workflows/analysis-framework.md` - Content analysis framework
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue