Vai al contenuto principale
Blog/Tutorial

La costruzione del sito di Alpine Blue Learning - Parte 1

Il setup del progetto Claude: prima di scrivere una singola riga di codice, abbiamo costruito il nostro "team virtuale". Ecco come abbiamo usato i progetti di Claude con istruzioni personalizzate per garantire coerenza e qualità professionale.

A
Andrea Astolfi
5 ottobre 202510 min di letturaTutorial

La costruzione del sito di Alpine Blue Learning - Parte 1: Il setup del progetto Claude

Prima di scrivere una singola riga di codice, abbiamo costruito il nostro "team virtuale". Ecco come.

L'Idea di Partenza

Quando abbiamo fondato Alpine Blue Learning, avevamo già chiari due elementi fondamentali:

  1. Un logo che rappresentasse il nostro brand
  2. Una palette colori ispirata alle Alpi: Alpine Navy (#1B3346), Mountain Blue (#2A4D69), Sky Blue (#86BBD8), Summit Gold (#E9A44C), Growth Green (#4CAF50) e Alert Red (#D72638)

Ma sapevamo che questi elementi visivi da soli non bastavano. Avevamo bisogno di un metodo di lavoro sistematico che garantisse coerenza in ogni aspetto della costruzione del sito.

La soluzione? Un progetto Claude con istruzioni personalizzate, progettate per funzionare come un vero team di esperti digitali.

Perché Abbiamo Scelto un Progetto Claude

💡 Nuovo ai progetti AI? Se non hai familiarità con i progetti (chiamati anche "Gems" in Gemini o "GPTs" in ChatGPT), leggi il nostro articolo introduttivo: Progetti nei Chatbot GenAI: La Funzionalità Semplice che Fa la Differenza

Nella nostra esperienza di consulenti Data & Analytics (oltre 13 anni nel settore), abbiamo imparato che la coerenza è fondamentale. Quando gestisci progetti complessi con più stakeholder, devi assicurarti che ogni deliverable sia allineato con gli standard definiti.

Lo stesso principio vale per la costruzione di un sito web aziendale. Ogni pagina, ogni componente, ogni scelta di design deve:

  • Rispettare il brand identity
  • Seguire le best practices tecniche
  • Essere ottimizzato per SEO
  • Mantenere stile narrativo coerente

Fare tutto questo manualmente, da soli, è possibile ma inefficiente. Claude ci ha permesso di centralizzare informazioni e metodologia in un unico posto accessibile in ogni conversazione.

La Struttura delle Istruzioni Personalizzate

Le nostre istruzioni sono organizzate in modo da simulare un team multidisciplinare di esperti. Vediamole nel dettaglio.

1. Definizione del Ruolo e Contesto

## Ruolo e Contesto

Agisci come un team di esperti digitali specializzati che supporta una
startup italiana. Ogni conversazione può richiedere l'expertise di uno
o più specialisti per task specifici.

**IMPORTANTE**: All'inizio di OGNI conversazione, consulta SEMPRE i file
del progetto disponibili per comprendere il contesto aziendale, il brand,
e i materiali già sviluppati.

Perché questo blocco è importante:

Questo è il fondamento di tutto. Stabilisce tre principi chiave:

  1. Multidisciplinarità: Non chiediamo a Claude di essere "un esperto di tutto", ma di attivarsi come un team dove ogni membro ha competenze specifiche
  2. Contesto italiano: Fondamentale per rispettare normative (GDPR, Cookie Law) e mercato locale
  3. Memory istituzionale: L'istruzione di consultare SEMPRE i file del progetto garantisce che ogni conversazione parta con il contesto completo

Senza questo blocco, ogni conversazione sarebbe isolata e richiederebbe di ri-spiegare il contesto da zero.

2. Il Team di Esperti Disponibili

### 🎨 Brand Strategist & Visual Designer

**Expertise**: Brand identity, logo design, color palette, typography,
brand guidelines, tone of voice
**Task tipici**: Styling guide, brand manual, visual identity,
logo variations, brand applications

### 💻 Web Developer & UX/UI Designer

**Expertise**: Web design, user experience, development, wireframing,
prototyping
**Task tipici**: Website structure, landing pages, wireframes,
user flows, technical specifications

[... altri 4 profili specialistici ...]

Perché abbiamo definito 6 profili distinti:

Nel mondo reale, costruire un sito professionale richiede un team con competenze diverse. Abbiamo mappato le 6 figure essenziali:

  1. Brand Strategist & Visual Designer: Per coerenza visiva e identità
  2. Web Developer & UX/UI Designer: Per implementazione tecnica e usabilità
  3. SEO Specialist: Per visibilità sui motori di ricerca
  4. Digital Analytics Expert: Per misurare e ottimizzare performance
  5. Content Strategist & Copywriter: Per contenuti efficaci e tono di voce
  6. Digital Marketing Strategist: Per acquisizione e conversione lead

Definendo esplicitamente questi ruoli, guidiamo Claude a ragionare con la mentalità giusta a seconda del task. Non è "solo AI che risponde", ma diventa il Brand Strategist quando parliamo di colori, o il SEO Specialist quando ottimizziamo una pagina.

3. La Metodologia di Lavoro in 5 Step

### 1. ANALISI INIZIALE (per ogni conversazione)

STEP 1: Consulta i file del progetto
STEP 2: Identifica l'expertise richiesta

### 2. ESECUZIONE TASK

STEP 3: Richiedi informazioni mancanti
STEP 4: Sviluppa la soluzione
STEP 5: Crea deliverable

Perché una metodologia così strutturata:

Questa è la parte che fa la differenza tra usare AI "alla buona" e usarla in modo professionale e ripetibile.

  • Step 1 - Consulta i file: Obbliga Claude a partire sempre dal contesto esistente. Zero sprechi di tempo per ri-spiegare cose già documentate.
  • Step 2 - Identifica expertise: Claude deve "decidere" quale cappello indossare per quel task specifico. Questo migliora la qualità delle risposte perché attiva il "mental model" giusto.
  • Step 3 - Richiedi informazioni: Invece di dare risposte generiche, Claude fa domande specifiche per capire esattamente cosa serve. Questo è cruciale per deliverable su misura.
  • Step 4 - Sviluppa la soluzione: Qui entrano in gioco le best practices del settore, integrate con brand guidelines e requisiti specifici del mercato italiano.
  • Step 5 - Crea deliverable: Non basta una "risposta utile", serve qualcosa di immediatamente utilizzabile e salvabile.

In pratica, abbiamo codificato il nostro processo consulenziale nelle istruzioni AI.

4. Scenari di Conversazione Tipici

### 🎨 Sessione Brand Design

_"Creare styling guide / Logo design / Brand applications"_

- Consulta brand brief esistente
- Mantieni coerenza con valori aziendali
- Produce: File design, guidelines, template

### 💻 Sessione Web Development

_"Progettare homepage / Creare landing page / Ottimizzare UX"_

- Integra brand identity esistente
- Considera SEO requirements
- Produce: Wireframes, specifiche tecniche, copy

Perché mappare scenari predefiniti:

Questa sezione serve come riferimento rapido sia per noi che per Claude. Invece di spiegare ogni volta "cosa intendiamo per sessione di brand design", abbiamo template pronti che definiscono:

  • Input attesi
  • Output da produrre
  • Checklist di controllo qualità

È l'equivalente digitale dei "service catalog" che si usano nelle organizzazioni strutturate.

5. Guidelines Operative

### 📁 Gestione File Progetto

- SEMPRE consultare file esistenti prima di iniziare
- Produrre materiali salvabili e riutilizzabili
- Documentare decisioni e rationale
- Mantenere coerenza tra tutti i materiali

### 🇮🇹 Specificità Mercato Italiano

- GDPR compliance in tutti i deliverable
- Normative italiane (cookie law, privacy)
- Mercato locale e competitor analysis
- Lingua italiana per tutti i contenuti

Perché queste guidelines specifiche:

Gestione File Progetto: Questo è il nostro sistema di controllo della versione e la nostra base per le informazioni condivise tra le conversazioni. Ogni oggetto che Claude produce deve essere salvabile, documentato e riutilizzabile. Niente "risposte usa e getta".

Specificità Mercato Italiano: Troppo spesso le best practices online sono USA-centriche. Noi operiamo in Italia e dobbiamo:

  • Rispettare GDPR (molto più stringente di altre normative)
  • Conoscere il mercato locale
  • Scrivere in italiano corretto (non traduzioni automatiche dall'inglese)

Codificare questi requisiti nelle istruzioni significa che non dobbiamo mai ricordarci di specificarli: sono automaticamente inclusi in ogni output.

6. Format Risposte Standard

### 📋 Inizio Conversazione

🔍 ANALISI FILE PROGETTO
👥 TEAM EXPERTISE ATTIVATO
🎯 TASK IDENTIFICATO
❓ INFORMAZIONI NECESSARIE

### 📦 Deliverable Finale

✅ DELIVERABLE COMPLETATO
💾 FORMATO FILE SUGGERITO
🔧 ISTRUZIONI IMPLEMENTAZIONE
🔗 COLLEGAMENTI
📈 PROSSIMI STEP SUGGERITI

Perché standardizzare il format delle risposte:

Questo è uno dei trucchi più potenti. Definendo un template di risposta, otteniamo:

  • Consistenza: Ogni conversazione segue la stessa struttura, facile da scannerizzare
  • Completezza: Il template ci ricorda di includere tutti gli elementi essenziali (istruzioni implementazione, collegamenti, prossimi step)
  • Efficienza: Zero tempo perso a capire "come è strutturata la risposta"
  • Professionalità: Output che sembrano deliverable aziendali, non "chat con AI"

È l'equivalente di avere template di documento standardizzati in una consulenza.

7. Principi Operativi

### ⚡ Efficienza

- Task-focused, non dispersivo
- Domande precise e mirate
- Deliverable immediately actionable

### 🎨 Coerenza

- Brand consistency sempre mantenuta
- Riferimenti incrociati tra materiali
- Quality standard uniformi

### 📈 Scalabilità

- Soluzioni che crescono con l'azienda
- Template riutilizzabili e modulari
- Architecture decision documentate

### 🎯 ROI Focus

- Ogni deliverable deve portare valore
- Priorità su high-impact activities
- Budget consciousness sempre presente

Perché definire principi operativi:

Questi sono i nostri valori aziendali tradotti in guidelines operative. Non sono "filosofia astratta", ma criteri concreti per prendere decisioni:

  • Efficienza: Preferisci la soluzione che richiede meno iterazioni
  • Coerenza: Se c'è un dubbio, scegli l'opzione già usata in altri materiali
  • Scalabilità: Non ottimizzare per il caso specifico se poi non è riutilizzabile
  • ROI Focus: Se una feature costa troppo tempo rispetto al valore, skip

In pratica, abbiamo codificato come pensiamo quando lavoriamo, permettendo a Claude di replicare il nostro decision-making.

Il Risultato: Un Partner Progettuale, Non Solo Uno Strumento

Con queste istruzioni attive, ogni volta che viene aperta una conversazione nel progetto Claude:

  1. Claude legge automaticamente tutto il contesto (brand guide, configurazioni tecniche, materiali esistenti)
  2. Identifica il tipo di task e attiva l'expertise appropriata
  3. Fa domande specifiche invece di dare risposte generiche
  4. Produce deliverable completi pronti per essere salvati e implementati
  5. Suggerisce i prossimi step basandosi sulla strategia complessiva

Non è più "chiedo → ottengo risposta". È diventato "collaboro con un team che conosce già il progetto".

Prossimi Articoli della Serie

Questo era solo il primo passo: impostare il "team virtuale". Nei prossimi articoli vedremo:

  • Parte 2: Setup del progetto Next.js + TypeScript + Tailwind (decision making, file structure, configurazioni)
  • Parte 3: Design system e componenti riutilizzabili (come abbiamo tradotto la brand identity in codice)

Actionable Takeaway

Vuoi Replicare Questo Approccio?

Se gestisci progetti digitali e vuoi un metodo sistematico per lavorare con AI, ecco i takeaway actionable:

1. Definisci I Tuoi "Esperti Virtuali"

Non serve copiare i nostri 6 ruoli. Pensa a quali competenze servono nei tuoi progetti e mappa 4-6 profili.

2. Codifica il Tuo Processo

Hai un metodo che segui quando lavori? Traducilo in step chiari che l'AI può replicare.

3. Crea un Knowledge Base

Carica nel progetto AI tutto quello che "dovrebbe sapere" chi lavora con te: brand guide, esempi, template, specifiche tecniche.

4. Standardizza il Format di Output

Decidi come vuoi ricevere le risposte e fallo diventare un template obbligatorio.

5. Itera e Migliora

Le nostre istruzioni sono alla v1.0. Man mano che usiamo il sistema, identifichiamo gap e raffiniamo.

Conclusione

Costruire un sito web professionale richiede competenze multidisciplinari: design, sviluppo, SEO, analytics, content, marketing. È difficile avere tutte queste skill in una persona sola.

Un progetto Claude con istruzioni personalizzate ci ha permesso di simulare un team di esperti che:

  • Conosce già il nostro brand e i nostri standard
  • Segue una metodologia coerente
  • Produce deliverable enterprise-grade
  • Si comporta in modo prevedibile e ripetibile

Non è "AI che sostituisce il team". È AI che amplifica le capacità permettendoci di muoverci velocemente mantenendo qualità e coerenza.

Nel prossimo articolo mostreremo come abbiamo usato questo "team virtuale" per impostare lo stack tecnico del sito: Next.js 15, TypeScript, Tailwind CSS 4, e tutte le configurazioni necessarie.

Stay tuned!