InsanityLab-web/.superpowers/sdd/task-2-report.md

Task 2 Report — Estrazione e mappatura asset immagine da Figma

Data: 2026-07-01
Fonte: ../FigmaDoc/Web Insanity.fig (60 immagini uniche + ~66 duplicati = 126 estratte)
Destinazione: src/assets/img/ (31 file) + public/img/ (2 loghi)

---

Mappature completate

Hero

File destinazione	Hash sorgente	Descrizione
hero-1.jpg	8b71f158...	Uomo con palla medica (medicine ball) che la tiene verso donna in posizione crunch, palestra scura — "uomo con palla medica + donna" ✓

Info sezioni (PERFORMANCE / BALANCE / LONGEVITY)

File destinazione	Hash sorgente	Descrizione
info-performance.jpg	0f803439...	Uomo muscoloso in planche su sfondo grigio neutro
info-balance.jpg	432d397a...	Due donne sedute schiena a schiena in abiti sportivi beige/neutri
info-longevity.jpg	d7fcf0aa...	Donna anziana in posizione push-up — longevità attiva

Feature sezioni (immagini più grandi per ciascun pilastro)

File destinazione	Hash sorgente	Descrizione
feature-performance.jpg	6d602573...	Uomo con chalk sulle mani — preparazione sollevamento pesi, performance atletica
feature-balance.jpg	16e611de...	Gruppo yoga all'aperto al tramonto — equilibrio e benessere
feature-longevity.jpg	98f1f8d2...	Donna anziana in piedi con bottiglia d'acqua, outfit sportivo beige — longevità sana

Quote background

File destinazione	Hash sorgente	Descrizione
quote-bg.jpg	28e8157d...	Scritta "PERFORMANCE. BALANCE. LONGEVITY." su muro di intonaco — elemento visivo identitario

Training programs

File destinazione	Hash sorgente	Descrizione
training-one-to-one.jpg	85808a0c...	Trainer e cliente a colloquio in palestra, tablet in mano — consulenza personalizzata
training-small-groups.jpg	bb632b8d...	Due donne con manubri leggeri in posizione atletica — small group training
training-performance-class.jpg	91aa82b5...	Grande gruppo in sala fitness/danza con palle fitball — performance class
training-fit-remote.jpg	86c1363b...	Donna a casa sul tappetino con laptop — allenamento remoto online

Team Trainer (homepage — 4 ritratti luce dorata)

File destinazione	Hash sorgente	Persona identificata
team-donata.jpg	0b6cf694...	Donna capelli lunghi scuri dritti, luce dorada laterale — Donata ✓
team-nicola.jpg	1cc33c41...	Uomo barba folta, turtleneck scuro, luce dorata — Nicola ✓
team-eleonora.jpg	a75ca105...	Donna capelli biondi/chiari, stessa luce dorata — Eleonora ✓
team-antonello.jpg	e3c84f99...	Uomo occhiali tondi, capelli rasatissimi, luce dorata — Antonello ✓

Il Metodo (4 passi circolari)

File destinazione	Hash sorgente	Step identificato
method-step-1.jpg	88cfcd5f...	Calibro plicometro su addome — valutazione composizione corporea
method-step-2.jpg	d21671bb...	Donna in cucina con verdure fresche e metro — pianificazione nutrizionale
method-step-3.jpg	a3e84d7d...	Silhouette uomo in palestra in controluce — sessione allenamento
method-step-4.jpg	e50b6f78...	Scarpe su tapis roulant — monitoraggio continuo e progressione

Partner loghi

File destinazione	Hash sorgente	Logo identificato
partner-edenred.png	bee22f37...	"Ticket Welfare Edenred" — logo rosso/blu su sfondo trasparente ✓
partner-welbee.png	cf079250...	"welbee" — logo verde su sfondo bianco ✓
partner-aon.png	014a7708...	"Aon" — logo rosso su sfondo bianco ✓
partner-howden.png	872c3679...	"HOWDEN" — logo blu su sfondo bianco ✓

Loghi InsanityLab (public/img/)

File destinazione	Sorgente	Note
logo-dark.png	../Dati/logo-dark.png	Fallback — logo non presente nel file Figma
logo-light.png	../Dati/logo-light.png	Fallback — logo non presente nel file Figma

About page (bonus — non richiesti dal brief)

