---
name: agency-visual-generator
description: "Generare asset visuali (card, carousel, thumbnail) per social e YouTube basati su content approvato e style guide. Usare quando: (1) post social needs visual, (2) YouTube thumbnail, (3) carousel Instagram/LinkedIn. PRIMA di generare: leggi {project}/assets/catalog.md per risorse disponibili. Se mancano risorse, richiedi @agency-archivist. Output: Asset PNG/webp in cartella client, QA visual compilato."
---

# Agency Visual Generator — Asset Visuali

Genera asset visuali platform-ready basati su content approvato e style guide.

## Quando Usare

- **Social post:** Creare visual per post in queue
- **YouTube:** Thumbnail per video
- **Carousel:** Instagram/LinkedIn multi-slide
- **Brand assets:** Immagini coordinate per cliente

---

## Input

| Input | Tipo | Validazione |
|-------|------|-------------|
| `project_path` | string | Percorso progetto (cartella di lavoro) |
| `content_files` | array | Post o script che richiedono visual |
| `style_guide` | object | Style guide cliente (colori, font) |
| `asset_type` | string | "card" / "carousel" / "thumbnail" |
| `platform` | string | "linkedin" / "instagram" / "youtube" |

---

## Processo

### Fase 1: Analisi Richiesta

**Obiettivo:** Capire che asset serve.

**Azioni:**

1. Leggi content file (post o script)
2. Identifica:
   - Piattaforma target
   - Tipo asset (card, carousel, thumbnail)
   - Copy da includere (hook, CTA)
   - Visual brief (se presente)

3. Verifica aspect ratio richiesto:
   - **LinkedIn card:** 1200x627px (1.91:1)
   - **Instagram carousel:** 1080x1350px (4:5)
   - **YouTube thumbnail:** 1280x720px (16:9)

---

### Fase 2: Risorse e Style Guide Check

**Obiettivo:** Verificare risorse disponibili e caricare style guide.

**Azioni:**

1. **LEGGI CATALOGO RISORSE:**
   - Apri `{project}/assets/catalog.md`
   - Cerca risorse per il task:
     - Logo: `#logo`, `#brand`
     - Foto prodotto: `#prodotto`, `#product`
     - Immagini team: `#team`, `#people`
     - Sfondi: `#stock`, `#background`
   
2. **Se risorse mancanti:**
   - **FERMATI** e segnala: "🔒 Bloccato: servono [descrizione]"
   - Tagga: @agency-archivist
   - Specifica requisiti:
     ```
     Per generare [tipo asset], servono:
     - [ ] Logo aziendale (PNG trasparente, minimo 512x512px)
     - [ ] Foto prodotto (sfondo bianco, minimo 1000x1000px)
     ```
   - **Attendi** che archivist carichi e sblocchi

3. **Carica style guide:**
   - Cerca `{project}/design/style_guide.md` o `{project}/assets/brand/style_guide.md`
   - Se esiste: Carica colori, font, logo path
   - Se NON esiste: Crea draft e chiedi approvazione

4. **Recupera logo da catalogo:**
   - Usa path da `catalog.md` (es. `assets/images/logo/logo_primary.png`)
   - Se multiplo: Scegli quello primario o chiedi conferma

**Template Style Guide:**

```markdown
# Style Guide — {Client}

## Colors
- Primary: {hex}
- Secondary: {hex}
- Text: {hex}
- Background: {hex}

## Fonts
- Primary: {font-family}
- Secondary: {font-family}

## Logo
- URL: {logo_url}
- Usage: {note}
```

---

### Fase 3: Compilazione JSON Template

**Obiettivo:** Preparare prompt per generazione.

**Azioni:**

1. Carica template appropriato da `core/templates/visual/`:
   - `linkedin_card.json`
   - `instagram_carousel.json`
   - `youtube_thumbnail.json`

