zhens
/
JimLiu-baoyu-skills
mirror of https://github.com/JimLiu/baoyu-skills.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
JimLiu-baoyu-skills/skills/baoyu-cover-image/references/workflow/prompt-template.md

7.8 KiB
Raw Blame History

Step 3: Prompt Template

Save to prompts/cover.md:

---
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

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/:

---
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