diff --git a/README.md b/README.md index 0ba0efb..134754f 100644 --- a/README.md +++ b/README.md @@ -245,7 +245,7 @@ Generate professional infographics with 20 layout types and 17 visual styles. An #### baoyu-cover-image -Generate cover images for articles with 4 dimensions: Type × Style × Text × Mood. +Generate cover images for articles with 5 dimensions: Type × Palette × Rendering × Text × Mood. Combines 9 color palettes with 6 rendering styles for 54 unique combinations. ```bash # Auto-select all dimensions based on content @@ -254,44 +254,27 @@ Generate cover images for articles with 4 dimensions: Type × Style × Text × M # Quick mode: skip confirmation, use auto-selection /baoyu-cover-image path/to/article.md --quick -# Specify dimensions -/baoyu-cover-image path/to/article.md --type conceptual --style blueprint +# Specify dimensions (5D system) +/baoyu-cover-image path/to/article.md --type conceptual --palette cool --rendering digital /baoyu-cover-image path/to/article.md --text title-subtitle --mood bold -# Specify aspect ratio (default: 2.35:1) -/baoyu-cover-image path/to/article.md --aspect 16:9 +# Style presets (backward-compatible shorthand) +/baoyu-cover-image path/to/article.md --style blueprint + +# Specify aspect ratio (default: 16:9) +/baoyu-cover-image path/to/article.md --aspect 2.35:1 # Visual only (no title text) /baoyu-cover-image path/to/article.md --no-title ``` -**Four Dimensions**: +**Five Dimensions**: - **Type**: `hero`, `conceptual`, `typography`, `metaphor`, `scene`, `minimal` -- **Style**: 20 built-in styles (see previews below) +- **Palette**: `warm`, `elegant`, `cool`, `dark`, `earth`, `vivid`, `pastel`, `mono`, `retro` +- **Rendering**: `flat-vector`, `hand-drawn`, `painterly`, `digital`, `pixel`, `chalk` - **Text**: `none`, `title-only` (default), `title-subtitle`, `text-rich` - **Mood**: `subtle`, `balanced` (default), `bold` -Available styles: `elegant` (default), `blueprint`, `bold-editorial`, `chalkboard`, `dark-atmospheric`, `editorial-infographic`, `fantasy-animation`, `flat-doodle`, `intuition-machine`, `minimal`, `nature`, `notion`, `pixel-art`, `playful`, `retro`, `sketch-notes`, `vector-illustration`, `vintage`, `warm`, `watercolor` - -**Style Previews**: - -| | | | -|:---:|:---:|:---:| -| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | -| elegant | blueprint | bold-editorial | -| ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | -| chalkboard | dark-atmospheric | editorial-infographic | -| ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) | ![minimal](./screenshots/cover-image-styles/minimal.webp) | -| fantasy-animation | intuition-machine | minimal | -| ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) | ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | -| nature | notion | pixel-art | -| ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) | ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | -| playful | retro | sketch-notes | -| ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) | ![warm](./screenshots/cover-image-styles/warm.webp) | -| vector-illustration | vintage | warm | -| ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | ![flat-doodle](./screenshots/cover-image-styles/flat-doodle.webp) | | -| watercolor | flat-doodle | | - #### baoyu-slide-deck Generate professional slide deck images from content. Creates comprehensive outlines with style instructions, then generates individual slide images. @@ -744,13 +727,14 @@ mkdir -p .baoyu-skills/baoyu-cover-image Then create `.baoyu-skills/baoyu-cover-image/EXTEND.md`: ```markdown -## Custom Styles +## Custom Palettes -### brand -- Primary color: #1a73e8 -- Secondary color: #34a853 -- Font style: Modern sans-serif -- Always include company logo watermark +### corporate-tech +- Primary colors: #1a73e8, #4A90D9 +- Background: #F5F7FA +- Accent colors: #00B4D8, #48CAE4 +- Decorative hints: Clean lines, subtle gradients +- Best for: SaaS, enterprise, technical ``` The extension content will be loaded before skill execution and override defaults. diff --git a/README.zh.md b/README.zh.md index d2845a6..340492f 100644 --- a/README.zh.md +++ b/README.zh.md @@ -245,7 +245,7 @@ npx skills add jimliu/baoyu-skills #### baoyu-cover-image -为文章生成封面图，支持四维定制系统：类型 × 风格 × 文字 × 氛围。 +为文章生成封面图，支持五维定制系统：类型 × 配色 × 渲染 × 文字 × 氛围。9 种配色方案与 6 种渲染风格组合，提供 54 种独特效果。 ```bash # 根据内容自动选择所有维度 @@ -254,44 +254,27 @@ npx skills add jimliu/baoyu-skills # 快速模式：跳过确认，使用自动选择 /baoyu-cover-image path/to/article.md --quick -# 指定维度 -/baoyu-cover-image path/to/article.md --type conceptual --style blueprint +# 指定维度（5D 系统） +/baoyu-cover-image path/to/article.md --type conceptual --palette cool --rendering digital /baoyu-cover-image path/to/article.md --text title-subtitle --mood bold -# 指定宽高比（默认：2.35:1） -/baoyu-cover-image path/to/article.md --aspect 16:9 +# 风格预设（向后兼容的简写方式） +/baoyu-cover-image path/to/article.md --style blueprint + +# 指定宽高比（默认：16:9） +/baoyu-cover-image path/to/article.md --aspect 2.35:1 # 纯视觉（不含标题文字） /baoyu-cover-image path/to/article.md --no-title ``` -**四个维度**： +**五个维度**： - **类型 (Type)**：`hero`、`conceptual`、`typography`、`metaphor`、`scene`、`minimal` -- **风格 (Style)**：20 种内置风格（见下方预览） +- **配色 (Palette)**：`warm`、`elegant`、`cool`、`dark`、`earth`、`vivid`、`pastel`、`mono`、`retro` +- **渲染 (Rendering)**：`flat-vector`、`hand-drawn`、`painterly`、`digital`、`pixel`、`chalk` - **文字 (Text)**：`none`、`title-only`（默认）、`title-subtitle`、`text-rich` - **氛围 (Mood)**：`subtle`、`balanced`（默认）、`bold` -可用风格：`elegant`（默认）、`blueprint`、`bold-editorial`、`chalkboard`、`dark-atmospheric`、`editorial-infographic`、`fantasy-animation`、`flat-doodle`、`intuition-machine`、`minimal`、`nature`、`notion`、`pixel-art`、`playful`、`retro`、`sketch-notes`、`vector-illustration`、`vintage`、`warm`、`watercolor` - -**风格预览**： - -| | | | -|:---:|:---:|:---:| -| ![elegant](./screenshots/cover-image-styles/elegant.webp) | ![blueprint](./screenshots/cover-image-styles/blueprint.webp) | ![bold-editorial](./screenshots/cover-image-styles/bold-editorial.webp) | -| elegant | blueprint | bold-editorial | -| ![chalkboard](./screenshots/cover-image-styles/chalkboard.webp) | ![dark-atmospheric](./screenshots/cover-image-styles/dark-atmospheric.webp) | ![editorial-infographic](./screenshots/cover-image-styles/editorial-infographic.webp) | -| chalkboard | dark-atmospheric | editorial-infographic | -| ![fantasy-animation](./screenshots/cover-image-styles/fantasy-animation.webp) | ![intuition-machine](./screenshots/cover-image-styles/intuition-machine.webp) | ![minimal](./screenshots/cover-image-styles/minimal.webp) | -| fantasy-animation | intuition-machine | minimal | -| ![nature](./screenshots/cover-image-styles/nature.webp) | ![notion](./screenshots/cover-image-styles/notion.webp) | ![pixel-art](./screenshots/cover-image-styles/pixel-art.webp) | -| nature | notion | pixel-art | -| ![playful](./screenshots/cover-image-styles/playful.webp) | ![retro](./screenshots/cover-image-styles/retro.webp) | ![sketch-notes](./screenshots/cover-image-styles/sketch-notes.webp) | -| playful | retro | sketch-notes | -| ![vector-illustration](./screenshots/cover-image-styles/vector-illustration.webp) | ![vintage](./screenshots/cover-image-styles/vintage.webp) | ![warm](./screenshots/cover-image-styles/warm.webp) | -| vector-illustration | vintage | warm | -| ![watercolor](./screenshots/cover-image-styles/watercolor.webp) | ![flat-doodle](./screenshots/cover-image-styles/flat-doodle.webp) | | -| watercolor | flat-doodle | | - #### baoyu-slide-deck 从内容生成专业的幻灯片图片。先创建包含样式说明的完整大纲，然后逐页生成幻灯片图片。 @@ -744,13 +727,14 @@ mkdir -p .baoyu-skills/baoyu-cover-image 然后创建 `.baoyu-skills/baoyu-cover-image/EXTEND.md`： ```markdown -## 自定义风格 +## 自定义配色 -### brand -- 主色：#1a73e8 -- 辅色：#34a853 -- 字体风格：现代无衬线 -- 始终包含公司 logo 水印 +### corporate-tech +- 主色：#1a73e8、#4A90D9 +- 背景色：#F5F7FA +- 强调色：#00B4D8、#48CAE4 +- 装饰提示：简洁线条、渐变效果 +- 适用于：SaaS、企业、技术内容 ``` 扩展内容会在技能执行前加载，并覆盖默认设置。 diff --git a/skills/baoyu-cover-image/SKILL.md b/skills/baoyu-cover-image/SKILL.md index 69ce5c3..7b4e1d6 100644 --- a/skills/baoyu-cover-image/SKILL.md +++ b/skills/baoyu-cover-image/SKILL.md @@ -1,11 +1,11 @@ --- name: baoyu-cover-image -description: Generates article cover images with 4 dimensions (type, style, text, mood) and 20 hand-drawn styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", "make cover", or mentions "封面图". +description: Generates article cover images with 5 dimensions (type, palette, rendering, text, mood) combining 9 color palettes and 6 rendering styles. Supports cinematic (2.35:1), widescreen (16:9), and square (1:1) aspects. Use when user asks to "generate cover image", "create article cover", "make cover", or mentions "封面图". --- # Cover Image Generator -Generate elegant cover images for articles with 4-dimensional customization. +Generate elegant cover images for articles with 5-dimensional customization. ## Usage @@ -16,10 +16,14 @@ Generate elegant cover images for articles with 4-dimensional customization. # Quick mode: skip confirmation, use auto-selection /baoyu-cover-image article.md --quick -# Specify dimensions -/baoyu-cover-image article.md --type conceptual --style blueprint +# Specify dimensions (new 5D system) +/baoyu-cover-image article.md --type conceptual --palette warm --rendering flat-vector /baoyu-cover-image article.md --text title-subtitle --mood bold +# Style presets (backward-compatible shorthand for palette + rendering) +/baoyu-cover-image article.md --style blueprint +/baoyu-cover-image article.md --style blueprint --rendering hand-drawn # override rendering + # Visual only (no title text) /baoyu-cover-image article.md --no-title @@ -28,7 +32,7 @@ Generate elegant cover images for articles with 4-dimensional customization. [paste content] # Direct input with options -/baoyu-cover-image --style notion --aspect 1:1 --quick +/baoyu-cover-image --palette mono --rendering digital --aspect 1:1 --quick [paste content] ``` @@ -37,7 +41,9 @@ Generate elegant cover images for articles with 4-dimensional customization. | Option | Description | |--------|-------------| | `--type ` | Cover type: hero, conceptual, typography, metaphor, scene, minimal | -| `--style ` | Cover style (see Style Gallery) | +| `--palette ` | Color palette: warm, elegant, cool, dark, earth, vivid, pastel, mono, retro | +| `--rendering ` | Rendering style: flat-vector, hand-drawn, painterly, digital, pixel, chalk | +| `--style ` | Preset shorthand (expands to palette + rendering, see [Style Presets](references/style-presets.md)) | | `--text ` | Text density: none, title-only, title-subtitle, text-rich | | `--mood ` | Emotional intensity: subtle, balanced, bold | | `--aspect ` | 16:9 (default), 2.35:1, 4:3, 3:2, 1:1, 3:4 | @@ -45,16 +51,17 @@ Generate elegant cover images for articles with 4-dimensional customization. | `--no-title` | Alias for `--text none` | | `--quick` | Skip confirmation, use auto-selection for missing dimensions | -## Four Dimensions +## Five Dimensions | Dimension | Controls | Values | Default | |-----------|----------|--------|---------| | **Type** | Visual composition, information structure | hero, conceptual, typography, metaphor, scene, minimal | auto | -| **Style** | Visual aesthetics, colors, technique | 20 built-in styles | auto | +| **Palette** | Colors, color scheme, decorative hints | warm, elegant, cool, dark, earth, vivid, pastel, mono, retro | auto | +| **Rendering** | Line quality, texture, depth, element style | flat-vector, hand-drawn, painterly, digital, pixel, chalk | auto | | **Text** | Text density, information hierarchy | none, title-only, title-subtitle, text-rich | title-only | | **Mood** | Emotional intensity, visual weight | subtle, balanced, bold | balanced | -Dimensions can be freely combined. Example: `--type conceptual --style blueprint --text title-only --mood subtle` creates a calm technical concept visualization. +Dimensions can be freely combined. Auto-selection rules: [references/auto-selection.md](references/auto-selection.md) ## Type Gallery @@ -67,154 +74,59 @@ Dimensions can be freely combined. Example: `--type conceptual --style blueprint | `scene` | Atmospheric scene, narrative feel | Stories, travel, lifestyle | | `minimal` | Minimalist composition, generous whitespace | Zen, focus, core concepts | -## Auto Type Selection +Type composition details: [references/types.md](references/types.md) -When `--type` is omitted, select based on content signals: +## Palette Gallery -| 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` | +| Palette | Vibe | Primary Colors | +|---------|------|----------------| +| `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 | -## Style Gallery +Palette definitions: [references/palettes/](references/palettes/) -| Style | Description | -|-------|-------------| -| `elegant` (default) | Refined, sophisticated | -| `blueprint` | Technical schematics | -| `bold-editorial` | Magazine impact | -| `chalkboard` | Chalk on blackboard | -| `dark-atmospheric` | Cinematic dark mode | -| `editorial-infographic` | Visual storytelling | -| `fantasy-animation` | Ghibli/Disney inspired | -| `flat-doodle` | Pastel, cute shapes | -| `intuition-machine` | Technical, bilingual | -| `minimal` | Ultra-clean, zen | -| `nature` | Organic, earthy | -| `notion` | SaaS dashboard | -| `pixel-art` | Retro 8-bit | -| `playful` | Fun, whimsical | -| `retro` | Halftone, vintage | -| `sketch-notes` | Hand-drawn, warm | -| `vector-illustration` | Flat vector | -| `vintage` | Aged, expedition | -| `warm` | Friendly, human | -| `watercolor` | Soft hand-painted | +## Rendering Gallery -Style definitions: [references/styles/](references/styles/) +| Rendering | Description | Key Characteristics | +|-----------|-------------|---------------------| +| `flat-vector` | Clean modern vector | Uniform outlines, flat fills, geometric icons | +| `hand-drawn` | Sketchy organic illustration | Imperfect strokes, paper texture, doodles | +| `painterly` | Soft watercolor/paint | Brush strokes, color bleeds, soft edges | +| `digital` | Polished modern digital | Precise edges, subtle gradients, UI components | +| `pixel` | Retro 8-bit pixel art | Pixel grid, dithering, chunky shapes | +| `chalk` | Chalk on blackboard | Chalk strokes, dust effects, board texture | -## Auto Style Selection +Rendering definitions: [references/renderings/](references/renderings/) -When `--style` is omitted, select based on content signals: +## Text & Mood -| Signals | Style | -|---------|-------| -| Architecture, system design | `blueprint` | -| Product launch, marketing | `bold-editorial` | -| Education, tutorial | `chalkboard` | -| Entertainment, premium | `dark-atmospheric` | -| Tech explainer, research | `editorial-infographic` | -| Fantasy, children | `fantasy-animation` | -| Technical docs, bilingual | `intuition-machine` | -| Personal story, emotion | `warm` | -| Zen, focus, essential | `minimal` | -| Fun, beginner, casual | `playful` | -| Nature, wellness, eco | `nature` | -| SaaS, dashboard | `notion` | -| Workflow, productivity | `flat-doodle` | -| Gaming, retro tech | `pixel-art` | -| Knowledge sharing | `sketch-notes` | -| Creative proposals | `vector-illustration` | -| History, exploration | `vintage` | -| Lifestyle, travel | `watercolor` | -| Business, professional | `elegant` | - -## Text Dimension - -| Value | Title | Subtitle | Tags | Use Case | -|-------|:-----:|:--------:|:----:|----------| +| Text Level | Title | Subtitle | Tags | Use Case | +|------------|:-----:|:--------:|:----:|----------| | `none` | - | - | - | Pure visual, no text | -| `title-only` | ✓ (≤8字) | - | - | Simple headline (default) | -| `title-subtitle` | ✓ | ✓ (≤15字) | - | Title + supporting context | +| `title-only` | ✓ (≤8 字) | - | - | Simple headline (default) | +| `title-subtitle` | ✓ | ✓ (≤15 字) | - | Title + supporting context | | `text-rich` | ✓ | ✓ | ✓ (2-4) | Information-dense | -Full guide: [references/dimensions/text.md](references/dimensions/text.md) - -## Auto Text Selection - -When `--text` is omitted, select based on content 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` - -## Mood Dimension - -| Value | Contrast | Saturation | Weight | Use Case | -|-------|:--------:|:----------:|:------:|----------| +| Mood | Contrast | Saturation | Weight | Use Case | +|------|:--------:|:----------:|:------:|----------| | `subtle` | Low | Muted | Light | Corporate, thought leadership | | `balanced` | Medium | Normal | Medium | General articles (default) | | `bold` | High | Vivid | Heavy | Announcements, promotions | -Full guide: [references/dimensions/mood.md](references/dimensions/mood.md) +Full guides: [references/dimensions/text.md](references/dimensions/text.md) | [references/dimensions/mood.md](references/dimensions/mood.md) -## Auto Mood Selection +## Style Presets & Compatibility -When `--mood` is omitted, select based on content 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` - -## Compatibility Matrices - -### Type × Style - -| | elegant | blueprint | notion | warm | minimal | watercolor | bold-editorial | dark-atmospheric | -|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:| -| 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 | ✓✓ | ✓✓ | ✗ | - -✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended +- **Style Presets**: `--style X` expands to palette + rendering. See [references/style-presets.md](references/style-presets.md) +- **Compatibility Matrices**: Palette×Rendering, Type×Rendering, Type×Text, Type×Mood. See [references/compatibility.md](references/compatibility.md) + - ✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended ## File Structure @@ -234,31 +146,19 @@ Output directory depends on `default_output_dir` preference: └── cover.png # Output image ``` -**Slug Generation**: -1. Extract main topic from content (2-4 words, kebab-case) -2. Example: "The Future of AI" → `future-of-ai` - -**Conflict Resolution**: -If `cover-image/{topic-slug}/` already exists: -- Append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS` -- Example: `ai-future` exists → `ai-future-20260118-143052` - -**Source Files**: -Copy all sources with naming `source-{slug}.{ext}`: -- `source-article.md`, `source-reference.png`, etc. -- Multiple sources supported: text, images, files from conversation +**Slug**: Extract main topic (2-4 words, kebab-case). Example: "The Future of AI" → `future-of-ai` +**Conflict**: If directory exists, append timestamp: `{topic-slug}-YYYYMMDD-HHMMSS` +**Source Files**: Copy all sources with naming `source-{slug}.{ext}` (multiple supported) ## Workflow ### Progress Checklist -Copy and track progress: - ``` Cover Image Progress: - [ ] Step 0: Check preferences (EXTEND.md) ⚠️ REQUIRED if not found - [ ] Step 1: Analyze content + determine output directory ⚠️ MUST ask if not configured -- [ ] Step 2: Confirm options (4 dimensions) ⚠️ REQUIRED unless --quick or all specified +- [ ] Step 2: Confirm options (5 dimensions) ⚠️ REQUIRED unless --quick or all specified - [ ] Step 3: Create prompt - [ ] Step 4: Generate image - [ ] Step 5: Completion report @@ -267,7 +167,7 @@ Cover Image Progress: ### Flow ``` -Input → [Step 0: Preferences/Setup] → Analyze → [Output Dir ⚠️] → [Confirm: 4 Dimensions] → Prompt → Generate → Complete +Input → [Step 0: Preferences/Setup] → Analyze → [Output Dir ⚠️] → [Confirm: 5 Dimensions] → Prompt → Generate → Complete ↓ (skip if --quick or all specified) ``` @@ -286,400 +186,54 @@ test -f .baoyu-skills/baoyu-cover-image/EXTEND.md && echo "project" test -f "$HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md" && echo "user" ``` -┌──────────────────────────────────────────────────┬───────────────────┐ -│ Path │ Location │ -├──────────────────────────────────────────────────┼───────────────────┤ -│ .baoyu-skills/baoyu-cover-image/EXTEND.md │ Project directory │ -├──────────────────────────────────────────────────┼───────────────────┤ -│ $HOME/.baoyu-skills/baoyu-cover-image/EXTEND.md │ User home │ -└──────────────────────────────────────────────────┴───────────────────┘ +| Result | Action | +|--------|--------| +| Found | Read, parse, display preferences summary → Continue to Step 1 | +| Not found | ⚠️ MUST run first-time setup ([references/config/first-time-setup.md](references/config/first-time-setup.md)) → Then continue to Step 1 | -┌───────────┬───────────────────────────────────────────────────────────────────────────┐ -│ Result │ Action │ -├───────────┼───────────────────────────────────────────────────────────────────────────┤ -│ Found │ Read, parse, display preferences summary (see below) → Continue to Step 1 │ -├───────────┼───────────────────────────────────────────────────────────────────────────┤ -│ Not found │ ⚠️ MUST run first-time setup (see below) → Then continue to Step 1 │ -└───────────┴───────────────────────────────────────────────────────────────────────────┘ - -**Preferences Summary** (when EXTEND.md found): - -Display loaded preferences: +**Preferences Summary** (when found): ``` Preferences loaded from [project/user]: • Watermark: [enabled/disabled] [content if enabled] -• Type: [preferred_type or "auto"] -• Style: [preferred_style or "auto"] -• Text: [preferred_text or "title-only"] -• Mood: [preferred_mood or "balanced"] -• Aspect: [default_aspect] -• Output: [default_output_dir or "not set — will ask in Step 1.5"] -• Quick mode: [enabled/disabled] -• Language: [language or "auto"] +• Type/Palette/Rendering: [value or "auto"] +• Text: [value or "title-only"] | Mood: [value or "balanced"] +• Aspect: [default_aspect] | Output: [dir or "not set — will ask in Step 1.5"] +• Quick mode: [enabled/disabled] | Language: [value or "auto"] ``` -**First-Time Setup** (when EXTEND.md not found): +**EXTEND.md Supports**: Watermark | Preferred type | Preferred palette | Preferred rendering | Preferred text | Preferred mood | Default aspect ratio | Default output directory | Quick mode | Custom palette definitions | Language preference -**Language**: Use user's input language or saved language preference. - -Use AskUserQuestion with ALL questions in ONE call: - -**Q1: 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" -``` - -**Q2: 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" -``` - -**Q3: Preferred Style** -```yaml -header: "Style" -question: "Default cover style preference?" -options: - - label: "Auto-select (Recommended)" - description: "Choose based on content analysis each time" - - label: "elegant" - description: "Refined, sophisticated - professional business" - - label: "notion" - description: "SaaS dashboard - productivity/tech content" -``` - -**Q4: 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. - -**Q5: 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" -``` - -**Q6: 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" -``` - -**Q7: 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)" -``` - -**After setup**: Create EXTEND.md with user choices, then continue to Step 1. - -Full setup details: `references/config/first-time-setup.md` - -**EXTEND.md Supports**: Watermark | Preferred type | Preferred style | Preferred text | Preferred mood | Default aspect ratio | Default output directory | Quick mode | Custom style definitions | Language preference - -Schema: `references/config/preferences-schema.md` +Schema: [references/config/preferences-schema.md](references/config/preferences-schema.md) ### Step 1: Analyze Content -Read source content, save it if needed, and perform analysis. - -**Actions**: -1. **Save source content** (if not already a file): - - If user provides a file path: use as-is - - If user pastes content: save to `source.md` in target directory -2. Read source content -3. **Content analysis**: - - Extract: topic, core message, tone, keywords - - Identify visual metaphor opportunities - - Detect content type (technical/personal/business/creative) -4. **Language detection**: - - Detect source content language - - Note user's input language (from conversation) - - Compare with language preference in EXTEND.md - -**1.5 Determine Output Directory** ⚠️ - -**MUST ask user when `default_output_dir` is not set in EXTEND.md and input is a file path.** - -| Input | Behavior | -|-------|----------| -| File path + preference set | Use configured `default_output_dir` | -| File path + **no preference** | ⚠️ **MUST** ask with AskUserQuestion ↓ | -| Pasted content | `cover-image/{topic-slug}/` (always independent) | - -`default_output_dir` preference values: - -| Preference Value | Output Path | -|------------------|-------------| -| `same-dir` | `{article-dir}/` | -| `imgs-subdir` | `{article-dir}/imgs/` | -| `independent` | `cover-image/{topic-slug}/` | - -**AskUserQuestion** (when no preference, file path input only): -- `{article-dir}/imgs/` - Images subdirectory near article -- `{article-dir}/` - Same directory as article -- `cover-image/{topic-slug}/` - Independent directory -- Save as default - Remember this choice for future runs +1. **Save source content** (if pasted, save to `source.md` in target directory; if file path, use as-is) +2. **Content analysis**: Extract topic, core message, tone, keywords; identify visual metaphors; detect content type +3. **Language detection**: Detect source language, note user's input language, compare with EXTEND.md preference +4. **Determine output directory** per File Structure rules. If no `default_output_dir` preference + file path input, include in Step 2 Q4 ### Step 2: Confirm Options ⚠️ -**Purpose**: Validate all 4 dimensions + aspect ratio. +Validate all 5 dimensions + aspect ratio. Full confirmation flow: [references/workflow/confirm-options.md](references/workflow/confirm-options.md) **Skip Conditions**: -| Condition | Skipped Questions | Still Asked | -|-----------|-------------------|-------------| -| `--quick` flag | Type, Style, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) | -| All 4 dimensions + `--aspect` specified | All | None | -| `quick_mode: true` in EXTEND.md | Type, Style, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) | -| Otherwise | None | All 5 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 4 dimensions): - -``` -Quick Mode: Auto-selected dimensions -• Type: [type] ([reason]) -• Style: [style] ([reason]) -• Text: [text] ([reason]) -• Mood: [mood] ([reason]) - -[Then ask Question 5: Aspect Ratio] -``` - -**Confirmation Flow** (when NOT skipping): - -**Language**: Auto-determined (user's input language > saved preference > source language). No need to ask. - -Present options using AskUserQuestion: - -**Question 1: Type** (if not specified via `--type`) -- Show recommended type based on content analysis + preferred type from EXTEND.md - -```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" -``` - -**Question 2: Style** (if not specified via `--style`) -- Based on selected Type, show compatible styles (✓✓ first from compatibility matrix) -- Format: `[style name] - [why it fits this content]` - -```yaml -header: "Style" -question: "Which cover style?" -multiSelect: false -options: - - label: "[best compatible style] (Recommended)" - description: "[reason based on type + content]" - - label: "[style2]" - description: "[reason]" - - label: "[style3]" - description: "[reason]" -``` - -**Question 3: Text** (if not specified via `--text`) -- Based on selected Type, show compatible text levels (✓✓ first from compatibility matrix) - -```yaml -header: "Text" -question: "Text density level?" -multiSelect: false -options: - - label: "title-only (Recommended)" - description: "Simple headline, ≤8 characters" - - label: "none" - description: "Pure visual, no text elements" - - label: "title-subtitle" - description: "Title + supporting context" - - label: "text-rich" - description: "Title + subtitle + keyword tags" -``` - -**Question 4: Mood** (if not specified via `--mood`) -- Based on content analysis, show recommended mood - -```yaml -header: "Mood" -question: "Emotional intensity?" -multiSelect: false -options: - - label: "balanced (Recommended)" - description: "Medium contrast and saturation, versatile" - - label: "subtle" - description: "Low contrast, muted colors, calm" - - label: "bold" - description: "High contrast, vivid colors, dynamic" -``` - -**Question 5: Aspect Ratio** (ALWAYS ask unless `--aspect` specified via CLI) - -Note: Even if user has a preset in EXTEND.md, still ask this question. The preset is shown as the recommended option. - -```yaml -header: "Aspect" -question: "Cover aspect ratio?" -multiSelect: false -options: - - label: "[user preset or 16:9] (Recommended)" - description: "[based on preset or default: Standard widescreen, versatile]" - - label: "2.35:1" - description: "Cinematic widescreen - article headers, blog posts" - - label: "4:3" - description: "Traditional screen - PPT slides, classic displays" - - label: "3:2" - description: "Photography ratio - blog articles, Medium posts" - - label: "1:1" - description: "Square - Instagram, WeChat moments, social cards" - - label: "3:4" - description: "Portrait - Xiaohongshu, Pinterest, mobile-first content" -``` - -**After response**: Proceed to Step 3 with confirmed dimensions. +| Condition | Skipped | Still Asked | +|-----------|---------|-------------| +| `--quick` or `quick_mode: true` | 5 dimensions | Aspect ratio (unless `--aspect`) | +| All 5 + `--aspect` specified | All | None | ### Step 3: Create Prompt -Save to `prompts/cover.md`: - -```markdown -# 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] -Style: [confirmed style] -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: [max 8 chars headline]" -- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]" -- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]" - -# Mood Application -[Based on mood level:] -- subtle: "Use low contrast, muted colors, light visual weight, calm aesthetic" -- balanced: "Use medium contrast, normal saturation, balanced visual weight" -- bold: "Use high contrast, vivid saturated colors, heavy visual weight, dynamic energy" - -# Composition -Type composition: -- [Type-specific layout and structure] - -Visual composition: -- Main visual: [metaphor derived from content meaning] -- Layout: [positioning based on type and aspect ratio] -- Decorative: [style elements that reinforce content theme] - -Color scheme: [primary, background, accent from style, adjusted by mood] -Type notes: [key characteristics from type definition] -Style notes: [key characteristics from style definition] - -[Watermark section if enabled] -``` - -**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 - -**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): -- Max 8 characters, punchy headline -- Use hooks: numbers, questions, contrasts -- 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: `references/config/watermark-guide.md` +Save to `prompts/cover.md`. Full template: [references/workflow/prompt-template.md](references/workflow/prompt-template.md) ### Step 4: Generate Image -**Backup Existing Cover** (if regenerating): -If `cover.png` already exists in the output directory: -- Rename to `cover-backup-YYYYMMDD-HHMMSS.png` - -**Image Generation Skill Selection**: -1. Check available image generation skills -2. If multiple skills available, ask user preference -3. Call selected skill with: - - Prompt file path - - Output image path: `cover.png` - - Aspect ratio parameter - -**On failure**: Auto-retry once before reporting error. +1. Backup existing `cover.png` → `cover-backup-YYYYMMDD-HHMMSS.png` (if regenerating) +2. Check available image generation skills; if multiple, ask user preference +3. Call selected skill with prompt file path, output path (`cover.png`), aspect ratio +4. On failure: auto-retry once before reporting error ### Step 5: Completion Report @@ -687,14 +241,10 @@ If `cover.png` already exists in the output directory: Cover Generated! Topic: [topic] -Type: [type name] -Style: [style name] -Text: [text level] -Mood: [mood level] -Aspect: [ratio] +Type: [type] | Palette: [palette] | Rendering: [rendering] +Text: [text] | Mood: [mood] | Aspect: [ratio] Title: [title text or "visual only"] -Language: [lang] -Watermark: [enabled/disabled] +Language: [lang] | Watermark: [enabled/disabled] Location: [directory path] Files: @@ -709,38 +259,30 @@ Files: | Action | Steps | |--------|-------| | **Regenerate** | Backup existing → Update prompt → Regenerate with same settings | -| **Change type** | Backup existing → Confirm new type → Update prompt → Regenerate | -| **Change style** | Backup existing → Confirm new style → Update prompt → Regenerate | -| **Change text** | Backup existing → Confirm new text level → Update prompt → Regenerate | -| **Change mood** | Backup existing → Confirm new mood → Update prompt → Regenerate | -| **Change aspect** | Backup existing → Confirm new aspect → Update prompt → Regenerate | +| **Change dimension** | Backup existing → Confirm new value → Update prompt → Regenerate | -All modifications automatically backup the existing `cover.png` before regenerating. +All modifications automatically backup existing `cover.png` before regenerating. ## Notes - Cover must be readable at small preview sizes - Visual metaphors > literal representations - Title: max 8 chars, readable, impactful -- **Two confirmation points**: Step 0 (first-time setup if no EXTEND.md) + Step 2 (options) - can skip Step 2 with `--quick` +- Two confirmation points: Step 0 (first-time setup) + Step 2 (options) - skip Step 2 with `--quick` - Use confirmed language for title text - Maintain watermark consistency if enabled - Check compatibility matrices when selecting combinations -- `--no-title` is preserved as alias for `--text none` +- `--no-title` is alias for `--text none` +- `--style` presets are backward-compatible; explicit `--palette`/`--rendering` override preset values ## References -**Dimensions**: -- `references/dimensions/text.md` - Text density dimension -- `references/dimensions/mood.md` - Mood intensity dimension - -**Styles**: `references/styles/.md` - Style definitions - -**Config**: -- `references/config/preferences-schema.md` - EXTEND.md schema -- `references/config/first-time-setup.md` - First-time setup flow -- `references/config/watermark-guide.md` - Watermark configuration - -## Extension Support - -Custom configurations via EXTEND.md. See **Step 0** for paths and supported options. +**Dimensions**: [text.md](references/dimensions/text.md) | [mood.md](references/dimensions/mood.md) +**Palettes**: [references/palettes/](references/palettes/) +**Renderings**: [references/renderings/](references/renderings/) +**Auto-Selection**: [references/auto-selection.md](references/auto-selection.md) +**Style Presets**: [references/style-presets.md](references/style-presets.md) +**Compatibility**: [references/compatibility.md](references/compatibility.md) +**Types**: [references/types.md](references/types.md) +**Workflow**: [confirm-options.md](references/workflow/confirm-options.md) | [prompt-template.md](references/workflow/prompt-template.md) +**Config**: [preferences-schema.md](references/config/preferences-schema.md) | [first-time-setup.md](references/config/first-time-setup.md) | [watermark-guide.md](references/config/watermark-guide.md) diff --git a/skills/baoyu-cover-image/references/auto-selection.md b/skills/baoyu-cover-image/references/auto-selection.md new file mode 100644 index 0000000..290732d --- /dev/null +++ b/skills/baoyu-cover-image/references/auto-selection.md @@ -0,0 +1,60 @@ +# 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` | + +## 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` | + +## 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` diff --git a/skills/baoyu-cover-image/references/base-prompt.md b/skills/baoyu-cover-image/references/base-prompt.md index da51d81..a49cb71 100644 --- a/skills/baoyu-cover-image/references/base-prompt.md +++ b/skills/baoyu-cover-image/references/base-prompt.md @@ -1,19 +1,19 @@ -Create a WeChat article cover image following these guidelines: +Create a cover image following these guidelines: ## Image Specifications - **Type**: Cover image / Hero image -- **Aspect Ratio**: 2.35:1 (WeChat article cover standard) -- **Style**: Hand-drawn illustration +- **Aspect Ratio**: As specified in the prompt below ## Core Principles -- Hand-drawn quality throughout - NO realistic or photographic elements - 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 -## Four Dimensions +## Five Dimensions ### Type (Visual Composition) - `hero`: Large focal visual (60-70% area), dramatic composition @@ -23,8 +23,19 @@ Create a WeChat article cover image following these guidelines: - `scene`: Atmospheric environment, narrative elements, mood lighting - `minimal`: Single focal element, generous whitespace (60%+) -### Style (Visual Aesthetics) -Apply the specified style's color palette, visual elements, and typography characteristics. +### 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 @@ -39,16 +50,21 @@ Apply the specified style's color palette, visual elements, and typography chara ## Text Style (When Title Included) -- **ALL text MUST be hand-drawn style** - Title text: Large, eye-catching, max 8 characters - Subtitle: Secondary, max 15 characters (if title-subtitle or text-rich) - Tags: 2-4 keyword badges (if text-rich) -- Font style harmonizes with illustration style -- **DO NOT use realistic or computer-generated fonts** +- Font style harmonizes with rendering style +- **Engagement hooks**: Use numbers ("3个关键"), questions ("Why?"), contrasts ("A vs B"), pain points ("别再X了"), or suspense ("隐藏的X") for compelling titles + +## Composition Guidance + +**Icon Vocabulary**: Represent concepts with simple, recognizable icons rather than detailed illustrations. Use the rendering style to determine icon complexity (flat-vector = geometric, hand-drawn = sketchy, etc.) + +**Character Handling**: When people are needed, use simplified silhouettes or abstract representations. NO realistic faces, detailed anatomy, or photographic representations. ## Mood Application -Apply mood adjustments to the base style: +Apply mood adjustments to the base palette: | Mood | Contrast | Saturation | Weight | |------|----------|------------|--------| @@ -63,4 +79,4 @@ Apply mood adjustments to the base style: --- -Please use nano banana pro to generate the cover image based on the content provided below: +Please generate the cover image based on the content provided below: diff --git a/skills/baoyu-cover-image/references/compatibility.md b/skills/baoyu-cover-image/references/compatibility.md new file mode 100644 index 0000000..fb786b4 --- /dev/null +++ b/skills/baoyu-cover-image/references/compatibility.md @@ -0,0 +1,50 @@ +# Compatibility Matrices + +✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended + +## Palette × Rendering + +| | flat-vector | hand-drawn | painterly | digital | pixel | chalk | +|---|:---:|:---:|:---:|:---:|:---:|:---:| +| warm | ✓✓ | ✓✓ | ✓ | ✓ | ✓ | ✓ | +| elegant | ✓ | ✓✓ | ✓ | ✓✓ | ✗ | ✗ | +| cool | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | +| dark | ✓ | ✓ | ✓ | ✓✓ | ✓ | ✓✓ | +| earth | ✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✗ | +| vivid | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓ | +| pastel | ✓✓ | ✓✓ | ✓✓ | ✓ | ✗ | ✗ | +| mono | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | +| retro | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✗ | + +## Type × Rendering + +| | flat-vector | hand-drawn | painterly | digital | pixel | chalk | +|---|:---:|:---:|:---:|:---:|:---:|:---:| +| 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 | ✓✓ | ✓✓ | ✗ | diff --git a/skills/baoyu-cover-image/references/config/first-time-setup.md b/skills/baoyu-cover-image/references/config/first-time-setup.md index 48e35e3..160d7c7 100644 --- a/skills/baoyu-cover-image/references/config/first-time-setup.md +++ b/skills/baoyu-cover-image/references/config/first-time-setup.md @@ -33,69 +33,99 @@ No EXTEND.md found **Language**: Use user's input language or saved language preference. -Use single AskUserQuestion with multiple questions (AskUserQuestion auto-adds "Other" option): +Use AskUserQuestion with ALL questions in ONE call: ### Question 1: Watermark -``` +```yaml header: "Watermark" -question: "Watermark text for generated cover images? Type your watermark content (e.g., name, @handle)" +question: "Watermark text for generated cover images?" options: - label: "No watermark (Recommended)" - description: "No watermark, can enable later in EXTEND.md" + description: "Clean covers, can enable later in EXTEND.md" ``` -Position defaults to bottom-right. - ### Question 2: Preferred Type -``` +```yaml header: "Type" question: "Default cover type preference?" options: - - label: "None (Recommended)" - description: "Auto-select based on content analysis" + - 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" - - label: "typography" - description: "Text-focused layout - opinions, quotes" ``` -### Question 3: Preferred Style +### Question 3: Preferred Palette -``` -header: "Style" -question: "Default cover style preference? Or type another style name" +```yaml +header: "Palette" +question: "Default color palette preference?" options: - - label: "None (Recommended)" - description: "Auto-select based on content analysis" + - label: "Auto-select (Recommended)" + description: "Choose based on content analysis each time" - label: "elegant" - description: "Refined, sophisticated - professional business" - - label: "blueprint" - description: "Technical schematics - architecture/system design" - - label: "notion" - description: "SaaS dashboard - productivity/tech content" + 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: Default Aspect Ratio +### 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: "2.35:1 (Recommended)" - description: "Cinematic widescreen, best for article headers" - - label: "16:9" - description: "Standard widescreen, versatile" + - 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, social media friendly" + description: "Square - Instagram, WeChat, social cards" + - label: "3:4" + description: "Portrait - Xiaohongshu, Pinterest, mobile content" ``` -### Question 5: Quick Mode +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: @@ -105,13 +135,13 @@ options: description: "Skip confirmation, use auto-selection" ``` -### Question 6: Save Location +### Question 8: Save Location -``` +```yaml header: "Save" question: "Where to save preferences?" options: - - label: "Project" + - label: "Project (Recommended)" description: ".baoyu-skills/ (this project only)" - label: "User" description: "~/.baoyu-skills/ (all projects)" @@ -135,36 +165,30 @@ options: ```yaml --- -version: 2 +version: 3 watermark: enabled: [true/false] content: "[user input or empty]" position: bottom-right opacity: 0.7 preferred_type: [selected type or null] -preferred_style: [selected style or null] +preferred_palette: [selected palette or null] +preferred_rendering: [selected rendering or null] preferred_text: title-only preferred_mood: balanced -default_aspect: [2.35:1/16:9/1:1] +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 -custom_styles: [] +custom_palettes: [] --- ``` -## New Fields in v2 - -| Field | Default | Description | -|-------|---------|-------------| -| `preferred_text` | title-only | Text density (none, title-only, title-subtitle, text-rich) | -| `preferred_mood` | balanced | Mood intensity (subtle, balanced, bold) | -| `quick_mode` | false | Skip confirmation step when true | - -Note: Text and Mood preferences use sensible defaults (title-only, balanced) and don't require setup questions. Users can modify these in EXTEND.md directly. - ## Modifying Preferences Later Users can edit EXTEND.md directly or run setup again: - Delete EXTEND.md to trigger setup - Edit YAML frontmatter for quick changes -- Full schema: `config/preferences-schema.md` +- 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 | Custom palette definitions | Language preference diff --git a/skills/baoyu-cover-image/references/config/preferences-schema.md b/skills/baoyu-cover-image/references/config/preferences-schema.md index ddfa23d..b6fc356 100644 --- a/skills/baoyu-cover-image/references/config/preferences-schema.md +++ b/skills/baoyu-cover-image/references/config/preferences-schema.md @@ -9,7 +9,7 @@ description: EXTEND.md YAML schema for baoyu-cover-image user preferences ```yaml --- -version: 2 +version: 3 watermark: enabled: false @@ -18,7 +18,9 @@ watermark: preferred_type: null # hero|conceptual|typography|metaphor|scene|minimal or null for auto-select -preferred_style: null # Built-in style name or null for auto-select +preferred_palette: null # warm|elegant|cool|dark|earth|vivid|pastel|mono|retro 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 @@ -30,15 +32,14 @@ quick_mode: false # Skip confirmation when true language: null # zh|en|ja|ko|auto (null = auto-detect) -custom_styles: - - name: my-style - description: "Style description" - color_palette: +custom_palettes: + - name: my-palette + description: "Palette description" + colors: primary: ["#1E3A5F", "#4A90D9"] background: "#F5F7FA" accents: ["#00B4D8"] - visual_elements: "Clean lines, geometric shapes" - typography: "Modern sans-serif" + decorative_hints: "Clean lines, geometric shapes" best_for: "Business, tech content" --- ``` @@ -47,18 +48,19 @@ custom_styles: | Field | Type | Default | Description | |-------|------|---------|-------------| -| `version` | int | 2 | Schema version | +| `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_style` | string | null | Style 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) | -| `custom_styles` | array | [] | User-defined styles | +| `custom_palettes` | array | [] | User-defined palettes | ## Type Options @@ -71,6 +73,31 @@ custom_styles: | `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 | @@ -105,29 +132,29 @@ custom_styles: | `16:9` | Standard widescreen | Presentations, video thumbnails | | `1:1` | Square | Social media, profile images | -## Custom Style Fields +## Custom Palette Fields | Field | Required | Description | |-------|----------|-------------| -| `name` | Yes | Unique style identifier (kebab-case) | -| `description` | Yes | What the style conveys | -| `color_palette.primary` | No | Main colors (array) | -| `color_palette.background` | No | Background color | -| `color_palette.accents` | No | Accent colors (array) | -| `visual_elements` | No | Decorative elements | -| `typography` | No | Font/lettering style | +| `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: 2 +version: 3 watermark: enabled: true content: "@myhandle" preferred_type: null -preferred_style: elegant +preferred_palette: elegant +preferred_rendering: hand-drawn preferred_text: title-only preferred_mood: balanced quick_mode: false @@ -138,7 +165,7 @@ quick_mode: false ```yaml --- -version: 2 +version: 3 watermark: enabled: true content: "myblog.com" @@ -146,7 +173,9 @@ watermark: preferred_type: conceptual -preferred_style: blueprint +preferred_palette: cool + +preferred_rendering: digital preferred_text: title-subtitle @@ -158,26 +187,73 @@ quick_mode: true language: en -custom_styles: +custom_palettes: - name: corporate-tech - description: "Professional B2B tech style" - color_palette: + description: "Professional B2B tech palette" + colors: primary: ["#1E3A5F", "#4A90D9"] background: "#F5F7FA" accents: ["#00B4D8", "#48CAE4"] - visual_elements: "Clean lines, subtle gradients, circuit patterns" - typography: "Modern sans-serif, professional" + 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: +When loading v1 schema, auto-upgrade to v3: -| v1 Field | v2 Field | Default Value | +| v1 Field | v3 Field | Default Value | |----------|----------|---------------| -| (missing) | `version` | 2 | +| (missing) | `version` | 3 | +| (missing) | `preferred_palette` | null | +| (missing) | `preferred_rendering` | null | | (missing) | `preferred_text` | title-only | | (missing) | `preferred_mood` | balanced | | (missing) | `quick_mode` | false | diff --git a/skills/baoyu-cover-image/references/dimensions/mood.md b/skills/baoyu-cover-image/references/dimensions/mood.md index 17c8d5b..fcd5f0d 100644 --- a/skills/baoyu-cover-image/references/dimensions/mood.md +++ b/skills/baoyu-cover-image/references/dimensions/mood.md @@ -102,15 +102,29 @@ Dynamic, high-impact visual presence. ✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended -## Style Interaction +## Palette Interaction -Mood modifies the base style characteristics: +Mood modifies the base palette characteristics: -| Style Category | subtle | balanced | bold | -|----------------|--------|----------|------| -| Technical (blueprint, notion) | Lighter lines, softer colors | Standard rendering | Stronger contrast, sharper edges | -| Artistic (watercolor, sketch-notes) | More whitespace, lighter strokes | Standard rendering | Deeper colors, heavier strokes | -| Editorial (bold-editorial, dark-atmospheric) | Reduced contrast, softer tones | Standard rendering | Maximum impact, vivid colors | +| 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 | + +## 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 | ## Auto Selection diff --git a/skills/baoyu-cover-image/references/dimensions/text.md b/skills/baoyu-cover-image/references/dimensions/text.md index 4675707..8adfae4 100644 --- a/skills/baoyu-cover-image/references/dimensions/text.md +++ b/skills/baoyu-cover-image/references/dimensions/text.md @@ -49,8 +49,18 @@ Single headline, maximum impact. **Title Guidelines**: - Punchy, action-oriented -- Numbers, questions, contrasts work well - Match content language +- Use engagement hooks (see below) + +**Engagement Hooks**: + +| Hook Type | Examples (EN) | Examples (ZH) | +|-----------|---------------|---------------| +| Numbers | "3 Traps", "5 Keys" | "3个陷阱", "5个关键" | +| Questions | "Why X?", "How?" | "为什么X?", "怎么做?" | +| Contrasts | "A vs B", "Old→New" | "A还是B", "旧→新" | +| Pain Points | "Stop X", "Never Do" | "别再X了", "千万别" | +| Suspense | "Hidden X", "Secret" | "隐藏的X", "秘密" | ### title-subtitle @@ -67,6 +77,10 @@ Title with supporting context. - Reserved zone: 25% - Clear hierarchy between title/subtitle +**Title Guidelines**: +- Use engagement hooks: numbers, questions, contrasts, pain points, suspense +- Punchy, action-oriented + **Subtitle Guidelines**: - Clarify or contextualize title - Can include series name, author, date @@ -89,6 +103,10 @@ Information-dense cover with multiple text elements. - Reserved zone: 40% - Clear visual hierarchy +**Title Guidelines**: +- Use engagement hooks: numbers, questions, contrasts, pain points, suspense +- Punchy, action-oriented + **Tag Guidelines**: - 2-4 tags maximum - Short keywords (1-2 words each) diff --git a/skills/baoyu-cover-image/references/palettes/cool.md b/skills/baoyu-cover-image/references/palettes/cool.md new file mode 100644 index 0000000..40e9a30 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/cool.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Architecture, system design, API, technical documentation, engineering, data analysis diff --git a/skills/baoyu-cover-image/references/palettes/dark.md b/skills/baoyu-cover-image/references/palettes/dark.md new file mode 100644 index 0000000..6bed995 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/dark.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Entertainment, premium brands, cinematic storytelling, dark mode, gaming, night themes diff --git a/skills/baoyu-cover-image/references/palettes/earth.md b/skills/baoyu-cover-image/references/palettes/earth.md new file mode 100644 index 0000000..7cd6508 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/earth.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Nature, wellness, eco, organic, travel, sustainability, outdoor topics, slow living diff --git a/skills/baoyu-cover-image/references/palettes/elegant.md b/skills/baoyu-cover-image/references/palettes/elegant.md new file mode 100644 index 0000000..f6bdf2f --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/elegant.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Business, professional, thought leadership, luxury, corporate communications diff --git a/skills/baoyu-cover-image/references/palettes/mono.md b/skills/baoyu-cover-image/references/palettes/mono.md new file mode 100644 index 0000000..fcf482a --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/mono.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Zen, focus, essential concepts, pure, simple, minimalist philosophy, clean design diff --git a/skills/baoyu-cover-image/references/palettes/pastel.md b/skills/baoyu-cover-image/references/palettes/pastel.md new file mode 100644 index 0000000..c516f73 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/pastel.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Fantasy, children, gentle content, creative, whimsical, casual, beginner guides diff --git a/skills/baoyu-cover-image/references/palettes/retro.md b/skills/baoyu-cover-image/references/palettes/retro.md new file mode 100644 index 0000000..e341d46 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/retro.md @@ -0,0 +1,30 @@ +# 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 + +## Best For + +History, vintage, retro, classic, exploration, retrospectives, throwback content, creative proposals, educational diff --git a/skills/baoyu-cover-image/references/palettes/vivid.md b/skills/baoyu-cover-image/references/palettes/vivid.md new file mode 100644 index 0000000..e0c90ff --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/vivid.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Product launch, gaming, promotion, event, marketing, announcements, brand showcases diff --git a/skills/baoyu-cover-image/references/palettes/warm.md b/skills/baoyu-cover-image/references/palettes/warm.md new file mode 100644 index 0000000..a3bdcf3 --- /dev/null +++ b/skills/baoyu-cover-image/references/palettes/warm.md @@ -0,0 +1,26 @@ +# 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 + +## Best For + +Personal growth, lifestyle, education, human stories, emotion, community diff --git a/skills/baoyu-cover-image/references/renderings/chalk.md b/skills/baoyu-cover-image/references/renderings/chalk.md new file mode 100644 index 0000000..a37808c --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/chalk.md @@ -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 diff --git a/skills/baoyu-cover-image/references/renderings/digital.md b/skills/baoyu-cover-image/references/renderings/digital.md new file mode 100644 index 0000000..5795f86 --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/digital.md @@ -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 diff --git a/skills/baoyu-cover-image/references/renderings/flat-vector.md b/skills/baoyu-cover-image/references/renderings/flat-vector.md new file mode 100644 index 0000000..a0cd3b6 --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/flat-vector.md @@ -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 diff --git a/skills/baoyu-cover-image/references/renderings/hand-drawn.md b/skills/baoyu-cover-image/references/renderings/hand-drawn.md new file mode 100644 index 0000000..3bd6439 --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/hand-drawn.md @@ -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 diff --git a/skills/baoyu-cover-image/references/renderings/painterly.md b/skills/baoyu-cover-image/references/renderings/painterly.md new file mode 100644 index 0000000..59b13e8 --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/painterly.md @@ -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 diff --git a/skills/baoyu-cover-image/references/renderings/pixel.md b/skills/baoyu-cover-image/references/renderings/pixel.md new file mode 100644 index 0000000..f17c437 --- /dev/null +++ b/skills/baoyu-cover-image/references/renderings/pixel.md @@ -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 diff --git a/skills/baoyu-cover-image/references/style-presets.md b/skills/baoyu-cover-image/references/style-presets.md new file mode 100644 index 0000000..587f1b0 --- /dev/null +++ b/skills/baoyu-cover-image/references/style-presets.md @@ -0,0 +1,32 @@ +# 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` | +| `watercolor` | `earth` | `painterly` | + +## 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. diff --git a/skills/baoyu-cover-image/references/styles/blueprint.md b/skills/baoyu-cover-image/references/styles/blueprint.md deleted file mode 100644 index 6775fb2..0000000 --- a/skills/baoyu-cover-image/references/styles/blueprint.md +++ /dev/null @@ -1,25 +0,0 @@ -# blueprint - -Precise technical blueprint style with engineering aesthetic - -## Color Palette - -- Primary: Engineering Blue (#2563EB), Navy Blue (#1E3A5F) -- Background: Blueprint Off-White (#FAF8F5), subtle grid overlay -- Accents: Amber (#F59E0B), Light Blue (#BFDBFE) - -## Visual Elements - -- Precise lines with consistent stroke weights -- Technical schematics and clean vector graphics -- Dimension lines and measurement indicators -- Grid alignment for all elements -- Geometric precision for all shapes - -## Typography - -- Clean sans-serif hand lettering, technical and authoritative - -## Best For - -Technical architecture, system design, data analysis, engineering documentation diff --git a/skills/baoyu-cover-image/references/styles/bold-editorial.md b/skills/baoyu-cover-image/references/styles/bold-editorial.md deleted file mode 100644 index 6cf80a0..0000000 --- a/skills/baoyu-cover-image/references/styles/bold-editorial.md +++ /dev/null @@ -1,26 +0,0 @@ -# bold-editorial - -High-impact magazine editorial with bold visual expression - -## Color Palette - -- Primary: Pure White (#FFFFFF), Electric Blue (#3B82F6), Bright Orange (#FB923C) -- Background: Deep Black (#0A0A0A), Deep Blue (#0F172A) -- Accents: Magenta (#EC4899), Neon Green (#22C55E), Violet (#8B5CF6) - -## Visual Elements - -- Strong typography as visual element itself -- Geometric shapes and bold color blocks -- Full-bleed solid color backgrounds -- Dynamic diagonal lines and angles -- Dramatic lighting effects on text -- Minimal decoration, maximum impact - -## Typography - -- Bold condensed typeface, oversized headlines, all-caps, tight letter-spacing - -## Best For - -Product launches, marketing, keynote speeches, brand showcases, investor pitches diff --git a/skills/baoyu-cover-image/references/styles/chalkboard.md b/skills/baoyu-cover-image/references/styles/chalkboard.md deleted file mode 100644 index 96b91b4..0000000 --- a/skills/baoyu-cover-image/references/styles/chalkboard.md +++ /dev/null @@ -1,61 +0,0 @@ -# chalkboard - -Black chalkboard background with colorful chalk drawing style - -## Design Aesthetic - -Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience. - -## Background - -- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C) -- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks - -## Typography - -Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis. - -## Color Palette - -| Role | Color | Hex | Usage | -|------|-------|-----|-------| -| Background | Chalkboard Black | #1A1A1A | Primary background | -| Alt Background | Green-Black | #1C2B1C | Traditional green board | -| Primary Text | Chalk White | #F5F5F5 | Main text, outlines | -| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis | -| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights | -| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links | -| Accent 4 | Chalk Green | #90EE90 | Success, nature | -| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy | - -## Visual Elements - -- Hand-drawn chalk illustrations with sketchy, imperfect lines -- Chalk dust effects around text and key elements -- Doodles: stars, arrows, underlines, circles, checkmarks -- Mathematical formulas and simple diagrams -- Eraser smudges and chalk residue textures -- Wooden frame border optional -- Stick figures and simple icons -- Connection lines with hand-drawn feel - -## Style Rules - -### Do - -- Maintain authentic chalk texture on all elements -- Use imperfect, hand-drawn quality throughout -- Add subtle chalk dust and smudge effects -- Create visual hierarchy with color variety -- Include playful doodles and annotations - -### Don't - -- Use perfect geometric shapes -- Create clean digital-looking lines -- Add photorealistic elements -- Use gradients or glossy effects - -## Best For - -Educational content, tutorials, classroom themes, teaching materials, workshops, informal learning sessions, knowledge sharing diff --git a/skills/baoyu-cover-image/references/styles/dark-atmospheric.md b/skills/baoyu-cover-image/references/styles/dark-atmospheric.md deleted file mode 100644 index 936896c..0000000 --- a/skills/baoyu-cover-image/references/styles/dark-atmospheric.md +++ /dev/null @@ -1,25 +0,0 @@ -# dark-atmospheric - -Dark moody aesthetic with glowing accent elements - -## Color Palette - -- Primary: Electric Purple (#8B5CF6), Cyan Blue (#06B6D4), Magenta Pink (#EC4899) -- Background: Deep Purple-Black (#0D0D1A), Rich Navy (#1A1A2E) -- Accents: Amber (#F59E0B), Pure White (#FFFFFF) - -## Visual Elements - -- Glowing accent elements and borders -- Subtle gradient backgrounds -- Atmospheric fog or particle effects -- Neon-style highlights on key elements -- Silhouettes with backlit edges - -## Typography - -- Elegant serif or refined sans-serif in light/white with subtle glow - -## Best For - -Entertainment, creative industries, premium brands, cinematic storytelling diff --git a/skills/baoyu-cover-image/references/styles/editorial-infographic.md b/skills/baoyu-cover-image/references/styles/editorial-infographic.md deleted file mode 100644 index b436307..0000000 --- a/skills/baoyu-cover-image/references/styles/editorial-infographic.md +++ /dev/null @@ -1,26 +0,0 @@ -# editorial-infographic - -Modern magazine-style editorial with clear visual storytelling - -## Color Palette - -- Primary: Near Black (#1A1A1A), Editorial Blue (#2563EB) -- Background: Pure White (#FFFFFF), Light Gray (#F8F9FA) -- Accents: Coral (#F97316), Emerald (#10B981), Amber (#F59E0B) - -## Visual Elements - -- Clean flat illustrations (not photos) -- Structured multi-section layouts -- Callout boxes for key insights -- Icon-based data visualization -- Visual metaphors for abstract concepts -- Pull quotes and highlight boxes - -## Typography - -- Bold display serif or modern sans-serif, editorial sophistication - -## Best For - -Technology explainers, science communication, research summaries, thought leadership diff --git a/skills/baoyu-cover-image/references/styles/elegant.md b/skills/baoyu-cover-image/references/styles/elegant.md deleted file mode 100644 index 5a9f0ac..0000000 --- a/skills/baoyu-cover-image/references/styles/elegant.md +++ /dev/null @@ -1,23 +0,0 @@ -# elegant - -Refined, sophisticated, understated - -## Color Palette - -- Primary: Soft coral (#E8A598), muted teal (#5B8A8A), dusty rose (#D4A5A5) -- Background: Warm cream (#F5F0E6), soft beige -- Accents: Gold (#C9A962), copper - -## Visual Elements - -- Delicate lines, refined icons -- Subtle gradients -- Balanced composition - -## Typography - -- Elegant serif-style hand lettering - -## Best For - -Professional content, thought leadership, business topics diff --git a/skills/baoyu-cover-image/references/styles/fantasy-animation.md b/skills/baoyu-cover-image/references/styles/fantasy-animation.md deleted file mode 100644 index d610525..0000000 --- a/skills/baoyu-cover-image/references/styles/fantasy-animation.md +++ /dev/null @@ -1,25 +0,0 @@ -# fantasy-animation - -Whimsical hand-drawn animation style inspired by Ghibli and Disney - -## Color Palette - -- Primary: Golden Yellow (#F4D03F), Rose Pink (#E8A0BF), Deep Forest (#2D5A3D) -- Background: Soft Sky Blue (#E8F4FC), Warm Cream (#FFF8E7) -- Accents: Sage Green (#87A96B), Sky Blue (#7EC8E3), Coral (#F08080) - -## Visual Elements - -- Central illustrated character (friendly, expressive) -- Magical floating objects (books, orbs, sparkles) -- Storybook-style environment backgrounds -- Soft shadows and gentle highlights -- Decorative elements: stars, sparkles, flowers, leaves - -## Typography - -- Whimsical serif or decorative hand-lettered style, organic feel - -## Best For - -Educational content, storytelling, creative workshops, fantasy/gaming content diff --git a/skills/baoyu-cover-image/references/styles/flat-doodle.md b/skills/baoyu-cover-image/references/styles/flat-doodle.md deleted file mode 100644 index bdbe14c..0000000 --- a/skills/baoyu-cover-image/references/styles/flat-doodle.md +++ /dev/null @@ -1,27 +0,0 @@ -# flat-doodle - -Cute, simple doodle illustrations with bold outlines - -## Color Palette - -- Primary: Bright pastel pink (#FFB6C1), mint (#98D8C8), lavender (#C8A2C8), butter yellow (#FFFACD) -- Background: Clean white (#FFFFFF) -- Accents: Bold black outlines, soft coral, sky blue - -## Visual Elements - -- Bold black outlines around all shapes -- Simple flat shapes with no shading -- Cute rounded proportions -- Productivity-themed icons -- Isolated elements on white background -- Minimal decorative details - -## Typography - -- Simple, clean sans-serif or hand-lettering -- Bold and easily readable - -## Best For - -Productivity content, SaaS articles, workflow tutorials, app features, beginner guides, casual business diff --git a/skills/baoyu-cover-image/references/styles/intuition-machine.md b/skills/baoyu-cover-image/references/styles/intuition-machine.md deleted file mode 100644 index d036a43..0000000 --- a/skills/baoyu-cover-image/references/styles/intuition-machine.md +++ /dev/null @@ -1,26 +0,0 @@ -# intuition-machine - -Technical briefing style with aged paper and bilingual labels - -## Color Palette - -- Primary: Dark Maroon (#5D3A3A), Teal (#2F7373) -- Background: Aged Cream (#F5F0E6), subtle paper texture with light creases -- Accents: Warm Brown (#8B7355), Maroon (#722F37), Deep Charcoal (#2D2D2D) - -## Visual Elements - -- Isometric 3D technical illustrations or flat 2D diagrams -- Bilingual callout labels (English + Chinese) -- Faded thematic background patterns -- Clean black outlines on all elements -- Split or triptych layouts -- Key quote box at bottom - -## Typography - -- Bold display font in dark maroon, ALL CAPS for titles, bilingual labels - -## Best For - -Technical explanations, academic presentations, bilingual audiences, knowledge docs diff --git a/skills/baoyu-cover-image/references/styles/minimal.md b/skills/baoyu-cover-image/references/styles/minimal.md deleted file mode 100644 index 598f472..0000000 --- a/skills/baoyu-cover-image/references/styles/minimal.md +++ /dev/null @@ -1,23 +0,0 @@ -# minimal - -Ultra-clean, zen-like, focused - -## Color Palette - -- Primary: Pure black (#000000), white (#FFFFFF) -- Background: White or off-white (#FAFAFA) -- Accents: Single color (user's choice or content-derived) - -## Visual Elements - -- Single focal point -- Maximum negative space -- Thin lines - -## Typography - -- Clean, simple hand lettering, lots of breathing room - -## Best For - -Philosophy, minimalism, focused concepts diff --git a/skills/baoyu-cover-image/references/styles/nature.md b/skills/baoyu-cover-image/references/styles/nature.md deleted file mode 100644 index fe18403..0000000 --- a/skills/baoyu-cover-image/references/styles/nature.md +++ /dev/null @@ -1,22 +0,0 @@ -# nature - -Organic, calm, earthy - -## Color Palette - -- Primary: Forest green (#276749), sage (#9AE6B4), earth brown (#744210) -- Background: Sand beige (#F5E6D3), sky blue (#E0F2FE) -- Accents: Sunset orange, water blue - -## Visual Elements - -- Leaves, trees, mountains -- Sun, clouds, organic flowing lines - -## Typography - -- Organic, flowing hand lettering with natural textures - -## Best For - -Sustainability, wellness, outdoor topics, slow living diff --git a/skills/baoyu-cover-image/references/styles/notion.md b/skills/baoyu-cover-image/references/styles/notion.md deleted file mode 100644 index d3d0c03..0000000 --- a/skills/baoyu-cover-image/references/styles/notion.md +++ /dev/null @@ -1,25 +0,0 @@ -# notion - -Clean SaaS dashboard aesthetic with productivity tool styling - -## Color Palette - -- Primary: Near Black (#1F1F1F), Notion Blue (#2383E2) -- Background: Light Gray (#F7F7F5), Pure White (#FFFFFF) -- Accents: Success Green (#0F7B6C), Alert Red (#E03E3E), Warning Yellow (#DFAB01) - -## Visual Elements - -- Card-based layouts with subtle borders -- Clean data visualizations -- Tag and label chips -- Icon-based navigation hints -- Progress bars and metric displays - -## Typography - -- System UI or Inter style, clean and functional - -## Best For - -Product demos, SaaS presentations, productivity content, B2B topics diff --git a/skills/baoyu-cover-image/references/styles/pixel-art.md b/skills/baoyu-cover-image/references/styles/pixel-art.md deleted file mode 100644 index 72fc21a..0000000 --- a/skills/baoyu-cover-image/references/styles/pixel-art.md +++ /dev/null @@ -1,26 +0,0 @@ -# pixel-art - -Retro 8-bit pixel art aesthetic with nostalgic gaming style - -## Color Palette - -- Primary: Dark Navy (#1A1A2E), Pixel Green (#00FF00) -- Background: Light Blue (#87CEEB), Soft Lavender (#E6E6FA) -- Accents: Pixel Red (#FF0000), Pixel Yellow (#FFFF00), Pixel Cyan (#00FFFF) - -## Visual Elements - -- All elements with visible pixel structure -- Simple iconography: stars, hearts, arrows -- Text bubbles with pixel borders -- Progress bars with chunky segments -- Dithering patterns for gradients -- Limited 16-32 color palette - -## Typography - -- Pixelated bitmap font style, chunky blocky letterforms - -## Best For - -Gaming content, tech tutorials, developer talks, retro-themed topics diff --git a/skills/baoyu-cover-image/references/styles/playful.md b/skills/baoyu-cover-image/references/styles/playful.md deleted file mode 100644 index f60c10c..0000000 --- a/skills/baoyu-cover-image/references/styles/playful.md +++ /dev/null @@ -1,23 +0,0 @@ -# playful - -Fun, creative, whimsical - -## Color Palette - -- Primary: Pastel pink (#FED7E2), mint (#C6F6D5), lavender (#E9D8FD), sky blue (#BEE3F8) -- Background: Light cream (#FFFBEB), soft white -- Accents: Bright pops - yellow, coral, turquoise - -## Visual Elements - -- Doodles, stars, swirls -- Cute characters, emoji-style icons -- Playful compositions - -## Typography - -- Bouncy, irregular hand lettering, playful angles - -## Best For - -Casual content, tutorials, beginner guides, fun topics diff --git a/skills/baoyu-cover-image/references/styles/retro.md b/skills/baoyu-cover-image/references/styles/retro.md deleted file mode 100644 index 4c7c337..0000000 --- a/skills/baoyu-cover-image/references/styles/retro.md +++ /dev/null @@ -1,22 +0,0 @@ -# retro - -Vintage, nostalgic, classic - -## Color Palette - -- Primary: Muted orange (#ED8936 at 70%), dusty pink (#FED7E2 at 80%), faded teal -- Background: Aged paper (#F5E6D3), sepia tones -- Accents: Faded red, vintage gold - -## Visual Elements - -- Halftone dots, vintage badges -- Classic icons, aged textures - -## Typography - -- Vintage-style hand lettering, classic serif influence - -## Best For - -History, retrospectives, classic topics, throwback content diff --git a/skills/baoyu-cover-image/references/styles/sketch-notes.md b/skills/baoyu-cover-image/references/styles/sketch-notes.md deleted file mode 100644 index 7f6b241..0000000 --- a/skills/baoyu-cover-image/references/styles/sketch-notes.md +++ /dev/null @@ -1,25 +0,0 @@ -# sketch-notes - -Soft hand-drawn illustration style with fresh minimalist aesthetic - -## Color Palette - -- Primary: Deep Charcoal (#2C3E50), Soft Orange (#F4A261) -- Background: Warm Off-White (#FAF8F0), subtle paper grain -- Accents: Mustard Yellow (#E9C46A), Sage Green (#87A96B), Light Blue (#7EC8E3) - -## Visual Elements - -- Connection lines with hand-drawn wavy feel -- Conceptual abstract icons illustrating ideas -- Color fills with hand-painted casual feel -- Doodle-style decorative elements -- Arrows and pointers with sketchy style - -## Typography - -- Bold hand-written marker font for headlines, casual handwriting for body - -## Best For - -Educational content, knowledge sharing, technical explanations, tutorials diff --git a/skills/baoyu-cover-image/references/styles/vector-illustration.md b/skills/baoyu-cover-image/references/styles/vector-illustration.md deleted file mode 100644 index 81a8bb1..0000000 --- a/skills/baoyu-cover-image/references/styles/vector-illustration.md +++ /dev/null @@ -1,25 +0,0 @@ -# vector-illustration - -Flat vector illustration with black outlines and retro soft colors - -## Color Palette - -- Primary: Coral Red (#E07A5F), Mint Green (#81B29A), Mustard Yellow (#F2CC8F) -- Background: Cream Off-White (#F5F0E6), subtle paper texture -- Accents: Burnt Orange (#D4764A), Rock Blue (#577590), Deep Charcoal (#2D2D2D) outlines - -## Visual Elements - -- All objects have closed black outlines (coloring book style) -- Rounded line endings, avoid sharp corners -- Simplified geometric shapes -- 2.5D perspective with layering -- Decorative elements: sunbursts, pill clouds, dots, stars - -## Typography - -- Large bold retro serif for titles, clean geometric sans-serif for body - -## Best For - -Educational content, creative proposals, brand showcases, explainer content diff --git a/skills/baoyu-cover-image/references/styles/vintage.md b/skills/baoyu-cover-image/references/styles/vintage.md deleted file mode 100644 index 7872001..0000000 --- a/skills/baoyu-cover-image/references/styles/vintage.md +++ /dev/null @@ -1,26 +0,0 @@ -# vintage - -Vintage aged-paper aesthetic with historical document styling - -## Color Palette - -- Primary: Dark Brown (#3D2914), Forest Green (#2D5A3D), Navy Blue (#1E3A5F) -- Background: Aged Parchment (#F5E6D3), Sepia Cream (#FFF8DC) -- Accents: Burgundy (#722F37), Gold (#C9A227), Sepia Black (#3D3D3D) - -## Visual Elements - -- Antique maps with route lines and landmarks -- Compass roses and nautical elements -- Specimen drawings (flora, fauna) -- Handwritten-style annotations -- Rope, leather, brass decorative motifs -- Aged texture with subtle creases - -## Typography - -- Classic serif with historical character, elegant flourishes - -## Best For - -Historical content, travel, heritage storytelling, biography, scientific discovery diff --git a/skills/baoyu-cover-image/references/styles/warm.md b/skills/baoyu-cover-image/references/styles/warm.md deleted file mode 100644 index 1008acb..0000000 --- a/skills/baoyu-cover-image/references/styles/warm.md +++ /dev/null @@ -1,22 +0,0 @@ -# warm - -Friendly, approachable, human-centered - -## Color Palette - -- Primary: Warm orange (#ED8936), golden yellow (#F6AD55), terracotta (#C05621) -- Background: Cream (#FFFAF0), soft peach (#FED7AA) -- Accents: Deep brown (#744210), soft red - -## Visual Elements - -- Rounded shapes, smiling faces -- Sun rays, hearts, warm lighting - -## Typography - -- Friendly rounded hand lettering - -## Best For - -Personal growth, lifestyle, education, human stories diff --git a/skills/baoyu-cover-image/references/styles/watercolor.md b/skills/baoyu-cover-image/references/styles/watercolor.md deleted file mode 100644 index 8a4f1ef..0000000 --- a/skills/baoyu-cover-image/references/styles/watercolor.md +++ /dev/null @@ -1,25 +0,0 @@ -# watercolor - -Soft watercolor illustration style with hand-painted textures - -## Color Palette - -- Primary: Soft Coral (#F4A261), Dusty Rose (#E8A0A0) -- Background: Warm Off-White (#FAF8F0), Soft Cream (#FFF9E6) -- Accents: Sage Green (#87A96B), Sky Blue (#7EC8E3), Soft Lavender (#C5B4E3) - -## Visual Elements - -- Watercolor washes as backgrounds -- Visible brush strokes and textures -- Natural elements: leaves, flowers, organic shapes -- Color bleeds and soft edges -- Hand-drawn arrows and connections - -## Typography - -- Elegant handwritten or brush script, organic letterforms - -## Best For - -Lifestyle content, wellness, travel guides, personal stories, creative topics diff --git a/skills/baoyu-cover-image/references/types.md b/skills/baoyu-cover-image/references/types.md new file mode 100644 index 0000000..c741ec8 --- /dev/null +++ b/skills/baoyu-cover-image/references/types.md @@ -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 | diff --git a/skills/baoyu-cover-image/references/workflow/confirm-options.md b/skills/baoyu-cover-image/references/workflow/confirm-options.md new file mode 100644 index 0000000..fb5722f --- /dev/null +++ b/skills/baoyu-cover-image/references/workflow/confirm-options.md @@ -0,0 +1,132 @@ +# Step 2: Confirm Options + +## Purpose + +Validate all 5 dimensions + aspect ratio. + +## Skip Conditions + +| Condition | Skipped Questions | Still Asked | +|-----------|-------------------|-------------| +| `--quick` flag | Type, Palette, Rendering, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) | +| All 5 dimensions + `--aspect` specified | All | None | +| `quick_mode: true` in EXTEND.md | Type, Palette, Rendering, Text, Mood | **Aspect Ratio** (unless `--aspect` specified) | +| Otherwise | None | All 6 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 5 dimensions: + +``` +Quick Mode: Auto-selected dimensions +• Type: [type] ([reason]) +• Palette: [palette] ([reason]) +• Rendering: [rendering] ([reason]) +• Text: [text] ([reason]) +• Mood: [mood] ([reason]) + +[Then ask Question 6: 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: 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. diff --git a/skills/baoyu-cover-image/references/workflow/prompt-template.md b/skills/baoyu-cover-image/references/workflow/prompt-template.md new file mode 100644 index 0000000..5a3c8a4 --- /dev/null +++ b/skills/baoyu-cover-image/references/workflow/prompt-template.md @@ -0,0 +1,84 @@ +# Step 3: Prompt Template + +Save to `prompts/cover.md`: + +```markdown +# Content Context +Article title: [full original title from source] +Content summary: [2-3 sentence summary of key points and themes] +Keywords: [5-8 key terms extracted from content] + +# Visual Design +Cover theme: [2-3 words visual interpretation] +Type: [confirmed type] +Palette: [confirmed palette] +Rendering: [confirmed rendering] +Text level: [confirmed text level] +Mood: [confirmed mood] +Aspect ratio: [confirmed ratio] +Language: [confirmed language] + +# Text Elements +[Based on text level:] +- none: "No text elements" +- title-only: "Title: [max 8 chars headline]" +- title-subtitle: "Title: [headline] / Subtitle: [max 15 chars context]" +- text-rich: "Title: [headline] / Subtitle: [context] / Tags: [2-4 keywords]" + +# Mood Application +[Based on mood level:] +- subtle: "Use low contrast, muted colors, light visual weight, calm aesthetic" +- balanced: "Use medium contrast, normal saturation, balanced visual weight" +- bold: "Use high contrast, vivid saturated colors, heavy visual weight, dynamic energy" + +# Composition +Type composition: +- [Type-specific layout and structure] + +Visual composition: +- Main visual: [metaphor derived from content meaning] +- Layout: [positioning based on type and aspect ratio] +- Decorative: [palette-specific elements that reinforce content theme] + +Color scheme: [primary, background, accent from palette definition, adjusted by mood] +Rendering notes: [key characteristics from rendering definition — lines, texture, depth, element style] +Type notes: [key characteristics from type definition] +Palette notes: [key characteristics from palette definition] + +[Watermark section if enabled] +``` + +## 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 + +## 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: +- Max 8 characters, punchy headline +- Use engagement hooks: numbers ("3个陷阱"), questions ("Why X?"), contrasts ("A vs B"), pain points ("别再X了") +- 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`