2. Compila campi:
   - `text` (headline, sub, CTA)
   - `colors` (da style guide)
   - `fonts` (da style guide)
   - `logo` (se disponibile)
   - `imagery` (descrizione visual)

**Esempio YouTube Thumbnail JSON:**

```json
{
  "format": "youtube_thumbnail",
  "dimensions": { "width": 1280, "height": 720 },
  "text": {
    "headline": "3 Errori Comuni",
    "sub": "Che Tutti Fanno in {Settore}",
    "cta": "GUARDA ORA"
  },
  "colors": {
    "background": "#1a1a2e",
    "text": "#ffffff",
    "accent": "#e94560"
  },
  "fonts": {
    "headline": "Inter Bold 72px",
    "sub": "Inter Regular 36px"
  },
  "imagery": "Foto persona sorpresa, lato destro, sfondo sfocato"
}
```

---

### Fase 4: Generazione Immagine

**Obiettivo:** Generare asset con tool configured.

**Azioni:**

1. Usa tool di generazione immagini (OpenClaw integration o servizio esterno)
2. Passa JSON template come prompt strutturato
3. Genera immagine PNG/webp
4. Salva in:
   - `{project}/assets/social/{post_id}.png`
   - `{project}/assets/youtube/thumbnails/{ep_id}.png`
   - `{project}/assets/social/carousels/{id}/slide_01.png`, etc.

5. Aggiorna content file con `asset_path`

---

### Fase 5: Visual QA

**Obiettivo:** Verificare qualità asset.

**Azioni:**

1. Usa checklist da `../agency-shared-references/references/qa_visual.md`:

**Readability:**
- [ ] Text readable at mobile size (320px)
- [ ] Strong contrast text/background
- [ ] Headline <= 8 words

**Brand:**
- [ ] Colors match style guide
- [ ] Fonts match style guide
- [ ] No off-brand elements

**Message:**
- [ ] One clear idea per image
- [ ] Visual supports hook/CTA
- [ ] No misleading visuals

**Technical:**
- [ ] Correct aspect ratio
- [ ] No artifacts / broken text
- [ ] Safe margins for UI overlays

2. Registra risultato in `{project}/assets/qa/qa_visual.md`

**Template:**

```markdown
# QA Visual — {Asset Name}

**Data:** 2026-03-09
**Asset:** {path}

## Checklist

| Categoria | Check | Risultato |
|-----------|-------|-----------|
| Readability | Text mobile-size | ✅ Pass |
| Readability | Contrast | ✅ Pass |
| Brand | Colors | ✅ Pass |
| Brand | Fonts | ⚠️ Fallback usato |
| Message | One idea | ✅ Pass |
| Technical | Aspect ratio | ✅ Pass |

## Esito

**Status:** APPROVED / NEEDS_FIX

**Note:** {Eventuali fix richiesti}
```

---

## Output

| File | Formato | Descrizione |
|------|---------|-------------|
| `{project}/assets/social/*.png` | PNG/webp | Card social |
| `{project}/assets/social/carousels/*/slide_*.png` | PNG | Carousel slides |
| `{project}/assets/youtube/thumbnails/*.png` | PNG | YouTube thumbnail |
| `{project}/assets/qa/qa_visual.md` | Markdown | QA checklist |

---

## References

- [qa_visual.md](../agency-shared-references/references/qa_visual.md) — QA checklist
- [platform_patterns.md](../agency-shared-references/references/platform_patterns.md) — Pattern per piattaforma
- [resource_types.md](../agency-shared-references/references/resource_types.md) — Tipologie risorse e use case

---

## Note

**Edge Cases:**

- **Nessuno style guide:** Crea draft e chiedi approvazione
- **Testo troppo lungo:** Adatta copy (max 8 parole headline)
- **Logo mancante:** Procedi senza, segnala nel QA

**Limitazioni:**

- Richiede integrazione tool generazione immagini
- Quality varia in base a prompt e tool
- Iterazioni possono essere necessarie per perfezionare

---

_Skill generata da framework-translator_