Add baoyu-skills package
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
# Auto-Selection Rules
|
||||
|
||||
When a dimension is omitted, select based on content signals.
|
||||
|
||||
## Auto Type Selection
|
||||
|
||||
| Signals | Type |
|
||||
|---------|------|
|
||||
| Product, launch, announcement, release, reveal | `hero` |
|
||||
| Architecture, framework, system, API, technical, model | `conceptual` |
|
||||
| Quote, opinion, insight, thought, headline, statement | `typography` |
|
||||
| Philosophy, growth, abstract, meaning, reflection | `metaphor` |
|
||||
| Story, journey, travel, lifestyle, experience, narrative | `scene` |
|
||||
| Zen, focus, essential, core, simple, pure | `minimal` |
|
||||
|
||||
## Auto Palette Selection
|
||||
|
||||
| Signals | Palette |
|
||||
|---------|---------|
|
||||
| Personal story, emotion, lifestyle, human | `warm` |
|
||||
| Business, professional, thought leadership, luxury | `elegant` |
|
||||
| Architecture, system, API, technical, code | `cool` |
|
||||
| Entertainment, premium, cinematic, dark mode | `dark` |
|
||||
| Nature, wellness, eco, organic, travel | `earth` |
|
||||
| Product launch, gaming, promotion, event | `vivid` |
|
||||
| Fantasy, children, gentle, creative, whimsical | `pastel` |
|
||||
| Zen, focus, essential, pure, simple | `mono` |
|
||||
| History, vintage, retro, classic, exploration | `retro` |
|
||||
| Movie poster, album cover, concert, cinematic, dramatic, two-color | `duotone` |
|
||||
| Education, tutorial, knowledge, onboarding, concept explainer | `macaron` |
|
||||
|
||||
## Auto Rendering Selection
|
||||
|
||||
| Signals | Rendering |
|
||||
|---------|-----------|
|
||||
| Clean, modern, tech, WeChat, icon-based, infographic | `flat-vector` |
|
||||
| Sketch, note, personal, casual, doodle, warm | `hand-drawn` |
|
||||
| Art, watercolor, soft, dreamy, creative, fantasy | `painterly` |
|
||||
| Data, dashboard, SaaS, corporate, polished | `digital` |
|
||||
| Gaming, retro, 8-bit, nostalgic | `pixel` |
|
||||
| Education, tutorial, classroom, teaching | `chalk` |
|
||||
| Poster, movie, album, concert, silhouette, mondo, limited-edition | `screen-print` |
|
||||
|
||||
## Auto Text Selection
|
||||
|
||||
| Signals | Text Level |
|
||||
|---------|------------|
|
||||
| Visual-only, photography, abstract, art | `none` |
|
||||
| Article, blog, standard cover | `title-only` |
|
||||
| Series, tutorial, technical with context | `title-subtitle` |
|
||||
| Announcement, features, multiple points, infographic | `text-rich` |
|
||||
|
||||
Default: `title-only`
|
||||
|
||||
## Auto Mood Selection
|
||||
|
||||
| Signals | Mood Level |
|
||||
|---------|------------|
|
||||
| Professional, corporate, thought leadership, academic, luxury | `subtle` |
|
||||
| General, educational, standard, blog, documentation | `balanced` |
|
||||
| Launch, announcement, promotion, event, gaming, entertainment | `bold` |
|
||||
|
||||
Default: `balanced`
|
||||
|
||||
## Auto Font Selection
|
||||
|
||||
| Signals | Font |
|
||||
|---------|------|
|
||||
| Personal, lifestyle, human, warm, friendly, story | `handwritten` |
|
||||
| Technical, professional, clean, modern, minimal, data | `clean` |
|
||||
| Editorial, academic, luxury, classic, literary | `serif` |
|
||||
| Announcement, entertainment, promotion, bold, event, gaming | `display` |
|
||||
|
||||
Default: `clean`
|
||||
124
baoyu-skills/skills/baoyu-cover-image/references/base-prompt.md
Normal file
124
baoyu-skills/skills/baoyu-cover-image/references/base-prompt.md
Normal file
@@ -0,0 +1,124 @@
|
||||
Create a cover image following these guidelines:
|
||||
|
||||
## Image Specifications
|
||||
|
||||
- **Type**: Cover image / Hero image
|
||||
- **Aspect Ratio**: As specified in the prompt below
|
||||
|
||||
## Core Principles
|
||||
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar alternatives - DO NOT refuse to generate
|
||||
- Ample whitespace, highlight core message, avoid cluttered layouts
|
||||
- Main visual elements centered or slightly left (leave right side for title area if title included)
|
||||
- Simplified silhouettes for any characters — NO realistic human faces or bodies
|
||||
- Icon-based vocabulary: use simple, recognizable icons to represent concepts
|
||||
|
||||
## Five Dimensions
|
||||
|
||||
### Type (Visual Composition)
|
||||
- `hero`: Large focal visual (60-70% area), dramatic composition
|
||||
- `conceptual`: Abstract shapes, information hierarchy, clean zones
|
||||
- `typography`: Title as primary element (40%+ area), minimal visuals
|
||||
- `metaphor`: Concrete object representing abstract idea, symbolic elements
|
||||
- `scene`: Atmospheric environment, narrative elements, mood lighting
|
||||
- `minimal`: Single focal element, generous whitespace (60%+)
|
||||
|
||||
### Palette (Color Scheme)
|
||||
Apply the specified palette's color values and decorative hints:
|
||||
- Use primary colors for main visual elements
|
||||
- Use background colors for base and surrounding areas
|
||||
- Use accent colors for highlights and secondary elements
|
||||
- Follow palette-specific decorative hints for ornamentation
|
||||
|
||||
### Rendering (Visual Style)
|
||||
Apply the specified rendering's characteristics:
|
||||
- **Lines**: Follow line quality rules (clean/sketchy/brush/pixel/chalk)
|
||||
- **Texture**: Apply or avoid texture per rendering definition
|
||||
- **Depth**: Follow depth rules (flat/minimal/soft edges)
|
||||
- **Elements**: Use rendering-specific element vocabulary
|
||||
|
||||
### Text (Density Level)
|
||||
- `none`: No text elements, full visual area
|
||||
- `title-only`: Single headline, 85% visual area
|
||||
- `title-subtitle`: Title + context, 75% visual area
|
||||
- `text-rich`: Title + subtitle + 2-4 keyword tags, 60% visual area
|
||||
|
||||
### Mood (Emotional Intensity)
|
||||
- `subtle`: Low contrast, muted/desaturated colors, light visual weight, calm aesthetic
|
||||
- `balanced`: Medium contrast, normal saturation, balanced visual weight
|
||||
- `bold`: High contrast, vivid/saturated colors, heavy visual weight, dynamic energy
|
||||
|
||||
## Text Style (When Title Included)
|
||||
|
||||
- **Title source**: Use the exact title provided by user, or extract from source content. Do NOT invent or modify titles.
|
||||
- Title text: Large, eye-catching, faithful to source
|
||||
- Subtitle: Secondary element (if title-subtitle or text-rich)
|
||||
- Tags: 2-4 keyword badges (if text-rich)
|
||||
- Font style harmonizes with rendering style
|
||||
|
||||
## Composition Guidance
|
||||
|
||||
### Layout Principles
|
||||
|
||||
- **Generous whitespace**: Maintain 40-60% breathing room; avoid cluttered compositions
|
||||
- **Visual anchor placement**: Main element centered or offset left (reserve right side for title if included)
|
||||
- **Information hierarchy**: One dominant focal point, 1-2 supporting elements, decorative accents
|
||||
- **Clean backgrounds**: Solid colors or subtle gradients; no complex textures or patterns
|
||||
|
||||
### Icon & Symbol Vocabulary
|
||||
|
||||
Represent concepts with simple, recognizable icons rather than detailed illustrations:
|
||||
|
||||
| Category | Examples |
|
||||
|----------|----------|
|
||||
| Tech | Code window, gear, circuit, cloud, lock, API brackets |
|
||||
| Ideas | Lightbulb, rocket, target, puzzle, key, magnifier |
|
||||
| Communication | Speech bubble, chat dots, megaphone, mail |
|
||||
| Growth | Plant/sprout, tree, arrow, chart, mountain |
|
||||
| Tools | Wrench, pencil, brush, checklist, clock |
|
||||
|
||||
Use the rendering style to determine icon complexity (flat-vector = geometric, hand-drawn = sketchy, etc.)
|
||||
|
||||
Full library: [references/visual-elements.md](visual-elements.md)
|
||||
|
||||
### Character Handling
|
||||
|
||||
**Default (no reference with people)**:
|
||||
- Use simplified silhouettes or abstract stick figures
|
||||
- Symbolic representations (head + shoulders outline)
|
||||
- NO realistic faces, detailed anatomy, or photographic representations
|
||||
- Cartoon/icon style consistent with rendering choice
|
||||
|
||||
**When reference images contain people**:
|
||||
- Reference image is passed to model (`usage: direct`) — model must visually reference it to preserve character likeness
|
||||
- Stylize to match chosen rendering (cartoon/vector), preserving distinctive features (hair, clothing, pose)
|
||||
- NEVER photorealistic
|
||||
|
||||
## Mood Application
|
||||
|
||||
Apply mood adjustments to the base palette:
|
||||
|
||||
| Mood | Contrast | Saturation | Weight |
|
||||
|------|----------|------------|--------|
|
||||
| subtle | Reduce 20-30% | Desaturate 20-30% | Lighter strokes/fills |
|
||||
| balanced | Standard | Standard | Standard |
|
||||
| bold | Increase 20-30% | Increase 20-30% | Heavier strokes/fills |
|
||||
|
||||
## Language
|
||||
|
||||
- Use the same language as the content provided below for any text elements
|
||||
- Match punctuation style to the content language
|
||||
|
||||
## Reference Images
|
||||
|
||||
When reference images are provided:
|
||||
|
||||
- **Style extraction**: Identify rendering technique, line quality, texture, and visual vocabulary
|
||||
- **Composition learning**: Note layout patterns, whitespace usage, element placement
|
||||
- **Mood matching**: Capture the emotional tone and visual weight
|
||||
- **Adaptation**: Apply extracted characteristics while respecting the specified Type, Palette, and Rendering dimensions
|
||||
- **Priority**: If reference style conflicts with specified dimensions, dimensions take precedence for structural choices; reference influences decorative details
|
||||
|
||||
---
|
||||
|
||||
Please generate the cover image based on the content provided below:
|
||||
@@ -0,0 +1,65 @@
|
||||
# `codex-imagegen` Wrapper Invocation
|
||||
|
||||
Load this reference only when the [Image Generation Tools](../SKILL.md#image-generation-tools) rule has resolved to `codex-imagegen` — i.e., the current runtime exposes no native `imagegen` skill but `codex` CLI is on `PATH` with an active `codex login`.
|
||||
|
||||
## Preferred path: route through `baoyu-image-gen`
|
||||
|
||||
If the `baoyu-image-gen` skill is available in this runtime, **always** invoke through it rather than calling the wrapper directly. It handles retry/cache/batch/EXTEND.md preferences uniformly with every other provider.
|
||||
|
||||
```bash
|
||||
${BUN_X} <baoyu-image-gen-base>/scripts/main.ts \
|
||||
--provider codex-cli \
|
||||
--image <ABSOLUTE_output> \
|
||||
--promptfiles <ABSOLUTE_prompts/01-cover-[slug].md> \
|
||||
--ar <ratio> \
|
||||
[--ref <ABSOLUTE_file>]...
|
||||
```
|
||||
|
||||
Resolve `<baoyu-image-gen-base>` the same way you resolve any sibling skill — through your runtime's skill registry (`Skill` tool, plugin marketplace, or `$HOME/.baoyu-skills/baoyu-image-gen/`).
|
||||
|
||||
## Fallback: spawn the wrapper directly
|
||||
|
||||
Only when `baoyu-image-gen` is NOT installed in the current runtime. Discover the wrapper's location at runtime — do NOT hard-code `../../packages/...` from this skill:
|
||||
|
||||
1. **Honor explicit override**: if `$BAOYU_CODEX_IMAGEGEN_BIN` is set and points to a real file, use that path. It may be `.ts` (spawn `bun <path>`) or `.sh`/binary (spawn directly).
|
||||
2. **Search the plugin root**: walk up from this skill's directory looking for `packages/baoyu-codex-imagegen/src/main.ts`. If found, that is the wrapper. Spawn it with `bun`.
|
||||
3. **Last resort**: tell the user that `codex-imagegen` is not available in this runtime and ask whether to install the `baoyu-skills` plugin (or set `BAOYU_CODEX_IMAGEGEN_BIN`) or pick another backend.
|
||||
|
||||
Once located, the invocation shape is:
|
||||
|
||||
```bash
|
||||
bun <WRAPPER>/main.ts \
|
||||
--image <ABSOLUTE_output> \
|
||||
--prompt-file <ABSOLUTE_prompts/01-cover-[slug].md> \
|
||||
--aspect <ratio> \
|
||||
[--ref <ABSOLUTE_file>]... \
|
||||
[--timeout <ms>] \
|
||||
[--cache-dir ~/.cache/baoyu-codex-imagegen] \
|
||||
[--log-file <ABSOLUTE_jsonl_log_path>]
|
||||
```
|
||||
|
||||
If `bun` is missing, `npx -y bun <WRAPPER>/main.ts ...` works as a fallback.
|
||||
|
||||
## Parameter notes
|
||||
|
||||
- **All filesystem inputs** are auto-resolved against `process.cwd()` when relative, but agents should pass absolute paths to be robust against cwd drift.
|
||||
- **`--timeout`** defaults to `300000` (5 min) per `codex exec` attempt. Raise (e.g. `--timeout 600000` for 10 min) on slow networks or large prompts.
|
||||
- **`--cache-dir`** is off by default. Enable for repeatable runs to skip redundant generations of the same prompt+aspect+refs.
|
||||
- **Authentication**: the wrapper uses the user's Codex subscription — no `OPENAI_API_KEY` is read or sent.
|
||||
|
||||
## Stdout contract
|
||||
|
||||
Single JSON line:
|
||||
|
||||
- Success: `{"status":"ok","path":"...","bytes":N,"elapsed_seconds":N,"thread_id":"...","attempts":N,"cached":bool,...}`
|
||||
- Failure: `{"status":"error","path":"...","bytes":0,"error":"...","error_kind":"..."}`
|
||||
|
||||
`error_kind` values: `codex_not_installed`, `invalid_args`, `prompt_file_missing`, `spawn_failed`, `timeout`, `no_image_gen_tool_use`, `output_missing`, `invalid_png`, `agent_refused`, `lock_busy`.
|
||||
|
||||
On retryable errors (timeout, spawn_failed, no_image_gen_tool_use, output_missing, invalid_png, agent_refused), ask the user whether to retry or fall back to another backend.
|
||||
|
||||
## Batch semantics
|
||||
|
||||
- Codex `image_gen` returns **one image per call** (`n=1` only). Multi-image jobs must dispatch one wrapper call per image.
|
||||
- The wrapper does NOT accept a `--sessionId` flag. Chain/scene consistency must come from `--ref` reference images.
|
||||
- `--size` and `--quality` are silently ignored — Codex picks pixel dimensions from `--aspect`.
|
||||
@@ -0,0 +1,60 @@
|
||||
# Compatibility Matrices
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Palette × Rendering
|
||||
|
||||
| | flat-vector | hand-drawn | painterly | digital | pixel | chalk | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
|
||||
| elegant | ✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✗ | ✓ |
|
||||
| cool | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| dark | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | ✓✓ |
|
||||
| earth | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✗ | ✓ |
|
||||
| vivid | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| pastel | ✓✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✗ | ✗ |
|
||||
| mono | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| duotone | ✓ | ✗ | ✗ | ✓ | ✗ | ✗ | ✓✓ |
|
||||
|
||||
## Type × Rendering
|
||||
|
||||
| | flat-vector | hand-drawn | painterly | digital | pixel | chalk | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| hero | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| conceptual | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| typography | ✓✓ | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| metaphor | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✓ | ✓✓ |
|
||||
| scene | ✗ | ✓ | ✓✓ | ✓ | ✓ | ✗ | ✓ |
|
||||
| minimal | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✗ | ✓✓ |
|
||||
|
||||
## Type × Text
|
||||
|
||||
| | none | title-only | title-subtitle | text-rich |
|
||||
|---|:---:|:---:|:---:|:---:|
|
||||
| hero | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| conceptual | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| typography | ✗ | ✓ | ✓✓ | ✓✓ |
|
||||
| metaphor | ✓✓ | ✓ | ✓ | ✗ |
|
||||
| scene | ✓✓ | ✓ | ✓ | ✗ |
|
||||
| minimal | ✓✓ | ✓✓ | ✓ | ✗ |
|
||||
|
||||
## Type × Mood
|
||||
|
||||
| | subtle | balanced | bold |
|
||||
|---|:---:|:---:|:---:|
|
||||
| hero | ✓ | ✓✓ | ✓✓ |
|
||||
| conceptual | ✓✓ | ✓✓ | ✓ |
|
||||
| typography | ✓ | ✓✓ | ✓✓ |
|
||||
| metaphor | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓✓ | ✓✓ | ✓ |
|
||||
| minimal | ✓✓ | ✓✓ | ✗ |
|
||||
|
||||
## Font × Rendering
|
||||
|
||||
| | flat-vector | hand-drawn | painterly | digital | pixel | chalk | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| clean | ✓✓ | ✗ | ✗ | ✓✓ | ✓ | ✗ | ✓ |
|
||||
| handwritten | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✗ |
|
||||
| serif | ✓ | ✗ | ✓ | ✓✓ | ✗ | ✗ | ✓ |
|
||||
| display | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
|
||||
@@ -0,0 +1,202 @@
|
||||
---
|
||||
name: first-time-setup
|
||||
description: First-time setup flow for baoyu-cover-image preferences
|
||||
---
|
||||
|
||||
# First-Time Setup
|
||||
|
||||
## Overview
|
||||
|
||||
When no EXTEND.md is found, guide user through preference setup.
|
||||
|
||||
**⛔ BLOCKING OPERATION**: This setup MUST complete before ANY other workflow steps. Do NOT:
|
||||
- Ask about reference images
|
||||
- Ask about content/article
|
||||
- Ask about dimensions (type, palette, rendering)
|
||||
- Proceed to content analysis
|
||||
|
||||
ONLY ask the questions in this setup flow, save EXTEND.md, then continue.
|
||||
|
||||
## Setup Flow
|
||||
|
||||
```
|
||||
No EXTEND.md found
|
||||
│
|
||||
▼
|
||||
┌─────────────────────┐
|
||||
│ AskUserQuestion │
|
||||
│ (all questions) │
|
||||
└─────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌─────────────────────┐
|
||||
│ Create EXTEND.md │
|
||||
└─────────────────────┘
|
||||
│
|
||||
▼
|
||||
Continue to Step 1
|
||||
```
|
||||
|
||||
## Questions
|
||||
|
||||
**Language**: Use user's input language or saved language preference.
|
||||
|
||||
Use AskUserQuestion with ALL questions in ONE call:
|
||||
|
||||
### Question 1: Watermark
|
||||
|
||||
```yaml
|
||||
header: "Watermark"
|
||||
question: "Watermark text for generated cover images?"
|
||||
options:
|
||||
- label: "No watermark (Recommended)"
|
||||
description: "Clean covers, can enable later in EXTEND.md"
|
||||
```
|
||||
|
||||
### Question 2: Preferred Type
|
||||
|
||||
```yaml
|
||||
header: "Type"
|
||||
question: "Default cover type preference?"
|
||||
options:
|
||||
- label: "Auto-select (Recommended)"
|
||||
description: "Choose based on content analysis each time"
|
||||
- label: "hero"
|
||||
description: "Large visual impact - product launch, announcements"
|
||||
- label: "conceptual"
|
||||
description: "Concept visualization - technical, architecture"
|
||||
```
|
||||
|
||||
### Question 3: Preferred Palette
|
||||
|
||||
```yaml
|
||||
header: "Palette"
|
||||
question: "Default color palette preference?"
|
||||
options:
|
||||
- label: "Auto-select (Recommended)"
|
||||
description: "Choose based on content analysis each time"
|
||||
- label: "elegant"
|
||||
description: "Sophisticated - soft coral, muted teal, dusty rose"
|
||||
- label: "warm"
|
||||
description: "Friendly - orange, golden yellow, terracotta"
|
||||
- label: "cool"
|
||||
description: "Technical - engineering blue, navy, cyan"
|
||||
```
|
||||
|
||||
### Question 4: Preferred Rendering
|
||||
|
||||
```yaml
|
||||
header: "Rendering"
|
||||
question: "Default rendering style preference?"
|
||||
options:
|
||||
- label: "Auto-select (Recommended)"
|
||||
description: "Choose based on content analysis each time"
|
||||
- label: "hand-drawn"
|
||||
description: "Sketchy organic illustration with personal touch"
|
||||
- label: "flat-vector"
|
||||
description: "Clean modern vector with geometric shapes"
|
||||
- label: "digital"
|
||||
description: "Polished precise digital illustration"
|
||||
```
|
||||
|
||||
### Question 5: Default Aspect Ratio
|
||||
|
||||
```yaml
|
||||
header: "Aspect"
|
||||
question: "Default aspect ratio for cover images?"
|
||||
options:
|
||||
- label: "16:9 (Recommended)"
|
||||
description: "Standard widescreen - YouTube, presentations, versatile"
|
||||
- label: "2.35:1"
|
||||
description: "Cinematic widescreen - article headers, blog posts"
|
||||
- label: "1:1"
|
||||
description: "Square - Instagram, WeChat, social cards"
|
||||
- label: "3:4"
|
||||
description: "Portrait - Xiaohongshu, Pinterest, mobile content"
|
||||
```
|
||||
|
||||
Note: More ratios (4:3, 3:2) available during generation. This sets the default recommendation.
|
||||
|
||||
### Question 6: Default Output Directory
|
||||
|
||||
```yaml
|
||||
header: "Output"
|
||||
question: "Default output directory for cover images?"
|
||||
options:
|
||||
- label: "Independent (Recommended)"
|
||||
description: "cover-image/{topic-slug}/ - separate from article"
|
||||
- label: "Same directory"
|
||||
description: "{article-dir}/ - alongside the article file"
|
||||
- label: "imgs subdirectory"
|
||||
description: "{article-dir}/imgs/ - images folder near article"
|
||||
```
|
||||
|
||||
### Question 7: Quick Mode
|
||||
|
||||
```yaml
|
||||
header: "Quick"
|
||||
question: "Enable quick mode by default?"
|
||||
options:
|
||||
- label: "No (Recommended)"
|
||||
description: "Confirm dimension choices each time"
|
||||
- label: "Yes"
|
||||
description: "Skip confirmation, use auto-selection"
|
||||
```
|
||||
|
||||
### Question 8: Save Location
|
||||
|
||||
```yaml
|
||||
header: "Save"
|
||||
question: "Where to save preferences?"
|
||||
options:
|
||||
- label: "Project (Recommended)"
|
||||
description: ".baoyu-skills/ (this project only)"
|
||||
- label: "User"
|
||||
description: "~/.baoyu-skills/ (all projects)"
|
||||
```
|
||||
|
||||
## Save Locations
|
||||
|
||||
| Choice | Path | Scope |
|
||||
|--------|------|-------|
|
||||
| Project | `.baoyu-skills/baoyu-cover-image/EXTEND.md` | Current project |
|
||||
| User | `~/.baoyu-skills/baoyu-cover-image/EXTEND.md` | All projects |
|
||||
|
||||
## After Setup
|
||||
|
||||
1. Create directory if needed
|
||||
2. Write EXTEND.md with frontmatter
|
||||
3. Confirm: "Preferences saved to [path]"
|
||||
4. Continue to Step 1
|
||||
|
||||
## EXTEND.md Template
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 3
|
||||
watermark:
|
||||
enabled: [true/false]
|
||||
content: "[user input or empty]"
|
||||
position: bottom-right
|
||||
opacity: 0.7
|
||||
preferred_type: [selected type or null]
|
||||
preferred_palette: [selected palette or null]
|
||||
preferred_rendering: [selected rendering or null]
|
||||
preferred_text: title-only
|
||||
preferred_mood: balanced
|
||||
default_aspect: [16:9/2.35:1/1:1/3:4]
|
||||
default_output_dir: [independent/same-dir/imgs-subdir]
|
||||
quick_mode: [true/false]
|
||||
language: null
|
||||
preferred_image_backend: auto
|
||||
custom_palettes: []
|
||||
---
|
||||
```
|
||||
|
||||
`preferred_image_backend: auto` is the baked-in default — first-time setup does not ask about it. The `## Image Generation Tools` rule in SKILL.md then picks the runtime-native tool (Codex `imagegen`, Hermes `image_generate`, etc.) when available, and falls back to installed backends.
|
||||
|
||||
## Modifying Preferences Later
|
||||
|
||||
See the `## Changing Preferences` section in `SKILL.md` for the canonical list of common edits (pin backend, change defaults, retrigger setup). Full schema: `preferences-schema.md`.
|
||||
|
||||
**EXTEND.md Supports**: Watermark | Preferred type | Preferred palette | Preferred rendering | Preferred text | Preferred mood | Default aspect ratio | Default output directory | Quick mode | Image backend preference | Custom palette definitions | Language preference
|
||||
@@ -0,0 +1,266 @@
|
||||
---
|
||||
name: preferences-schema
|
||||
description: EXTEND.md YAML schema for baoyu-cover-image user preferences
|
||||
---
|
||||
|
||||
# Preferences Schema
|
||||
|
||||
## Full Schema
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 3
|
||||
|
||||
watermark:
|
||||
enabled: false
|
||||
content: ""
|
||||
position: bottom-right # bottom-right|bottom-left|bottom-center|top-right
|
||||
|
||||
preferred_type: null # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select
|
||||
|
||||
preferred_palette: null # warm|elegant|cool|dark|earth|vivid|pastel|mono|retro|duotone|macaron or null for auto-select
|
||||
|
||||
preferred_rendering: null # flat-vector|hand-drawn|painterly|digital|pixel|chalk or null for auto-select
|
||||
|
||||
preferred_text: title-only # none|title-only|title-subtitle|text-rich
|
||||
|
||||
preferred_mood: balanced # subtle|balanced|bold
|
||||
|
||||
default_aspect: "2.35:1" # 2.35:1|16:9|1:1
|
||||
|
||||
quick_mode: false # Skip confirmation when true
|
||||
|
||||
language: null # zh|en|ja|ko|auto (null = auto-detect)
|
||||
|
||||
preferred_image_backend: auto # auto|ask|<backend-id>
|
||||
|
||||
custom_palettes:
|
||||
- name: my-palette
|
||||
description: "Palette description"
|
||||
colors:
|
||||
primary: ["#1E3A5F", "#4A90D9"]
|
||||
background: "#F5F7FA"
|
||||
accents: ["#00B4D8"]
|
||||
decorative_hints: "Clean lines, geometric shapes"
|
||||
best_for: "Business, tech content"
|
||||
---
|
||||
```
|
||||
|
||||
## Field Reference
|
||||
|
||||
| Field | Type | Default | Description |
|
||||
|-------|------|---------|-------------|
|
||||
| `version` | int | 3 | Schema version |
|
||||
| `watermark.enabled` | bool | false | Enable watermark |
|
||||
| `watermark.content` | string | "" | Watermark text (@username or custom) |
|
||||
| `watermark.position` | enum | bottom-right | Position on image |
|
||||
| `preferred_type` | string | null | Type name or null for auto |
|
||||
| `preferred_palette` | string | null | Palette name or null for auto |
|
||||
| `preferred_rendering` | string | null | Rendering name or null for auto |
|
||||
| `preferred_text` | string | title-only | Text density level |
|
||||
| `preferred_mood` | string | balanced | Mood intensity level |
|
||||
| `default_aspect` | string | "2.35:1" | Default aspect ratio |
|
||||
| `quick_mode` | bool | false | Skip confirmation step |
|
||||
| `language` | string | null | Output language (null = auto-detect) |
|
||||
| `preferred_image_backend` | string | `auto` | Image backend selection. `auto` = prefer runtime-native tool, fall back to the only installed backend, ask if multiple non-native are present. `ask` = always confirm on every run. `<backend-id>` (e.g., `codex-imagegen`, `baoyu-image-gen`, `image_generate`) = pin this backend when available; fall back to `auto` when it isn't. Absent = `auto`. Resolution logic is documented in `SKILL.md`'s `## Image Generation Tools` section. |
|
||||
| `custom_palettes` | array | [] | User-defined palettes |
|
||||
|
||||
## Type Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `hero` | Large visual impact, title overlay |
|
||||
| `conceptual` | Concept visualization, abstract core ideas |
|
||||
| `typography` | Text-focused layout, prominent title |
|
||||
| `metaphor` | Visual metaphor, concrete expressing abstract |
|
||||
| `scene` | Atmospheric scene, narrative feel |
|
||||
| `minimal` | Minimalist composition, generous whitespace |
|
||||
|
||||
## Palette Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `warm` | Friendly, approachable — orange, golden yellow, terracotta |
|
||||
| `elegant` | Sophisticated, refined — soft coral, muted teal, dusty rose |
|
||||
| `cool` | Technical, professional — engineering blue, navy, cyan |
|
||||
| `dark` | Cinematic, premium — electric purple, cyan, magenta |
|
||||
| `earth` | Natural, organic — forest green, sage, earth brown |
|
||||
| `vivid` | Energetic, bold — bright red, neon green, electric blue |
|
||||
| `pastel` | Gentle, whimsical — soft pink, mint, lavender |
|
||||
| `mono` | Clean, focused — black, near-black, white |
|
||||
| `retro` | Nostalgic, vintage — muted orange, dusty pink, maroon |
|
||||
|
||||
## Rendering Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `flat-vector` | Clean outlines, uniform fills, geometric icons |
|
||||
| `hand-drawn` | Sketchy, organic, imperfect strokes, paper texture |
|
||||
| `painterly` | Soft brush strokes, color bleeds, watercolor feel |
|
||||
| `digital` | Polished, precise edges, subtle gradients, UI components |
|
||||
| `pixel` | Pixel grid, dithering, chunky 8-bit shapes |
|
||||
| `chalk` | Chalk strokes, dust effects, blackboard texture |
|
||||
|
||||
## Text Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `none` | Pure visual, no text elements |
|
||||
| `title-only` | Single headline |
|
||||
| `title-subtitle` | Title + subtitle |
|
||||
| `text-rich` | Title + subtitle + keyword tags (2-4) |
|
||||
|
||||
## Mood Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `subtle` | Low contrast, muted colors, calm aesthetic |
|
||||
| `balanced` | Medium contrast, normal saturation, versatile |
|
||||
| `bold` | High contrast, vivid colors, dynamic energy |
|
||||
|
||||
## Position Options
|
||||
|
||||
| Value | Description |
|
||||
|-------|-------------|
|
||||
| `bottom-right` | Lower right corner (default, most common) |
|
||||
| `bottom-left` | Lower left corner |
|
||||
| `bottom-center` | Bottom center |
|
||||
| `top-right` | Upper right corner |
|
||||
|
||||
## Aspect Ratio Options
|
||||
|
||||
| Value | Description | Best For |
|
||||
|-------|-------------|----------|
|
||||
| `2.35:1` | Cinematic widescreen | Article headers, blog covers |
|
||||
| `16:9` | Standard widescreen | Presentations, video thumbnails |
|
||||
| `1:1` | Square | Social media, profile images |
|
||||
|
||||
## Custom Palette Fields
|
||||
|
||||
| Field | Required | Description |
|
||||
|-------|----------|-------------|
|
||||
| `name` | Yes | Unique palette identifier (kebab-case) |
|
||||
| `description` | Yes | What the palette conveys |
|
||||
| `colors.primary` | No | Main colors (array of hex) |
|
||||
| `colors.background` | No | Background color (hex) |
|
||||
| `colors.accents` | No | Accent colors (array of hex) |
|
||||
| `decorative_hints` | No | Decorative elements and patterns |
|
||||
| `best_for` | No | Recommended content types |
|
||||
|
||||
## Example: Minimal Preferences
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 3
|
||||
watermark:
|
||||
enabled: true
|
||||
content: "@myhandle"
|
||||
preferred_type: null
|
||||
preferred_palette: elegant
|
||||
preferred_rendering: hand-drawn
|
||||
preferred_text: title-only
|
||||
preferred_mood: balanced
|
||||
quick_mode: false
|
||||
---
|
||||
```
|
||||
|
||||
## Example: Full Preferences
|
||||
|
||||
```yaml
|
||||
---
|
||||
version: 3
|
||||
watermark:
|
||||
enabled: true
|
||||
content: "myblog.com"
|
||||
position: bottom-right
|
||||
|
||||
preferred_type: conceptual
|
||||
|
||||
preferred_palette: cool
|
||||
|
||||
preferred_rendering: digital
|
||||
|
||||
preferred_text: title-subtitle
|
||||
|
||||
preferred_mood: subtle
|
||||
|
||||
default_aspect: "16:9"
|
||||
|
||||
quick_mode: true
|
||||
|
||||
language: en
|
||||
|
||||
preferred_image_backend: codex-imagegen
|
||||
|
||||
custom_palettes:
|
||||
- name: corporate-tech
|
||||
description: "Professional B2B tech palette"
|
||||
colors:
|
||||
primary: ["#1E3A5F", "#4A90D9"]
|
||||
background: "#F5F7FA"
|
||||
accents: ["#00B4D8", "#48CAE4"]
|
||||
decorative_hints: "Clean lines, subtle gradients, circuit patterns"
|
||||
best_for: "SaaS, enterprise, technical"
|
||||
---
|
||||
```
|
||||
|
||||
## Migration from v2
|
||||
|
||||
When loading v2 schema, auto-upgrade:
|
||||
|
||||
| v2 Field | v3 Field | Migration |
|
||||
|----------|----------|-----------|
|
||||
| `version: 2` | `version: 3` | Update |
|
||||
| `preferred_style` | `preferred_palette` + `preferred_rendering` | Use preset mapping table |
|
||||
| `custom_styles` | `custom_palettes` | Rename, restructure fields |
|
||||
|
||||
**Style → Palette + Rendering mapping**:
|
||||
|
||||
| v2 `preferred_style` | v3 `preferred_palette` | v3 `preferred_rendering` |
|
||||
|----------------------|----------------------|-------------------------|
|
||||
| `elegant` | `elegant` | `hand-drawn` |
|
||||
| `blueprint` | `cool` | `digital` |
|
||||
| `chalkboard` | `dark` | `chalk` |
|
||||
| `dark-atmospheric` | `dark` | `digital` |
|
||||
| `editorial-infographic` | `cool` | `digital` |
|
||||
| `fantasy-animation` | `pastel` | `painterly` |
|
||||
| `flat-doodle` | `pastel` | `flat-vector` |
|
||||
| `intuition-machine` | `retro` | `digital` |
|
||||
| `minimal` | `mono` | `flat-vector` |
|
||||
| `nature` | `earth` | `hand-drawn` |
|
||||
| `notion` | `mono` | `digital` |
|
||||
| `pixel-art` | `vivid` | `pixel` |
|
||||
| `playful` | `pastel` | `hand-drawn` |
|
||||
| `retro` | `retro` | `digital` |
|
||||
| `sketch-notes` | `warm` | `hand-drawn` |
|
||||
| `vector-illustration` | `retro` | `flat-vector` |
|
||||
| `vintage` | `retro` | `hand-drawn` |
|
||||
| `warm` | `warm` | `hand-drawn` |
|
||||
| `watercolor` | `earth` | `painterly` |
|
||||
| null (auto) | null | null |
|
||||
|
||||
**Custom style migration**:
|
||||
|
||||
| v2 Field | v3 Field |
|
||||
|----------|----------|
|
||||
| `custom_styles[].name` | `custom_palettes[].name` |
|
||||
| `custom_styles[].description` | `custom_palettes[].description` |
|
||||
| `custom_styles[].color_palette` | `custom_palettes[].colors` |
|
||||
| `custom_styles[].visual_elements` | `custom_palettes[].decorative_hints` |
|
||||
| `custom_styles[].typography` | (removed — determined by rendering) |
|
||||
| `custom_styles[].best_for` | `custom_palettes[].best_for` |
|
||||
|
||||
## Migration from v1
|
||||
|
||||
When loading v1 schema, auto-upgrade to v3:
|
||||
|
||||
| v1 Field | v3 Field | Default Value |
|
||||
|----------|----------|---------------|
|
||||
| (missing) | `version` | 3 |
|
||||
| (missing) | `preferred_palette` | null |
|
||||
| (missing) | `preferred_rendering` | null |
|
||||
| (missing) | `preferred_text` | title-only |
|
||||
| (missing) | `preferred_mood` | balanced |
|
||||
| (missing) | `quick_mode` | false |
|
||||
|
||||
v1 `--no-title` flag maps to `preferred_text: none`.
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
name: watermark-guide
|
||||
description: Watermark configuration guide for baoyu-cover-image
|
||||
---
|
||||
|
||||
# Watermark Guide
|
||||
|
||||
## Position Diagram
|
||||
|
||||
```
|
||||
┌─────────────────────────────┐
|
||||
│ [top-right]│
|
||||
│ │
|
||||
│ │
|
||||
│ COVER IMAGE │
|
||||
│ │
|
||||
│ │
|
||||
│[bottom-left][bottom-center][bottom-right]│
|
||||
└─────────────────────────────┘
|
||||
```
|
||||
|
||||
## Position Recommendations
|
||||
|
||||
| Position | Best For | Avoid When |
|
||||
|----------|----------|------------|
|
||||
| `bottom-right` | Default choice, most common | Title in bottom-right |
|
||||
| `bottom-left` | Right-heavy layouts | Key visual in bottom-left |
|
||||
| `bottom-center` | Centered designs | Text-heavy bottom area |
|
||||
| `top-right` | Bottom-heavy content | Title/header in top-right |
|
||||
|
||||
## Content Format
|
||||
|
||||
| Format | Example | Style |
|
||||
|--------|---------|-------|
|
||||
| Handle | `@username` | Social media |
|
||||
| Domain | `myblog.com` | Cross-platform |
|
||||
| Brand | `MyBrand` | Simple branding |
|
||||
| Chinese | `博客名` | Chinese platforms |
|
||||
|
||||
## Best Practices
|
||||
|
||||
1. **Consistency**: Use same watermark across all covers
|
||||
2. **Legibility**: Ensure watermark readable on both light/dark areas
|
||||
3. **Size**: Keep subtle - should not distract from content
|
||||
|
||||
## Prompt Integration
|
||||
|
||||
When watermark is enabled, add to image generation prompt:
|
||||
|
||||
```
|
||||
Include a subtle watermark "[content]" positioned at [position].
|
||||
The watermark should be legible but not distracting from the main content.
|
||||
```
|
||||
|
||||
## Cover-Specific Considerations
|
||||
|
||||
| Aspect Ratio | Recommended Position | Notes |
|
||||
|--------------|---------------------|-------|
|
||||
| 2.35:1 | bottom-right | Cinematic - keep corners clean |
|
||||
| 16:9 | bottom-right | Standard - flexible placement |
|
||||
| 1:1 | bottom-center | Square - centered often works better |
|
||||
|
||||
## Common Issues
|
||||
|
||||
| Issue | Solution |
|
||||
|-------|----------|
|
||||
| Watermark invisible | Adjust position or check contrast |
|
||||
| Watermark too prominent | Change position or reduce size |
|
||||
| Watermark overlaps title | Change position or reduce title area |
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
name: font-dimension
|
||||
description: Typography style dimension for cover images
|
||||
---
|
||||
|
||||
# Font Dimension
|
||||
|
||||
Controls typography style and character feel.
|
||||
|
||||
## Values
|
||||
|
||||
| Font | Visual Style | Line Quality | Character |
|
||||
|------|--------------|--------------|-----------|
|
||||
| `clean` | Geometric sans-serif | Sharp, uniform | Modern, precise, neutral |
|
||||
| `handwritten` | Hand-lettered, brush | Organic, varied | Warm, personal, friendly |
|
||||
| `serif` | Classic serifs, elegant | Refined, structured | Editorial, authoritative |
|
||||
| `display` | Bold, decorative | Heavy, expressive | Attention-grabbing, playful |
|
||||
|
||||
## Detail
|
||||
|
||||
### clean
|
||||
|
||||
Modern, universal typography with neutral character.
|
||||
|
||||
**Characteristics**:
|
||||
- Geometric sans-serif letterforms
|
||||
- Sharp, uniform line weight
|
||||
- Clean edges, no flourishes
|
||||
- High readability at all sizes
|
||||
- Minimal personality, maximum clarity
|
||||
|
||||
**Use Cases**:
|
||||
- Technical documentation
|
||||
- Professional/corporate content
|
||||
- Minimal design approaches
|
||||
- Data-driven articles
|
||||
- Modern brand aesthetics
|
||||
|
||||
**Prompt Hints**:
|
||||
- Use clean geometric sans-serif typography
|
||||
- Modern, minimal letterforms
|
||||
- Sharp edges, uniform stroke weight
|
||||
- High contrast against background
|
||||
|
||||
### handwritten
|
||||
|
||||
Warm, organic typography with personal character.
|
||||
|
||||
**Characteristics**:
|
||||
- Hand-lettered or brush style
|
||||
- Organic, varied line weight
|
||||
- Natural imperfections
|
||||
- Approachable, human feel
|
||||
- Casual yet intentional
|
||||
|
||||
**Use Cases**:
|
||||
- Personal stories
|
||||
- Lifestyle content
|
||||
- Wellness and self-improvement
|
||||
- Creative tutorials
|
||||
- Friendly brand voices
|
||||
|
||||
**Prompt Hints**:
|
||||
- Use warm hand-lettered typography with organic brush strokes
|
||||
- Friendly, personal feel
|
||||
- Natural variation in stroke weight
|
||||
- Approachable, human character
|
||||
|
||||
### serif
|
||||
|
||||
Classic, elegant typography with editorial authority.
|
||||
|
||||
**Characteristics**:
|
||||
- Traditional serif letterforms
|
||||
- Refined, structured strokes
|
||||
- Elegant proportions
|
||||
- Timeless sophistication
|
||||
- Formal, trustworthy feel
|
||||
|
||||
**Use Cases**:
|
||||
- Editorial content
|
||||
- Academic articles
|
||||
- Luxury brand content
|
||||
- Historical topics
|
||||
- Literary pieces
|
||||
|
||||
**Prompt Hints**:
|
||||
- Use elegant serif typography with refined letterforms
|
||||
- Classic, editorial character
|
||||
- Structured, proportional spacing
|
||||
- Authoritative, sophisticated feel
|
||||
|
||||
### display
|
||||
|
||||
Bold, decorative typography for maximum impact.
|
||||
|
||||
**Characteristics**:
|
||||
- Heavy, expressive letterforms
|
||||
- Decorative elements
|
||||
- Strong visual presence
|
||||
- Playful or dramatic character
|
||||
- Designed for headlines
|
||||
|
||||
**Use Cases**:
|
||||
- Announcements
|
||||
- Entertainment content
|
||||
- Promotional materials
|
||||
- Event marketing
|
||||
- Gaming topics
|
||||
|
||||
**Prompt Hints**:
|
||||
- Use bold decorative display typography
|
||||
- Heavy, expressive headlines
|
||||
- Strong visual impact
|
||||
- Attention-grabbing character
|
||||
|
||||
## Default
|
||||
|
||||
`clean` — Universal, pairs well with most rendering styles.
|
||||
|
||||
## Rendering Compatibility
|
||||
|
||||
| Font × Rendering | flat-vector | hand-drawn | painterly | digital | pixel | chalk | screen-print |
|
||||
|------------------|:-----------:|:----------:|:---------:|:-------:|:-----:|:-----:|:------------:|
|
||||
| clean | ✓✓ | ✗ | ✗ | ✓✓ | ✓ | ✗ | ✓ |
|
||||
| handwritten | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✗ |
|
||||
| serif | ✓ | ✗ | ✓ | ✓✓ | ✗ | ✗ | ✓ |
|
||||
| display | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Type Compatibility
|
||||
|
||||
| Font × Type | hero | conceptual | typography | metaphor | scene | minimal |
|
||||
|-------------|:----:|:----------:|:----------:|:--------:|:-----:|:-------:|
|
||||
| clean | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| handwritten | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| serif | ✓ | ✓ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
| display | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✗ |
|
||||
|
||||
## Palette Interaction
|
||||
|
||||
Font style adapts to palette characteristics:
|
||||
|
||||
| Palette Category | clean | handwritten | serif | display |
|
||||
|------------------|-------|-------------|-------|---------|
|
||||
| Warm (warm, earth, pastel) | Softer weight | Natural fit | Warm tones | Playful energy |
|
||||
| Cool (cool, mono, elegant) | Perfect match | Contrast | Classic pairing | Bold statement |
|
||||
| Dark (dark, vivid) | High contrast | Glow effects | Dramatic | Maximum impact |
|
||||
| Vintage (retro) | Modern contrast | Nostalgic fit | Period-appropriate | Retro headlines |
|
||||
| Duotone (duotone) | Sharp contrast | Not recommended | Dramatic pairing | Cinematic impact |
|
||||
|
||||
## Auto Selection
|
||||
|
||||
When `--font` is omitted, select based on signals:
|
||||
|
||||
| Signals | Font |
|
||||
|---------|------|
|
||||
| Personal, lifestyle, human, warm, friendly, story | `handwritten` |
|
||||
| Technical, professional, clean, modern, minimal, data | `clean` |
|
||||
| Editorial, academic, luxury, classic, literary | `serif` |
|
||||
| Announcement, entertainment, promotion, bold, event, gaming | `display` |
|
||||
|
||||
Default: `clean`
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
name: mood-dimension
|
||||
description: Emotional intensity dimension for cover images
|
||||
---
|
||||
|
||||
# Mood Dimension
|
||||
|
||||
Controls emotional intensity and visual weight of cover images.
|
||||
|
||||
## Values
|
||||
|
||||
| Value | Contrast | Saturation | Weight | Energy |
|
||||
|-------|:--------:|:----------:|:------:|:------:|
|
||||
| `subtle` | Low | Muted | Light | Calm |
|
||||
| `balanced` | Medium | Normal | Medium | Moderate |
|
||||
| `bold` | High | Vivid | Heavy | Dynamic |
|
||||
|
||||
## Detail
|
||||
|
||||
### subtle
|
||||
|
||||
Calm, understated visual presence.
|
||||
|
||||
**Characteristics**:
|
||||
- Low contrast between elements
|
||||
- Muted, desaturated colors
|
||||
- Light visual weight
|
||||
- Gentle, refined aesthetic
|
||||
- Soft edges and transitions
|
||||
|
||||
**Use Cases**:
|
||||
- Thought leadership content
|
||||
- Professional/corporate communications
|
||||
- Meditation, wellness topics
|
||||
- Academic or scholarly articles
|
||||
- Luxury brand aesthetics
|
||||
|
||||
**Color Guidance**:
|
||||
- Pastels, earth tones, neutrals
|
||||
- Low saturation (30-50%)
|
||||
- Soft gradients
|
||||
- Minimal color variety (2-3 colors)
|
||||
|
||||
### balanced
|
||||
|
||||
Versatile, harmonious visual presence.
|
||||
|
||||
**Characteristics**:
|
||||
- Medium contrast
|
||||
- Natural saturation levels
|
||||
- Balanced visual weight
|
||||
- Clear but not aggressive
|
||||
- Standard aesthetic approach
|
||||
|
||||
**Use Cases**:
|
||||
- General articles (default)
|
||||
- Most blog content
|
||||
- Educational material
|
||||
- Product documentation
|
||||
- News and updates
|
||||
|
||||
**Color Guidance**:
|
||||
- Standard saturation (50-70%)
|
||||
- Complementary color schemes
|
||||
- Clear foreground/background separation
|
||||
- Moderate color variety (3-4 colors)
|
||||
|
||||
### bold
|
||||
|
||||
Dynamic, high-impact visual presence.
|
||||
|
||||
**Characteristics**:
|
||||
- High contrast between elements
|
||||
- Vivid, saturated colors
|
||||
- Heavy visual weight
|
||||
- Energetic, attention-grabbing
|
||||
- Sharp edges and strong shapes
|
||||
|
||||
**Use Cases**:
|
||||
- Product launches
|
||||
- Promotional announcements
|
||||
- Event marketing
|
||||
- Call-to-action content
|
||||
- Entertainment/gaming topics
|
||||
|
||||
**Color Guidance**:
|
||||
- High saturation (70-100%)
|
||||
- Vibrant, primary colors
|
||||
- Strong contrast ratios
|
||||
- Dynamic color combinations (4+ colors)
|
||||
|
||||
## Type Compatibility
|
||||
|
||||
| Type | subtle | balanced | bold |
|
||||
|------|:------:|:--------:|:----:|
|
||||
| hero | ✓ | ✓✓ | ✓✓ |
|
||||
| conceptual | ✓✓ | ✓✓ | ✓ |
|
||||
| typography | ✓ | ✓✓ | ✓✓ |
|
||||
| metaphor | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓✓ | ✓✓ | ✓ |
|
||||
| minimal | ✓✓ | ✓✓ | ✗ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Palette Interaction
|
||||
|
||||
Mood modifies the base palette characteristics:
|
||||
|
||||
| Palette Category | subtle | balanced | bold |
|
||||
|------------------|--------|----------|------|
|
||||
| Warm palettes (warm, earth, pastel) | More whitespace, softer tones | Standard colors | Deeper, richer warm tones |
|
||||
| Cool palettes (cool, mono, elegant) | Lighter lines, muted colors | Standard colors | Stronger contrast, sharper definition |
|
||||
| Dark palettes (dark, vivid) | Reduced contrast, softer glow | Standard colors | Maximum impact, vivid saturation |
|
||||
| Vintage palettes (retro) | More faded, sepia-heavy | Standard colors | Bolder retro contrasts |
|
||||
| Duotone palettes (duotone) | Softer contrast between pair | Standard two-color split | Maximum contrast, stark separation |
|
||||
|
||||
## Rendering Interaction
|
||||
|
||||
Mood adjusts rendering characteristics:
|
||||
|
||||
| Rendering | subtle | balanced | bold |
|
||||
|-----------|--------|----------|------|
|
||||
| flat-vector | Thinner strokes, lighter fills | Standard weight | Thicker strokes, stronger fills |
|
||||
| hand-drawn | Lighter pencil pressure, more space | Standard strokes | Heavier marker strokes, denser elements |
|
||||
| painterly | Diluted washes, more white | Standard brush | Thicker paint, saturated strokes |
|
||||
| digital | Reduced shadows, lower contrast | Standard rendering | Stronger shadows, sharper edges |
|
||||
| pixel | Fewer colors, simpler shapes | Standard palette | More colors, denser pixel detail |
|
||||
| chalk | Lighter chalk, more board showing | Standard chalk | Heavy chalk, vivid colors, dense marks |
|
||||
| screen-print | Fewer colors (2), lighter halftone | Standard 3-4 colors, medium halftone | More colors (4-5), dense halftone, stronger misregistration |
|
||||
|
||||
## Auto Selection
|
||||
|
||||
When `--mood` is omitted, select based on signals:
|
||||
|
||||
| Signals | Mood Level |
|
||||
|---------|------------|
|
||||
| Professional, corporate, thought leadership, academic, luxury | `subtle` |
|
||||
| General, educational, standard, blog, documentation | `balanced` |
|
||||
| Launch, announcement, promotion, event, gaming, entertainment | `bold` |
|
||||
|
||||
Default: `balanced`
|
||||
@@ -0,0 +1,130 @@
|
||||
---
|
||||
name: text-dimension
|
||||
description: Text density dimension for cover images
|
||||
---
|
||||
|
||||
# Text Dimension
|
||||
|
||||
Controls text density and information hierarchy on cover images.
|
||||
|
||||
## Values
|
||||
|
||||
| Value | Title | Subtitle | Tags | Visual Area |
|
||||
|-------|:-----:|:--------:|:----:|:-----------:|
|
||||
| `none` | - | - | - | 100% |
|
||||
| `title-only` | ✓ | - | - | 85% |
|
||||
| `title-subtitle` | ✓ | ✓ | - | 75% |
|
||||
| `text-rich` | ✓ | ✓ | ✓ (2-4) | 60% |
|
||||
|
||||
## Detail
|
||||
|
||||
### none
|
||||
|
||||
Pure visual cover with no text elements.
|
||||
|
||||
**Use Cases**:
|
||||
- Photography-focused covers
|
||||
- Abstract art pieces
|
||||
- Visual-only social sharing
|
||||
- When title added externally
|
||||
|
||||
**Composition**:
|
||||
- Full visual area available
|
||||
- No reserved text zones
|
||||
- Emphasis on visual metaphor
|
||||
|
||||
### title-only
|
||||
|
||||
Single headline, maximum impact.
|
||||
|
||||
**Use Cases**:
|
||||
- Most article covers (default)
|
||||
- Clear single message
|
||||
- Strong brand recognition
|
||||
|
||||
**Composition**:
|
||||
- Title: prominent placement
|
||||
- Reserved zone: top or bottom 15%
|
||||
- Visual supports title message
|
||||
|
||||
**Title Guidelines**:
|
||||
- Use exact title from source content or user-provided title
|
||||
- Do NOT invent or modify titles
|
||||
- Match content language
|
||||
|
||||
### title-subtitle
|
||||
|
||||
Title with supporting context.
|
||||
|
||||
**Use Cases**:
|
||||
- Technical articles needing clarification
|
||||
- Series with episode/part info
|
||||
- Content with dual messages
|
||||
|
||||
**Composition**:
|
||||
- Title: primary element
|
||||
- Subtitle: secondary element
|
||||
- Reserved zone: 25%
|
||||
- Clear hierarchy between title/subtitle
|
||||
|
||||
**Title Guidelines**:
|
||||
- Use exact title from source content or user-provided title
|
||||
- Do NOT invent or modify titles
|
||||
|
||||
**Subtitle Guidelines**:
|
||||
- Clarify or contextualize title
|
||||
- Can include series name, author, date
|
||||
- Smaller, less prominent than title
|
||||
|
||||
### text-rich
|
||||
|
||||
Information-dense cover with multiple text elements.
|
||||
|
||||
**Use Cases**:
|
||||
- Infographic-style covers
|
||||
- Event announcements with details
|
||||
- Promotional material with features
|
||||
- Content with multiple key points
|
||||
|
||||
**Composition**:
|
||||
- Title: primary focus
|
||||
- Subtitle: supporting info
|
||||
- Tags: 2-4 keyword labels
|
||||
- Reserved zone: 40%
|
||||
- Clear visual hierarchy
|
||||
|
||||
**Title Guidelines**:
|
||||
- Use exact title from source content or user-provided title
|
||||
- Do NOT invent or modify titles
|
||||
|
||||
**Tag Guidelines**:
|
||||
- 2-4 tags maximum
|
||||
- Short keywords (1-2 words each)
|
||||
- Positioned as badges/labels
|
||||
- Can highlight: category, date, author, key features
|
||||
|
||||
## Type Compatibility
|
||||
|
||||
| Type | none | title-only | title-subtitle | text-rich |
|
||||
|------|:----:|:----------:|:--------------:|:---------:|
|
||||
| hero | ✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| conceptual | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| typography | ✗ | ✓ | ✓✓ | ✓✓ |
|
||||
| metaphor | ✓✓ | ✓ | ✓ | ✗ |
|
||||
| scene | ✓✓ | ✓ | ✓ | ✗ |
|
||||
| minimal | ✓✓ | ✓✓ | ✓ | ✗ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
## Auto Selection
|
||||
|
||||
When `--text` is omitted, select based on signals:
|
||||
|
||||
| Signals | Text Level |
|
||||
|---------|------------|
|
||||
| Visual-only, photography, abstract, art | `none` |
|
||||
| Article, blog, standard cover | `title-only` |
|
||||
| Series, tutorial, technical with context | `title-subtitle` |
|
||||
| Announcement, features, multiple points, infographic | `text-rich` |
|
||||
|
||||
Default: `title-only`
|
||||
@@ -0,0 +1,30 @@
|
||||
# cool
|
||||
|
||||
Technical, professional, precise
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Engineering Blue | #2563EB |
|
||||
| Primary 2 | Navy Blue | #1E3A5F |
|
||||
| Primary 3 | Cyan | #06B6D4 |
|
||||
| Background | Light Gray | #F8F9FA |
|
||||
| Background Alt | Blueprint Off-White | #FAF8F5 |
|
||||
| Accent 1 | Amber | #F59E0B |
|
||||
| Accent 2 | Light Blue | #BFDBFE |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Grid lines and alignment guides
|
||||
- Dimension indicators and measurements
|
||||
- Technical schematics and diagrams
|
||||
- Geometric precision elements
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Architecture, system design, API, technical documentation, engineering, data analysis
|
||||
@@ -0,0 +1,30 @@
|
||||
# dark
|
||||
|
||||
Cinematic, premium, atmospheric
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Electric Purple | #8B5CF6 |
|
||||
| Primary 2 | Cyan Blue | #06B6D4 |
|
||||
| Primary 3 | Magenta Pink | #EC4899 |
|
||||
| Background | Deep Purple-Black | #0A0A0A |
|
||||
| Background Alt | Rich Navy | #1A1A2E |
|
||||
| Accent 1 | Amber | #F59E0B |
|
||||
| Accent 2 | Pure White | #FFFFFF |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Glowing accent elements and neon highlights
|
||||
- Atmospheric fog or particle effects
|
||||
- Silhouettes with backlit edges
|
||||
- Subtle gradient backgrounds
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Entertainment, premium brands, cinematic storytelling, dark mode, gaming, night themes
|
||||
@@ -0,0 +1,43 @@
|
||||
# duotone
|
||||
|
||||
Dramatic, cinematic, two-color high contrast
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Burnt Orange | #E8751A |
|
||||
| Primary 2 | Deep Teal | #0A6E6E |
|
||||
| Background | Off-Black | #121212 |
|
||||
| Background Alt | Dark Charcoal | #1E1E1E |
|
||||
| Accent 1 | Warm Cream | #F5E6D0 |
|
||||
| Accent 2 | Amber Highlight | #F4A623 |
|
||||
|
||||
## Duotone Pair Options
|
||||
|
||||
Choose ONE pair based on content mood. The two colors dominate the entire image:
|
||||
|
||||
| Pair | Color A | Color B | Feel |
|
||||
|------|---------|---------|------|
|
||||
| Orange + Teal | #E8751A | #0A6E6E | Cinematic, action |
|
||||
| Red + Cream | #C0392B | #F5E6D0 | Bold, classic |
|
||||
| Blue + Gold | #1A3A5C | #D4A843 | Prestigious, premium |
|
||||
| Purple + Green | #6B3FA0 | #2ECC71 | Futuristic, contrast |
|
||||
| Magenta + Cyan | #C2185B | #00BCD4 | Vibrant, pop |
|
||||
| Crimson + Navy | #DC143C | #0D1B2A | Dramatic, noir |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Stark two-color separation across entire composition
|
||||
- Halftone transitions between the two colors
|
||||
- Silhouettes in one color against the other
|
||||
- Minimal use of third color (only for small highlights)
|
||||
- High contrast figure-ground relationships
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Movie posters, album covers, concert prints, dramatic announcements, cinematic content, bold branding, editorial covers, artistic campaigns
|
||||
@@ -0,0 +1,30 @@
|
||||
# earth
|
||||
|
||||
Natural, organic, grounded
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Forest Green | #276749 |
|
||||
| Primary 2 | Sage | #9AE6B4 |
|
||||
| Primary 3 | Earth Brown | #744210 |
|
||||
| Background | Sand Beige | #F5E6D3 |
|
||||
| Background Alt | Sky Blue | #E0F2FE |
|
||||
| Accent 1 | Sunset Orange | #ED8936 |
|
||||
| Accent 2 | Water Blue | #63B3ED |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Leaves, trees, mountains, natural forms
|
||||
- Sun, clouds, organic flowing lines
|
||||
- Botanical illustrations
|
||||
- Earthy textures and natural patterns
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Nature, wellness, eco, organic, travel, sustainability, outdoor topics, slow living
|
||||
@@ -0,0 +1,30 @@
|
||||
# elegant
|
||||
|
||||
Sophisticated, refined, understated luxury
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Soft Coral | #E8A598 |
|
||||
| Primary 2 | Muted Teal | #5B8A8A |
|
||||
| Primary 3 | Dusty Rose | #D4A5A5 |
|
||||
| Background | Warm Cream | #F5F0E6 |
|
||||
| Background Alt | Soft Beige | #F0EBE0 |
|
||||
| Accent 1 | Gold | #C9A962 |
|
||||
| Accent 2 | Copper | #B87333 |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Delicate ornamental details
|
||||
- Subtle gradients and soft transitions
|
||||
- Refined geometric patterns
|
||||
- Balanced, symmetrical compositions
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Business, professional, thought leadership, luxury, corporate communications
|
||||
@@ -0,0 +1,30 @@
|
||||
# macaron
|
||||
|
||||
Soft macaron pastel color blocks on warm cream
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Sky Blue | #A8D8EA |
|
||||
| Primary 2 | Mint Green | #B5E5CF |
|
||||
| Primary 3 | Lavender | #D5C6E0 |
|
||||
| Background | Warm Cream | #F5F0E8 |
|
||||
| Background Alt | Peach | #FFD5C2 |
|
||||
| Accent 1 | Coral Red | #E8655A |
|
||||
| Accent 2 | Deep Charcoal | #2D2D2D |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Rounded pastel color blocks
|
||||
- Subtle warm paper grain texture
|
||||
- Soft shadows, no hard edges
|
||||
- Gentle gradient transitions between zones
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials
|
||||
@@ -0,0 +1,30 @@
|
||||
# mono
|
||||
|
||||
Clean, focused, essential
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Pure Black | #000000 |
|
||||
| Primary 2 | Near Black | #1F1F1F |
|
||||
| Primary 3 | Dark Gray | #374151 |
|
||||
| Background | White | #FFFFFF |
|
||||
| Background Alt | Off-White | #FAFAFA |
|
||||
| Accent 1 | Content-derived single color | - |
|
||||
| Accent 2 | Medium Gray | #9CA3AF |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Maximum negative space
|
||||
- Thin lines and minimal strokes
|
||||
- Single focal point emphasis
|
||||
- Stark contrast between elements
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Zen, focus, essential concepts, pure, simple, minimalist philosophy, clean design
|
||||
@@ -0,0 +1,30 @@
|
||||
# pastel
|
||||
|
||||
Gentle, whimsical, soft
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Soft Pink | #FFB6C1 |
|
||||
| Primary 2 | Mint | #98D8C8 |
|
||||
| Primary 3 | Lavender | #C8A2C8 |
|
||||
| Background | White | #FFFFFF |
|
||||
| Background Alt | Light Cream | #FFF8E7 |
|
||||
| Accent 1 | Butter Yellow | #FFFACD |
|
||||
| Accent 2 | Sky Blue | #BEE3F8 |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Cute rounded proportions
|
||||
- Stars, sparkles, flowers, decorative flourishes
|
||||
- Soft shadows and gentle highlights
|
||||
- Storybook-style elements
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Fantasy, children, gentle content, creative, whimsical, casual, beginner guides
|
||||
@@ -0,0 +1,34 @@
|
||||
# retro
|
||||
|
||||
Nostalgic, vintage, classic
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Coral Red | #E07A5F |
|
||||
| Primary 2 | Mint Green | #81B29A |
|
||||
| Primary 3 | Mustard Yellow | #F2CC8F |
|
||||
| Primary 4 | Dark Maroon | #5D3A3A |
|
||||
| Background | Cream Off-White | #F5F0E6 |
|
||||
| Background Alt | Aged Paper | #F5E6D3 |
|
||||
| Accent 1 | Burnt Orange | #D4764A |
|
||||
| Accent 2 | Rock Blue | #577590 |
|
||||
| Accent 3 | Vintage Gold | #C9A227 |
|
||||
| Accent 4 | Faded Teal | #2F7373 |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Halftone dots and vintage badges
|
||||
- Aged textures with subtle paper grain
|
||||
- Sunburst/radiating lines for energy
|
||||
- Pill-shaped clouds, small dots and stars
|
||||
- Classic icons and retro motifs
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
History, vintage, retro, classic, exploration, retrospectives, throwback content, creative proposals, educational
|
||||
@@ -0,0 +1,30 @@
|
||||
# vivid
|
||||
|
||||
Energetic, bold, attention-grabbing
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Bright Red | #EF4444 |
|
||||
| Primary 2 | Neon Green | #22C55E |
|
||||
| Primary 3 | Electric Blue | #3B82F6 |
|
||||
| Background | Light Blue | #EFF6FF |
|
||||
| Background Alt | Soft Lavender | #F5F3FF |
|
||||
| Accent 1 | Bright Orange | #FB923C |
|
||||
| Accent 2 | Vivid Yellow | #FACC15 |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Dynamic diagonal lines and angles
|
||||
- Bold geometric shapes and color blocks
|
||||
- Dramatic lighting effects
|
||||
- High-energy visual compositions
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Product launch, gaming, promotion, event, marketing, announcements, brand showcases
|
||||
@@ -0,0 +1,30 @@
|
||||
# warm
|
||||
|
||||
Friendly, approachable, human-centered
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex |
|
||||
|------|-------|-----|
|
||||
| Primary 1 | Warm Orange | #ED8936 |
|
||||
| Primary 2 | Golden Yellow | #F6AD55 |
|
||||
| Primary 3 | Terracotta | #C05621 |
|
||||
| Background | Cream | #FFFAF0 |
|
||||
| Background Alt | Soft Peach | #FED7AA |
|
||||
| Accent 1 | Deep Brown | #744210 |
|
||||
| Accent 2 | Soft Red | #E53E3E |
|
||||
|
||||
## Decorative Hints
|
||||
|
||||
- Sun rays, warm lighting effects
|
||||
- Rounded shapes, organic curves
|
||||
- Hearts, smiling faces, friendly icons
|
||||
- Warm gradient overlays
|
||||
|
||||
## Semantic Constraint
|
||||
|
||||
Do NOT render color names, hex codes, or role labels as visible text in the image.
|
||||
|
||||
## Best For
|
||||
|
||||
Personal growth, lifestyle, education, human stories, emotion, community
|
||||
@@ -0,0 +1,43 @@
|
||||
# chalk
|
||||
|
||||
Educational, authentic, classroom
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Chalk on blackboard aesthetic with imperfect strokes, dust effects, and authentic classroom feel. Nostalgic educational warmth.
|
||||
|
||||
## Lines
|
||||
|
||||
- Imperfect chalk strokes with variable pressure
|
||||
- Visible chalk texture and grain
|
||||
- Slightly wobbly, hand-drawn quality
|
||||
- Thick strokes for emphasis, thin for details
|
||||
|
||||
## Texture
|
||||
|
||||
- Chalk dust effects around text and elements
|
||||
- Board surface (dark, slightly worn)
|
||||
- Eraser smudges and residue
|
||||
- Grainy chalk quality on all elements
|
||||
|
||||
## Depth
|
||||
|
||||
- None: flat chalk drawings on board surface
|
||||
- Layering through erasure and redrawing
|
||||
- No shadows or perspective
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Chalk doodles: stars, arrows, underlines
|
||||
- Mathematical formulas and diagrams
|
||||
- Stick figures and simple icons
|
||||
- Connection lines with chalk feel
|
||||
- Checkmarks, circles, boxes for lists
|
||||
- Wooden frame border optional
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Hand-drawn chalk lettering
|
||||
- Imperfect baseline, authentic classroom feel
|
||||
- White or bright colored chalk for emphasis
|
||||
- Variable sizing for hierarchy
|
||||
@@ -0,0 +1,42 @@
|
||||
# digital
|
||||
|
||||
Polished, precise, modern
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Clean digital illustration with polished finish, precise edges, and subtle modern effects. Feels like a professional UI mockup or corporate illustration.
|
||||
|
||||
## Lines
|
||||
|
||||
- Clean, precise, computer-perfect edges
|
||||
- Consistent stroke weights
|
||||
- Sharp corners where appropriate
|
||||
- Anti-aliased smooth rendering
|
||||
|
||||
## Texture
|
||||
|
||||
- Smooth surfaces with no visible texture
|
||||
- Subtle gradients permitted (soft, controlled)
|
||||
- Frosted glass and blur effects
|
||||
- Clean shadows with consistent direction
|
||||
|
||||
## Depth
|
||||
|
||||
- Subtle gradients and soft drop shadows
|
||||
- Layered card-based layouts
|
||||
- Light 3D effects (subtle, not realistic)
|
||||
- Material Design-inspired elevation
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Polished icons and UI components
|
||||
- Data visualizations: charts, graphs, metrics
|
||||
- Card layouts and structured grids
|
||||
- Tag chips, progress bars, status indicators
|
||||
- Clean geometric shapes
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- System UI or modern sans-serif (Inter, SF Pro style)
|
||||
- Clean, functional, high readability
|
||||
- Structured hierarchy with consistent spacing
|
||||
@@ -0,0 +1,42 @@
|
||||
# flat-vector
|
||||
|
||||
Clean, modern, geometric illustration
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Flat design with clean outlines, uniform fills, and no texture or depth. Think modern app icons, infographic illustrations, and vector-based editorial art.
|
||||
|
||||
## Lines
|
||||
|
||||
- Clean outlines with uniform stroke weight
|
||||
- Closed shapes (coloring-book style)
|
||||
- Rounded line endings, avoid sharp corners
|
||||
- Consistent stroke width throughout
|
||||
|
||||
## Texture
|
||||
|
||||
- None: smooth, flat color fills only
|
||||
- No gradients, shadows, or noise
|
||||
- Solid color blocks
|
||||
|
||||
## Depth
|
||||
|
||||
- Flat: no shadows, no perspective
|
||||
- 2D layering with overlap for depth illusion
|
||||
- Optional 2.5D isometric layering (front/back occlusion, no atmospheric perspective)
|
||||
- No 3D effects or bevels
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Geometric icons and simple shapes
|
||||
- Bold outlined objects with clean fills
|
||||
- Geometric simplification: complex objects → basic shapes (trees → lollipop/triangle, buildings → rectangles)
|
||||
- "Toy model" aesthetic: cute, rounded proportions
|
||||
- Decorative: dots, lines, sunbursts, pill-shaped clouds, small stars
|
||||
- Isolated elements on clean backgrounds
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Clean sans-serif or bold geometric lettering
|
||||
- Strong readability, consistent weight
|
||||
- Easily scalable at any size
|
||||
@@ -0,0 +1,40 @@
|
||||
# hand-drawn
|
||||
|
||||
Sketchy, organic, personal
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Hand-drawn illustration with visible imperfections, organic line quality, and personal touch. Feels like a skilled artist's sketchbook or whiteboard drawing.
|
||||
|
||||
## Lines
|
||||
|
||||
- Sketchy, organic, slightly imperfect strokes
|
||||
- Variable line weight (thicker at pressure points)
|
||||
- Wavy connectors and arrows
|
||||
- Natural hand tremor visible
|
||||
|
||||
## Texture
|
||||
|
||||
- Paper grain and subtle surface texture
|
||||
- Pencil/pen/marker texture on strokes
|
||||
- Casual fills with visible brush direction
|
||||
|
||||
## Depth
|
||||
|
||||
- Minimal: light hand-drawn shadows or hatching
|
||||
- No realistic depth or perspective
|
||||
- Simple layering with overlap
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Doodles, organic shapes, hand-lettered labels
|
||||
- Conceptual icons with sketchy quality
|
||||
- Connection lines with hand-drawn wavy feel
|
||||
- Stars, arrows, underlines, circles, checkmarks
|
||||
- Stick figures and simple characters
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Hand-lettered or marker-style text
|
||||
- Bouncy baselines, organic feel
|
||||
- Variable sizes for emphasis hierarchy
|
||||
@@ -0,0 +1,40 @@
|
||||
# painterly
|
||||
|
||||
Soft, artistic, expressive
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Watercolor or paint-style illustration with visible brush strokes, color bleeds, and artistic texture. Feels like a hand-painted art piece.
|
||||
|
||||
## Lines
|
||||
|
||||
- Soft brush strokes with variable opacity
|
||||
- No hard outlines; edges defined by color transitions
|
||||
- Organic flowing strokes with natural blending
|
||||
|
||||
## Texture
|
||||
|
||||
- Visible paint or watercolor wash textures
|
||||
- Color bleeds and wet-on-wet effects
|
||||
- Paper texture showing through transparent areas
|
||||
- Brush stroke patterns visible
|
||||
|
||||
## Depth
|
||||
|
||||
- Soft edges with natural color blending
|
||||
- Atmospheric depth through color fading
|
||||
- Layered washes creating depth illusion
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Watercolor washes as backgrounds
|
||||
- Natural elements: leaves, flowers, organic forms
|
||||
- Soft gradients and color transitions
|
||||
- Splatter and drip effects as accents
|
||||
- Botanical and environmental motifs
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Elegant brush script or handwritten style
|
||||
- Organic letterforms with brush texture
|
||||
- Integrated with paint environment
|
||||
@@ -0,0 +1,42 @@
|
||||
# pixel
|
||||
|
||||
Retro 8-bit, nostalgic, chunky
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Pixel art aesthetic with visible pixel grid, limited color palette, and nostalgic gaming feel. Emulates classic 8-bit and 16-bit era graphics.
|
||||
|
||||
## Lines
|
||||
|
||||
- Pixel grid alignment, no anti-aliasing
|
||||
- Staircase edges on diagonals
|
||||
- Single-pixel or double-pixel outlines
|
||||
- Blocky, angular forms
|
||||
|
||||
## Texture
|
||||
|
||||
- Dithering patterns for gradients
|
||||
- No smooth transitions
|
||||
- Cross-hatching with pixel precision
|
||||
- Limited 16-32 color palette per scene
|
||||
|
||||
## Depth
|
||||
|
||||
- None: flat pixel planes only
|
||||
- Parallax layering (foreground/background)
|
||||
- No perspective or 3D effects
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- 8-bit sprites and chunky shapes
|
||||
- Simple iconography: stars, hearts, arrows
|
||||
- Text bubbles with pixel borders
|
||||
- Progress bars with chunky segments
|
||||
- Retro gaming UI elements
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Pixelated bitmap font style
|
||||
- Chunky blocky letterforms
|
||||
- Fixed-width or monospace feel
|
||||
- All-caps for headers
|
||||
@@ -0,0 +1,44 @@
|
||||
# screen-print
|
||||
|
||||
Bold, limited-color poster art with print texture
|
||||
|
||||
## Core Characteristics
|
||||
|
||||
Screen print / silkscreen aesthetic with flat color blocks, halftone textures, and deliberate print imperfections. Think Mondo limited-edition posters, vintage concert prints, and alternative movie poster art.
|
||||
|
||||
## Lines
|
||||
|
||||
- Clean, sharp edges between color blocks
|
||||
- No outlines — shapes defined by color boundaries
|
||||
- Stencil-cut quality, bold silhouettes
|
||||
- Geometric shapes with precise registration
|
||||
|
||||
## Texture
|
||||
|
||||
- Halftone dot patterns within color fills
|
||||
- Slight color layer misregistration (offset between print layers)
|
||||
- Paper grain texture beneath colors
|
||||
- Risograph / screen print imperfections (ink spread, dot gain)
|
||||
|
||||
## Depth
|
||||
|
||||
- Flat color planes layered front to back
|
||||
- Depth through silhouette overlap and color layering
|
||||
- No gradients — tonal variation via halftone density
|
||||
- Negative space as active compositional element
|
||||
|
||||
## Element Vocabulary
|
||||
|
||||
- Bold silhouettes and symbolic shapes
|
||||
- Geometric framing (circles, arches, triangles)
|
||||
- Figure-ground inversion (negative space forms secondary image)
|
||||
- Limited icon vocabulary: key props, symbolic objects
|
||||
- Typography integrated as design element, not overlay
|
||||
- Vintage poster border treatments
|
||||
|
||||
## Typography Approach
|
||||
|
||||
- Bold condensed sans-serif or hand-drawn lettering
|
||||
- Art Deco influences, vintage poster typography
|
||||
- Typography as integral part of composition (not separate layer)
|
||||
- Strong readability through high contrast with background
|
||||
@@ -0,0 +1,39 @@
|
||||
# Style Presets
|
||||
|
||||
`--style X` expands to a palette + rendering combination. Users can override either dimension.
|
||||
|
||||
| --style | Palette | Rendering |
|
||||
|---------|---------|-----------|
|
||||
| `elegant` | `elegant` | `hand-drawn` |
|
||||
| `blueprint` | `cool` | `digital` |
|
||||
| `chalkboard` | `dark` | `chalk` |
|
||||
| `dark-atmospheric` | `dark` | `digital` |
|
||||
| `editorial-infographic` | `cool` | `digital` |
|
||||
| `fantasy-animation` | `pastel` | `painterly` |
|
||||
| `flat-doodle` | `pastel` | `flat-vector` |
|
||||
| `intuition-machine` | `retro` | `digital` |
|
||||
| `minimal` | `mono` | `flat-vector` |
|
||||
| `nature` | `earth` | `hand-drawn` |
|
||||
| `notion` | `mono` | `digital` |
|
||||
| `pixel-art` | `vivid` | `pixel` |
|
||||
| `playful` | `pastel` | `hand-drawn` |
|
||||
| `retro` | `retro` | `digital` |
|
||||
| `sketch-notes` | `warm` | `hand-drawn` |
|
||||
| `vector-illustration` | `retro` | `flat-vector` |
|
||||
| `vintage` | `retro` | `hand-drawn` |
|
||||
| `warm` | `warm` | `hand-drawn` |
|
||||
| `warm-flat` | `warm` | `flat-vector` |
|
||||
| `hand-drawn-edu` | `macaron` | `hand-drawn` |
|
||||
| `watercolor` | `earth` | `painterly` |
|
||||
| `poster-art` | `retro` | `screen-print` |
|
||||
| `mondo` | `mono` | `screen-print` |
|
||||
| `art-deco` | `elegant` | `screen-print` |
|
||||
| `propaganda` | `vivid` | `screen-print` |
|
||||
| `cinematic` | `duotone` | `screen-print` |
|
||||
|
||||
## Override Examples
|
||||
|
||||
- `--style blueprint --rendering hand-drawn` = cool palette with hand-drawn rendering
|
||||
- `--style elegant --palette warm` = warm palette with hand-drawn rendering
|
||||
|
||||
Explicit `--palette`/`--rendering` flags always override preset values.
|
||||
23
baoyu-skills/skills/baoyu-cover-image/references/types.md
Normal file
23
baoyu-skills/skills/baoyu-cover-image/references/types.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# Type Composition Guidelines
|
||||
|
||||
## Type Gallery
|
||||
|
||||
| Type | Description | Best For |
|
||||
|------|-------------|----------|
|
||||
| `hero` | Large visual impact, title overlay | Product launch, brand promotion, major announcements |
|
||||
| `conceptual` | Concept visualization, abstract core ideas | Technical articles, methodology, architecture design |
|
||||
| `typography` | Text-focused layout, prominent title | Opinion pieces, quotes, insights |
|
||||
| `metaphor` | Visual metaphor, concrete expressing abstract | Philosophy, growth, personal development |
|
||||
| `scene` | Atmospheric scene, narrative feel | Stories, travel, lifestyle |
|
||||
| `minimal` | Minimalist composition, generous whitespace | Zen, focus, core concepts |
|
||||
|
||||
## 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 |
|
||||
@@ -0,0 +1,101 @@
|
||||
# Visual Elements Library
|
||||
|
||||
Icon and symbol vocabulary organized by topic. Use these as building blocks for cover compositions.
|
||||
|
||||
## Tech & Development
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Code window / Terminal | Programming, development |
|
||||
| Gear / Cog | Engineering, settings, process |
|
||||
| Circuit board / Chip | Hardware, AI, computing |
|
||||
| Binary / Data stream | Data, algorithms |
|
||||
| API brackets `</>` | Web development, APIs |
|
||||
| Cloud | Cloud computing, SaaS |
|
||||
| Lock / Shield | Security, privacy |
|
||||
| Network nodes | Distributed systems, connections |
|
||||
|
||||
## Ideas & Innovation
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Lightbulb | Ideas, insights, innovation |
|
||||
| Rocket | Launch, growth, startups |
|
||||
| Target / Bullseye | Goals, precision, focus |
|
||||
| Puzzle piece | Problem solving, integration |
|
||||
| Key | Solutions, access, unlocking |
|
||||
| Magnifying glass | Analysis, search, discovery |
|
||||
| Chart / Graph | Data, trends, growth |
|
||||
| Arrow / Path | Direction, journey, progress |
|
||||
|
||||
## Communication & Collaboration
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Speech bubble | Communication, dialogue |
|
||||
| Chat dots `...` | Conversation, messaging |
|
||||
| Handshake | Partnership, agreement |
|
||||
| Team / Figures | Collaboration, community |
|
||||
| Mail / Envelope | Notifications, outreach |
|
||||
| Megaphone | Announcements, marketing |
|
||||
| Network / Web | Social, connections |
|
||||
|
||||
## Nature & Growth
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Plant / Sprout | Growth, organic, sustainability |
|
||||
| Tree | Established, structure, branching |
|
||||
| Leaf | Eco, natural, fresh |
|
||||
| Sun / Rays | Energy, positivity, new beginnings |
|
||||
| Mountain | Challenge, achievement, scale |
|
||||
| Wave | Flow, change, rhythm |
|
||||
| Seed → Plant | Transformation, potential |
|
||||
|
||||
## Tools & Actions
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Wrench / Hammer | Building, fixing, tools |
|
||||
| Pencil / Pen | Writing, creation, editing |
|
||||
| Brush | Design, creativity, art |
|
||||
| Scissors | Cutting, editing, trimming |
|
||||
| Clock / Timer | Time, scheduling, deadlines |
|
||||
| Calendar | Planning, events, milestones |
|
||||
| Checklist / Checkbox | Tasks, completion, validation |
|
||||
|
||||
## Abstract Concepts
|
||||
|
||||
| Element | Use For |
|
||||
|---------|---------|
|
||||
| Infinity ∞ | Continuous, endless, loops |
|
||||
| Yin-yang | Balance, duality, harmony |
|
||||
| Spiral | Evolution, recursion, cycles |
|
||||
| Stack / Layers | Depth, hierarchy, structure |
|
||||
| Bridge | Connection, transition, spanning |
|
||||
| Door / Portal | Opportunity, entry, access |
|
||||
| Mirror / Reflection | Self-improvement, analysis |
|
||||
|
||||
## Combination Patterns
|
||||
|
||||
Create visual metaphors by combining elements:
|
||||
|
||||
| Combination | Represents |
|
||||
|-------------|------------|
|
||||
| Lightbulb + Gear | Innovative engineering |
|
||||
| Plant + Code | Organic tech growth |
|
||||
| Rocket + Target | Precise acceleration |
|
||||
| Key + Lock | Security solutions |
|
||||
| Bridge + People | Team connections |
|
||||
| Magnifier + Data | Analytics, insights |
|
||||
|
||||
## Rendering-Specific Treatment
|
||||
|
||||
| Rendering | Element Style |
|
||||
|-----------|---------------|
|
||||
| `flat-vector` | Geometric, simple shapes, uniform fills |
|
||||
| `hand-drawn` | Sketchy, organic, doodle-like |
|
||||
| `painterly` | Soft edges, brush strokes |
|
||||
| `digital` | Precise, gradient hints, polished |
|
||||
| `pixel` | 8-bit chunky, grid-aligned |
|
||||
| `chalk` | Dusty, textured, board style |
|
||||
@@ -0,0 +1,152 @@
|
||||
# Step 2: Confirm Options
|
||||
|
||||
## Purpose
|
||||
|
||||
Validate all 6 dimensions + aspect ratio.
|
||||
|
||||
## Skip Conditions
|
||||
|
||||
| Condition | Skipped Questions | Still Asked |
|
||||
|-----------|-------------------|-------------|
|
||||
| `--quick` flag | Type, Palette, Rendering, Text, Mood, Font | **Aspect Ratio** (unless `--aspect` specified) |
|
||||
| All 6 dimensions + `--aspect` specified | All | None |
|
||||
| `quick_mode: true` in EXTEND.md | Type, Palette, Rendering, Text, Mood, Font | **Aspect Ratio** (unless `--aspect` specified) |
|
||||
| Otherwise | None | All 7 questions |
|
||||
|
||||
**Important**: Aspect ratio is ALWAYS asked unless explicitly specified via `--aspect` CLI flag. User presets in EXTEND.md are shown as recommended option, not auto-selected.
|
||||
|
||||
## Quick Mode Output
|
||||
|
||||
When skipping 6 dimensions:
|
||||
|
||||
```
|
||||
Quick Mode: Auto-selected dimensions
|
||||
• Type: [type] ([reason])
|
||||
• Palette: [palette] ([reason])
|
||||
• Rendering: [rendering] ([reason])
|
||||
• Text: [text] ([reason])
|
||||
• Mood: [mood] ([reason])
|
||||
• Font: [font] ([reason])
|
||||
|
||||
[Then ask Question 7: Aspect Ratio]
|
||||
```
|
||||
|
||||
## Confirmation Flow
|
||||
|
||||
**Language**: Auto-determined (user's input language > saved preference > source language). No need to ask.
|
||||
|
||||
Present ALL options in a **single AskUserQuestion call** (4 questions max).
|
||||
|
||||
Skip any question where the dimension is already specified via CLI flag or `--style` preset.
|
||||
|
||||
### Q1: Type (skip if `--type`)
|
||||
|
||||
```yaml
|
||||
header: "Type"
|
||||
question: "Which cover type?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "[auto-recommended type] (Recommended)"
|
||||
description: "[reason based on content signals]"
|
||||
- label: "hero"
|
||||
description: "Large visual impact, title overlay - product launch, announcements"
|
||||
- label: "conceptual"
|
||||
description: "Concept visualization - technical, architecture"
|
||||
- label: "typography"
|
||||
description: "Text-focused layout - opinions, quotes"
|
||||
```
|
||||
|
||||
### Q2: Palette (skip if `--palette` or `--style`)
|
||||
|
||||
```yaml
|
||||
header: "Palette"
|
||||
question: "Which color palette?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "[auto-recommended palette] (Recommended)"
|
||||
description: "[reason based on content signals]"
|
||||
- label: "warm"
|
||||
description: "Friendly - orange, golden yellow, terracotta"
|
||||
- label: "elegant"
|
||||
description: "Sophisticated - soft coral, muted teal, dusty rose"
|
||||
- label: "cool"
|
||||
description: "Technical - engineering blue, navy, cyan"
|
||||
```
|
||||
|
||||
### Q3: Rendering (skip if `--rendering` or `--style`)
|
||||
|
||||
Show compatible renderings (✓✓ first from compatibility matrix):
|
||||
|
||||
```yaml
|
||||
header: "Rendering"
|
||||
question: "Which rendering style?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "[best compatible rendering] (Recommended)"
|
||||
description: "[reason based on palette + type + content]"
|
||||
- label: "flat-vector"
|
||||
description: "Clean outlines, flat fills, geometric icons"
|
||||
- label: "hand-drawn"
|
||||
description: "Sketchy, organic, imperfect strokes"
|
||||
- label: "digital"
|
||||
description: "Polished, precise, subtle gradients"
|
||||
```
|
||||
|
||||
### Q4: Font (skip if `--font`)
|
||||
|
||||
```yaml
|
||||
header: "Font"
|
||||
question: "Which font style?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "[auto-recommended font] (Recommended)"
|
||||
description: "[reason based on content signals]"
|
||||
- label: "clean"
|
||||
description: "Modern geometric sans-serif - tech, professional"
|
||||
- label: "handwritten"
|
||||
description: "Warm hand-lettered - personal, friendly"
|
||||
- label: "serif"
|
||||
description: "Classic elegant - editorial, luxury"
|
||||
- label: "display"
|
||||
description: "Bold decorative - announcements, entertainment"
|
||||
```
|
||||
|
||||
### Q5: Other Settings (skip if all remaining dimensions already specified)
|
||||
|
||||
Combine remaining settings into one question. Include: Output Dir (if no preference + file path input), Text, Mood, Aspect. Show auto-selected values as recommended option. User can accept all or type adjustments via "Other".
|
||||
|
||||
**When output dir needs asking** (no `default_output_dir` preference + file path input):
|
||||
|
||||
```yaml
|
||||
header: "Settings"
|
||||
question: "Output / Text / Mood / Aspect?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "imgs/ / [auto-text] / [auto-mood] / [preset-aspect] (Recommended)"
|
||||
description: "{article-dir}/imgs/, [text reason], [mood reason], [aspect source]"
|
||||
- label: "same-dir / [auto-text] / [auto-mood] / [preset-aspect]"
|
||||
description: "{article-dir}/, same directory as article"
|
||||
- label: "independent / [auto-text] / [auto-mood] / [preset-aspect]"
|
||||
description: "cover-image/{topic-slug}/, separate from article"
|
||||
```
|
||||
|
||||
**When output dir already set** (preference exists or pasted content):
|
||||
|
||||
```yaml
|
||||
header: "Settings"
|
||||
question: "Text / Mood / Aspect?"
|
||||
multiSelect: false
|
||||
options:
|
||||
- label: "[auto-text] / [auto-mood] / [preset-aspect] (Recommended)"
|
||||
description: "Auto-selected: [text reason], [mood reason], [aspect source]"
|
||||
- label: "[auto-text] / bold / [preset-aspect]"
|
||||
description: "High contrast, vivid — matches [content signal]"
|
||||
- label: "[auto-text] / subtle / [preset-aspect]"
|
||||
description: "Low contrast, muted — calm, professional"
|
||||
```
|
||||
|
||||
*Note*: "Other" (auto-added) allows typing custom combo. Parse `/`-separated values matching the question format.
|
||||
|
||||
## After Response
|
||||
|
||||
Proceed to Step 3 with confirmed dimensions.
|
||||
@@ -0,0 +1,254 @@
|
||||
# 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]
|
||||
Color constraint: Color values (#hex) and color names are rendering guidance only — do NOT display color names, hex codes, or palette labels as visible text in the image.
|
||||
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 — 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
|
||||
- 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 ⚠️ CRITICAL
|
||||
|
||||
**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 — 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 1 ([filename]) — Characters (if people present):
|
||||
- **Character 1**: [Appearance, e.g., "Woman, long wavy blonde hair"] → MUST stylize: [e.g., "flat-vector, simplified face, keep blonde hair, label: 'Nicole Forsgren'"]
|
||||
- **Character 2**: [Appearance, e.g., "Man, short dark hair, stubble"] → MUST stylize: [e.g., "flat-vector, simplified face, keep dark hair, label: 'Gergely Orosz'"]
|
||||
- **Placement**: [e.g., "Right third, side by side, facing left toward main visual"]
|
||||
- **Style**: Match rendering style, NOT photorealistic
|
||||
|
||||
## 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."]
|
||||
```
|
||||
|
||||
**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 using the same MUST INCORPORATE format above:
|
||||
|
||||
```
|
||||
# Reference Style — MUST INCORPORATE (extracted from visual analysis)
|
||||
|
||||
CRITICAL: Apply these specific visual elements extracted from the reference images.
|
||||
|
||||
## REQUIRED elements:
|
||||
- [Same detailed bullet format as above]
|
||||
|
||||
## Integration approach:
|
||||
[Same spatial layout instruction]
|
||||
```
|
||||
|
||||
### Reference Analysis Template
|
||||
|
||||
Use this format when analyzing reference images. Extract **specific, concrete, reproducible** details — not vague summaries.
|
||||
|
||||
| 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".
|
||||
@@ -0,0 +1,106 @@
|
||||
# Reference Image Handling
|
||||
|
||||
Guide for processing user-provided reference images in cover generation.
|
||||
|
||||
## Input Detection
|
||||
|
||||
| Input Type | Action |
|
||||
|------------|--------|
|
||||
| Image file path provided | Copy to `refs/` → can use `--ref` |
|
||||
| Image in conversation (no path) | **ASK user for file path** with AskUserQuestion |
|
||||
| User can't provide path | Extract style/palette verbally → append to prompt (NO frontmatter references) |
|
||||
|
||||
**CRITICAL**: Only add `references` to prompt frontmatter if files are ACTUALLY SAVED to `refs/` directory.
|
||||
|
||||
## File Saving
|
||||
|
||||
**If user provides file path**:
|
||||
1. Copy to `refs/ref-NN-{slug}.{ext}` (NN = 01, 02, ...)
|
||||
2. **Only** create description file `refs/ref-NN-{slug}.md` when model does NOT support `--ref` (see below)
|
||||
3. Verify image file exists before proceeding
|
||||
|
||||
**When to create description file**:
|
||||
|
||||
| Situation | Action |
|
||||
|-----------|--------|
|
||||
| Model supports `--ref` (Google, OpenAI, OpenRouter, Replicate, Seedream 4.0+) | Copy image only. **No description file needed.** Pass via `--ref` at generation. |
|
||||
| Model does NOT support `--ref` (Jimeng, Seedream 3.0) | Copy image + create description file. Embed description in prompt text. |
|
||||
|
||||
**Description File Format** (only when needed):
|
||||
```yaml
|
||||
---
|
||||
ref_id: NN
|
||||
filename: ref-NN-{slug}.{ext}
|
||||
usage: direct | style | palette
|
||||
---
|
||||
[Character or style description to embed in prompt]
|
||||
```
|
||||
|
||||
| Usage | When to Use |
|
||||
|-------|-------------|
|
||||
| `direct` | Model sees reference image directly; required if people must appear in output |
|
||||
| `style` | Extract visual style only (not for people who must appear) |
|
||||
| `palette` | Extract color scheme only |
|
||||
|
||||
## Verbal Extraction (No File)
|
||||
|
||||
When user can't provide file path:
|
||||
1. Analyze image visually, extract: colors, style, composition
|
||||
2. Create `refs/extracted-style.md` with extracted info
|
||||
3. DO NOT add `references` to prompt frontmatter
|
||||
4. Append extracted style/colors directly to prompt text
|
||||
|
||||
## Deep Analysis ⚠️ CRITICAL
|
||||
|
||||
References are high-priority inputs. Extract **specific, concrete, reproducible** elements:
|
||||
|
||||
| Analysis | Description | Example (good vs bad) |
|
||||
|----------|-------------|----------------------|
|
||||
| **Brand elements** | Logos, wordmarks, specific typography | Good: "Logo uses vertical parallel lines for 'm'" / Bad: "Has a logo" |
|
||||
| **Signature patterns** | Unique decorative motifs, textures | Good: "Woven intersecting curves forming diamond grid" / Bad: "Has patterns" |
|
||||
| **Color palette** | Exact hex values for key colors | Good: "#2D4A3E dark teal, #F5F0E0 cream" / Bad: "Dark and light colors" |
|
||||
| **Layout structure** | Specific spatial arrangement | Good: "Bottom 30% dark banner with branding" / Bad: "Has a banner" |
|
||||
| **Typography** | Font style, weight, spacing, case | Good: "Uppercase, wide letter-spacing" / 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 bullet that can be copy-pasted into prompt as mandatory instruction.
|
||||
|
||||
### Character Analysis ⚠️ If Reference Contains People
|
||||
|
||||
Use `usage: direct` so model sees the reference image. Additionally describe per character: **appearance**, **pose**, **clothing** → with **transformation rules** (stylize to match rendering).
|
||||
|
||||
| Extract | Good | Bad |
|
||||
|---------|------|-----|
|
||||
| Appearance | "Woman: long wavy blonde hair, friendly smile" | "A woman" |
|
||||
| Pose | "Standing, facing camera, confident posture" | "Standing" |
|
||||
| Clothing | "Dark T-shirt, business casual" | "Formal" |
|
||||
| Transform | "Flat-vector cartoon, keep hair color & clothing" | "Make cartoon" |
|
||||
|
||||
Use `usage: direct`. Output each character as MUST/REQUIRED prompt instruction.
|
||||
|
||||
## Verification Output
|
||||
|
||||
**For saved files**:
|
||||
```
|
||||
Reference Images Saved:
|
||||
- ref-01-{slug}.png ✓ (can use --ref)
|
||||
- ref-02-{slug}.png ✓ (can use --ref)
|
||||
```
|
||||
|
||||
**For extracted style**:
|
||||
```
|
||||
Reference Style Extracted (no file):
|
||||
- Colors: #E8756D coral, #7ECFC0 mint...
|
||||
- Style: minimal flat vector, clean lines...
|
||||
→ Will append to prompt text (not --ref)
|
||||
```
|
||||
|
||||
## Priority Rules
|
||||
|
||||
When user provides references, they are **HIGH PRIORITY**:
|
||||
|
||||
- **References override defaults**: If reference conflicts with preferred palette/rendering, reference takes precedence
|
||||
- **Concrete > abstract**: Extract specific elements — not vague "clean style"
|
||||
- **Mandatory language**: Use "MUST", "REQUIRED" in prompt for reference elements
|
||||
- **Visible in output**: Verify elements are present after generation; strengthen prompt if not
|
||||
Reference in New Issue
Block a user