agency-skills-suite/agency-visual-generator/SKILL.md

name

description

agency-visual-generator

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: Proporre 3 opzioni

   OPZIONE A — Blocca e richiedi asset:

   • "🔒 Bloccato: servono [descrizione]"
   • Tagga: @agency-archivist con requisiti specifici
   • Attendi upload prima di procedere

   OPZIONE B — Placeholder Mode (consigliata): ⚡

   • Procedi con placeholder generici (color-block, pattern geometrici, testo "[LOGO]", "[FOTO]")
   • Genera asset finale ma documenta in sezione "Assets Placeholder"
   • Esempio placeholder: placeholder_logo_512x512.png (box grigio con testo "LOGO")
   • Non bloccare il workflow — cliente può sostituire dopo

   OPZIONE C — Genera senza asset mancanti:

   • Procedi omettendo la risorsa mancante (es. thumbnail senza logo)
   • Adatta design di conseguenza
   • Documenta: "⏭️ Asset [nome] omesso — design adattato"

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:

# 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:

{
  "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:

# 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 — QA checklist
• platform_patterns.md — Pattern per piattaforma
• 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