File destinazione	Hash sorgente	Descrizione
about-exterior.jpg	8ffc5f7a...	Facciata esterna palestra/studio InsanityLab, sera
about-team-group.jpg	32ecd00a...	Foto di gruppo team InsanityLab in bianco e nero
about-training-group.jpg	d4608b10...	Gruppo che salta con kettlebell in sala beige
about-trainer-1.jpg	dafcc193...	Trainer donna capelli scuri ondulati, luce dorata
about-trainer-2.jpg	9c50f1d3...	Trainer donna capelli scuri più corti, matura, luce dorata
about-trainer-3.jpg	c51a49b9...	Trainer donna capelli neri lisci, sorriso, sfondo chiaro
about-trainer-4.jpg	3341a11b...	Trainer uomo giovane senza barba, turtleneck scuro

---

Immagini attese ma non trovate nel Figma

Nome atteso	Motivo mancanza	Azione intrapresa
logo-dark.png	Assente in Web Insanity.fig	Fallback da ../Dati/logo-dark.png ✓
logo-light.png	Assente in Web Insanity.fig	Fallback da ../Dati/logo-light.png ✓

Tutti e 4 i loghi partner sono stati trovati nel Figma. Nessuna altra immagine richiesta dal brief risulta mancante.

---

Dimensioni finali

src/assets/img/   3.7 MB  (31 file JPG + 4 PNG partner loghi)
public/img/       ~3.4 KB  (2 PNG logo: logo-dark.png 1.7 KB, logo-light.png 1.7 KB)

Tutte le immagini sono ≤ 1400 px larghezza e ≤ 1600 px altezza. Il file più pesante è quote-bg.jpg a 460 KB. Nessun file supera 500 KB.

Aggiornato dopo fix round 2 — i numeri precedenti (3.4 MB / nessun file >400 KB) erano errati: la pipeline originale non vincolava l'altezza, lasciando immagini portrait a 2-3 MB ciascuna.

---

Note tecnica — PNG → JPG

Le foto trainer e training erano estratte dal Figma come PNG lossless (6–8 MB ciascuna). Convertite a JPG qualità 85 con resize a 1200 px max → risparmio ~98% per file. I loghi partner restano PNG per preservare sfondo trasparente.

Il file asset-map.json referenzia gli hash originali (estensione .png/.jpg come estratti). I file di destinazione finali hanno tutti estensione .jpg (eccetto loghi partner .png), il che diverge dai nomi originali nel map ma i file in src/assets/img/ riflettono il formato convertito.

---

Conteggio

• Mappate e presenti: 33 (31 in src/assets/img + 2 in public/img)
• Mancanti nel Figma: 2 (logo-dark, logo-light) → risolti con fallback
• Immagini estratte totali: 126 (inclusi ~66 duplicati)
• Lasciate in assets-src/ (gitignored): 126 file sorgente

---

Fix round 1

Data: 2026-07-02

Cosa cambiato

1. scripts/asset-map.json — rimossa sezione "public/img" (chiavi non-hash, rompeva pipeline dopo extract-fig-images.sh). Aggiunta sezione top-level "fallbacks" con struttura { "public/img": { "../Dati/logo-dark.png": "logo-dark.png", "../Dati/logo-light.png": "logo-light.png" } }. Le destinazioni in src/assets/img mantengono l'estensione REALE del sorgente estratto da Figma (.png per PNG Figma, .jpg per JPEG già presenti in assets-src).

2. scripts/apply-asset-map.mjs — aggiunto commento d'intestazione sull'ordine pipeline (extract → apply → optimize). Aggiunto loop fallbacks: copia da path relativo alla root del repo invece che da assets-src/, senza exit 1 per file assenti nel .fig.

3. scripts/optimize-assets.sh (nuovo) — bash, set -euo pipefail. Converte tutti i PNG non-partner in src/assets/img/ → JPG qualità 85 con resize 1400x>, poi ridimensiona JPG già esistenti se larghezza > 1400px. Idempotente (nullglob su .png).

Output verifica riproducibilità

node scripts/apply-asset-map.mjs → "Copiate 33 immagini"
./scripts/optimize-assets.sh    → 16 PNG→JPG, 5 JPG ridimensionati (hero-1, info-balance, info-longevity, method-step-1, method-step-2)
git status --short              → elenco file identico al pre-fix (31 img + 4 PNG partner)
                                   18 file binari rigenerati (ricompressione diversa da conversione manuale originale)
                                   → ricommittati: repo = output pipeline ✓

Esito punto 4 — bassa risoluzione

• method-step-3.jpg (184×276): sorgente in assets-src/a3e84d7daf0b25c750ef694f4b9fc10bf0f2f1a8.jpg è già 184×276 — stessa risoluzione del file committato. Nessuna versione ad alta risoluzione disponibile in assets-src/. Richiede sorgente migliore dal cliente.
• about-team-group.jpg (270×480): sorgente in assets-src/32ecd00a20321e58c700fbaf739e53ac3bf03876.png è già 270×480. Nessuna versione ad alta risoluzione disponibile. Richiede sorgente migliore dal cliente.

