mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-07 09:23:04 +08:00
refactor(baoyu-cover-image): replace 20 styles with 5D palette×rendering system
Migrate from 4-dimension (Type×Style×Text×Mood) to 5-dimension (Type×Palette×Rendering×Text×Mood) system. 9 palettes × 6 renderings = 54 combinations replacing 20 fixed styles. Add style presets for backward compatibility, v2→v3 schema migration, and new reference structure (palettes/, renderings/, workflow/).
This commit is contained in:
Jim Liu 宝玉
@@ -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.
|
||||
@@ -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`
|
||||
Reference in New Issue
Block a user