1# Prompt Construction
2 
3## Prompt File Format
4 
5Each prompt file uses YAML frontmatter + content:
6 
7```yaml
8---
9illustration_id: 01
10type: infographic
11style: blueprint
12references:                    # ⚠️ ONLY if files EXIST in references/ directory
13  - ref_id: 01
14    filename: 01-ref-diagram.png
15    usage: direct              # direct | style | palette
16---
17 
18[Type-specific template content below...]
19```
20 
21**⚠️ CRITICAL - When to include `references` field**:
22 
23| Situation | Action |
24|-----------|--------|
25| Reference file saved to `references/` | Include in frontmatter ✓ |
26| Style extracted verbally (no file) | DO NOT include in frontmatter, append to prompt body instead |
27| File path in frontmatter but file doesn't exist | ERROR - remove references field |
28 
29**Reference Usage Types** (only when file exists):
30 
31| Usage | Description | Generation Action |
32|-------|-------------|-------------------|
33| `direct` | Primary visual reference | Pass to `--ref` parameter |
34| `style` | Style characteristics only | Describe style in prompt text |
35| `palette` | Color palette extraction | Include colors in prompt |
36 
37**If no reference file but style/palette extracted verbally**, append directly to prompt body:
38```
39COLORS (from reference):
40- Primary: #E8756D coral
41- Secondary: #7ECFC0 mint
42...
43 
44STYLE (from reference):
45- Clean lines, minimal shadows
46- Gradient backgrounds
47...
48```
49 
50---
51 
52## Default Composition Requirements
53 
54**Apply to ALL prompts by default**:
55 
56| Requirement | Description |
57|-------------|-------------|
58| **Clean composition** | Simple layouts, no visual clutter |
59| **White space** | Generous margins, breathing room around elements |
60| **No complex backgrounds** | Solid colors or subtle gradients only, avoid busy textures |
61| **Centered or content-appropriate** | Main visual elements centered or positioned by content needs |
62| **Matching graphics** | Use graphic elements that align with content theme |
63| **Highlight core info** | White space draws attention to key information |
64 
65**Add to ALL prompts**:
66> Clean composition with generous white space. Simple or no background. Main elements centered or positioned by content needs.
67 
68---
69 
70## Color Specification Rules
71 
72Colors in prompts use hex codes for **rendering guidance only** — they tell the model which colors to use, NOT what text to display.
73 
74**⚠️ CRITICAL**: Image generation models sometimes render color names and hex values as visible text labels in the image (e.g., painting "Macaron Blue #A8D8EA" as a label). This must be prevented.
75 
76**Add to ALL prompts that contain a COLORS section**:
77> Color values (#hex) and color names are rendering guidance only — do NOT display color names, hex codes, or palette labels as visible text in the image.
78 
79---
80 
81## Character Rendering
82 
83When depicting people:
84 
85| Guideline | Description |
86|-----------|-------------|
87| **Style** | Simplified cartoon silhouettes or symbolic expressions |
88| **Avoid** | Realistic human portrayals, detailed faces |
89| **Diversity** | Varied body types when showing multiple people |
90| **Emotion** | Express through posture and simple gestures |
91 
92**Add to ALL prompts with human figures**:
93> Human figures: simplified stylized silhouettes or symbolic representations, not photorealistic.
94 
95---
96 
97## Text in Illustrations
98 
99| Element | Guideline |
100|---------|-----------|
101| **Size** | Large, prominent, immediately readable |
102| **Style** | Handwritten fonts preferred for warmth |
103| **Content** | Concise keywords and core concepts only |
104| **Language** | Match article language |
105 
106**Add to prompts with text**:
107> Text should be large and prominent with handwritten-style fonts. Keep minimal, focus on keywords.
108 
109---
110 
111## Principles
112 
113Good prompts must include:
114 
1151. **Layout Structure First**: Describe composition, zones, flow direction
1162. **Specific Data/Labels**: Use actual numbers, terms from article
1173. **Visual Relationships**: How elements connect
1184. **Semantic Colors**: Meaning-based color choices (red=warning, green=efficient)
1195. **Style Characteristics**: Line treatment, texture, mood
1206. **Aspect Ratio**: End with ratio and complexity level
121 
122## Type-Specific Templates
123 
124### Infographic
125 
126```
127[Title] - Data Visualization
128 
129Layout: [grid/radial/hierarchical]
130 
131ZONES:
132- Zone 1: [data point with specific values]
133- Zone 2: [comparison with metrics]
134- Zone 3: [summary/conclusion]
135 
136LABELS: [specific numbers, percentages, terms from article]
137COLORS: [semantic color mapping]
138STYLE: [style characteristics]
139ASPECT: 16:9
140```
141 
142**Infographic + sketch-notes + macaron palette** (default / `hand-drawn-edu` preset):
143```
144Single-page hand-drawn educational infographic in a clean presentation style.
145Warm cream paper background, black hand-drawn lines with slight wobble, soft
146pastel color blocks. Feels simple, friendly, and easy to understand at a glance.
147Diagram-style visuals ONLY — no realistic or photographic images.
148 
149PALETTE: macaron — soft pastel blocks on warm cream
150COLORS: Warm Cream background (#F5F0E8); Black (#1A1A1A) for ALL lines, text,
151        arrows, and doodles; section fills in Light Blue (#A8D8EA), Mint Green
152        (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2); Coral Red (#E8655A)
153        sparingly for one or two emphasis points only.
154 
155LAYOUT (top → bottom):
156- TOP: Bold hand-lettered title, oversized, slightly wobbly, with an optional
157       decorative underline or small doodle.
158- MIDDLE: 2–6 rounded-rectangle info boxes arranged in a clean grid, row, or
159          radial pattern. Each box = one section, one pastel fill color, one
160          simple icon or sketchy cartoon element, one short keyword/phrase.
161          Hand-drawn arrows connect related zones.
162- BOTTOM: One short hand-lettered takeaway sentence summarizing the main idea.
163 
164ELEMENTS: Rounded info boxes with clear sectioning, wavy/straight hand-drawn
165          arrows with small inline labels, simple icons and sketchy cartoon
166          elements (stick figures, tools, objects), small doodle decorations
167          (stars, sparkles, underlines, dots, asterisks) used sparingly.
168 
169STYLE: Minimal, well-organized, airy. Color fills don't completely fill
170       outlines (slight "hand-painted" overshoot). ALL text hand-lettered —
171       no computer fonts. Short labels and keywords only, never long
172       paragraphs. Generous white space between sections.
173```
174 
175**Infographic + vector-illustration**:
176```
177Flat vector illustration infographic. Clean black outlines on all elements.
178COLORS: Cream background (#F5F0E6), Coral Red (#E07A5F), Mint Green (#81B29A), Mustard Yellow (#F2CC8F)
179ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars)
180```
181 
182**Infographic + vector-illustration + warm palette**:
183```
184Flat vector illustration infographic. Clean black outlines on all elements.
185PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
186COLORS: Soft Peach background (#FFECD2), Warm Orange (#ED8936),
187        Terracotta (#C05621), Golden Yellow (#F6AD55), Deep Brown (#744210)
188ELEMENTS: Geometric simplified icons, no gradients, rounded corners,
189          modular card layout, consistent icon style
190```
191 
192### Scene
193 
194```
195[Title] - Atmospheric Scene
196 
197FOCAL POINT: [main subject]
198ATMOSPHERE: [lighting, mood, environment]
199MOOD: [emotion to convey]
200COLOR TEMPERATURE: [warm/cool/neutral]
201STYLE: [style characteristics]
202ASPECT: 16:9
203```
204 
205### Flowchart
206 
207```
208[Title] - Process Flow
209 
210Layout: [left-right/top-down/circular]
211 
212STEPS:
2131. [Step name] - [brief description]
2142. [Step name] - [brief description]
215...
216 
217CONNECTIONS: [arrow types, decision points]
218STYLE: [style characteristics]
219ASPECT: 16:9
220```
221 
222**Flowchart + vector-illustration**:
223```
224Flat vector flowchart with bold arrows and geometric step containers.
225COLORS: Cream background (#F5F0E6), steps in Coral/Mint/Mustard, black outlines
226ELEMENTS: Rounded rectangles, thick arrows, simple icons per step
227```
228 
229**Flowchart + sketch-notes + macaron palette**:
230```
231Hand-drawn educational flowchart on warm cream paper. Slight wobble on all lines.
232PALETTE: macaron — soft pastel color blocks
233COLORS: Warm Cream background (#F5F0E8), zone fills in Macaron Blue (#A8D8EA),
234        Lavender (#D5C6E0), Mint (#B5E5CF), Coral Red (#E8655A) for emphasis
235ELEMENTS: Rounded cards with dashed/solid borders, wavy hand-drawn arrows with labels,
236          simple stick-figure characters, doodle decorations (stars, underlines)
237STYLE: Color fills don't completely fill outlines, hand-drawn lettering, generous white space
238```
239 
240**Flowchart + ink-notes + mono-ink palette**:
241```
242Professional hand-drawn visual-note flowchart on pure white. Black ink line work
243with slight wobble, à la Mike Rohde sketchnoting.
244PALETTE: mono-ink — black ink dominant, sparse semantic accents
245COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all lines,
246        text, and figures; Coral Red (#E8655A) only for risk/emphasis,
247        Muted Teal (#5FA8A8) only for positive/solution states
248ELEMENTS: Left-to-right stage boxes with rounded-rect frames, wavy hand-drawn
249          arrows between stages, simple stick-figure characters with role
250          labels above (e.g., "ML Engineer", "Team Lead"), dashed-border box
251          for future/empty stage, small doodle icons per stage
252STYLE: Hand-lettered titles (bold, oversized), handwritten stage labels and
253        annotations, generous white space, bottom tagline summarizing takeaway
254```
255 
256### Comparison
257 
258```
259[Title] - Comparison View
260 
261LEFT SIDE - [Option A]:
262- [Point 1]
263- [Point 2]
264 
265RIGHT SIDE - [Option B]:
266- [Point 1]
267- [Point 2]
268 
269DIVIDER: [visual separator]
270STYLE: [style characteristics]
271ASPECT: 16:9
272```
273 
274**Comparison + vector-illustration**:
275```
276Flat vector comparison with split layout. Clear visual separation.
277COLORS: Left side Coral (#E07A5F), Right side Mint (#81B29A), cream background
278ELEMENTS: Bold icons, black outlines, centered divider line
279```
280 
281**Comparison + vector-illustration + warm palette**:
282```
283Flat vector comparison with split layout. Clear visual separation.
284PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
285COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621),
286        Soft Peach background (#FFECD2), Deep Brown (#744210) accents
287ELEMENTS: Bold icons, black outlines, centered divider line
288```
289 
290**Comparison + ink-notes + mono-ink palette** (Before/After, Traditional vs New):
291```
292Professional hand-drawn sketchnote comparison on pure white. Black ink line work
293with slight wobble, à la Mike Rohde sketchnoting.
294PALETTE: mono-ink — black ink dominant, sparse semantic accents
295COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all outlines,
296        text, figures, arrows; Coral Red (#E8655A) reserved for risks/gaps
297        (left/Before side); Muted Teal (#5FA8A8) reserved for positives
298        (right/After side). Color accents under 10% of canvas.
299LAYOUT: Left | Right split with vertical hand-drawn divider. Hand-lettered
300        "Before" label (top-left) and "After" label (top-right).
301LEFT SIDE: Stick figure(s) with role label above, speech bubble showing the
302           pain point, bulleted pain-point list in handwritten text.
303RIGHT SIDE: Stick figure(s) showing the new state, bulleted improvement list,
304            small positive-action icons.
305BRIDGE: Curved hand-drawn "mindset shift" arrow bridging left → right with
306        small inline label describing the shift.
307BOTTOM: Single-line hand-lettered tagline summarizing the takeaway.
308STYLE: Hand-lettered headings (bold, oversized), handwritten body annotations,
309        generous white space, no computer fonts, no gradients, no shadows.
310```
311 
312### Framework
313 
314```
315[Title] - Conceptual Framework
316 
317STRUCTURE: [hierarchical/network/matrix]
318 
319NODES:
320- [Concept 1] - [role]
321- [Concept 2] - [role]
322 
323RELATIONSHIPS: [how nodes connect]
324STYLE: [style characteristics]
325ASPECT: 16:9
326```
327 
328**Framework + vector-illustration**:
329```
330Flat vector framework diagram with geometric nodes and bold connectors.
331COLORS: Cream background (#F5F0E6), nodes in Coral/Mint/Mustard/Blue, black outlines
332ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
333```
334 
335**Framework + vector-illustration + warm palette**:
336```
337Flat vector framework diagram with geometric nodes and bold connectors.
338PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors.
339COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936),
340        Terracotta (#C05621), Golden Yellow (#F6AD55), black outlines
341ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines
342```
343 
344**Framework + ink-notes + mono-ink palette** (command center, OS analogy):
345```
346Professional hand-drawn sketchnote framework on pure white. Black ink line work
347with slight wobble, à la Mike Rohde sketchnoting.
348PALETTE: mono-ink — black ink dominant, sparse semantic accents
349COLORS: Pure White background (#FFFFFF), Near Black (#1A1A1A) for all lines,
350        text, figures; Dusty Lavender (#9B8AB5) for neutral category tags only;
351        Coral Red (#E8655A) for emphasis sparingly. Color accents under 10%.
352STRUCTURE: Central rounded-rectangle frame as "the system" with hand-lettered
353           title inside. Inner layer of labeled sub-components (node labels
354           above each). Outer layer of feeder arrows from stick-figure
355           operators/users with role labels.
356ELEMENTS: Stick figures at the edges with role tags ("Team Lead", "Operator"),
357          wavy hand-drawn connector arrows with small inline labels, small
358          doodle icons per component, dashed-border placeholder(s) for
359          future/empty capabilities.
360BOTTOM: Single-line hand-lettered tagline.
361STYLE: Hand-lettered headings, handwritten annotations, generous white space,
362        no computer fonts, no gradients.
363```
364 
365### Timeline
366 
367```
368[Title] - Chronological View
369 
370DIRECTION: [horizontal/vertical]
371 
372EVENTS:
373- [Date/Period 1]: [milestone]
374- [Date/Period 2]: [milestone]
375 
376MARKERS: [visual indicators]
377STYLE: [style characteristics]
378ASPECT: 16:9
379```
380 
381### Screen-Print Style Override
382 
383When `style: screen-print`, replace standard style instructions with:
384 
385```
386Screen print / silkscreen poster art. Flat color blocks, NO gradients.
387COLORS: 2-5 colors maximum. [Choose from style palette or duotone pair]
388TEXTURE: Halftone dot patterns, slight color layer misregistration, paper grain
389COMPOSITION: Bold silhouettes, geometric framing, negative space as storytelling element
390FIGURES: Silhouettes only, no detailed faces, stencil-cut edges
391TYPOGRAPHY: Bold condensed sans-serif integrated into composition (not overlaid)
392```
393 
394**Scene + screen-print**:
395```
396Conceptual poster scene. Single symbolic focal point, NOT literal illustration.
397COLORS: Duotone pair (e.g., Burnt Orange #E8751A + Deep Teal #0A6E6E) on Off-Black #121212
398COMPOSITION: Centered silhouette or geometric frame, 60%+ negative space
399TEXTURE: Halftone dots, paper grain, slight print misregistration
400```
401 
402**Comparison + screen-print**:
403```
404Split poster composition. Each side dominated by one color from duotone pair.
405LEFT: [Color A] side with silhouette/icon for [Option A]
406RIGHT: [Color B] side with silhouette/icon for [Option B]
407DIVIDER: Geometric shape or negative space boundary
408TEXTURE: Halftone transitions between sides
409```
410 
411---
412 
413## Palette Override
414 
415When a palette is specified (via `--palette` or preset), it overrides the style's default colors:
416 
4171. Read style file → get rendering rules (Visual Elements, Style Rules, line treatment)
4182. Read palette file (`palettes/<palette>.md`) → get Colors + Background
4193. Palette Colors **replace** style's default Color Palette in prompt
4204. Palette Background **replaces** style's Background color (keep style's texture description)
4215. Build prompt: style rendering instructions + palette colors
422 
423**Prompt frontmatter** includes palette when specified:
424```yaml
425---
426illustration_id: 01
427type: infographic
428style: vector-illustration
429palette: macaron
430---
431```
432 
433**Example**: `vector-illustration` + `macaron` palette:
434```
435Flat vector illustration infographic. Clean black outlines on all elements.
436PALETTE: macaron — soft pastel color blocks
437COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Mint (#B5E5CF),
438        Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for emphasis
439ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements
440```
441 
442When no palette is specified, use the style's built-in Color Palette as before.
443 
444---
445 
446## What to Avoid
447 
448- Vague descriptions ("a nice image")
449- Literal metaphor illustrations
450- Missing concrete labels/annotations
451- Generic decorative elements
452 
453## Watermark Integration
454 
455If watermark enabled in preferences, append:
456 
457```
458Include a subtle watermark "[content]" positioned at [position].
459```
460