Analizzare il modello di lavoro AI-first di Shopify (ideazione su FigJam, prototipazione su Quick, hand-off automatizzato, agenti di ricerca) e trarne lezioni applicabili anche a team più piccoli.
E' stato difficile trovare un titolo adeguato a questo articolo, era necessario individuare il termine più adatto a rappresentare un processo che apre così tante possibilità e che si è dispiegato così in fretta (e continua a farlo di continuo) in questo fiorente momento tecnologico, forse diventato anche troppo veloce per stargli al passo.
Potrei definirla la rivoluzione dei processi di hand-off, research e progettazione? Non mi spaventa farlo, ma sarebbe riduttivo. Perchè è cambiato tutto.. utto..to. Come un eco, è una frase che non riesco a togliermi dalla testa dall'ultimo anno almeno 💭
E negli ultimi 5 mesi si è acuito a dismisura.
Sono certa che, a un certo punto dell'articolo, ti verranno in mente nuove idee su come sfruttare queste potenzialità anche in altre attività del tuo lavoro.
Alla fine, la cosa più utile è proprio questa: non solo cosa si fa, ma come si pensa. Capire il metodo dietro un processo permette di riutilizzarlo, adattarlo e portarlo valore in contesti completamente diversi.
Ho scritto con cura questo testo dopo aver guardato il video illuminante di Kazden Cattapan, Senior Staff Product Designer di Shopify (che ti consiglio assolutamente di guardare a fine lettura nel caso voglia implementare questi processi all'interno della tua realtà).
Scommetto che non te ne pentirai. Che tu sia un designer, uno sviluppatore, un PM o un founder è essenziale capire come i processi cambiano inevitabilmente ormai le sorti delle aziende e del tuo lavoro quotidiano. Ho cercato di mantenere il testo il più accessibile possibile, evitando tecnicismi inutili. Buona lettura!
L'evoluzione dei processi di progettazione digitale presso Shopify rappresenta un mutamento di paradigma che trascende la semplice adozione di nuovi strumenti, configurandosi come una vera e propria ristrutturazione del pensiero creativo e tecnico. La gestione dei loro processi interni rivela come stiano abbandonando i flussi di lavoro lineari e basati su artefatti statici per abbracciare un ecosistema fluido definito dal concetto di "vibe coding".
Per i designer di prodotto, gli sviluppatori e i fondatori di startup, questo cambiamento impone una riflessione profonda sulla natura stessa della collaborazione e sulla riduzione dei tempi di latenza tra l'idea e la sua esecuzione nel mondo reale. Il modello Shopify si fonda sulla premessa che l'intelligenza artificiale non sia un mero assistente alla produzione, ma un partner di pensiero in grado di orchestrare la complessità tecnica, permettendo all'operatore umano di concentrarsi sulla visione e sull'esperienza utente.
E fin qui era cosa nota, questa è la promessa generica dell'AI. Ma come renderla concretamente uno strumento di supporto?
Ovviamente i progettisti si avvalgono del tanto discusso "vibe coding". Io vorrei sempre soffermarmi sul concetto che ogni strumento cambia in base alle mani che lo destreggiano. La barriera di ingresso si è abbassata in modo notevole, ma senza delle competenze teoriche di sviluppo sappiamo che l'output non è utile in termini di scalabilità, accessibilità ect.
E' inequivocabile che questi processi in Shopify hanno permesso di ridurre drasticamente i tempi dedicati alla manutenzione dei design system su Figma, spostando l'attenzione verso la progettazione creativa, il problem-solving e la generazione di codice frontend funzionante a tutti gli effetti.
Questa trasformazione non è puramente tecnica, ma culturale. La leadership di Shopify ha imposto un mandato per l'adozione dell'AI che permea ogni livello dell'organizzazione, incoraggiando una mentalità di gioco e sperimentazione prima ancora della ricerca del valore economico immediato.
In Shopify il processo non inizia all'interno di un editor di codice, ma in uno spazio di ricerca visiva altamente strutturato su FigJam.
I designer utilizzano questa piattaforma per raccogliere screenshot da fonti di ispirazione come Mobbin o Pinterest, ma con una modalità operativa radicalmente diversa dal passato. Invece di creare semplici moodboard, creano annotazioni grafiche precise: i designer cerchiano, evidenziano e isolano componenti specifici che intendono replicare o adattare.
Queste evidenziazioni visive fungono da "ancore di contesto" per Claude Code. Quando il designer fornisce un'immagine annotata all'AI, il modello è in grado di interpretare non solo l'estetica generale, ma la gerarchia funzionale dell'interfaccia desiderata.
Questo riduce l'ambiguità dei prompt testuali e accelera la generazione di codice conforme alle aspettative visive. La fase di ideazione diventa quindi un atto di ricerca visiva, dove il designer agisce come un curatore di pattern UI che l'AI deve poi "tessere" insieme.
(Pensiero personale: Magari ritroveremo il tempo di dedicarci di piu alla nostra creatività, capacità di problem-solving e sviluppo della strategia a lungo termine di un prodotto?)
Un elemento centrale della gestione dei processi in Shopify è lo strumento interno denominato "Quick". Visivamente, "Quick" appare come un ambiente web integrato che clona l'interfaccia amministrativa di Shopify, fornendo ai designer un terreno di prova sicuro dove sperimentare. A differenza dei siti in produzione, "Quick" permette di lavorare con HTML, CSS e JavaScript vanilla, evitando le restrizioni iniziali dei design system aziendali più rigidi.
L'analisi tecnica di "Quick" rivela caratteristiche fondamentali per designer e developer:
Accesso a Database di Mock: La piattaforma permette di collegare i prototipi a "Quick DB", un sistema di storage semplificato per simulare dati reali di prodotti, clienti o ordini.
Integrazione di Proxy LLM: I prototipi creati in "Quick" possono includere funzionalità AI reali. Ad esempio, un designer può testare un assistente di scrittura per le descrizioni dei prodotti integrando direttamente un proxy che comunica con modelli GPT o Claude.
Ambiente Sandbox Isolato: Ogni prototipo vive in un URL dedicato, facilitando la condivisione istantanea con gli stakeholder per sessioni di feedback asincrone.
Il cuore operativo del processo risiede nell'uso di Claude Code tramite terminale. La demo visiva chiarisce che il designer comunica con l'AI attraverso un loop di "pianificazione ed esecuzione". L'operatore detta un piano d'azione ad alto livello (ad esempio: "Aggiungi un pannello laterale a scomparsa per la modifica rapida delle varianti") e fornisce screenshot dei file HTML correnti.
Nel breve futuro ti prometto che creerò degli articoli sull'infinità di varianti che esistono di MCP e come accedere a queste tecnologie pagando un prezzo accessibile!
Claude Code risponde non solo generando il codice necessario, ma spiegando la propria logica e suggerendo miglioramenti strutturali.
Per evitare che la velocità del vibe coding generi caos informativo, Shopify ha implementato "Artifact", uno strumento di data discovery e social design. Ovvero un catalogo centralizzato di tutto ciò che l'azienda produce in termini di design e dati.
Visivamente, Artifact si presenta come un feed simile a Dribbble o Pinterest, ma riservato ai dipendenti di Shopify. Designer e sviluppatori caricano regolarmente registrazioni di schermo dei loro progressi, concept di motion design e link ai prototipi "Quick". Questa trasparenza radicale permette a un product designer di un team di "forkare" (copiare e modificare) l'idea di un collega, accelerando l'evoluzione degli standard UI in tutta l'azienda.
Oltre alla componente visiva, Artifact è costruito su un'architettura robusta basata su Elasticsearch e GraphQL.9. Questo permette agli utenti di navigare tra milioni di asset di dati utilizzando il linguaggio naturale. L'analisi tecnica indica che Artifact risolve il problema della "lineage" dei dati: un utente può vedere da dove proviene una tabella di dati, chi la possiede e quali altri asset o report dipendono da essa. Questo è fondamentale per i developer che devono apportare modifiche strutturali senza causare interruzioni nei servizi a valle.
L'integrazione dei processi in Shopify prevede l'uso di agenti AI che automatizzano compiti che precedentemente richiedevano giorni di lavoro manuale.
Gout: L'Agente di Ricerca Sperimentale
Gout è un agente progettato per sintetizzare la voce dei merchant. L'analisi visiva delle sue interfacce mostra come esso sia in grado di processare migliaia di ticket di supporto, commenti su Reddit e trascrizioni di interviste utente. Invece di costringere un user researcher a leggere ogni singola riga, Gout produce report tematici che identificano i principali punti di attrito. Questo permette ai designer di basare i propri prototipi su evidenze empiriche anziché su semplici intuizioni.
VaultBot: L'Oracolo Tecnico
VaultBot agisce come un'interfaccia conversazionale sulla wiki interna e sulla documentazione di Shopify. Per un nuovo developer o un product manager, VaultBot elimina la necessità di navigare in labirinti di documentazione obsoleta, fornendo risposte immediate su procedure di sicurezza, standard di codifica e politiche aziendali.
Il momento del passaggio di consegne tra design e sviluppo è stato storicamente uno dei maggiori colli di bottiglia nell'industria del software. Shopify ha risolto questo problema eliminando del tutto il concetto di handoff statico.
Meccanismo del Comando Dev Save
Nella demo visiva, si osserva il designer digitare il comando dev save nel terminale al termine di una sessione di prototipazione. Questo comando non è un semplice salvataggio locale, ma avvia una serie di operazioni automatizzate:
1. Il codice generato da Claude e rifinito dal designer viene caricato in un branch di Git dedicato.
2. Il sistema genera automaticamente un URL di anteprima accessibile a tutti gli stakeholder interni.
3. Viene creata una notifica su Artifact o Slack che permette ai developer di revisionare direttamente il codice anziché una documentazione visiva.
In questo nuovo ecosistema, il ruolo dello sviluppatore si sposta dalla mera implementazione della UI alla validazione e alla scalabilità. Poiché l'AI fornisce circa l'80% del codice frontend, i developer possono concentrarsi sulla robustezza del backend, sull'ottimizzazione delle performance e sulla sicurezza. L'analisi suggerisce un modello di collaborazione "Doer + Validator", in cui l'AI (o il designer assistito dall'AI) agisce come esecutore e il developer come garante della qualità e dell'architettura di sistema.
L'efficacia tecnologica di Shopify sarebbe nulla senza la cultura aziendale che la supporta. L'azienda ha creato un "AI Hub", una risorsa centralizzata che funge da centro di eccellenza per l'uso dell'intelligenza artificiale.
Condivisione di Prompt e Competenze
All'interno dell'AI Hub, i dipendenti condividono librerie di prompt testate, server MCP per estendere le capacità di Claude e video tutorial creati con strumenti come Screen Studio e Descript. Questo assicura che un designer junior possa operare con lo stesso livello di efficacia tecnica di un senior, democratizzando la capacità di creare software complesso. L'obiettivo dichiarato è trasformare ogni dipendente in un "vibe coder" in grado di tradurre la propria intuizione in realtà digitale con il minimo attrito possibile.
L'analisi integrale dei processi di Shopify offre una tabella di marcia chiara per chiunque operi nel settore del design e dello sviluppo digitale.
Per i Designer: Oltre il Vettoriale
Il design non riguarda più solo il "come appare", ma il "come si comporta". La padronanza di strumenti di prototipazione basati sul codice e la capacità di dialogare con gli LLM attraverso contesti visivi e testuali sono diventate competenze non negoziabili. L'uso di sistemi come FigJam per la progettazione creativa e Claude Code per l'esecuzione permette di scalare la creatività individuale a livelli precedentemente impossibili.
Per i Developer: Architetti di Intelligenze
Lo sviluppatore moderno deve evolvere da esecutore di specifiche a supervisore di agenti AI. La gestione di infrastrutture come Tangle e la creazione di workflow di validazione (Doer + Validator) sono le chiavi per gestire la produzione di software ad alta velocità senza sacrificare la sicurezza o la manutenibilità.
Per i Founder: Strategia AI-First
Il successo di Shopify risiede nel coraggio della leadership di smantellare processi consolidati in favore di flussi di lavoro incerti ma promettenti. Investire in strumenti proprietari e abbassare le barriere all'adozione attraverso la formazione continua sono passaggi obbligati per chi desidera costruire organizzazioni resilienti e innovative nell'era del machine learning generativo.
Shopify ha creato una nuova ontologia del lavoro digitale, dove i confini tra design, dati e sviluppo sono ormai sfumati. Il "vibe coding" non è una scorciatoia, ma un'elevazione del lavoro umano a un livello di astrazione superiore. In questo scenario, l'intelligenza artificiale funge da tessuto connettivo che lega la visione creativa del designer alla solidità ingegneristica dello sviluppatore, il tutto alimentato da una ricerca utente che non dorme mai.
Il modello Shopify non è solo una guida su come costruire e-commerce, ma una visione su come verrà costruito tutto il software nel prossimo decennio (o forse meno): in modo rapido, collaborativo, trasparente e profondamente umano nella sua intenzione iniziale.
Il processo rappresentato è frutto di Shopify, stiamo parlando di un colosso. Ma anche le piccole realtà e le startup possono permettersi di usare a loro vantaggio queste novità per evolvere velocemente e con meno attriti, adattando i processi o snellendoli in base alle proprie necessità aziendali.
BONUS TIPS PER SVILUPPATORI IN BASSO ⬇️
Grazie per aver letto fino a qui!
Valuterai di adottare questi nuovi processi nel tuo lavoro? Se ti è stato utile sarei felice di conoscere la tua opinione in merito, lasciami un commento e ricondividi se vuoi rendere partecipe anche la tua community :)
💖 by Cordiska.
#ai #mcp #figma #dev #ux #ui #founder #startup
Per supportare la mole di dati generata da milioni di negozi, Shopify ha sviluppato "Tangle", una piattaforma di sperimentazione ML che ottimizza i tempi di calcolo. Tangle rappresenta l'infrastruttura sottostante che permette alle funzionalità AI (come la categorizzazione automatica dei prodotti) di funzionare in modo efficiente.
Efficienza e Riutilizzo Globale
L'analisi tecnica di Tangle rivela che una pipeline di elaborazione dati che normalmente richiederebbe 10 ore può essere completata in 20 minuti se solo una piccola parte del sistema subisce modifiche. Questo è possibile grazie a un sistema di cache globale degli "artifact" di dati: se un team ha già elaborato un set di dati per un esperimento, un altro team può riutilizzare il risultato senza dover ripetere il calcolo. Questo approccio non solo risparmia mesi di tempo di calcolo, ma promuove una collaborazione senza coordinamento tra i team di data science.
Integrazione UCP e Standard di Produzione
Il passaggio dal prototipo in "Quick" alla produzione reale richiede il rispetto di rigorosi standard di sicurezza e conformità, gestiti attraverso il processo di integrazione UCP (Universal Commerce Platform).
Checklist per la Production-Readiness
L'analisi dei documenti di ingegneria di Shopify evidenzia i criteri necessari affinché un prototipo AI possa essere rilasciato:
Validazione degli Inbound Schema: Ogni payload deve essere sanificato e mappato secondo tipi interni canonici per evitare vulnerabilità di parsing.
Middleware di Orchestrazione: Utilizzo di catene di middleware per gestire l'autenticazione, il rate limiting e la protezione dai replay degli attacchi.
Dark Launches e Canary Deployments: Le nuove funzionalità AI vengono testate inizialmente con traffico "mirroring" (senza impatto sugli utenti) e poi rilasciate gradualmente per monitorare le metriche di conversione e abbandono in tempo reale.
Come Shopify ha reso l'AI un moltiplicatore di produttivita nello sviluppo prodotto: cosa cambia nel modo di lavorare dei team.
Come usare la tecnologia di Claude nel lavoro quotidiano: casi d'uso concreti oltre la chat.
