mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-31 14:19:47 +08:00
edf9030675
- Add --ref parameter for reference images (style/palette/direct usage) - Add visual-elements.md with icon vocabulary by topic - Enhance first-time setup as blocking operation - Remove character limits from titles, use original source titles - Update prompt template with reference handling
230 lines
7.4 KiB
Markdown
230 lines
7.4 KiB
Markdown
# 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]
|
|
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"
|
|
|
|
# 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 |
|