diff --git a/skills/baoyu-cover-image/SKILL.md b/skills/baoyu-cover-image/SKILL.md index f37c83f..af177bc 100644 --- a/skills/baoyu-cover-image/SKILL.md +++ b/skills/baoyu-cover-image/SKILL.md @@ -317,16 +317,23 @@ Reference Style Extracted (no file): - Identify visual metaphors - Detect content type -**1.3 Reference Image Analysis** (if provided in Step 1.0) +**1.3 Reference Image Deep Analysis** ⚠️ CRITICAL (if provided in Step 1.0) -For each reference image: +References are high-priority inputs. Perform deep visual analysis to extract **specific, concrete, reproducible** elements — not vague summaries. -| Analysis | Description | -|----------|-------------| -| Visual characteristics | Style, colors, composition | -| Content/subject | What the reference depicts | -| Style match | Which type/palette/rendering align | -| Usage recommendation | `direct` / `style` / `palette` | +For each reference image, extract ALL of the following: + +| Analysis | Description | Example (good vs bad) | +|----------|-------------|----------------------| +| **Brand elements** | Logos, wordmarks, specific typography treatments | Good: "Logo uses vertical parallel lines for 'm'" / Bad: "Has a logo" | +| **Signature patterns** | Unique decorative motifs, textures, geometric patterns | Good: "Woven intersecting curves forming diamond grid" / Bad: "Has patterns" | +| **Color palette** | Exact hex values or close approximations for key colors | Good: "#2D4A3E dark teal, #F5F0E0 cream" / Bad: "Dark and light colors" | +| **Layout structure** | Specific spatial arrangement, banner placement, zone splits | Good: "Bottom 30% dark banner with branding" / Bad: "Has a banner" | +| **Typography** | Font style, weight, spacing, case, positioning | Good: "Uppercase, wide letter-spacing, handwritten ep number" / Bad: "Has text" | +| **Content/subject** | What the reference depicts | Factual description | +| **Usage recommendation** | `direct` / `style` / `palette` | Based on analysis | + +**Output format**: List each element as a bullet point that can be directly copy-pasted into a prompt as a mandatory instruction. **1.4 Language Detection** - Detect source language @@ -380,10 +387,15 @@ references: | Situation | Frontmatter | Body | |-----------|-------------|------| -| Reference file saved to `refs/` | Add to `references` ✓ | Brief style note | +| Reference file saved to `refs/` | Add to `references` ✓ | **Detailed mandatory style instructions** (see below) | | Style extracted verbally (no file) | Omit `references` | Full style description | | File in frontmatter but doesn't exist | ERROR - fix or remove | — | +⚠️ **"Brief style note" is NOT sufficient.** When references are provided, the prompt body MUST contain a dedicated `# Reference Style — MUST INCORPORATE` section with: +1. Per-reference breakdown of **specific visual elements** extracted in Step 1.3 +2. Each element prefixed with "MUST" or "REQUIRED" +3. An **integration approach** describing exactly how reference elements should be composed into the cover layout (e.g., "Use a split layout: illustration area 65% + dark branded banner 35%") + ### Step 4: Generate Image **4.1 Backup existing** `cover.png` → `cover-backup-YYYYMMDD-HHMMSS.png` (if regenerating) @@ -421,8 +433,8 @@ references: | Skill Supports `--ref` | Action | |------------------------|--------| -| Yes (e.g., baoyu-image-gen with Google) | Pass reference images via `--ref` | -| No | Convert to text description, append to prompt | +| Yes (e.g., baoyu-image-gen with Google/OpenAI) | Pass reference images via `--ref` | +| No | If usage is `direct`, switch to a ref-capable backend (baoyu-image-gen + Google multimodal or OpenAI GPT Image edits). If unavailable, convert to text description and remove direct refs | **Verification**: Before generating, confirm reference processing: ``` @@ -434,7 +446,7 @@ Reference Processing: **4.4 Generate** 1. Call selected skill with prompt file path, output path (`cover.png`), aspect ratio -2. If references with `direct` usage AND skill supports `--ref`: include `--ref` parameter +2. If references with `direct` usage: use ref-capable backend and include `--ref` (recommend `baoyu-image-gen --provider google --model gemini-3-pro-image-preview` or `--provider openai --model gpt-image-1.5`) 3. On failure: auto-retry once before reporting error ### Step 5: Completion Report @@ -483,6 +495,15 @@ All modifications automatically backup existing `cover.png` before regenerating. - `--no-title` is alias for `--text none` - `--style` presets are backward-compatible; explicit `--palette`/`--rendering` override preset values +### Reference Image Priority ⚠️ + +When user provides reference images, they are **HIGH PRIORITY** and MUST strongly influence the generated cover: + +- **References override defaults**: If reference images conflict with preferred palette/rendering, the reference visual identity takes precedence in the prompt +- **Concrete > abstract**: Extract specific, reproducible visual elements (exact patterns, logo treatments, color hex values, layout structures) — not vague descriptions like "clean style" +- **Mandatory language**: Use "MUST", "REQUIRED", "CRITICAL" in the prompt for reference elements — generic "follow the style" is insufficient for image generation models +- **Visible in output**: After generation, verify that reference elements are actually present in the cover. If not, strengthen the prompt and regenerate + ### Composition Principles - **Generous whitespace**: 40-60% breathing room; avoid cluttered layouts diff --git a/skills/baoyu-cover-image/references/workflow/prompt-template.md b/skills/baoyu-cover-image/references/workflow/prompt-template.md index acf3d67..5d0129b 100644 --- a/skills/baoyu-cover-image/references/workflow/prompt-template.md +++ b/skills/baoyu-cover-image/references/workflow/prompt-template.md @@ -68,9 +68,15 @@ Palette notes: [key characteristics from palette definition] [Watermark section if enabled] -[Reference images section if provided — see below] +[Reference images section if provided — REQUIRED, see below] ``` +## Reference-Driven Design ⚠️ HIGH PRIORITY + +When reference images are provided, they are the **primary visual input** and MUST strongly influence the output. The cover should look like it belongs to the same visual family as the references. + +**Passing `--ref` alone is NOT enough.** Image generation models often ignore reference images unless the prompt text explicitly describes what to reproduce. Always combine `--ref` with detailed textual instructions. + ## Content-Driven Design - Article title and summary inform the visual metaphor choice @@ -175,63 +181,67 @@ For each reference image, extract: - **Color mood**: Palette characteristics (without specific colors) - **Elements**: Key visual elements and symbols used -### Step 2: Embed in Prompt +### Step 2: Embed in Prompt ⚠️ CRITICAL -**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: +**Passing `--ref` alone is NOT enough.** Image generation models frequently ignore reference images unless the prompt text explicitly and forcefully describes what to reproduce. You MUST always write detailed textual instructions regardless of whether `--ref` is used. + +**If file saved (with or without `--ref` support)**: +- Pass ref images via `--ref` parameter if skill supports it +- **ALWAYS** add a detailed mandatory section in the prompt body: ``` -# Reference Style -Follow the visual style of the attached reference image(s): -- [1-2 sentence style summary from analysis] +# Reference Style — MUST INCORPORATE + +CRITICAL: The generated cover MUST visually reference the provided images. The cover must feel like it belongs to the same visual family. + +## From Ref 1 ([filename]) — REQUIRED elements: +- [Brand element]: [Specific description of logo/wordmark treatment, e.g., "The logo uses vertical parallel lines (|||) for the letter 'm'. Reproduce this exact treatment."] +- [Signature pattern]: [Specific description, e.g., "Woven intersecting curves forming a diamond/lozenge grid pattern. This MUST appear prominently as a banner, border, or background section."] +- [Colors]: [Exact hex values, e.g., "Dark teal #2D4A3E background, cream #F5F0E0 text"] +- [Typography]: [Specific treatment, e.g., "Uppercase text with wide letter-spacing"] +- [Layout element]: [Specific spatial element, e.g., "Bottom banner strip in dark color"] + +## From Ref 2 ([filename]) — REQUIRED elements: +[Same detailed breakdown] + +## Integration approach: +[Specific layout instruction describing how reference elements combine with the cover content, e.g., "Use a SPLIT LAYOUT: main illustration area (warm cream background) occupies ~65% of the image, while a dark teal BANNER STRIP (with the woven line pattern from Ref 2) runs along the bottom ~35%, containing branding elements from Ref 1."] ``` -**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. -``` +**Key rules**: +- Each visual element gets its own bullet with "MUST" or "REQUIRED" +- Descriptions must be **specific enough to reproduce** — not vague ("clean style") +- The integration approach must describe **exact spatial arrangement** +- After generation, verify reference elements are visible; if not, strengthen and regenerate **If style/palette extracted verbally (NO file saved)**: - DO NOT add references metadata to prompt -- Append extracted info directly to prompt body: +- Append extracted info directly to prompt body using the same MUST INCORPORATE format above: ``` -# Extracted Style (from reference) +# Reference Style — MUST INCORPORATE (extracted from visual analysis) -COLORS (from reference): -- Primary: #E8756D coral -- Secondary: #7ECFC0 mint -... +CRITICAL: Apply these specific visual elements extracted from the reference images. -STYLE (from reference): -- Clean lines, minimal shadows -- Gradient backgrounds -- Flat vector icons -... +## REQUIRED elements: +- [Same detailed bullet format as above] + +## Integration approach: +[Same spatial layout instruction] ``` ### Reference Analysis Template -Use this format when analyzing reference images: +Use this format when analyzing reference images. Extract **specific, concrete, reproducible** details — not vague summaries. -| 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 | +| Aspect | Analysis Points | Good Example | Bad Example | +|--------|-----------------|--------------|-------------| +| **Brand elements** | Logos, wordmarks, distinctive typography | "Logo 'm' formed by 3 vertical lines" | "Has a logo" | +| **Signature patterns** | Unique motifs, textures, geometric patterns | "Woven curves forming diamond grid" | "Has patterns" | +| **Colors** | Exact hex values or close approximations | "#2D4A3E dark teal, #F5F0E0 cream" | "Dark and light" | +| **Layout** | Spatial zones, banner placement, proportions | "Bottom 30% is dark banner with branding" | "Has a banner" | +| **Typography** | Font style, weight, case, spacing, position | "Uppercase, wide letter-spacing, right-aligned" | "Has text" | +| **Rendering** | Line quality, texture, depth treatment | "Topographic contour lines as background texture" | "Clean style" | +| **Elements** | Icon vocabulary, decorative motifs | "Geometric intersecting line ornaments at corners" | "Has decorations" | + +**Output**: Each extracted element should be written as a **copy-pasteable prompt instruction** prefixed with "MUST" or "REQUIRED".