mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-12 22:09:48 +08:00
feat(baoyu-article-illustrator): default to sketch-notes educational infographic style
Make `hand-drawn-edu` (infographic + sketch-notes + macaron) the universal fallback preset when content analysis surfaces no strong signal. Rework sketch-notes style spec around warm cream paper + black hand-drawn lines + soft pastel section blocks. - Change `hand-drawn-edu` preset type from flowchart to infographic; add `hand-drawn-edu-flow` (flowchart) and `hand-drawn-edu-compare` (comparison) as variants for users who need those layouts in the same warm style - Elevate `sketch-notes` to primary style across infographic / flowchart / comparison / framework auto-selection; add sketch-notes column to Type x Style compatibility matrix - Rewrite sketch-notes.md: macaron pastel palette, canonical single-page layout (title / sectioned boxes / takeaway), diagram-only rule - Add infographic + sketch-notes + macaron prompt block to prompt-construction.md - Update workflow, style-presets, and first-time-setup defaults to match
This commit is contained in:
Jim Liu 宝玉
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: baoyu-article-illustrator
|
||||
description: Analyzes article structure, identifies positions requiring visual aids, generates illustrations with Type × Style × Palette three-dimension approach. Use when user asks to "illustrate article", "add images", "generate images for article", or "为文章配图".
|
||||
version: 1.57.1
|
||||
version: 1.58.0
|
||||
metadata:
|
||||
openclaw:
|
||||
homepage: https://github.com/JimLiu/baoyu-skills#baoyu-article-illustrator
|
||||
|
||||
@@ -61,8 +61,10 @@ Position defaults to bottom-right.
|
||||
header: "Style"
|
||||
question: "Default illustration style preference? Or type another style name or your custom style"
|
||||
options:
|
||||
- label: "None (Recommended)"
|
||||
description: "Auto-select based on content analysis"
|
||||
- label: "sketch-notes (Recommended)"
|
||||
description: "Warm cream paper, black hand-drawn lines, soft pastel blocks — educational infographic feel. Great default for most articles."
|
||||
- label: "None"
|
||||
description: "Auto-select based on content analysis (falls back to sketch-notes when no strong signal)"
|
||||
- label: "notion"
|
||||
description: "Minimalist hand-drawn line art"
|
||||
- label: "warm"
|
||||
|
||||
@@ -139,6 +139,39 @@ STYLE: [style characteristics]
|
||||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
**Infographic + sketch-notes + macaron palette** (default / `hand-drawn-edu` preset):
|
||||
```
|
||||
Single-page hand-drawn educational infographic in a clean presentation style.
|
||||
Warm cream paper background, black hand-drawn lines with slight wobble, soft
|
||||
pastel color blocks. Feels simple, friendly, and easy to understand at a glance.
|
||||
Diagram-style visuals ONLY — no realistic or photographic images.
|
||||
|
||||
PALETTE: macaron — soft pastel blocks on warm cream
|
||||
COLORS: Warm Cream background (#F5F0E8); Black (#1A1A1A) for ALL lines, text,
|
||||
arrows, and doodles; section fills in Light Blue (#A8D8EA), Mint Green
|
||||
(#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2); Coral Red (#E8655A)
|
||||
sparingly for one or two emphasis points only.
|
||||
|
||||
LAYOUT (top → bottom):
|
||||
- TOP: Bold hand-lettered title, oversized, slightly wobbly, with an optional
|
||||
decorative underline or small doodle.
|
||||
- MIDDLE: 2–6 rounded-rectangle info boxes arranged in a clean grid, row, or
|
||||
radial pattern. Each box = one section, one pastel fill color, one
|
||||
simple icon or sketchy cartoon element, one short keyword/phrase.
|
||||
Hand-drawn arrows connect related zones.
|
||||
- BOTTOM: One short hand-lettered takeaway sentence summarizing the main idea.
|
||||
|
||||
ELEMENTS: Rounded info boxes with clear sectioning, wavy/straight hand-drawn
|
||||
arrows with small inline labels, simple icons and sketchy cartoon
|
||||
elements (stick figures, tools, objects), small doodle decorations
|
||||
(stars, sparkles, underlines, dots, asterisks) used sparingly.
|
||||
|
||||
STYLE: Minimal, well-organized, airy. Color fills don't completely fill
|
||||
outlines (slight "hand-painted" overshoot). ALL text hand-lettered —
|
||||
no computer fonts. Short labels and keywords only, never long
|
||||
paragraphs. Generous white space between sections.
|
||||
```
|
||||
|
||||
**Infographic + vector-illustration**:
|
||||
```
|
||||
Flat vector illustration infographic. Clean black outlines on all elements.
|
||||
|
||||
@@ -2,6 +2,10 @@
|
||||
|
||||
`--preset X` expands to a type + style + optional palette combination. Users can override any dimension.
|
||||
|
||||
## Default Preset
|
||||
|
||||
When content analysis surfaces no strong signal (generic knowledge article, mixed-topic post, no clear data/comparison/narrative cue), recommend **`hand-drawn-edu`** as the primary option in Step 3 Q1. It is the warm, friendly educational-infographic default — safe for most articles and universally readable.
|
||||
|
||||
## By Category
|
||||
|
||||
### Technical & Engineering
|
||||
@@ -23,7 +27,9 @@
|
||||
| `process-flow` | `flowchart` | `notion` | — | Workflow documentation, onboarding flows |
|
||||
| `warm-knowledge` | `infographic` | `vector-illustration` | `warm` | Product showcases, team intros, feature cards, brand content |
|
||||
| `edu-visual` | `infographic` | `vector-illustration` | `macaron` | Knowledge summaries, concept explainers, educational articles |
|
||||
| `hand-drawn-edu` | `flowchart` | `sketch-notes` | `macaron` | Hand-drawn educational diagrams, process explainers, onboarding visuals |
|
||||
| `hand-drawn-edu` | `infographic` | `sketch-notes` | `macaron` | **Default preset.** Hand-drawn educational infographic — warm cream paper, black lines, pastel blocks. Great for single-page explainers, concept summaries, onboarding, general knowledge articles |
|
||||
| `hand-drawn-edu-flow` | `flowchart` | `sketch-notes` | `macaron` | Hand-drawn process explainer — step-by-step workflow in the same warm educational style |
|
||||
| `hand-drawn-edu-compare` | `comparison` | `sketch-notes` | `macaron` | Hand-drawn side-by-side comparison in the warm educational style |
|
||||
| `ink-notes-compare` | `comparison` | `ink-notes` | `mono-ink` | Before/After essays, Traditional vs New, OS-style comparisons, mindset-shift narratives |
|
||||
| `ink-notes-flow` | `flowchart` | `ink-notes` | `mono-ink` | Professional process explainers, workforce pipelines, hand-drawn technical walkthroughs |
|
||||
| `ink-notes-framework` | `framework` | `ink-notes` | `mono-ink` | System analogies, command-center diagrams, architecture-as-metaphor, tech manifestos |
|
||||
@@ -59,18 +65,19 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
|
||||
|
||||
| Content Type (Step 2) | Primary Preset | Alternatives |
|
||||
|------------------------|----------------|--------------|
|
||||
| Technical | `tech-explainer` | `system-design`, `architecture` |
|
||||
| Tutorial | `tutorial` | `process-flow`, `knowledge-base`, `edu-visual` |
|
||||
| **General / No strong signal** | `hand-drawn-edu` | `edu-visual`, `knowledge-base` |
|
||||
| Education / Knowledge | `hand-drawn-edu` | `edu-visual`, `knowledge-base`, `tutorial` |
|
||||
| Tutorial | `hand-drawn-edu-flow` | `tutorial`, `process-flow`, `hand-drawn-edu` |
|
||||
| SaaS / Product | `hand-drawn-edu` | `saas-guide`, `knowledge-base`, `process-flow`, `warm-knowledge` |
|
||||
| Technical | `tech-explainer` | `system-design`, `architecture`, `hand-drawn-edu` |
|
||||
| Methodology / Framework | `system-design` | `architecture`, `process-flow` |
|
||||
| Data / Metrics | `data-report` | `versus`, `tech-explainer` |
|
||||
| Comparison / Review | `versus` | `business-compare`, `editorial-poster`, `ink-notes-compare` |
|
||||
| Comparison / Review | `versus` | `business-compare`, `hand-drawn-edu-compare`, `editorial-poster`, `ink-notes-compare` |
|
||||
| Manifesto / Mindset shift / Professional visual note | `ink-notes-compare` | `ink-notes-framework`, `ink-notes-flow` |
|
||||
| Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
|
||||
| Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
|
||||
| Historical / Timeline | `history` | `evolution` |
|
||||
| Academic / Research | `science-paper` | `tech-explainer`, `data-report` |
|
||||
| SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` |
|
||||
| Education / Knowledge | `edu-visual` | `knowledge-base`, `tutorial`, `hand-drawn-edu` |
|
||||
|
||||
## Override Examples
|
||||
|
||||
|
||||
@@ -6,15 +6,15 @@ Simplified style tier for quick selection:
|
||||
|
||||
| Core Style | Maps To | Best For |
|
||||
|------------|---------|----------|
|
||||
| `hand-drawn` | sketch-notes | **Default.** Warm cream paper, black hand-drawn lines, pastel blocks — educational infographics, concept explainers, onboarding, general knowledge articles |
|
||||
| `vector` | vector-illustration | Knowledge articles, tutorials, tech content |
|
||||
| `minimal-flat` | notion | General, knowledge sharing, SaaS |
|
||||
| `sci-fi` | blueprint | AI, frontier tech, system design |
|
||||
| `hand-drawn` | sketch/warm | Relaxed, reflective, casual content |
|
||||
| `editorial` | editorial | Processes, data, journalism |
|
||||
| `scene` | warm/watercolor | Narratives, emotional, lifestyle |
|
||||
| `poster` | screen-print | Opinion, editorial, cultural, cinematic |
|
||||
|
||||
Use Core Styles for most cases. See full Style Gallery below for granular control.
|
||||
Use Core Styles for most cases. **When no strong content signal is detected, default to `hand-drawn` (→ sketch-notes).** See full Style Gallery below for granular control.
|
||||
|
||||
---
|
||||
|
||||
@@ -50,42 +50,45 @@ Full specifications: `references/styles/<style>.md`
|
||||
|
||||
## Type × Style Compatibility Matrix
|
||||
|
||||
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| | sketch-notes | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✗ | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
|
||||
| timeline | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Auto Selection by Type
|
||||
|
||||
When no content signal matches strongly, `sketch-notes` is the default primary for every diagrammatic type. Only override with another primary when the content analysis in Step 2 surfaces a clear signal (technical/data/narrative/opinion).
|
||||
|
||||
| Type | Primary Style | Secondary Styles |
|
||||
|------|---------------|------------------|
|
||||
| infographic | vector-illustration | notion, blueprint, editorial |
|
||||
| infographic | sketch-notes | vector-illustration, notion, blueprint, editorial |
|
||||
| scene | warm | watercolor, elegant |
|
||||
| flowchart | vector-illustration | notion, blueprint |
|
||||
| comparison | vector-illustration | notion, elegant |
|
||||
| framework | blueprint | vector-illustration, notion |
|
||||
| timeline | elegant | warm, editorial |
|
||||
| flowchart | sketch-notes | vector-illustration, notion, blueprint |
|
||||
| comparison | sketch-notes | vector-illustration, notion, elegant |
|
||||
| framework | sketch-notes | blueprint, vector-illustration, notion |
|
||||
| timeline | elegant | sketch-notes, warm, editorial |
|
||||
|
||||
## Auto Selection by Content Signals
|
||||
|
||||
| Content Signals | Recommended Type | Recommended Style |
|
||||
|-----------------|------------------|-------------------|
|
||||
| **(no strong signal / general article)** | **infographic** | **sketch-notes** |
|
||||
| Knowledge, concept, tutorial, learning, guide, onboarding | infographic | sketch-notes, vector-illustration, notion |
|
||||
| Productivity, SaaS, tool, app, software | infographic | sketch-notes, notion, vector-illustration |
|
||||
| How-to, steps, workflow, process, tutorial | flowchart | sketch-notes, vector-illustration, notion |
|
||||
| API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
|
||||
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion |
|
||||
| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint |
|
||||
| How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion |
|
||||
| Framework, model, architecture, principles | framework | blueprint, vector-illustration |
|
||||
| vs, pros/cons, before/after, alternatives | comparison | vector-illustration, notion |
|
||||
| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint, sketch-notes |
|
||||
| Framework, model, architecture, principles | framework | blueprint, vector-illustration, sketch-notes |
|
||||
| vs, pros/cons, before/after, alternatives | comparison | vector-illustration, notion, sketch-notes |
|
||||
| Manifesto, mindset shift, workforce, OS, whiteboard, professional visual note | comparison / framework | ink-notes |
|
||||
| Story, emotion, journey, experience, personal | scene | warm, watercolor |
|
||||
| History, timeline, progress, evolution | timeline | elegant, warm |
|
||||
| Productivity, SaaS, tool, app, software | infographic | notion, vector-illustration |
|
||||
| Business, professional, strategy, corporate | framework | elegant |
|
||||
| Opinion, editorial, culture, philosophy, cinematic, dramatic, poster | scene | screen-print |
|
||||
| Biology, chemistry, medical, scientific | infographic | scientific |
|
||||
@@ -93,6 +96,15 @@ Full specifications: `references/styles/<style>.md`
|
||||
|
||||
## Style Characteristics by Type
|
||||
|
||||
### infographic + sketch-notes (default)
|
||||
- Warm cream paper background, black hand-drawn lines with slight wobble
|
||||
- 2–6 rounded pastel info boxes (light blue / mint / lavender / peach)
|
||||
- Bold hand-lettered title at the top
|
||||
- Short keyword labels, simple icons, small doodles (stars, underlines, sparkles)
|
||||
- One-line hand-lettered takeaway sentence at the bottom
|
||||
- Airy, minimal, diagram-style — never realistic
|
||||
- Perfect for single-page educational explainers and concept summaries
|
||||
|
||||
### infographic + vector-illustration
|
||||
- Clean flat vector shapes, bold geometric forms
|
||||
- Vibrant but harmonious color palette
|
||||
|
||||
@@ -1,56 +1,91 @@
|
||||
# sketch-notes
|
||||
|
||||
Soft hand-drawn illustration style with warm, educational feel
|
||||
Hand-drawn educational infographic style with warm cream paper, black hand-drawn lines, and soft pastel section blocks. Optimized for single-page visual explainers.
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Hand-drawn feel with soft, relaxed brush strokes. Fresh, refined style with minimalist editorial approach. Emphasis on precision, clarity and intelligent elegance while prioritizing warmth, approachability and friendliness.
|
||||
Hand-drawn educational infographic in a clean presentation style. Feels like a visual explainer slide: simple, friendly, and easy to understand at a glance. Bold handwritten-style title at the top, clearly sectioned content in the middle with rounded boxes and small doodles, and one short takeaway sentence at the bottom. Neat, airy, and visually similar to a hand-drawn concept diagram — never realistic or photographic.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Off-White (#FAF8F0)
|
||||
- Texture: Subtle paper grain, warm tone
|
||||
- Color: Warm Cream Paper (#F5F0E8) — preferred; fallback Warm Off-White (#FAF8F0)
|
||||
- Texture: Subtle warm paper grain, matte finish, no gloss
|
||||
|
||||
## Color Palette
|
||||
|
||||
Default sketch-notes palette is the **macaron** pastel set. Lines are always black; pastel blocks are used only as rounded card fills for information sections.
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Off-White | #FAF8F0 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2C3E50 | Main elements |
|
||||
| Alt Text | Deep Brown | #4A4A4A | Secondary elements |
|
||||
| Accent 1 | Soft Orange | #F4A261 | Highlights, emphasis |
|
||||
| Accent 2 | Mustard Yellow | #E9C46A | Secondary highlights |
|
||||
| Accent 3 | Sage Green | #87A96B | Nature, growth concepts |
|
||||
| Accent 4 | Light Blue | #7EC8E3 | Tech, digital elements |
|
||||
| Accent 5 | Red Brown | #A0522D | Earthy elements |
|
||||
| Background | Warm Cream | #F5F0E8 | Paper background |
|
||||
| Primary Ink | Black | #1A1A1A | ALL outlines, text, arrows, doodles |
|
||||
| Block Blue | Light Blue | #A8D8EA | Info block fill (cool / tech) |
|
||||
| Block Mint | Mint Green | #B5E5CF | Info block fill (growth / positive) |
|
||||
| Block Lavender | Lavender | #D5C6E0 | Info block fill (concept / abstract) |
|
||||
| Block Peach | Peach | #FFD5C2 | Info block fill (warm / human) |
|
||||
| Accent | Coral Red | #E8655A | One or two emphasis points only |
|
||||
| Muted Text | Warm Gray | #6B6B6B | Small annotations |
|
||||
|
||||
Use **4 pastel block colors max** per image, one color per section. Black ink does all the structural line work.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Connection lines with hand-drawn wavy feel
|
||||
- Conceptual abstract icons illustrating ideas
|
||||
- Color fills don't completely fill outlines (hand-painted feel)
|
||||
- Simple geometric shapes with rounded corners
|
||||
- Arrows and pointers with sketchy style
|
||||
- Doodle decorations: stars, spirals, underlines
|
||||
- Bold hand-lettered title at the top (oversized, slightly wobbly)
|
||||
- Rounded-rectangle info boxes with clear sectioning (2–6 zones)
|
||||
- Short keyword labels inside boxes — never long paragraphs
|
||||
- Simple icons and sketchy cartoon elements (stick figures, tools, objects) to explain each idea
|
||||
- Hand-drawn arrows (straight, curved, or wavy) connecting related zones
|
||||
- Small doodle decorations: stars, sparkles, underlines, dots, asterisks — used sparingly for emphasis
|
||||
- Single-line hand-lettered takeaway sentence at the bottom
|
||||
- Color fills do not completely fill outlines (slight "hand-painted" overshoot/undershoot)
|
||||
- Generous white space between sections — airy, never crowded
|
||||
|
||||
## Layout Guidelines
|
||||
|
||||
Canonical single-page layout (16:9 or 4:3):
|
||||
|
||||
1. **Top (10–15%)** — Bold hand-lettered title, optionally with a small decorative underline or doodle.
|
||||
2. **Middle (70–80%)** — 2–6 rounded pastel info boxes arranged in a clear grid, row, or radial pattern. Each box = one section, one color, one icon, one keyword/phrase.
|
||||
3. **Bottom (10–15%)** — One short hand-lettered takeaway sentence summarizing the core insight.
|
||||
|
||||
Keep margins generous. Aim for breathing room around every element.
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Keep layouts open and well-structured
|
||||
- Emphasize information hierarchy
|
||||
- Use hand-drawn quality for all elements
|
||||
- Allow imperfection (slight wobbles add character)
|
||||
- Layer elements with subtle overlaps
|
||||
- Use warm cream paper background (no pure white)
|
||||
- Use black hand-drawn lines for ALL structural elements
|
||||
- Use soft pastel blocks (blue / mint / lavender / peach) for section fills
|
||||
- Keep text to short keywords and phrases only
|
||||
- Include a bold handwritten title at the top
|
||||
- Include a short takeaway sentence at the bottom
|
||||
- Use diagram-style visuals (icons, doodles, simple shapes)
|
||||
- Allow slight wobble — hand-drawn imperfection is the point
|
||||
- Maintain clear sectioning with rounded boxes
|
||||
|
||||
### Don't
|
||||
|
||||
- Use perfect geometric shapes
|
||||
- Create photorealistic elements
|
||||
- Overcrowd with too many elements
|
||||
- Use pure white backgrounds
|
||||
- Make it look computer-generated
|
||||
- Use pure white backgrounds (that's `ink-notes`' territory)
|
||||
- Render realistic or photographic images — this style is diagram-only
|
||||
- Fill zones with gradients, shadows, or digital effects
|
||||
- Use long paragraphs of text — keywords only
|
||||
- Use computer-generated / sans-serif body fonts — ALL text must be hand-lettered
|
||||
- Use more than 4 pastel block colors per image
|
||||
- Overcrowd the canvas — keep it airy and minimal
|
||||
- Use perfect geometric shapes — preserve the hand-drawn wobble
|
||||
|
||||
## Type Compatibility
|
||||
|
||||
| Type | Rating | Notes |
|
||||
|------|--------|-------|
|
||||
| infographic | ✓✓ | **Best fit** — single-page visual explainers, concept summaries, educational slides |
|
||||
| framework | ✓✓ | Labeled zones and connectors render well |
|
||||
| flowchart | ✓✓ | Rounded step boxes with wavy arrows |
|
||||
| comparison | ✓✓ | Two pastel blocks side by side; prefer `ink-notes` for strict Before/After contrasts |
|
||||
| timeline | ✓ | Hand-drawn horizontal arrow with milestone cards |
|
||||
| scene | ✗ | Not recommended — too diagrammatic |
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, technical explanations, tutorials, onboarding materials, friendly articles
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, onboarding materials, product walkthroughs, single-page visual summaries, "how things work" posts, friendly technical articles
|
||||
|
||||
@@ -176,6 +176,8 @@ Based on Step 2 content analysis, recommend a preset first (sets both type & sty
|
||||
- [Alternative preset] — [brief]
|
||||
- Or choose type manually: infographic / scene / flowchart / comparison / framework / timeline / mixed
|
||||
|
||||
**Default**: if Step 2 found no strong content signal, the recommended preset MUST be `hand-drawn-edu` (infographic + sketch-notes + macaron — warm cream paper, black hand-drawn lines, soft pastel blocks). This is the universal fallback.
|
||||
|
||||
**If user picks a preset → skip Q3** (type & style both resolved).
|
||||
**If user picks a type → Q3 is REQUIRED.**
|
||||
|
||||
@@ -203,13 +205,15 @@ If no `preferred_style` (present Core Styles first):
|
||||
|
||||
| Core Style | Maps To | Best For |
|
||||
|------------|---------|----------|
|
||||
| `hand-drawn` | sketch-notes | **Default.** Warm cream paper, black hand-drawn lines, pastel blocks — educational infographics, concept explainers, onboarding, general knowledge articles |
|
||||
| `minimal-flat` | notion | General, knowledge sharing, SaaS |
|
||||
| `sci-fi` | blueprint | AI, frontier tech, system design |
|
||||
| `hand-drawn` | sketch/warm | Relaxed, reflective, casual |
|
||||
| `editorial` | editorial | Processes, data, journalism |
|
||||
| `scene` | warm/watercolor | Narratives, emotional, lifestyle |
|
||||
| `poster` | screen-print | Opinion, editorial, cultural, cinematic |
|
||||
|
||||
**Default recommendation**: when Step 2 surfaces no strong content signal, recommend **`hand-drawn-edu`** preset (→ infographic + sketch-notes + macaron) as the primary option in Q1. When the user picks a type manually without a preferred_style, recommend `sketch-notes` first in Q3.
|
||||
|
||||
Style selection based on Type × Style compatibility matrix (styles.md).
|
||||
**In Step 5.1**, read `styles/<style>.md` for visual elements and rendering rules.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user