357 lines
11 KiB
Markdown
357 lines
11 KiB
Markdown
# 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/<palette>.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].
|
|
```
|