# 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. 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 ``` ### 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. 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. 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 ``` ### Macaron Style Instructions When `style: macaron`, add these style instructions: ``` Educational infographic with soft macaron pastel color blocks on warm cream paper. COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Macaron Mint (#B5E5CF), Macaron Lavender (#D5C6E0), Macaron Peach (#FFD5C2), Coral Red (#E8655A) for emphasis, Deep Charcoal (#2D2D2D) text, Warm Gray (#6B6B6B) annotations CONTAINERS: Rounded cards, bubbles, dashed-box frames with pastel fills to separate info zones TYPOGRAPHY: Bold large title, bold keywords, smaller muted annotations STRUCTURE: Auto-select best layout for content (flow→arrows, compare→columns, cycle→ring, cards→grid) BOTTOM: Bold summary quote at bottom capturing core insight ``` **Infographic + macaron**: ``` Educational infographic on warm cream paper (#F5F0E8). Soft macaron pastel blocks as info zones. COLORS: Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for key data, Deep Charcoal (#2D2D2D) text ELEMENTS: Rounded-corner cards with pastel fills, clear labels, bold title, summary quote at bottom ``` **Flowchart + macaron**: ``` Process flow on warm cream paper (#F5F0E8). Each step in a macaron pastel card. COLORS: Steps alternate Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2), Coral Red (#E8655A) for decision points, Deep Charcoal (#2D2D2D) outlines ELEMENTS: Rounded step containers, soft arrow connectors, bold step labels ``` ### 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 ``` --- ## 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]. ```