---
name: baoyu-promotional-flyer
description: Create A4 promotional flyers for Baorui Biotechnology with logo, QR codes, and natural science-style backgrounds
---

# Baoyu Promotional Flyer Creation

## When to Use
Create A4 promotional flyers for Baorui Biotechnology with company logo, QR codes.

## Preferred Approach: HTML + Chrome Headless

For complex layouts with backgrounds, gradients, tier cards, and embedded images:
use the `html-a4-flyer-generator` skill. It covers:
- A4 single-page HTML/CSS layout
- Base64 image embedding (logo + QR)
- Chrome headless PDF conversion
- Tiered card design patterns (silver/gold/diamond)
- Single-page fit strategy (`overflow:hidden`, `flex-shrink:0`, `flex:1`)
- Print background preservation (`-webkit-print-color-adjust: exact`)

Only fall back to ReportLab for ultra-simple text-only PDFs.

## Required Assets
- Logo: `~/work/公司资料/logo_transparent.png` (1170×396, RGBA)
- QR Code: `~/work/公司资料/试用装申请.png` (360×360, RGBA)
- Background: CSS-only natural style or local image from `~/work/产品资料/促销素材/春促背景.png`

## Image Pre-processing (Critical)
**Always convert RGBA images to RGB before use in HTML/PDF:**

```python
from PIL import Image

# Logo - add white background to preserve transparency
logo = Image.open('path/to/logo_transparent.png')
background = Image.new('RGB', logo.size, (255, 255, 255))
background.paste(logo, mask=logo.split()[3])
background.save('/tmp/logo_fixed.png', 'PNG')

# QR Code - simple RGB conversion
qr = Image.open('path/to/试用装申请.png')
qr_rgb = qr.convert('RGB')
qr_rgb.save('/tmp/qr_fixed.png', 'PNG')
```

## ReportLab PDF Generation (if needed)
**Common issues and fixes:**

1. **Font not found ('Heiti')**:
```python
from reportlab.pdfbase import pdfmetrics
from reportlab.pdfbase.ttfonts import TTFont
pdfmetrics.registerFont(TTFont('SimHei', '/System/Library/Fonts/STHeiti Light.ttc'))
FONT = 'SimHei'
```

2. **RGBA/HexColor not supported** - use Color class:
```python
from reportlab.lib.colors import Color
def make_color(r, g, b, alpha=1.0):
    return Color(r/255, g/255, b/255, alpha=alpha)
# Usage: c.setFillColor(make_color(0, 77, 96, 0.85))
```

## CSS Background Template (Natural Science Style)
```css
.natural-bg {
    background: linear-gradient(160deg, #0a3d62 0%, #1e5f74 30%, #38ada9 60%, #78e1b6 100%);
}
/* Add molecule decorations */
.molecule-circle {
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
}
```

## Content Mask Overlay
For text readability on busy backgrounds:
```css
.content-mask {
    background: rgba(0,20,40,0.65);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}
```

## Image CSS for Proper Display
```css
.logo {
    width: 130px;
    height: auto;
    object-fit: contain;
    object-position: left center;
}
.qr-code img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}
```

## Output Location
`~/work/outputs/baoyu-promo-apr-may-2026/baoyu-promo-2026-apr-may.html`

## Debugging Checklist
- [ ] Logo shows completely (not cropped)
- [ ] QR code is scannable (has proper border/margin)
- [ ] Text readable on background
- [ ] All Chinese characters display correctly