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-article-illustrator/references/prompt-construction.md

10 KiB
Raw Blame History

Prompt Construction

Prompt File Format

Each prompt file uses YAML frontmatter + content:

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

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:

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