# Quote Graphic Mode (Hybrid)

**Hybrid approach** — gpt-image-2 generates a background image (mood + brand palette, NO text in-image) + an HTML template overlays text on top (CSS positioning, real font, 100% accuracy). Sidesteps every text-warp / misspelling / broken-diacritic problem.

## When to use quote-graphic mode

**Right fit**:
- "Guru post" for IG/LinkedIn — 1-2 line quote + author handle + brand logo
- Motivational social post — 2-3 line quote + tagline
- Speaker pull-quote graphic — standout line from a talk + speaker name
- Course/book promo with one highlighted quote + subtle CTA
- Personal brand quote post — founder/coach quote + handle

**Wrong mode — switch immediately**:
- Multi-quote carousel (>3 quotes) → `social-carousel`
- Article hero with a pull-quote and body text → `editorial`
- Magazine cover quote → `editorial` magazine cover format
- Testimonial quote on a pricing page → leave it to an HTML mockup skill (e.g. `saas-landing`)
- Quote inside a slide deck → `html-ppt-*` skills

## Three-step hybrid strategy

### Step 1 — Generate one background image via gpt-image-2

Background sets the mood, contains NO text, and has NO focal subject competing with the text overlay later:

- Abstract / textural / minimal composition
- Brand secondary palette (so brand primary becomes the text color)
- Soft, high-enough contrast for readable text
- Output: `docs/design/<slug>-bg.png`

### Step 2 — Build an HTML overlay template

An HTML file with CSS positioning the text on top of the background:
- Quote text (large serif font, e.g. Playfair Display / Garamond)
- Author handle (small sans font, bottom corner)
- Small brand logo in a corner (path pulled from brand identity)
- Brand-color text + accent line decoration

Output: `docs/design/<slug>.html`

### Step 3 (optional) — Export PNG via puppeteer/screenshot

The user can run puppeteer or Playwright screenshot to export the final PNG if they need a raster asset for IG/FB.

## Section anti-patterns

- Rendering the quote text inside the AI image — warps, misspells, breaks diacritics and any non-Latin characters
- Skipping the background image, all-HTML text — loses visual interest, looks generic and boring
- Background too busy (focal subject, faces, detailed scene) — text overlay becomes unreadable
- Highly saturated background palette — text becomes hard to read, contrast crashes
- Script/decorative font on a long quote — hard to read, kills professionalism
- Quote longer than ~50 words — doesn't fit a 1:1 social post; recommend trimming or splitting into a carousel
- Missing author handle — no way to trace back to the account
- Brand logo too large — the quote is the focus; the logo stays subtle in a corner
- Skipping brand color — output drifts away from the parent brand

## Prompt composition for the background

- **Subject**: abstract / textural background — NO focal subject (no people, no product, no animal) competing visually with the text
- **Composition**: full-bleed texture OR soft gradient with direction; generous center or left negative space for the text overlay to live
- **Lighting**: soft moody — contrast just enough against the text color (e.g. dark warm background → cream text; light cream background → dark warm text)
- **Palette**: brand secondary color (let the primary become the text color). No brand yet → propose based on style adjectives (e.g. "warm intellectual" → cream paper + soft brown; "tech minimalist" → charcoal + cool slate)
- **Style anchors**: "abstract textural background", "soft gradient", "paper texture", "minimalist composition", "moody atmospheric", "editorial backdrop", "matte finish"

Required negatives: "no text, no letters, no typography, no faces, no people, no detailed subject, no logos, no busy elements, no realistic objects competing with text overlay, no warped letters, no spelling"

## HTML template provided

The HTML output template contains:

```
- Quote text         large serif font (e.g. Playfair Display 56px / Garamond 48px)
                     positioned center or left thirds
                     color: brand primary, contrast with bg
- Author handle      small sans font (e.g. Inter 16px)
                     positioned bottom-left corner
                     color: brand accent (subtle)
- Brand logo         path `assets/brand/logo.svg` or PNG
                     positioned top-right corner OR bottom-right
                     size 48-64px max
- Accent line        1px or 2px line decoration (brand accent color)
                     positioned beneath the quote text (a short line)
- Generous padding   min 80px on each side for a 1:1 1080x1080 canvas
```

CSS uses real fonts (Google Fonts or system serif fallback) — 100% accuracy, all special characters and diacritics render correctly.

## Output structure

```
docs/design/<slug>-bg.png       background generated by gpt-image-2 (NO text)
docs/design/<slug>.html         HTML overlay with text + logo + accent
docs/design/<slug>.md           metadata frontmatter
```

Optionally:
```
docs/design/<slug>-final.png    if exported via puppeteer/Playwright
```

## Examples

- **Mark Chen founder quote** — quote "AI doesn't replace humans. Humans who use AI replace humans who don't." background: abstract circuit pattern, soft teal gradient #00A8A8 → #2C3E50 fade, no subject; HTML overlay: Playfair 48px center cream text + handle "@markchen" bottom-left + brand logo top-right + teal accent line → 1:1 LinkedIn post
- **Lattéa coffee chain IG quote** — quote "The best coffee is the coffee you drink slowly." background: warm paper texture, sepia tone, subtle coffee-ring stains, no focal objects; HTML overlay: Garamond 52px center earth brown #2B1810 + handle "@latteacoffee" + logo bottom-right → 1:1 IG post
- **AI Income Mastery course quote** — quote "Don't wait until you master AI to start earning. Start earning and you'll master AI." background: minimal cream paper with a soft gold ray gradient at the bottom, no focal subject; HTML overlay: serif 48px center dark + handle + small course logo → 1:1 IG carousel slide

## Grill questions

1. Exact quote text (write it precisely, including punctuation and any special characters)?
2. Author handle (e.g. "@markchen", "@latteacoffee", "@aiincomemastery") — which corner?
3. Primary text color + background color contrast (e.g. "cream text on dark warm bg" or "dark brown text on cream paper bg")?
4. Brand logo path (e.g. `assets/brand/logo.svg`) — available, and which corner?
5. Background mood: abstract minimal / paper texture / soft gradient / subtle pattern?
6. Final format: 1:1 IG/LinkedIn post, 4:5 IG portrait, 9:16 IG/FB story?
