TL;DR
- El coll d'ampolla en growth mai no van ser les idees, era la distància entre la idea i que un altre equip tingués temps de construir-la.
- Google Stitch (eina de prototipatge amb IA de Google Labs) + Claude Code permet passar de dades de comportament a un mockup validat en hores, no en setmanes.
- Tres casos reals: SaaS d'emissions de carboni (≈70% del cicle habitual estalviat), ciberasseguradora (plantilla de landing replicable), proptech de nua propietat (flux de simulació validat abans d'una sola línia de codi).
- NO substitueix un sistema de disseny madur, i el segell d'IA es detecta si no hi ha una personalització humana profunda.
- Estructura de prompt llesta per copiar i enganxar al final.
Com a growth marketer no només gestiono campanyes. Dissenyo experiències, llegeixo dades de comportament, coordino equips, i ara també construeixo jo mateix les interfícies, de vegades el mateix dia. Durant set anys el que em frenava no va ser mai la falta d'idees. Era la distància entre la idea i que algú altre tingués temps de construir-la.
Google Stitch (més Claude Code) és el que em va tancar aquesta bretxa. A sota: què és exactament, tres casos reals de client amb el temps que va estalviar cadascun, on es queda curt, i el prompt exacte que faig servir, llest per copiar i enganxar al final.
Per què la dependència és el veritable coll d'ampolla en growth?
Si has treballat una temporada en màrqueting digital, ja coneixes la frustració. Tens la hipòtesi i les dades que la sostenen. Tens clar què cal canviar a la landing, al flux de registre o a l'experiència per als usuaris nous. Però entre la idea i l'execució hi ha reunions infinites, desenes de revisions amb l'equip de disseny, una cua de tiquets oberts dels developers i com a mínim tres setmanes de calendari.
El problema mai no va ser la creativitat. Va ser la dependència que tenim d'altres equips.
El coll d'ampolla més gran per a un growth marketer no és la falta d'idees, sinó la distància entre la idea i la seva execució.
Durant anys aquest ha estat un dels costos ocults del màrqueting digital: la velocitat d'aprenentatge està limitada per la velocitat d'iteració, i la velocitat d'iteració depèn de recursos que se t'escapen del control. Aquests dies he provat Google Stitch i, entre això i Claude Code, tot el que acabo de descriure ha canviat.
Quin era el sostre de vidre del growth marketer tradicional?
Abans de ser freelance vaig treballar set anys en agència. El límit era evident: estava restringit pels serveis que el client havia contractat. Si veia una oportunitat en l'experiència d'usuari o en el disseny d'una pàgina, la meva funció es limitava a documentar, recomanar i intentar vendre el servei. L'execució era d'un altre equip, amb un altre calendari i altres criteris.
En passar a freelance vaig guanyar més llibertat. Tot i així, per a tasques complexes, campanyes d'email màrqueting, desenvolupaments web, continuava depenent d'altres especialistes per executar. La meva aportació era estratègica, però algú altre l'havia de traduir a codi.
El resultat: cicles llargs de revisió, un joc del telèfon entre la meva proposta inicial i el que es publicava, i clients que perdien l'entusiasme inicial mentre esperaven veure alguna cosa tangible.
Com és el salt d'operador a constructor?
Fa uns mesos vaig començar a experimentar amb Claude Code, i ara amb Google Stitch, per prototipar productes digitals. El que va començar com una prova interna ja forma part dels meus fluxos de treball.
Ara puc executar i lliurar per mi mateix. No com a substitut d'un dissenyador sènior, sinó com algú que pot materialitzar idees amb prou fidelitat per validar-les, presentar-les i fins i tot desenvolupar-les i publicar-les.
El canvi no és només operatiu, també és conceptual. Quan pots passar de dades de comportament a un mockup funcional en hores, el tipus de converses que tens amb els clients canvia. Ja no presento només idees, ara presento solucions. I la diferència entre totes dues és enorme en confiança i velocitat de decisió, sobretot en startups on el ritme ja és alt.
Què és Google Stitch i per què importa ara?
Google Stitch no substitueix el bon gust ni el pensament crític. Els amplifica. La diferència la marca qui el fa servir.
Google Stitch és una eina de prototipatge impulsada per IA, desenvolupada per Google Labs. Permet generar mockups d'interfícies, pàgines web i fluxos d'usuari a partir de prompts, referències visuals i arxius existents. Entén context, estil i estructura, i genera propostes visuals que iteres ràpid, un Figma amb esteroides.
A la pràctica: un growth marketer amb bon criteri analític, dades de comportament i claredat sobre el que cal canviar pot generar propostes de disseny concretes sense dominar eines de disseny professional.
Com van ser tres casos reals de client?
Cas 1: SaaS de gestió d'emissions de carboni
Vam avaluar un redisseny d'una landing que ajudava l'usuari a calcular les emissions de carboni de la seva empresa. El briefing existia, les dades d'ús eren a Clarity, però l'equip de disseny tenia l'agenda plena durant setmanes i els developers tenien projectes prioritaris a la UI del SaaS.
Amb Google Stitch vaig generar una proposta de landing completa en un matí: estructura de contingut, seccions, jerarquia visual, CTA principal i flux cap a l'eina. Vaig iterar tres versions abans de presentar-la. El feedback va ser positiu des de la primera trucada. Temps estalviat respecte al procés tradicional: aproximadament el 70% del cicle habitual.
Cas 2: Asseguradora de risc digital amb IA
Repte diferent: no partir de zero, sinó crear una plantilla de landing replicable per a diferents tipus de recurs, landings d'indústria, de producte, pàgines de recursos descarregables, mantenint la coherència de marca i adaptant-se a cada audiència.
Vaig pujar els arxius del lloc web actual, vaig definir les variacions i vaig generar l'esquelet de la plantilla. El resultat va ser un sistema modular que l'equip intern va adoptar directament, sense començar de zero en cada actiu. Dit això: un mockup no es tradueix directament en desenvolupament. Google Stitch normalment no genera una landing completament fidel a la marca de l'empresa, i calen diverses rondes de revisió i ajustos.
Cas 3: Proptech de compra i venda de nua propietat
El client opera en real estate amb un producte especialitzat: la compra i venda de nua propietat. Un producte financer complex que cal explicar amb claredat abans que l'usuari decideixi res.
El repte era dissenyar un flux de simulació que guiés l'usuari pas a pas, reduís la fricció cognitiva i generés prou confiança perquè sol·licités una trucada. Ja teníem una calculadora feta amb Outgrow amb molt bons resultats, però, aprofitant que vam passar totes les landings al web propi, vam generar el nou prototip de flux a partir de dades de comportament de Clarity i prompts específics a Google Stitch. El client va poder veure la lògica del recorregut d'usuari amb claredat abans que s'escrivís una sola línia de codi. Un altre cop: la landing ideada a Stitch no és un resultat 100% precís del que després es trasllada a desenvolupament.
Quin és el flux de treball, pas a pas?
Aquest és el flux que he estandarditzat i que replica resultats consistents:
- Pujar els arxius del lloc web actual a Claude Web. Li dona context estructural, d'estil i de contingut. El model entén d'on parteix el disseny, no treballa en el buit.
- Carregar les dades de Microsoft Clarity. Gravacions de sessió, mapes de calor, zones d'abandonament, clics fallits. Amb això converteixo la intuïció en hipòtesis basades en comportament real.
- Analitzar el comportament. Amb dades de les dues fonts, la IA identifica friccions concretes: on es perd l'atenció, on hi ha confusió visual, on el CTA no converteix.
- Generar els prompts per a Google Stitch. Un prompt vague produeix resultats vagues. Un prompt amb context de marca, audiència, objectiu de conversió i referència d'estil produeix propostes útils. La mateixa IA, amb tot aquest context, genera un prompt per a Stitch molt més precís i valuós que el que produiria jo sol.
- Crear els mockups i iterar. Google Stitch genera opcions visuals que refines en temps real. Tres o quatre iteracions en una o dues hores són perfectament viables.
- Validar amb el client abans de desenvolupar-ho. L'avantatge més infravalorat: el client veu alguna cosa tangible abans que hi hagi una sola línia de codi. El feedback en aquesta fase és molt més útil i precís.
- Passar a desenvolupament o a Claude Code. Un cop validat el prototip, el traspàs és molt més net. Amb Claude Code, traduir el mockup a codi funcional és més senzill perquè pots descarregar el prototip en HTML.
Això canvia les regles o només les eines?
Velocitat
El cicle de disseny tradicional té costos ocults enormes: reunió de briefing, proposta, revisió, ajustos, segona revisió, aprovació. Amb aquest flux, aquest cicle es comprimeix en hores. Tres setmanes es poden convertir en tres dies si hi sumes les reunions. I en growth, la velocitat d'iteració és directament proporcional a la velocitat d'aprenentatge, com més dades tinguis, millor coneixeràs el teu públic.
Independència
L'autonomia operativa canvia la naturalesa de la feina. Presento solucions completes, no només recomanacions. Això impacta directament en com el client percep el valor que aporto i en la velocitat amb què es prenen decisions.
Alineació entre dades i UX
L'avantatge més profund no és la velocitat: és la qualitat de la connexió entre l'insight analític i la proposta de disseny. Quan qui analitza el comportament i qui defineix l'experiència són la mateixa persona, es perd menys en la traducció. El disseny no interpreta les dades, les incorpora directament.
Per a mi, la pèrdua més gran en growth no és el trànsit, sinó haver de jugar al telèfon amb la resta d'equips.
Què NO fa Google Stitch (i on falla)?
Aquesta secció existeix perquè l'honestedat forma part del criteri. Stitch és potent, però té límits reals que convé conèixer abans de sobreestimar-lo.
- No substitueix un sistema de disseny madur. Si la teva empresa té una guia d'estils consolidada, components definits i un equip de disseny amb criteri propi, Stitch no replica aquest nivell de coherència sense una feina addicional significativa. Des de la meva experiència, és difícil que algú sense el criteri d'un dissenyador repliqui el que aconsegueix un de debò.
- Requereix inputs estructurats i criteri. Un prompt vague produeix un resultat genèric. La qualitat de l'output depèn directament de la de l'input: context de marca, objectiu de conversió, referència visual, restriccions de disseny. Si no tens clar què busques, l'eina no ho tindrà clar per tu.
- El segell d'IA es detecta. Els webs generats amb IA tenen un patró reconeixible. Els usuaris ho perceben quan falta contingut personalitzat: imatges reals, dades pròpies, casos específics, seccions construïdes sobre experiència genuïna. Un prototip de Stitch que arriba a producció sense una personalització profunda es nota. Aquesta personalització continua sent feina humana. El meu propi web, per molt polit que sembli, té seccions clarament atribuïbles a la IA, i ho dic clar en lloc de dissimular-ho.
- No és el punt final. És el punt de partida del traspàs a desenvolupament. El codi resultant necessita revisió, el disseny necessita adaptar-se als sistemes existents i l'experiència final continua requerint iteració real amb les dades que generen els usuaris.
Què significa això per a fundadors i growth marketers?
Per a fundadors i equips de producte
Si la teva startup és en fase de creixement i el teu growth marketer necessita un cicle de tres setmanes per provar canvis al web, aquest procés té molt marge de millora. Les eines existeixen per escurçar-lo. El perfil que busques no és només algú que optimitzi campanyes o coordini equips, és algú que pugui tancar el loop entre la dada d'usuari i l'experiència que rep aquest usuari, amb eines que el mantinguin al peu del canó.
Per a growth marketers
La pregunta no és si aprendre eines de prototipatge. És quant de temps més et podràs diferenciar només amb campanyes. El mercat premia els perfils que amplien el seu rang d'execució. Dominar l'espai entre les dades i la interfície és un avantatge competitiu real, i cada cop més accessible.
El growth marketer del proper cicle no serà només millor analista. També serà millor constructor.
Cap on va tot això?
La separació entre qui dissenya el creixement i qui construeix l'experiència sempre ha estat artificial. El producte és màrqueting. L'experiència d'usuari és la campanya més important que tens.
El que està canviant és que les eines estan eliminant les barreres d'execució que van mantenir aquesta separació durant anys. Un growth marketer que sap on perd l'usuari, per què no converteix i quina hipòtesi vol provar ara la pot materialitzar sense esperar ningú. Això no fa prescindibles els dissenyadors o els desenvolupadors, significa que el loop d'aprenentatge s'escurça substancialment, i que el perfil que el tanca té un avantatge creixent.
Continuo pensant que Google Stitch està molt verd per ser "l'eina que deixa els dissenyadors web sense feina", però obre el debat sobre el que una sola persona pot executar avui en màrqueting digital.
El growth marketer que pot passar de la dada al prototip el mateix dia ja no és un outlier. Comença a ser l'estàndard.
Així que et retorno la pregunta: quant és el màxim que has esperat per llançar un canvi que ja sabies que funcionaria, i què et va costar aquesta espera?
Prompt llest per a Google Stitch
Si has llegit fins aquí, et mereixes alguna cosa útil. Aquí sota tens l'estructura de prompt que faig servir ara per produir mockups de valor amb Google Stitch.
Dissenya un mockup de landing page molt orientat a la conversió per a una plataforma B2B SaaS.
Segueix estrictament l'estructura, l'estil i els requisits definits a continuació.
---
[1. OBJECTIU]
Crear una landing page que maximitzi la conversió (demo, registre o contacte),
comunicant clarament el valor del producte.
---
[2. DESCRIPCIÓ DEL PRODUCTE]
Nom del producte:
[INSEREIX EL NOM]
Descripció breu:
[DESCRIU EN 1–2 FRASES QUÈ FA]
Què permet fer a l'usuari:
- [FUNCIONALITAT PRINCIPAL 1]
- [FUNCIONALITAT PRINCIPAL 2]
- [FUNCIONALITAT PRINCIPAL 3]
- [FUNCIONALITAT PRINCIPAL 4]
- [PROBLEMA QUE ELIMINA]
---
[3. PÚBLIC OBJECTIU]
Perfils:
- [PERFIL 1]
- [PERFIL 2]
- [PERFIL 3]
- [PERFIL 4]
Característiques del públic:
- Nivell tècnic: [BAIX / MITJÀ / ALT]
- Eines actuals: [EINES]
- Frustracions: [PAINS CLAU]
- Què busquen: [BENEFICIS]
- Nivell d'escepticisme: [BAIX / MITJÀ / ALT]
---
[4. PROPOSTA DE VALOR]
Proposta principal:
"[PROPOSTA CLARA I ORIENTADA A RESULTAT]"
Angles alternatius:
- "[ANGLE 1]"
- "[ANGLE 2]"
- "[ANGLE 3]"
---
[5. ESTRUCTURA DE LA LANDING]
5.1 Hero Section
- Titular centrat en el resultat (velocitat, claredat, ROI, etc.)
- Subtítol que expliqui el producte de manera simple
- CTA principal: [EX. "Sol·licitar demo"]
- CTA secundari: [EX. "Veure com funciona"]
- Visual: [DESCRIU LA IDEA VISUAL]
---
5.2 Secció Problema
Mostrar clarament:
- [PROBLEMA 1]
- [PROBLEMA 2]
- [PROBLEMA 3]
- [PROBLEMA 4]
Fer servir contrast visual: caos vs claredat
---
5.3 Secció Solució
Explicar el funcionament:
1. [PAS 1]
2. [PAS 2]
3. [PAS 3]
4. [PAS 4]
Representar-ho com un flux visual simple
---
5.4 Features / Funcionalitats
Presentar en targetes:
- [FEATURE 1]
- [FEATURE 2]
- [FEATURE 3]
- [FEATURE 4]
- [FEATURE 5]
- [FEATURE 6]
---
5.5 Casos d'Ús
Format:
Input (pregunta de l'usuari) → Output (resposta/insight)
Exemples:
- "[PREGUNTA 1]"
- "[PREGUNTA 2]"
- "[PREGUNTA 3]"
- "[PREGUNTA 4]"
---
5.6 Prova Social
- Logos: [EMPRESES]
- Testimonis: [TIPUS DE PERFIL]
---
5.7 Com Funciona (tècnic, simplificat)
- [CAPA PRINCIPAL]
- [APIs / INTEGRACIONS]
- [INTERFÍCIE]
- [OUTPUTS]
Mantenir la credibilitat sense una complexitat excessiva
---
5.8 CTA Final
- Reforçar la proposta de valor
- CTA principal: [CTA]
- CTA secundari: [OPCIONAL]
---
[6. ESTIL DE DISSENY]
- Modern, minimalista, net
- Inspiració: Stripe, Linear, Vercel (o d'altres de semblants)
- Professional (evitar l'estil genèric)
- Explorar mode clar o fosc
- Fer servir:
- Degradats subtils
- Grids
- Visualitzacions de dades
- Incloure mockups reals de producte
---
[7. TO]
- Clar i directe
- Segur i tècnic però accessible
- Sense buzzwords innecessaris
- Enfocat a resultats
---
[8. REQUISITS D'OUTPUT]
- Mockup complet de landing
- Desktop-first (responsive opcional)
- Incloure:
- Gràfics
- Taules
- Interfícies tipus query
- Fer servir placeholders només si cal
---
[9. DIRECCIÓ ESTRATÈGICA]
- Evitar plantilles SaaS genèriques
- Posicionar el producte com a:
[EX. "Infraestructura de dades", "Capa d'intel·ligència", etc.]
El disseny ha de transmetre:
- Precisió
- Potència
- Confiança
---
Genera la landing completa seguint aquesta estructura.Si treballes en un projecte de SaaS, insurtech, proptech o qualsevol sector on l'experiència d'usuari forma part del funnel d'adquisició, i vols explorar com escurçar el cicle entre l'insight i l'execució, pots reservar una trucada amb mi al formulari.
Preguntes freqüents
Google Stitch és gratis?
Google Stitch és una eina de prototipatge de Google Labs; el valuós aquí és el flux i l'estructura de prompt, tots dos gratis en aquest article. El cost és el teu temps i el teu criteri, no una llicència.
Google Stitch substitueix els dissenyadors?
No. No substitueix un sistema de disseny madur ni el criteri d'un dissenyador amb experiència. Permet que algú amb criteri analític i dades de comportament produeixi propostes validables més ràpid, la personalització profunda continua sent feina humana.
El pot fer servir algú que no sigui dissenyador?
Sí, si aportes inputs estructurats: context de marca, objectiu de conversió, referència visual, dades reals d'usuari. Un prompt vague produeix un resultat genèric; la qualitat de l'output segueix la de l'input.
Quant de temps estalvia de debò?
En el Cas 1, al voltant del 70% del cicle de disseny habitual, tres setmanes comprimides cap a tres dies un cop comptes les reunions. Varia segons l'exigència de fidelitat de marca.
El disseny generat amb IA perjudica la credibilitat?
Pot fer-ho. El segell d'IA es detecta quan falten imatges reals, dades pròpies i experiència genuïna. Un prototip que es publica sense una personalització profunda es nota, aquesta part no te la pots saltar.
Stitch vs Figma vs Claude Code, quan faig servir cadascun?
Stitch per generar i iterar el mockup a partir de dades, Claude Code per convertir el prototip validat en codi funcional (descàrrega en HTML), Figma si necessites un sistema de components madur que l'equip ja manté.