mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-08 09:53:02 +08:00
feat(baoyu-xhs-images): add screen-print style and style presets
Add screen-print as 11th visual style with poster aesthetic. Add --preset flag for quick style + layout selection with 23 built-in presets (knowledge-card, poster, cinematic, etc.). Update auto-selection and compatibility matrices.
This commit is contained in:
@@ -143,3 +143,10 @@ Pre-composed decorative elements.
|
||||
- Chalk dust effects
|
||||
- Hand-drawn doodles
|
||||
- Mathematical formulas, simple icons
|
||||
|
||||
### Screen-Print Style
|
||||
- Bold silhouettes, geometric shapes
|
||||
- Halftone dot patterns, print grain
|
||||
- No doodles — negative space does the work
|
||||
- Stencil-cut edges, color block boundaries
|
||||
- Vintage poster border treatments
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
name: screen-print
|
||||
category: poster
|
||||
---
|
||||
|
||||
# Screen-Print Style
|
||||
|
||||
Bold poster art with halftone textures, limited colors, and symbolic storytelling.
|
||||
|
||||
## Element Combination
|
||||
|
||||
```yaml
|
||||
canvas:
|
||||
ratio: portrait-3-4
|
||||
grid: single | dual
|
||||
|
||||
image_effects:
|
||||
cutout: silhouette
|
||||
stroke: none
|
||||
filter: halftone | print-grain
|
||||
|
||||
typography:
|
||||
decorated: stroke-text | shadow-3d
|
||||
tags: none
|
||||
direction: horizontal
|
||||
|
||||
decorations:
|
||||
emphasis: star-burst | numbering
|
||||
background: solid-saturated | paper-texture
|
||||
doodles: none
|
||||
frames: none
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Colors | Hex |
|
||||
|------|--------|-----|
|
||||
| Primary | Burnt Orange, Deep Teal | #E8751A, #0A6E6E |
|
||||
| Background | Off-Black, Warm Cream | #121212, #F5E6D0 |
|
||||
| Accents | Crimson, Amber | #C0392B, #F4A623 |
|
||||
|
||||
**Duotone Pairs** (choose ONE based on content mood):
|
||||
|
||||
| Pair | Color A | Color B | Feel |
|
||||
|------|---------|---------|------|
|
||||
| Orange + Teal | #E8751A | #0A6E6E | Cinematic, action |
|
||||
| Red + Cream | #C0392B | #F5E6D0 | Bold, classic |
|
||||
| Blue + Gold | #1A3A5C | #D4A843 | Premium, prestigious |
|
||||
| Crimson + Navy | #DC143C | #0D1B2A | Dramatic, noir |
|
||||
| Magenta + Cyan | #C2185B | #00BCD4 | Vibrant, pop |
|
||||
|
||||
**Rule**: Use 2-5 colors maximum. Fewer colors = stronger impact.
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Bold silhouettes and symbolic shapes
|
||||
- Halftone dot patterns within color fills
|
||||
- Slight color layer misregistration (print offset effect)
|
||||
- Geometric framing (circles, arches, triangles)
|
||||
- Figure-ground inversion (negative space tells secondary story)
|
||||
- Stencil-cut edges, no outlines — shapes defined by color boundaries
|
||||
- Typography integrated as design element, not overlay
|
||||
- Vintage poster border treatments
|
||||
|
||||
## Typography
|
||||
|
||||
- Bold condensed sans-serif or hand-drawn lettering
|
||||
- Art Deco influences, vintage poster typography
|
||||
- Typography as integral part of composition (not separate layer)
|
||||
- High contrast with background for readability
|
||||
|
||||
## Best Layout Pairings
|
||||
|
||||
| Layout | Compatibility | Use Case |
|
||||
|--------|---------------|----------|
|
||||
| sparse | ✓✓ | Iconic poster covers, dramatic statements |
|
||||
| balanced | ✓✓ | Editorial compositions, opinion pieces |
|
||||
| dense | ✗ | Too much info clashes with minimal poster aesthetic |
|
||||
| list | ✓ | Bold rankings, top picks |
|
||||
| comparison | ✓✓ | Duotone split compositions, before/after |
|
||||
| flow | ✓ | Cinematic progression, timelines |
|
||||
| mindmap | ✗ | Too complex for geometric poster style |
|
||||
| quadrant | ✓✓ | Strong geometric division, classification |
|
||||
|
||||
## Best For
|
||||
|
||||
- Opinion pieces, cultural commentary
|
||||
- Movie/music/book recommendations
|
||||
- Dramatic announcements
|
||||
- Before/after transformations
|
||||
- Bold editorial content
|
||||
- Event promotions
|
||||
@@ -0,0 +1,36 @@
|
||||
# Style Presets
|
||||
|
||||
`--preset X` expands to a style + layout combination. Users can override either dimension.
|
||||
|
||||
| --preset | Style | Layout |
|
||||
|----------|-------|--------|
|
||||
| `knowledge-card` | `notion` | `dense` |
|
||||
| `checklist` | `notion` | `list` |
|
||||
| `concept-map` | `notion` | `mindmap` |
|
||||
| `swot` | `notion` | `quadrant` |
|
||||
| `tutorial` | `chalkboard` | `flow` |
|
||||
| `classroom` | `chalkboard` | `balanced` |
|
||||
| `study-guide` | `study-notes` | `dense` |
|
||||
| `cute-share` | `cute` | `balanced` |
|
||||
| `girly` | `cute` | `sparse` |
|
||||
| `cozy-story` | `warm` | `balanced` |
|
||||
| `product-review` | `fresh` | `comparison` |
|
||||
| `nature-flow` | `fresh` | `flow` |
|
||||
| `warning` | `bold` | `list` |
|
||||
| `versus` | `bold` | `comparison` |
|
||||
| `clean-quote` | `minimal` | `sparse` |
|
||||
| `pro-summary` | `minimal` | `balanced` |
|
||||
| `retro-ranking` | `retro` | `list` |
|
||||
| `throwback` | `retro` | `balanced` |
|
||||
| `pop-facts` | `pop` | `list` |
|
||||
| `hype` | `pop` | `sparse` |
|
||||
| `poster` | `screen-print` | `sparse` |
|
||||
| `editorial` | `screen-print` | `balanced` |
|
||||
| `cinematic` | `screen-print` | `comparison` |
|
||||
|
||||
## Override Examples
|
||||
|
||||
- `--preset knowledge-card --style chalkboard` = chalkboard style with dense layout
|
||||
- `--preset poster --layout quadrant` = screen-print style with quadrant layout
|
||||
|
||||
Explicit `--style`/`--layout` flags always override preset values.
|
||||
@@ -77,6 +77,41 @@ Load from `presets/{style}.md` and extract key elements:
|
||||
{typography_style}
|
||||
```
|
||||
|
||||
### Screen-Print Style Override
|
||||
|
||||
When `style: screen-print`, replace the standard Core Principles and Text Style sections with:
|
||||
|
||||
```
|
||||
## Core Principles
|
||||
|
||||
- Screen print / silkscreen poster art — flat color blocks, NO gradients
|
||||
- Bold silhouettes and symbolic shapes over detailed rendering
|
||||
- Negative space as active storytelling element
|
||||
- If content involves sensitive or copyrighted figures, create stylistically similar silhouettes
|
||||
- One iconic focal point per image — conceptual, not literal
|
||||
|
||||
## Color Rules (CRITICAL)
|
||||
|
||||
- **2-5 FLAT COLORS MAXIMUM** — fewer colors = stronger impact
|
||||
- Choose ONE duotone pair from preset as dominant palette
|
||||
- Halftone dot patterns for tonal variation (NOT gradients)
|
||||
- Slight color layer misregistration for print authenticity
|
||||
|
||||
## Text Style (CRITICAL)
|
||||
|
||||
- Bold condensed sans-serif or Art Deco influenced lettering
|
||||
- Typography INTEGRATED into composition as design element
|
||||
- High contrast with background, stencil-cut quality
|
||||
- **DO NOT use delicate, thin, or handwritten fonts**
|
||||
|
||||
## Composition
|
||||
|
||||
- Geometric framing: circles, arches, triangles
|
||||
- Figure-ground inversion where possible (negative space forms secondary image)
|
||||
- Stencil-cut edges between color blocks, no outlines
|
||||
- Paper grain texture beneath all colors
|
||||
```
|
||||
|
||||
## Layout Section Assembly
|
||||
|
||||
Load from `elements/canvas.md` and extract relevant layout:
|
||||
@@ -123,7 +158,18 @@ be legible but not distracting from the main content.
|
||||
|
||||
## Assembly Process
|
||||
|
||||
### Step 1: Load Preset
|
||||
### Step 0: Resolve Style Preset (if `--preset` used)
|
||||
|
||||
If user specified `--preset`, resolve to style + layout from `references/style-presets.md`:
|
||||
|
||||
```python
|
||||
# e.g., --preset knowledge-card → style=notion, layout=dense
|
||||
style, layout = resolve_preset(preset_name)
|
||||
```
|
||||
|
||||
Explicit `--style`/`--layout` flags override preset values.
|
||||
|
||||
### Step 1: Load Style Definition
|
||||
|
||||
```python
|
||||
preset = load_preset(style_name) # e.g., "notion"
|
||||
|
||||
Reference in New Issue
Block a user