264 lines
6.6 KiB
Markdown
264 lines
6.6 KiB
Markdown
---
|
|
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_
|