---

Fix round 2

Data: 2026-07-02

Numeri finali

src/assets/img/   3.7 MB  totale (31 JPG + 4 PNG partner)

Top-5 per peso:

File	Dimensioni	Peso
quote-bg.jpg	1087×1600	460 KB
info-performance.jpg	1200×1500	256 KB
info-longevity.jpg	1095×1600	248 KB
training-performance-class.jpg	1400×1400	240 KB
about-exterior.jpg	1400×781	188 KB

Nessun file supera 500 KB. Precedente info-longevity.jpg era 2.7 MB, info-balance.jpg 2.0 MB.

Cosa cambiato

1. scripts/optimize-assets.sh — vincolo resize cambiato da '1400x>' (solo larghezza) a '1400x1600>' (larghezza E altezza). Qualità JPG da 85 a 83. Tutti i JPG già esistenti vengono ri-codificati a q83 con nuovo vincolo (loop separato, skip file appena convertiti per evitare doppia codifica). Risultato: portrait da 2-3 MB → 248-460 KB.

2. scripts/asset-map.json — aggiunta chiave "_nota" in testa per documentare la conversione PNG→JPG operata da optimize-assets.sh (JSON non supporta commenti, chiave dedicata con prefisso _).

3. scripts/apply-asset-map.mjs — aggiunto destDir.startsWith('_') nella condizione di skip, così le chiavi meta _* del JSON vengono ignorate nella pipeline.

Esito idempotenza

Terza esecuzione apply-asset-map.mjs + optimize-assets.sh: md5sum su tutti i .jpg identico prima e dopo → IDEMPOTENTE ✓

Esito verifica loghi

public/img/logo-dark.png (130×19, 1725 B) e logo-light.png (135×19, 1701 B) sono identici ai file sorgente in ../Dati/logo-dark.png e ../Dati/logo-light.png (stessa dimensione byte-level). Non sono placeholder: sono i loghi reali InsanityLab copiati dalla sezione fallbacks di asset-map.json tramite apply-asset-map.mjs. Le dimensioni in pixel ridotte (130×19 px) sono caratteristiche del PNG sorgente in Dati/, non di un errore di pipeline.

---

Fix round 3

Data: 2026-07-02

Problema chiuso

public/img/logo-dark.png e logo-light.png contenevano i loghi del template "PROWESS++" copiati da ../Dati/ (sorgente errato). Sostituiti con i loghi reali "insanitylab" estratti vettorialmente dal PDF Figma.

Metodo

Sorgente: ../FigmaDoc/Homepage.pdf (1334×10460 pt, 1 pagina).

Render esplorativi a 72–150 dpi per individuare le zone logo:

• Logo dark (header, fondo bianco): riga nav in alto, x≈25pt, y≈10pt
• Logo light (footer, fondo scuro srgb(58,41,41)): sezione footer, y≈8490pt

Estrazione finale con pdftoppm -r 300, poi ImageMagick:

• Dark: -fuzz 8% -transparent white -trim -resize 600x -strip
• Light: -crop 850x660+130+60 (esclude tagline e colonne destra), -fuzz 12% -transparent 'srgb(58,41,41)' -trim -resize 600x -strip

-strip su entrambi garantisce idempotenza md5sum tra esecuzioni successive.

Coordinate pdftoppm a 300 dpi (pixel)

Logo	-x	-y	-W	-H	crop interno
dark	104	41	895	250	—
light	0	35375	1800	833	850x660+130+60

Dimensioni finali

File	Dimensioni	Tipo
public/img/logo-dark.png	600×108 px	TrueColorAlpha (PNG trasparente)
public/img/logo-light.png	600×342 px	TrueColorAlpha (PNG trasparente)

Aggiornamenti pipeline

• Creato scripts/extract-logos.sh (bash, set -euo pipefail, coordinate fisse, idempotente)
• scripts/asset-map.json: rimossa sezione fallbacks (loghi ora da extract-logos.sh, non da ../Dati)
• scripts/apply-asset-map.mjs: commento pipeline aggiornato a step 4
• Ordine pipeline: extract-fig-images.sh → apply-asset-map.mjs → optimize-assets.sh → extract-logos.sh

Verifica visiva

• logo-dark.png: icona onda/battito cardiaco beige + scritta "insanitylab" scura, layout orizzontale, sfondo trasparente. Nessun residuo PROWESS++.
• logo-light.png: icona onda/battito cardiaco beige sopra, scritta "insanitylab" beige sotto, layout stacked, sfondo trasparente. Nessun residuo PROWESS++.

Idempotenza

md5sum run1 = md5sum run2 → IDEMPOTENTE ✓