Sei mesi fa servivano uno sviluppatore backend, un ingegnere DevOps e due settimane. Oggi bastano una singola frase e Claude. Ecco l'architettura completa - e perché la maggior parte degli sviluppatori non l'ha ancora capito.
Il modello mentale che la maggior parte delle persone ha dell'IA è sbagliato.
Loro pensano: Assistente IA → fai una domanda → risponde.
La realtà nel 2026: Agente IA → descrivi un sistema → lo costruisce, lo distribuisce e lo collega al tuo ambiente. Non un prototipo. Non uno snippet di codice. Un'applicazione funzionante.
Questo cambiamento ha un nome: Architettura per App Generativa. E lo stack che la rende pratica - Claude + Obsidian + MCP - è disponibile per chiunque, subito.
1. Cosa significa realmente Architettura per App Generativa
Sviluppo software tradizionale:
1Idea → Specifica → Progettazione → Sviluppo frontend → Sviluppo backend2→ Configurazione database → Integrazione API → Test → Rilascio3Durata: settimane. Costo: migliaia.
Architettura per App Generativa:
1Idea → Prompt → Sistema funzionante2Durata: minuti. Costo: token API.
L'agente IA non si limita a scrivere codice. Esegue un vero e proprio Ciclo Agentico sotto il cofano:
Passo 1 - Scomposizione
La tua richiesta astratta ("crea un CRM per un autolavaggio") viene scomposta in decine di sotto-attività atomiche: schema del database, componenti dell'interfaccia, logica di notifica, flusso di autenticazione, endpoint API.
Passo 2 - Mappatura dell'ambiente tramite MCP
Attraverso il Model Context Protocol, l'agente capisce istantaneamente a quali strumenti ha accesso - il tuo filesystem, i pacchetti installati, i servizi in esecuzione, le API disponibili.
Passo 3 - Costruzione e test iterativi
L'agente scrive codice, lo esegue, rileva errori di compilazione, li corregge e riesegue i test - in autonomia - finché il sistema non funziona correttamente.
Passo 4 - Rilascio contestuale
L'output non è un file di testo con codice. È un ambiente locale live o un'applicazione web distribuibile.
Questa è la differenza tra uno strumento che assiste gli sviluppatori e un sistema che sostituisce completamente la pipeline di sviluppo.
2. Claude come motore - tre modalità di rilascio
Modalità 1 - Claude Artifacts
Il percorso più veloce dal prompt all'applicazione funzionante. Quando chiedi a Claude di costruire qualcosa, apre una finestra Artifact interattiva e assembla, compila ed esegue un'applicazione web completa in tempo reale - React, HTML, JavaScript - mentre guardi.
Puoi interagire con l'app in esecuzione all'interno dell'Artifact, iterare in linguaggio naturale ed esportare l'archivio completo.
Prompt che produce un tracker finanziario pronto per la produzione:
1Crea un'applicazione per il tracciamento delle finanze personali con:23CARATTERISTICHE:4- Registro transazioni (aggiungi/modifica/elimina con categorie)5- Vista budget mensile con barre di avanzamento6- Tracker portafoglio crypto che recupera prezzi live dall'API CoinGecko7- Calcolo del patrimonio netto aggiornato in tempo reale8- Attivazione della modalità scura910REQUISITI TECNICI:11- Applicazione React in un unico file12- Solo useState + useEffect (nessuna gestione dello stato esterna)13- Tailwind CSS per lo styling14- Fetch da API pubbliche (nessuna autenticazione richiesta)15- Responsive per dispositivi mobili1617DATI:18- Persisti su localStorage tra le sessioni19- Esporta le transazioni come CSV2021Output: applicazione completa e autonoma pronta per il rilascio.
Cosa restituisce Claude Artifacts - un'applicazione React completa:
1import { useState, useEffect } from "react";23const CATEGORIES = ["Casa","Cibo","Trasporti","Intrattenimento","Salute","Risparmio","Reddito","Crypto","Altro"];4const CRYPTO_IDS = { BTC: "bitcoin", ETH: "ethereum", SOL: "solana" };56export default function FinanceTracker() {7 const [transactions, setTransactions] = useState(() =>8 JSON.parse(localStorage.getItem("transactions") || "[]")9 );10 const [cryptoPrices, setCryptoPrices] = useState({});11 const [form, setForm] = useState({ description:"", amount:"", category:"Altro", type:"spesa", date:"" });12 const [darkMode, setDarkMode] = useState(false);1314 useEffect(() => {15 const ids = Object.values(CRYPTO_IDS).join(",");16 fetch(`https://api.coingecko.com/api/v3/simple/price?ids=${ids}&vs_currencies=usd`)17 .then(r => r.json())18 .then(data => {19 const prices = {};20 Object.entries(CRYPTO_IDS).forEach(([sym, id]) => { prices[sym] = data[id]?.usd || 0; });21 setCryptoPrices(prices);22 });23 }, []);2425 useEffect(() => {26 localStorage.setItem("transactions", JSON.stringify(transactions));27 }, [transactions]);2829 const addTransaction = () => {30 if (!form.description || !form.amount) return;31 setTransactions(prev => [...prev, { ...form, id: Date.now(), amount: parseFloat(form.amount),32 date: form.date || new Date().toISOString().split("T")[0] }]);33 setForm({ description:"", amount:"", category:"Altro", type:"spesa", date:"" });34 };3536 const totalIncome = transactions.filter(t => t.type === "reddito").reduce((s,t) => s + t.amount, 0);37 const totalExpenses = transactions.filter(t => t.type === "spesa").reduce((s,t) => s + t.amount, 0);38 const netWorth = totalIncome - totalExpenses;3940 const bg = darkMode ? "#0D0D0D" : "#F9F7F4";41 const card = darkMode ? "#1A1A1A" : "#FFF";42 const text = darkMode ? "#F0F0F0" : "#1A1A1A";43 const border = darkMode ? "#2A2A2A" : "#E8E8E8";4445 return (46 <div style={{ minHeight:"100vh", background:bg, color:text, fontFamily:"system-ui, sans-serif" }}>47 <div style={{ maxWidth:800, margin:"0 auto", padding:"24px 16px" }}>4849 <div style={{ display:"flex", justifyContent:"space-between", marginBottom:24 }}>50 <div>51 <h1 style={{ fontSize:22, fontWeight:500, margin:0 }}>Tracker Finanziario</h1>52 <p style={{ margin:"4px 0 0", fontSize:13, color: netWorth >= 0 ? "#22C55E" : "#EF4444" }}>53 Patrimonio netto: ${netWorth.toFixed(2)}54 </p>55 </div>56 <button onClick={() => setDarkMode(!darkMode)}57 style={{ padding:"8px 14px", borderRadius:8, border:`1px solid ${border}`,58 background:card, color:text, cursor:"pointer" }}>59 {darkMode ? "Chiara" : "Scura"}60 </button>61 </div>6263 <div style={{ display:"grid", gridTemplateColumns:"1fr 1fr", gap:10, marginBottom:20 }}>64 {[["Reddito","#22C55E",totalIncome],["Spese","#EF4444",totalExpenses]].map(([label,color,val]) => (65 <div key={label} style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:14 }}>66 <p style={{ margin:0, fontSize:12, color:"#999" }}>{label}</p>67 <p style={{ margin:"4px 0 0", fontSize:20, fontWeight:600, color }}>${val.toFixed(2)}</p>68 </div>69 ))}70 </div>7172 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, padding:16, marginBottom:20 }}>73 <div style={{ display:"grid", gridTemplateColumns:"2fr 1fr 1fr", gap:8, marginBottom:8 }}>74 <input placeholder="Descrizione" value={form.description}75 onChange={e => setForm(p => ({ ...p, description: e.target.value }))}76 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />77 <input type="number" placeholder="Importo" value={form.amount}78 onChange={e => setForm(p => ({ ...p, amount: e.target.value }))}79 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }} />80 <select value={form.type} onChange={e => setForm(p => ({ ...p, type: e.target.value }))}81 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>82 <option value="spesa">Spesa</option>83 <option value="reddito">Reddito</option>84 </select>85 </div>86 <div style={{ display:"grid", gridTemplateColumns:"2fr auto", gap:8 }}>87 <select value={form.category} onChange={e => setForm(p => ({ ...p, category: e.target.value }))}88 style={{ padding:"9px 12px", borderRadius:8, border:`1px solid ${border}`, background:bg, color:text, fontSize:13 }}>89 {CATEGORIES.map(c => <option key={c}>{c}</option>)}90 </select>91 <button onClick={addTransaction}92 style={{ padding:"9px 20px", borderRadius:8, background:"#E8692A",93 color:"#fff", border:"none", cursor:"pointer", fontSize:13, fontWeight:500 }}>94 Aggiungi95 </button>96 </div>97 </div>9899 <div style={{ background:card, border:`1px solid ${border}`, borderRadius:10, overflow:"hidden" }}>100 <p style={{ margin:0, padding:"12px 16px", borderBottom:`1px solid ${border}`, fontSize:13, fontWeight:500 }}>101 Transazioni ({transactions.length})102 </p>103 {transactions.slice().reverse().map(t => (104 <div key={t.id} style={{ display:"flex", justifyContent:"space-between",105 alignItems:"center", padding:"11px 16px", borderBottom:`1px solid ${border}` }}>106 <div>107 <p style={{ margin:0, fontSize:13, fontWeight:500 }}>{t.description}</p>108 <p style={{ margin:"2px 0 0", fontSize:12, color:"#999" }}>{t.category} · {t.date}</p>109 </div>110 <span style={{ fontSize:14, fontWeight:600, color: t.type==="reddito" ? "#22C55E" : "#EF4444" }}>111 {t.type==="reddito" ? "+" : "-"}${t.amount.toFixed(2)}112 </span>113 </div>114 ))}115 </div>116 </div>117 </div>118 );119}
Questa è l'applicazione completa. Un singolo prompt. Funziona istantaneamente all'interno di Claude Artifacts.
Modalità 2 - Claude + MCP (rilascio locale)
MCP (Model Context Protocol) dà a Claude accesso diretto al tuo ambiente locale. Un singolo prompt non genera solo codice - crea cartelle sul tuo hard disk, installa pacchetti tramite terminale, scrive file di configurazione e avvia un server locale.
La configurazione MCP che collega Claude al tuo filesystem:
1{2 "mcpServers": {3 "filesystem": {4 "command": "npx",5 "args": [6 "-y",7 "@modelcontextprotocol/server-filesystem",8 "/Users/yourname/Projects"9 ]10 },11 "terminal": {12 "command": "npx",13 "args": ["-y", "@modelcontextprotocol/server-terminal"]14 },15 "sqlite": {16 "command": "npx",17 "args": [18 "-y",19 "@modelcontextprotocol/server-sqlite",20 "--db-path",21 "/Users/yourname/Projects/app.db"22 ]23 }24 }25}
Con questa configurazione attiva, un singolo prompt:
1Crea e rilascia un sistema CRM locale per un'attività di autolavaggio.23Crea il progetto in ~/Projects/carwash-crm/4Installa le dipendenze automaticamente.5Configura un database SQLite con tabelle per:6- clienti (nome, telefono, email, veicolo, note)7- visite (id_cliente, data, servizio, prezzo, stato)8- personale (nome, ruolo, orario)910Crea un'interfaccia web con:11- Ricerca e profili clienti12- Storico visite per cliente13- Dashboard entrate per mese14- Sistema promemoria SMS (integrazione Twilio, solo configurazione)1516Avvia il server di sviluppo al completamento.17Riporta l'URL localhost quando è pronto.
Claude esegue tutto questo end-to-end tramite MCP - creando la struttura di directory, installando i pacchetti Node, scrivendo lo schema del database, costruendo l'interfaccia e avviando il server. Ottieni un URL localhost.
Modalità 3 - Claude Projects con standard aziendali
Carica il tuo kit UI, i token di design, la documentazione API e i requisiti di sicurezza in un Claude Project una volta sola. Ogni sistema che Claude genera successivamente si conformerà automaticamente al tuo stack interno.
1[Il contesto di Claude Project contiene:]2- design-system.md (colori, tipografia, spaziatura)3- api-standards.md (pattern di autenticazione, codici di errore)4- security-policy.md (regole di validazione input, configurazione CORS)5- stack.md (React 18, TypeScript, Tailwind, Prisma, PostgreSQL)67Prompt:8"Crea un modulo di onboarding clienti con verifica email9e inserimento automatico in un database Notion all'invio."1011Output: codice pronto per la produzione che corrisponde esattamente12al tuo stack - nessuna pulizia necessaria.
3. Obsidian come centro di comando IA
Obsidian nel 2026 non è un'app per prendere appunti. È un centro di comando IA personale dove la tua base di conoscenza accumulata diventa il livello di contesto per ogni sistema che costruisci.
Il cambiamento architetturale: il tuo vault non è più solo archiviazione. È RAG (Retrieval Augmented Generation) - una base di conoscenza viva che gli agenti IA interrogano prima di eseguire qualsiasi attività.
Lo stack di plugin che lo fa funzionare:
Smart Connections - indicizza l'intero vault e invia le note pertinenti come contesto con ogni chiamata IA.
Obsidian Copilot - collega il tuo vault direttamente all'API di Claude. Configura una volta:
12 "provider": "anthropic",3 "model": "claude-opus-4-8",4 "apiKey": "YOUR_ANTHROPIC_KEY",5 "systemPrompt": "Sei un architetto di sistemi. Hai accesso all'intero vault di conoscenza dell'utente come contesto. Quando costruisci sistemi, fai riferimento alle loro note esistenti, decisioni passate e pattern consolidati. Output: codice funzionante + struttura file Obsidian.",6 "contextWindow": {7 "includeActiveFile": true,8 "includeLinkedFiles": true,9 "includeRecentFiles": 10,10 "includeFolders": ["Projects", "Systems", "Decisions"]11 }12}
Canvas come interfaccia di progettazione sistemi
Un singolo prompt crea una Canvas Obsidian interattiva dove Claude dispone l'architettura completa del sistema come blocchi collegati.
1Prompt in Obsidian Canvas:2"Progetta una pipeline di produzione di contenuti per il mio account Twitter.3Pubblico 3 articoli a settimana e gestisco 5 accordi sponsorizzati.4Fai riferimento alle mie note esistenti del calendario dei contenuti."56Output: Canvas con blocchi collegati per:7→ Ideazione contenuti (recupera dalle tue note di interesse)8→ Flusso Bozza → Revisione → Pubblicazione9→ Tracciamento sponsor con avvisi di scadenza10→ Dashboard di analisi11→ Logica di pubblicazione incrociata automatica12→ Ogni blocco si collega al file Obsidian pertinente
L'output Canvas che Claude genera come file strutturato:
1{2 "nodes": [3 {4 "id": "ideazione",5 "type": "file",6 "file": "Sistemi/PipelineContenuti/Ideazione.md",7 "x": 0, "y": 0, "width": 300, "height": 200,8 "color": "1"9 },10 {11 "id": "bozza",12 "type": "file",13 "file": "Sistemi/PipelineContenuti/Bozza.md",14 "x": 400, "y": 0, "width": 300, "height": 200,15 "color": "3"16 },17 {18 "id": "sponsor",19 "type": "file",20 "file": "Sistemi/PipelineContenuti/TracciamentoSponsor.md",21 "x": 0, "y": 300, "width": 300, "height": 200,22 "color": "5"23 },24 {25 "id": "analisi",26 "type": "file",27 "file": "Sistemi/PipelineContenuti/Analisi.md",28 "x": 400, "y": 300, "width": 300, "height": 200,29 "color": "6"30 }31 ],32 "edges": [33 {34 "id": "e1",35 "fromNode": "ideazione", "fromSide": "right",36 "toNode": "bozza", "toSide": "left",37 "label": "concetti approvati"38 },39 {40 "id": "e2",41 "fromNode": "sponsor", "fromSide": "right",42 "toNode": "bozza", "toSide": "bottom",43 "label": "integrazione brief"44 }45 ]46}
4. LLM locali per la massima privacy
Per dati sensibili - sistemi clienti, strumenti finanziari, tooling interno - instrada tramite un modello locale invece di un'API cloud. Zero dati lasciano la tua macchina.
1# Installa Ollama2curl -fsSL https://ollama.com/install.sh | sh34# Scarica un modello capace di codificare5ollama pull llama3.2:latest6# o per una generazione di codice più potente:7ollama pull qwen2.5-coder:32b89# Avvia il server locale10ollama serve11# Gira su localhost:11434
Configura Obsidian Copilot per usare l'endpoint locale:
1{2 "provider": "ollama",3 "model": "qwen2.5-coder:32b",4 "baseUrl": "http://localhost:11434",5 "systemPrompt": "Sei un costruttore di sistemi locale con accesso al filesystem dell'utente tramite MCP. Costruisci sistemi completi e funzionanti. Non inviare mai dati a API esterne senza istruzioni esplicite."6}
Il ponte modello locale + MCP:
1import requests2import json3from pathlib import Path4from watchdog.observers import Observer5from watchdog.events import FileSystemEventHandler67OBSIDIAN_INBOX = Path.home() / "Obsidian" / "AI-Inbox"8PROJECTS_DIR = Path.home() / "Projects"9OLLAMA_URL = "http://localhost:11434/api/generate"1011class InboxWatcher(FileSystemEventHandler):12 """13 Osserva la cartella AI-Inbox di Obsidian.14 Quando appare un nuovo file .md, trattalo come un prompt di build.15 Passalo all'LLM locale -> esegui tramite MCP -> riporta il risultato.16 """1718 def on_created(self, event):19 if not event.src_path.endswith(".md"):20 return2122 prompt_file = Path(event.src_path)23 prompt = prompt_file.read_text()2425 print(f"[Inbox] Nuovo prompt: {prompt_file.name}")26 self.execute_prompt(prompt, prompt_file.stem)2728 def execute_prompt(self, prompt: str, project_name: str):29 response = requests.post(OLLAMA_URL, json={30 "model": "qwen2.5-coder:32b",31 "prompt": f"""Sei un costruttore di sistemi.32 Costruisci questo sistema: {prompt}3334 Output un piano JSON con:35 {{36 "project_dir": "percorso relativo",37 "files": [38 {{"path": "percorso relativo", "content": "contenuto del file"}}39 ],40 "commands": ["npm install", "ecc"],41 "summary": "cosa è stato costruito"42 }}""",43 "stream": False44 })4546 plan = json.loads(response.json()["response"])47 project_dir = PROJECTS_DIR / plan["project_dir"]48 project_dir.mkdir(parents=True, exist_ok=True)4950 for file_spec in plan["files"]:51 file_path = project_dir / file_spec["path"]52 file_path.parent.mkdir(parents=True, exist_ok=True)53 file_path.write_text(file_spec["content"])54 print(f"[Build] Creato: {file_path}")5556 result_file = OBSIDIAN_INBOX / f"{project_name}-risultato.md"57 result_file.write_text(58 f"# Build Completato: {project_name}\n\n"59 f"**Posizione:** {project_dir}\n\n"60 f"**Riepilogo:** {plan['summary']}\n\n"61 f"**File creati:** {len(plan['files'])}\n"62 )63 print(f"[Fatto] Risultato scritto in Obsidian")6465if __name__ == "__main__":66 OBSIDIAN_INBOX.mkdir(exist_ok=True)67 observer = Observer()68 observer.schedule(InboxWatcher(), str(OBSIDIAN_INBOX), recursive=False)69 observer.start()70 print(f"[Osservazione] {OBSIDIAN_INBOX}")7172 try:73 while True:74 import time; time.sleep(1)75 except KeyboardInterrupt:76 observer.stop()77 observer.join()
Inserisci un file .md nella tua cartella AI-Inbox di Obsidian con un prompt di build. Il ponte lo preleva, lo instrada attraverso il modello locale, costruisce il sistema nella tua cartella Projects e scrive una nota di completamento in Obsidian.
5. Il flusso di lavoro completo - dall'idea al sistema distribuito
1PASSO 1 - Input2In Obsidian, nel tuo pannello IA, scrivi:3"Sistema finanziario personale con integrazione crypto4e tracciamento budget mensile."5Premi Genera.67PASSO 2 - Assemblaggio contesto8Il plugin Smart Connections scansiona il tuo vault.9Trova le tue note finanziarie degli ultimi 3 mesi.10Le invia come contesto all'API di Claude.1112PASSO 3 - Architettura13Claude (Opus 4.8) progetta il sistema:14- Schema del database15- Componenti dell'interfaccia16- Integrazioni API17- Struttura dei file1819PASSO 4 - Build20Claude (Sonnet 5) implementa tramite MCP:21- Crea ~/Projects/finance-tracker/22- Installa le dipendenze23- Scrive tutti i file24- Avvia il server di sviluppo su localhost:30002526PASSO 5 - Risultato27Obsidian crea la cartella: Sistema Finanziario/28Al suo interno: dashboard collegati, note di configurazione29e un collegamento diretto all'applicazione in esecuzione.
Tempo totale dal passo 1 all'applicazione funzionante: 4-12 minuti.
Il cambiamento che questo rappresenta
Non è un modo più veloce di scrivere codice.
È una relazione diversa tra idea ed esecuzione.
Il vincolo su ciò che puoi costruire era una volta l'abilità tecnica e il tempo. Un non sviluppatore non poteva costruire un CRM. Uno sviluppatore singolo non poteva costruire cinque sistemi simultaneamente. Un team non poteva rilasciare in ore invece che settimane.
Tutti e tre questi vincoli non esistono più.
Il nuovo vincolo è la chiarezza di pensiero - la capacità di descrivere precisamente ciò di cui hai bisogno, capire come si presenta un buon output e iterare su di esso. Questa è un'abilità di pensiero, non tecnica.
L'Architettura per App Generativa non rende obsoleti gli sviluppatori. Rende la capacità di pensare in termini di sistemi - di ragionare su ciò di cui hai bisogno prima di costruirlo - drammaticamente più preziosa della capacità di scrivere il codice che lo implementa.
Lo stack è qui. I modelli sono capaci. L'unica variabile rimanente è se stai costruendo con esso o leggendo di persone che lo stanno facendo.
Questo articolo descrive le capacità disponibili in Claude, Obsidian e MCP a partire da luglio 2026. Versioni specifiche dei plugin e configurazioni API potrebbero cambiare. Verifica sempre la documentazione corrente prima dell'implementazione.
Grazie per aver letto.





