# Prompt Construction ## Prompt File Format Each prompt file uses YAML frontmatter + content: ```yaml --- illustration_id: 01 type: infographic style: blueprint references: # ⚠️ ONLY if files EXIST in references/ directory - ref_id: 01 filename: 01-ref-diagram.png usage: direct # direct | style | palette --- [Type-specific template content below...] ``` **⚠️ CRITICAL - When to include `references` field**: | Situation | Action | |-----------|--------| | Reference file saved to `references/` | Include in frontmatter ✓ | | Style extracted verbally (no file) | DO NOT include in frontmatter, append to prompt body instead | | File path in frontmatter but file doesn't exist | ERROR - remove references field | **Reference Usage Types** (only when file exists): | Usage | Description | Generation Action | |-------|-------------|-------------------| | `direct` | Primary visual reference | Pass to `--ref` parameter | | `style` | Style characteristics only | Describe style in prompt text | | `palette` | Color palette extraction | Include colors in prompt | **If no reference file but style/palette extracted verbally**, append directly to prompt body: ``` COLORS (from reference): - Primary: #E8756D coral - Secondary: #7ECFC0 mint ... STYLE (from reference): - Clean lines, minimal shadows - Gradient backgrounds ... ``` --- ## Default Composition Requirements **Apply to ALL prompts by default**: | Requirement | Description | |-------------|-------------| | **Clean composition** | Simple layouts, no visual clutter | | **White space** | Generous margins, breathing room around elements | | **No complex backgrounds** | Solid colors or subtle gradients only, avoid busy textures | | **Centered or content-appropriate** | Main visual elements centered or positioned by content needs | | **Matching graphics** | Use graphic elements that align with content theme | | **Highlight core info** | White space draws attention to key information | **Add to ALL prompts**: > Clean composition with generous white space. Simple or no background. Main elements centered or positioned by content needs. --- ## Character Rendering When depicting people: | Guideline | Description | |-----------|-------------| | **Style** | Simplified cartoon silhouettes or symbolic expressions | | **Avoid** | Realistic human portrayals, detailed faces | | **Diversity** | Varied body types when showing multiple people | | **Emotion** | Express through posture and simple gestures | **Add to ALL prompts with human figures**: > Human figures: simplified stylized silhouettes or symbolic representations, not photorealistic. --- ## Text in Illustrations | Element | Guideline | |---------|-----------| | **Size** | Large, prominent, immediately readable | | **Style** | Handwritten fonts preferred for warmth | | **Content** | Concise keywords and core concepts only | | **Language** | Match article language | **Add to prompts with text**: > Text should be large and prominent with handwritten-style fonts. Keep minimal, focus on keywords. --- ## Principles Good prompts must include: 1. **Layout Structure First**: Describe composition, zones, flow direction 2. **Specific Data/Labels**: Use actual numbers, terms from article 3. **Visual Relationships**: How elements connect 4. **Semantic Colors**: Meaning-based color choices (red=warning, green=efficient) 5. **Style Characteristics**: Line treatment, texture, mood 6. **Aspect Ratio**: End with ratio and complexity level ## Type-Specific Templates ### Infographic ``` [Title] - Data Visualization Layout: [grid/radial/hierarchical] ZONES: - Zone 1: [data point with specific values] - Zone 2: [comparison with metrics] - Zone 3: [summary/conclusion] LABELS: [specific numbers, percentages, terms from article] COLORS: [semantic color mapping] STYLE: [style characteristics] ASPECT: 16:9 ``` **Infographic + vector-illustration**: ``` Flat vector illustration infographic. Clean black outlines on all elements. COLORS: Cream background (#F5F0E6), Coral Red (#E07A5F), Mint Green (#81B29A), Mustard Yellow (#F2CC8F) ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements (dots, stars) ``` **Infographic + vector-illustration + warm palette**: ``` Flat vector illustration infographic. Clean black outlines on all elements. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors. COLORS: Soft Peach background (#FFECD2), Warm Orange (#ED8936), Terracotta (#C05621), Golden Yellow (#F6AD55), Deep Brown (#744210) ELEMENTS: Geometric simplified icons, no gradients, rounded corners, modular card layout, consistent icon style ``` ### Scene ``` [Title] - Atmospheric Scene FOCAL POINT: [main subject] ATMOSPHERE: [lighting, mood, environment] MOOD: [emotion to convey] COLOR TEMPERATURE: [warm/cool/neutral] STYLE: [style characteristics] ASPECT: 16:9 ``` ### Flowchart ``` [Title] - Process Flow Layout: [left-right/top-down/circular] STEPS: 1. [Step name] - [brief description] 2. [Step name] - [brief description] ... CONNECTIONS: [arrow types, decision points] STYLE: [style characteristics] ASPECT: 16:9 ``` **Flowchart + vector-illustration**: ``` Flat vector flowchart with bold arrows and geometric step containers. COLORS: Cream background (#F5F0E6), steps in Coral/Mint/Mustard, black outlines ELEMENTS: Rounded rectangles, thick arrows, simple icons per step ``` **Flowchart + sketch-notes + macaron palette**: ``` Hand-drawn educational flowchart on warm cream paper. Slight wobble on all lines. PALETTE: macaron — soft pastel color blocks COLORS: Warm Cream background (#F5F0E8), zone fills in Macaron Blue (#A8D8EA), Lavender (#D5C6E0), Mint (#B5E5CF), Coral Red (#E8655A) for emphasis ELEMENTS: Rounded cards with dashed/solid borders, wavy hand-drawn arrows with labels, simple stick-figure characters, doodle decorations (stars, underlines) STYLE: Color fills don't completely fill outlines, hand-drawn lettering, generous white space ``` ### Comparison ``` [Title] - Comparison View LEFT SIDE - [Option A]: - [Point 1] - [Point 2] RIGHT SIDE - [Option B]: - [Point 1] - [Point 2] DIVIDER: [visual separator] STYLE: [style characteristics] ASPECT: 16:9 ``` **Comparison + vector-illustration**: ``` Flat vector comparison with split layout. Clear visual separation. COLORS: Left side Coral (#E07A5F), Right side Mint (#81B29A), cream background ELEMENTS: Bold icons, black outlines, centered divider line ``` **Comparison + vector-illustration + warm palette**: ``` Flat vector comparison with split layout. Clear visual separation. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors. COLORS: Left side Warm Orange (#ED8936), Right side Terracotta (#C05621), Soft Peach background (#FFECD2), Deep Brown (#744210) accents ELEMENTS: Bold icons, black outlines, centered divider line ``` ### Framework ``` [Title] - Conceptual Framework STRUCTURE: [hierarchical/network/matrix] NODES: - [Concept 1] - [role] - [Concept 2] - [role] RELATIONSHIPS: [how nodes connect] STYLE: [style characteristics] ASPECT: 16:9 ``` **Framework + vector-illustration**: ``` Flat vector framework diagram with geometric nodes and bold connectors. COLORS: Cream background (#F5F0E6), nodes in Coral/Mint/Mustard/Blue, black outlines ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines ``` **Framework + vector-illustration + warm palette**: ``` Flat vector framework diagram with geometric nodes and bold connectors. PALETTE OVERRIDE (warm): Warm-only color palette, no cool colors. COLORS: Soft Peach background (#FFECD2), nodes in Warm Orange (#ED8936), Terracotta (#C05621), Golden Yellow (#F6AD55), black outlines ELEMENTS: Rounded rectangles or circles for nodes, thick connecting lines ``` ### Timeline ``` [Title] - Chronological View DIRECTION: [horizontal/vertical] EVENTS: - [Date/Period 1]: [milestone] - [Date/Period 2]: [milestone] MARKERS: [visual indicators] STYLE: [style characteristics] ASPECT: 16:9 ``` ### Screen-Print Style Override When `style: screen-print`, replace standard style instructions with: ``` Screen print / silkscreen poster art. Flat color blocks, NO gradients. COLORS: 2-5 colors maximum. [Choose from style palette or duotone pair] TEXTURE: Halftone dot patterns, slight color layer misregistration, paper grain COMPOSITION: Bold silhouettes, geometric framing, negative space as storytelling element FIGURES: Silhouettes only, no detailed faces, stencil-cut edges TYPOGRAPHY: Bold condensed sans-serif integrated into composition (not overlaid) ``` **Scene + screen-print**: ``` Conceptual poster scene. Single symbolic focal point, NOT literal illustration. COLORS: Duotone pair (e.g., Burnt Orange #E8751A + Deep Teal #0A6E6E) on Off-Black #121212 COMPOSITION: Centered silhouette or geometric frame, 60%+ negative space TEXTURE: Halftone dots, paper grain, slight print misregistration ``` **Comparison + screen-print**: ``` Split poster composition. Each side dominated by one color from duotone pair. LEFT: [Color A] side with silhouette/icon for [Option A] RIGHT: [Color B] side with silhouette/icon for [Option B] DIVIDER: Geometric shape or negative space boundary TEXTURE: Halftone transitions between sides ``` --- ## Palette Override When a palette is specified (via `--palette` or preset), it overrides the style's default colors: 1. Read style file → get rendering rules (Visual Elements, Style Rules, line treatment) 2. Read palette file (`palettes/.md`) → get Colors + Background 3. Palette Colors **replace** style's default Color Palette in prompt 4. Palette Background **replaces** style's Background color (keep style's texture description) 5. Build prompt: style rendering instructions + palette colors **Prompt frontmatter** includes palette when specified: ```yaml --- illustration_id: 01 type: infographic style: vector-illustration palette: macaron --- ``` **Example**: `vector-illustration` + `macaron` palette: ``` Flat vector illustration infographic. Clean black outlines on all elements. PALETTE: macaron — soft pastel color blocks COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for emphasis ELEMENTS: Geometric simplified icons, no gradients, playful decorative elements ``` When no palette is specified, use the style's built-in Color Palette as before. --- ## What to Avoid - Vague descriptions ("a nice image") - Literal metaphor illustrations - Missing concrete labels/annotations - Generic decorative elements ## Watermark Integration If watermark enabled in preferences, append: ``` Include a subtle watermark "[content]" positioned at [position]. ```