# Step 3: Prompt Template Save to `prompts/cover.md`: ```markdown --- type: cover palette: [confirmed palette] rendering: [confirmed rendering] references: - ref_id: 01 filename: refs/ref-01-{slug}.{ext} usage: direct | style | palette - ref_id: 02 filename: refs/ref-02-{slug}.{ext} usage: direct | style | palette --- # Content Context Article title: [full original title from source] Content summary: [2-3 sentence summary of key points and themes] Keywords: [5-8 key terms extracted from content] # Visual Design Cover theme: [2-3 words visual interpretation] Type: [confirmed type] Palette: [confirmed palette] Rendering: [confirmed rendering] Font: [confirmed font] Text level: [confirmed text level] Mood: [confirmed mood] Aspect ratio: [confirmed ratio] Language: [confirmed language] # Text Elements [Based on text level:] - none: "No text elements" - title-only: "Title: [exact title from source or user]" - title-subtitle: "Title: [title] / Subtitle: [context]" - text-rich: "Title: [title] / Subtitle: [context] / Tags: [2-4 keywords]" # Mood Application [Based on mood level:] - subtle: "Use low contrast, muted colors, light visual weight, calm aesthetic" - balanced: "Use medium contrast, normal saturation, balanced visual weight" - bold: "Use high contrast, vivid saturated colors, heavy visual weight, dynamic energy" # Font Application [Based on font style:] - clean: "Use clean geometric sans-serif typography. Modern, minimal letterforms." - handwritten: "Use warm hand-lettered typography with organic brush strokes. Friendly, personal feel." - serif: "Use elegant serif typography with refined letterforms. Classic, editorial character." - display: "Use bold decorative display typography. Heavy, expressive headlines." # Composition Type composition: - [Type-specific layout and structure] Visual composition: - Main visual: [metaphor derived from content meaning] - Layout: [positioning based on type and aspect ratio] - Decorative: [palette-specific elements that reinforce content theme] Color scheme: [primary, background, accent from palette definition, adjusted by mood] Rendering notes: [key characteristics from rendering definition — lines, texture, depth, element style] Type notes: [key characteristics from type definition] Palette notes: [key characteristics from palette definition] [Watermark section if enabled] [Reference images section if provided — see below] ``` ## Content-Driven Design - Article title and summary inform the visual metaphor choice - Keywords guide decorative elements and symbols - The skill controls visual style; the content drives meaning ## Visual Element Selection Match content themes to icon vocabulary: | Content Theme | Suggested Elements | |---------------|-------------------| | Programming/Dev | Code window, terminal, API brackets, gear | | AI/ML | Brain, neural network, robot, circuit | | Growth/Business | Chart, rocket, plant, mountain, arrow | | Security | Lock, shield, key, fingerprint | | Communication | Speech bubble, megaphone, mail, handshake | | Tools/Methods | Wrench, checklist, pencil, puzzle | Full library: [../visual-elements.md](../visual-elements.md) ## Type-Specific Composition | Type | Composition Guidelines | |------|------------------------| | `hero` | Large focal visual (60-70% area), title overlay on visual, dramatic composition | | `conceptual` | Abstract shapes representing core concepts, information hierarchy, clean zones | | `typography` | Title as primary element (40%+ area), minimal supporting visuals, strong hierarchy | | `metaphor` | Concrete object/scene representing abstract idea, symbolic elements, emotional resonance | | `scene` | Atmospheric environment, narrative elements, mood-setting lighting and colors | | `minimal` | Single focal element, generous whitespace (60%+), essential shapes only | ## Title Guidelines When text level includes title: - **Source**: Use the exact title provided by user, or extract from source content - **Do NOT invent titles**: Stay faithful to the original - Match confirmed language ## Watermark Application If enabled in preferences, add to prompt: ``` Include a subtle watermark "[content]" positioned at [position]. The watermark should be legible but not distracting from the main content. ``` Reference: `config/watermark-guide.md` ## Reference Image Handling When user provides reference images (`--ref` or pasted images): ### ⚠️ CRITICAL - Frontmatter References **MUST add `references` field in YAML frontmatter** when reference files are saved to `refs/`: ```yaml --- type: cover palette: warm rendering: flat-vector references: - ref_id: 01 filename: refs/ref-01-podcast-thumbnail.jpg usage: style --- ``` | Field | Description | |-------|-------------| | `ref_id` | Sequential number (01, 02, ...) | | `filename` | Relative path from prompt file's parent directory | | `usage` | `direct` / `style` / `palette` | **Omit `references` field entirely** if no reference files saved (style extracted verbally only). ### When to Include References in Frontmatter | Situation | Frontmatter Action | Generation Action | |-----------|-------------------|-------------------| | Reference file saved to `refs/` | Add to `references` list ✓ | Pass via `--ref` parameter | | Style extracted verbally (no file) | Omit `references` field | Describe in prompt body only | | File path in frontmatter but doesn't exist | ERROR - fix or remove | Generation will fail | **Before writing prompt with references, verify**: `test -f refs/ref-NN-{slug}.{ext}` ### Reference Usage Types | Usage | When to Use | Generation Action | |-------|-------------|-------------------| | `direct` | Reference matches desired output closely | Pass to `--ref` parameter | | `style` | Extract visual style characteristics only | Describe style in prompt text | | `palette` | Extract color palette only | Include colors in prompt | ### Step 1: Analyze References For each reference image, extract: - **Style**: Rendering technique, line quality, texture - **Composition**: Layout, visual hierarchy, focal points - **Color mood**: Palette characteristics (without specific colors) - **Elements**: Key visual elements and symbols used ### Step 2: Embed in Prompt **If file saved AND skill supports `--ref`** (e.g., baoyu-image-gen with Google): - Pass ref images directly via `--ref` parameter - Add brief style note in prompt: ``` # Reference Style Follow the visual style of the attached reference image(s): - [1-2 sentence style summary from analysis] ``` **If file saved BUT skill does NOT support `--ref`**: - Embed detailed text description in prompt: ``` # Reference Style (Text Description) Emulate the following visual style from reference image(s): Reference 1: [filename] - Style: [detailed rendering technique description] - Composition: [layout and hierarchy description] - Elements: [key visual elements used] - Mood: [emotional tone and visual weight] [Repeat for additional references] Apply these style characteristics to the cover design while maintaining the specified Type, Palette, and Rendering dimensions. ``` **If style/palette extracted verbally (NO file saved)**: - DO NOT add references metadata to prompt - Append extracted info directly to prompt body: ``` # Extracted Style (from reference) COLORS (from reference): - Primary: #E8756D coral - Secondary: #7ECFC0 mint ... STYLE (from reference): - Clean lines, minimal shadows - Gradient backgrounds - Flat vector icons ... ``` ### Reference Analysis Template Use this format when analyzing reference images: | Aspect | Analysis Points | |--------|-----------------| | **Rendering** | Line quality (clean/sketchy/painted), texture presence, depth treatment | | **Composition** | Element placement, whitespace ratio, visual flow | | **Typography** | Font style, text placement, hierarchy (if present) | | **Elements** | Icon vocabulary, decorative motifs, character style | | **Mood** | Contrast level, saturation, visual weight |