{"id":5182,"date":"2026-09-10T13:38:58","date_gmt":"2026-09-10T11:38:58","guid":{"rendered":"https:\/\/emfasi.com\/?p=5182"},"modified":"2026-09-13T13:41:38","modified_gmt":"2026-09-13T11:41:38","slug":"maquetar-amb-ia-sistema-disseny","status":"publish","type":"post","link":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/","title":{"rendered":"Maquetar amb IA: per qu\u00e8 el problema no \u00e9s l&#8217;HTML, \u00e9s el sistema"},"content":{"rendered":"<style>\n.entry-content .destacado {<br \/>\tbackground: #f5f5f5;<br \/>\tborder-left: 4px solid #111;<br \/>\tpadding: 26px 30px;<br \/>\tmargin: 36px 0 40px;<br \/>\tborder-radius: 0 8px 8px 0;<br \/>}<br \/>.entry-content .destacado strong { font-weight: 600; }<br \/><\/style>\n<p>Hi ha un v\u00eddeo que es repeteix cada setmana. Alg\u00fa obre un Figma, arrossega una pantalla a un xat i, trenta segons despr\u00e9s, apareix una p\u00e0gina maquetada que s&#8217;assembla bastant al disseny. El comentari final sol ser el mateix: \u00abaix\u00f2 abans eren dos dies de feina\u00bb.<\/p>\n<p>I \u00e9s cert. Aquella pantalla, ella sola, abans eren dos dies.<\/p>\n<p>El problema comen\u00e7a a la pantalla dotze.<\/p>\n<p>Perqu\u00e8 aleshores ja tens quatre maneres diferents d&#8217;escriure un bot\u00f3, tres escales d&#8217;espaiat convivint dins el mateix CSS i una llista de classes que ning\u00fa no podria mantenir d&#8217;aqu\u00ed a sis mesos. No hi ha res trencat. Tot es veu b\u00e9. I tot i aix\u00ed tens un projecte pitjor que si l&#8217;haguessis fet a m\u00e0.<\/p>\n<p class=\"destacado\"><strong>La IA no maqueta malament. Maqueta sense saber en quin projecte \u00e9s.<\/strong><\/p>\n<p>Fa mesos que faig servir els MCP de Figma i Zeplin dins del VSCode per maquetar pantalles de client. Funciona. Per\u00f2 no funciona com es explica per aqu\u00ed, i la difer\u00e8ncia entre que surti b\u00e9 o surti malament no \u00e9s al prompt. \u00c9s en el que hi ha preparat abans d&#8217;escriure&#8217;l.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Continguts<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Maquetar_rapid_no_es_maquetar_be\" >Maquetar r\u00e0pid no \u00e9s maquetar b\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#La_IA_no_coneix_el_teu_sistema_fins_que_lhi_dones\" >La IA no coneix el teu sistema fins que l&#8217;hi dones<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Del_disseny_al_codi_quina_part_sautomatitza_de_debo\" >Del disseny al codi: quina part s&#8217;automatitza de deb\u00f2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#El_cost_que_ningu_no_explica_cada_pantalla_es_torna_a_llegir\" >El cost que ning\u00fa no explica: cada pantalla es torna a llegir<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#El_codi_generat_sol_ser_correcte_i_estructuralment_pobre\" >El codi generat sol ser correcte i estructuralment pobre<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Quan_entra_el_CMS_la_maqueta_deixa_de_ser_una_maqueta\" >Quan entra el CMS, la maqueta deixa de ser una maqueta<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#El_que_no_deleguem\" >El que no deleguem<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Quan_es_mes_rapid_fer-ho_a_ma\" >Quan \u00e9s m\u00e9s r\u00e0pid fer-ho a m\u00e0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Que_ha_canviat_de_debo_en_el_nostre_proces\" >Qu\u00e8 ha canviat de deb\u00f2 en el nostre proc\u00e9s<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#Una_maqueta_mal_feta_no_es_veu_es_paga\" >Una maqueta mal feta no es veu, es paga<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Maquetar_rapid_no_es_maquetar_be\"><\/span>Maquetar r\u00e0pid no \u00e9s maquetar b\u00e9<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Les demos funcionen perqu\u00e8 la pantalla est\u00e0 sola.<\/p>\n<p>Una pantalla a\u00efllada no ha de conviure amb res. No hereta estils, no comparteix components, no ha d&#8217;encaixar amb el que va maquetar una altra persona el mes passat. \u00c9s un exercici tancat i la IA el resol b\u00e9.<\/p>\n<p>Un projecte real \u00e9s el contrari. Un web de client s\u00f3n trenta o quaranta plantilles que comparteixen components, un tema de WordPress amb les seves convencions, un CSS que ja t\u00e9 decisions preses i, gaireb\u00e9 sempre, un hist\u00f2ric que no pots llen\u00e7ar a les escombraries.<\/p>\n<p>En aquest context, la pregunta deixa de ser si la IA pot generar l&#8217;HTML d&#8217;una pantalla. Pot. La pregunta \u00e9s si aquell HTML s&#8217;assembla a la resta del projecte.<\/p>\n<p>El primer cop que ho vam provar de deb\u00f2, el resultat visual va ser bo des de la segona iteraci\u00f3. El problema va apar\u00e8ixer en revisar el diff: tres components nous que ja existien amb un altre nom, valors d&#8217;espaiat en p\u00edxels on el projecte feia servir variables, i una estructura de classes que no seguia cap de les convencions del tema.<\/p>\n<p>Res d&#8217;aix\u00f2 es veu al navegador. Tot aix\u00f2 es paga despr\u00e9s.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"La_IA_no_coneix_el_teu_sistema_fins_que_lhi_dones\"><\/span>La IA no coneix el teu sistema fins que l&#8217;hi dones<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aix\u00f2 sona obvi i, tot i aix\u00ed, \u00e9s l&#8217;error que he com\u00e8s m\u00e9s vegades.<\/p>\n<p>Quan fa setmanes que ets dins d&#8217;un projecte, tens al cap coses que no estan escrites enlloc: que els espaiats van en m\u00faltiples de 4, que els components es prefixen amb <code>c-<\/code>, que les utilitats viuen en un fitxer a part, que els breakpoints s\u00f3n tres i no cinc, que l&#8217;<code>h1<\/code> de les plantilles internes el pinta un component de cap\u00e7alera i no la plantilla.<\/p>\n<p>La IA no t\u00e9 res de tot aix\u00f2. I com que no ho t\u00e9, s&#8217;ho inventa. Amb criteri, a m\u00e9s, cosa que ho empitjora: genera una soluci\u00f3 raonable que un desenvolupador sense context aprovaria.<\/p>\n<p>Quan dic sistema em refereixo a coses molt concretes:<\/p>\n<blockquote><p>Variables de color i la seva nomenclatura. Escala tipogr\u00e0fica i com s&#8217;aplica. Sistema d&#8217;espaiat. Breakpoints. Convenci\u00f3 de noms de classes. Qu\u00e8 \u00e9s un component i qu\u00e8 \u00e9s una variant. On viu cada fitxer. Qu\u00e8 est\u00e0 prohibit tocar.<\/p><\/blockquote>\n<p>Quan aix\u00f2 est\u00e0 escrit en un fitxer que la IA llegeix abans de cada tasca, el resultat canvia de manera notable. No perqu\u00e8 el model sigui m\u00e9s llest, sin\u00f3 perqu\u00e8 deixa de tenir buits per omplir.<\/p>\n<p class=\"destacado\"><strong>Cada buit que no omples tu l&#8217;omple l&#8217;eina, i l&#8217;omple amb la mitjana d&#8217;internet.<\/strong><\/p>\n<p>Aquesta \u00e9s la feina que no surt als v\u00eddeos. Asseure&#8217;t a escriure qu\u00e8 \u00e9s el teu projecte no \u00e9s glamur\u00f3s i \u00e9s exactament el que separa una maqueta aprofitable d&#8217;una que nom\u00e9s ho sembla.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Del_disseny_al_codi_quina_part_sautomatitza_de_debo\"><\/span>Del disseny al codi: quina part s&#8217;automatitza de deb\u00f2<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Amb els MCP connectats, la IA llegeix el fitxer de disseny directament. No li descrius la pantalla: la t\u00e9 al davant.<\/p>\n<p>Aix\u00f2 resol b\u00e9 una part de la feina, i val la pena dir quina:<\/p>\n<p>Extreure valors \u00e9s on m\u00e9s hi guanya. Colors, mides, espaiats, tipografies, mesures exactes d&#8217;un component. Aquella feina d&#8217;anar a mirar cada capa i copiar el valor desapareix gaireb\u00e9 del tot, i \u00e9s una feina que, a m\u00e9s, f\u00e8iem malament: tots hem posat un <code>padding: 23px<\/code> perqu\u00e8 el vam llegir malament a l&#8217;inspector.<\/p>\n<p>Muntar l&#8217;estructura tamb\u00e9 funciona. Una graella, una secci\u00f3 amb la seva cap\u00e7alera i les seves targetes, un formulari amb els seus camps. Si el sistema est\u00e0 definit, surt amb les classes correctes i a la primera.<\/p>\n<p>Els estats i les variants surten a mitges. Si el dissenyador els ha deixat documentats al fitxer, b\u00e9. Si no hi s\u00f3n, la IA no t&#8217;avisa que falten: t&#8217;entrega el component amb el seu estat per defecte i prou. El hover, el focus, el disabled, l&#8217;estat d&#8217;error i l&#8217;estat buit continuen sent una conversa amb disseny, no una tasca de maquetaci\u00f3.<\/p>\n<p>I hi ha una part que no s&#8217;automatitza en absolut: decidir si all\u00f2 que est\u00e0s veient hauria d&#8217;existir. Un disseny pot portar una targeta gaireb\u00e9 igual a una altra que ja tens, amb dues difer\u00e8ncies cosm\u00e8tiques. La IA maquetar\u00e0 totes dues. La teva feina \u00e9s preguntar si no haurien de ser la mateixa amb una variant.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"El_cost_que_ningu_no_explica_cada_pantalla_es_torna_a_llegir\"><\/span>El cost que ning\u00fa no explica: cada pantalla es torna a llegir<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aquest \u00e9s el detall m\u00e9s pr\u00e0ctic que m&#8217;he trobat i gaireb\u00e9 mai no es menciona.<\/p>\n<p>Llegir una pantalla de disseny consumeix molts tokens. Milers. I cada vegada que fas una pregunta nova sobre aquella mateixa pantalla, es torna a llegir. Preguntes pel marge inferior d&#8217;una targeta i tornes a pagar el cost de processar el fitxer sencer.<\/p>\n<p>En una pantalla solta tant \u00e9s. En una sessi\u00f3 de feina de quatre hores sobre un m\u00f2dul amb diversos estats, es nota molt: en temps d&#8217;espera, en cost i en el fet que la conversa es degrada abans del que hauria.<\/p>\n<p>El que ens ha funcionat \u00e9s deixar de tractar el fitxer de disseny com una cosa que es consulta en directe. Primer fem una lectura, extraiem els valors i l&#8217;estructura a un document propi, i a partir d&#8217;aqu\u00ed treballem contra aquell document. \u00c9s menys espectacular que ensenyar la connexi\u00f3 directa, per\u00f2 \u00e9s el que fa que el flux sigui sostenible m\u00e9s enll\u00e0 de la demo.<\/p>\n<p>Continua sent un problema obert. Estic provant maneres de guardar aquella lectura entre consultes i, ara mateix, la soluci\u00f3 \u00e9s manual.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"El_codi_generat_sol_ser_correcte_i_estructuralment_pobre\"><\/span>El codi generat sol ser correcte i estructuralment pobre<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hi ha una difer\u00e8ncia entre codi que funciona i codi que est\u00e0 ben fet, i la IA es queda del primer costat amb molta facilitat.<\/p>\n<p>El que m&#8217;he trobat m\u00e9s sovint:<\/p>\n<p>Elements que haurien de ser sem\u00e0ntics i no ho s\u00f3n. Un <code>div<\/code> amb un gestor de clic on tocava un <code>button<\/code>. Una llista d&#8217;enlla\u00e7os que no \u00e9s una llista. Un acordi\u00f3 sense cap atribut que indiqui si est\u00e0 obert.<\/p>\n<p>Jerarquies d&#8217;encap\u00e7alaments que salten nivells perqu\u00e8 el disseny t\u00e9 un text gran i un altre petit, i el model tradueix mida visual a nivell d&#8217;encap\u00e7alament. Cosa que t\u00e9 una l\u00f2gica, nom\u00e9s que no \u00e9s la l\u00f2gica correcta.<\/p>\n<p>Estats de focus que desapareixen. El disseny no els dibuixa, aix\u00ed que el codi no els t\u00e9. I quan el projecte \u00e9s d&#8217;un client amb obligacions d&#8217;accessibilitat, aix\u00f2 no \u00e9s un detall.<\/p>\n<p>Cap d&#8217;aquestes coses trenca res. Es veuen perfectes. Passen una revisi\u00f3 visual sense problema i surten a producci\u00f3 si ning\u00fa no mira l&#8217;HTML.<\/p>\n<p class=\"destacado\"><strong>Revisar una maqueta generada no \u00e9s mirar si s&#8217;assembla al disseny. \u00c9s mirar all\u00f2 que el navegador no ensenya.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quan_entra_el_CMS_la_maqueta_deixa_de_ser_una_maqueta\"><\/span>Quan entra el CMS, la maqueta deixa de ser una maqueta<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aqu\u00ed \u00e9s on la feina amb IA passa d&#8217;anar molt r\u00e0pid a anar normal.<\/p>\n<p>Una maqueta est\u00e0tica \u00e9s contingut controlat. Els t\u00edtols mesuren el que tu decideixes, totes les targetes tenen imatge i el llistat sempre porta sis elements. Un WordPress amb ACF Pro i WPML al darrere no s&#8217;assembla gens a aix\u00f2.<\/p>\n<p>El que apareix tan bon punt connectes el contingut real:<\/p>\n<p>Un t\u00edtol de producte de noranta car\u00e0cters en una targeta dissenyada per a quaranta. Un repeater buit perqu\u00e8 el client encara no ha omplert aquella secci\u00f3. Una imatge destacada que no existeix i una plantilla que no t\u00e9 fallback. Textos escrits directament a la plantilla, sense passar per les funcions de traducci\u00f3, que en un projecte multiidioma \u00e9s un error que es descobreix tard i s&#8217;arregla a poc a poc.<\/p>\n<p>La IA pot generar el codi de la plantilla. El que no pot \u00e9s anticipar com es comporta aquell disseny quan l&#8217;omple una persona que no era a la reuni\u00f3 de disseny.<\/p>\n<p>Per aix\u00f2 el primer contingut real entra aviat al nostre proc\u00e9s. No al final, quan la maqueta est\u00e0 \u00abacabada\u00bb. Tan bon punt hi ha tres components en peu, hi posem dades lletges a prop\u00f2sit: el t\u00edtol m\u00e9s llarg, el camp buit, el llistat amb un sol element.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"El_que_no_deleguem\"><\/span>El que no deleguem<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hi ha decisions que no tenen res a veure amb escriure codi i que condicionen tota la resta.<\/p>\n<p>Posar noms. Com es diu un component determina si alg\u00fa el troba d&#8217;aqu\u00ed a un any o en crea un de nou. La IA proposa noms correctes i gen\u00e8rics. Nosaltres necessitem els nostres.<\/p>\n<p>Decidir si una cosa \u00e9s un component nou o una variant. \u00c9s la decisi\u00f3 que genera m\u00e9s deute a mitj\u00e0 termini i la que la IA resol sempre pel cam\u00ed f\u00e0cil: component nou.<\/p>\n<p>Discutir el disseny quan el disseny est\u00e0 malament. Un fitxer de Figma no \u00e9s una especificaci\u00f3 tancada. De vegades la millor resposta a una pantalla \u00e9s una trucada al dissenyador, no una maqueta. La IA no et dir\u00e0 mai que all\u00f2 no s&#8217;hauria de fer aix\u00ed.<\/p>\n<p>Accessibilitat i rendiment. Totes dues es poden revisar amb ajuda, cap de les dues es pot delegar. S\u00f3n criteris que alg\u00fa ha de sostenir.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quan_es_mes_rapid_fer-ho_a_ma\"><\/span>Quan \u00e9s m\u00e9s r\u00e0pid fer-ho a m\u00e0<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>No faig servir la IA per a tot, i no per principis. Per temps.<\/p>\n<p>Si el canvi s\u00f3n tres l\u00ednies de CSS, escriure-les \u00e9s m\u00e9s r\u00e0pid que explicar on s\u00f3n. Si el component \u00e9s petit i el tinc clar al cap, escriure&#8217;l \u00e9s m\u00e9s r\u00e0pid que revisar el que em tornin. Si estic depurant alguna cosa rara, descriure el problema amb la precisi\u00f3 necess\u00e0ria perqu\u00e8 l&#8217;ajuda serveixi ja m&#8217;ha fet entendre el problema, i aleshores sol estar resolt.<\/p>\n<p>Hi ha un c\u00e0lcul bastant honest que es pot fer abans de comen\u00e7ar: si preparar el context costa m\u00e9s que la tasca, la tasca \u00e9s m\u00e9s r\u00e0pida a m\u00e0.<\/p>\n<p>Aix\u00f2 canvia segons el projecte. En un projecte on el sistema ja est\u00e0 documentat, el context \u00e9s gaireb\u00e9 gratis i la balan\u00e7a s&#8217;inclina de seguida. En un projecte que acabes d&#8217;heretar, amb un CSS de cinc anys i sense convencions clares, preparar el context \u00e9s la meitat de la feina.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Que_ha_canviat_de_debo_en_el_nostre_proces\"><\/span>Qu\u00e8 ha canviat de deb\u00f2 en el nostre proc\u00e9s<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>No \u00e9s que maquetem m\u00e9s r\u00e0pid. \u00c9s que l&#8217;ordre s&#8217;ha invertit.<\/p>\n<p>Abans, el sistema de disseny es consolidava mentre maquetaves. Comen\u00e7aves per la home, anaves resolent i, cap a la pantalla quinze, tenies clares les regles. Funcionava perqu\u00e8 el cost d&#8217;improvisar el pagava una sola persona sobre la marxa.<\/p>\n<p>Ara el sistema ha d&#8217;estar abans. Si no hi \u00e9s, la IA multiplica la improvisaci\u00f3 per quaranta pantalles en dues tardes, i aix\u00f2 no s&#8217;arregla refactoritzant: s&#8217;arregla tornant a comen\u00e7ar.<\/p>\n<p>Dit d&#8217;una altra manera: la IA ha fet que preparar b\u00e9 el sistema sigui rendible. Abans era una bona pr\u00e0ctica que de vegades et podies saltar. Ara \u00e9s la condici\u00f3 perqu\u00e8 la resta funcioni.<\/p>\n<p class=\"destacado\"><strong>El temps no ha marxat de la maquetaci\u00f3. S&#8217;ha mogut a la preparaci\u00f3 i a la revisi\u00f3.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Una_maqueta_mal_feta_no_es_veu_es_paga\"><\/span>Una maqueta mal feta no es veu, es paga<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Una maqueta mal feta no es detecta el dia de l&#8217;entrega. Es detecta sis mesos despr\u00e9s, quan cal afegir una secci\u00f3 i ning\u00fa no sap quin component reutilitzar, o quan un canvi d&#8217;espaiat obliga a tocar quinze fitxers.<\/p>\n<p>Aix\u00f2 \u00e9s el que fa que aquesta feina sigui dif\u00edcil de jutjar des de fora. El dia que es publica, tot es veu b\u00e9.<\/p>\n<p>El que \u00e9s dif\u00edcil de maquetar no va ser mai escriure l&#8217;HTML. Va ser organitzar un projecte perqu\u00e8 es pugui mantenir, veure que dos components s\u00f3n en realitat el mateix, saber que aquell <code>div<\/code> havia de ser un <code>button<\/code> i detectar que un t\u00edtol de noranta car\u00e0cters trencar\u00e0 la targeta al m\u00f2bil. Tot aix\u00f2 continua sent igual de necessari que abans.<\/p>\n<p>El que canvia \u00e9s el volum. Amb experi\u00e8ncia, la IA et treu del damunt la part mec\u00e0nica i et deixa m\u00e9s temps per a les decisions que importen. Sense experi\u00e8ncia, t&#8217;entrega molt codi que sembla bo i no tens amb qu\u00e8 avaluar-lo, aix\u00ed que l&#8217;acceptes.<\/p>\n<p class=\"destacado\"><strong>La IA no baixa el nivell de coneixement que cal per maquetar b\u00e9. El puja.<\/strong><\/p>\n<p>Si est\u00e0s comen\u00e7ant a incorporar-la al teu flux, el que jo faria no t\u00e9 res d&#8217;espectacular: dedicar el primer dia a escriure com funciona el teu projecte, i tot el temps que vingui despr\u00e9s a revisar el que et torna. Aqu\u00ed es decideix si el projecte es podr\u00e0 mantenir o si alg\u00fa el pagar\u00e0 m\u00e9s endavant.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Maquetar una pantalla amb IA sembla m\u00e0gia. Maquetar-ne quaranta amb criteri \u00e9s una altra cosa. Qu\u00e8 passa quan el sistema de disseny no est\u00e0 preparat i el CMS entra en joc.<\/p>\n","protected":false},"author":6,"featured_media":5180,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","inline_featured_image":false,"footnotes":""},"categories":[58],"tags":[],"class_list":["post-5182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolupament-web"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Maquetar amb IA: el problema no \u00e9s l&#039;HTML, \u00e9s el sistema<\/title>\n<meta name=\"description\" content=\"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s&#039;automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Maquetar amb IA: el problema no \u00e9s l&#039;HTML, \u00e9s el sistema\" \/>\n<meta property=\"og:description\" content=\"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s&#039;automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/\" \/>\n<meta property=\"og:site_name\" content=\"\u00c8mfasi\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-10T11:38:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-13T11:41:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1086\" \/>\n\t<meta property=\"og:image:height\" content=\"1448\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Manel Zambrana\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manel Zambrana\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minuts\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/\"},\"author\":{\"name\":\"Manel Zambrana\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#\\\/schema\\\/person\\\/ad0074bc23cdffda7d9fb64509117267\"},\"headline\":\"Maquetar amb IA: per qu\u00e8 el problema no \u00e9s l&#8217;HTML, \u00e9s el sistema\",\"datePublished\":\"2026-09-10T11:38:58+00:00\",\"dateModified\":\"2026-09-13T11:41:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/\"},\"wordCount\":2385,\"publisher\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/maquetar-con-ia-sistema-diseno.webp\",\"articleSection\":[\"Desenvolupament web\"],\"inLanguage\":\"ca\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/\",\"url\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/\",\"name\":\"Maquetar amb IA: el problema no \u00e9s l'HTML, \u00e9s el sistema\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/maquetar-con-ia-sistema-diseno.webp\",\"datePublished\":\"2026-09-10T11:38:58+00:00\",\"dateModified\":\"2026-09-13T11:41:38+00:00\",\"description\":\"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s'automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#breadcrumb\"},\"inLanguage\":\"ca\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#primaryimage\",\"url\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/maquetar-con-ia-sistema-diseno.webp\",\"contentUrl\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/maquetar-con-ia-sistema-diseno.webp\",\"width\":1086,\"height\":1448},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/maquetar-amb-ia-sistema-disseny\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/pagina-principal-2\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Maquetar amb IA: per qu\u00e8 el problema no \u00e9s l&#8217;HTML, \u00e9s el sistema\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#website\",\"url\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/\",\"name\":\"\u00c8mfasi\",\"description\":\"your digital partner\",\"publisher\":{\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ca\"},{\"@type\":\"LocalBusiness\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#organization\",\"name\":\"\u00c8mfasi - Agencia de Marketing Digital\",\"alternateName\":\"\u00c8mfasi - disseny web\",\"url\":\"https:\\\/\\\/emfasi.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/emfasi-profile-xxss.png\",\"contentUrl\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/emfasi-profile-xxss.png\",\"width\":1080,\"height\":1080,\"caption\":\"\u00c8mfasi - agencia de marketing digital\"},\"image\":\"https:\\\/\\\/emfasi.com\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/emfasi-profile-xxss.png\",\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/emfasi_com\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/emfasi-marketing-digital\\\/\"],\"telephone\":\"+34937278606\",\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"Rambla, 62, 1r 2a\",\"addressLocality\":\"Sabadell\",\"addressRegion\":\"Barcelona\",\"postalCode\":\"08201\",\"addressCountry\":\"ES\"},\"geo\":{\"@type\":\"GeoCoordinates\",\"latitude\":41.5432,\"longitude\":2.1093},\"areaServed\":[{\"@type\":\"City\",\"name\":\"Sabadell\"},{\"@type\":\"City\",\"name\":\"Barcelona\"},{\"@type\":\"AdministrativeArea\",\"name\":\"Catalu\u00f1a\"}],\"priceRange\":\"\u20ac\u20ac\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/#\\\/schema\\\/person\\\/ad0074bc23cdffda7d9fb64509117267\",\"name\":\"Manel Zambrana\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ca\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g\",\"caption\":\"Manel Zambrana\"},\"description\":\"Full Stack Developer en \u00c8mfasi\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/manel-zambrana-allue-846a2554\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/manel-zambrana-allue-846a2554\\\/\"],\"url\":\"https:\\\/\\\/emfasi.com\\\/ca\\\/blog\\\/author\\\/manel-zambrana\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Maquetar amb IA: el problema no \u00e9s l'HTML, \u00e9s el sistema","description":"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s'automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/","og_locale":"ca_ES","og_type":"article","og_title":"Maquetar amb IA: el problema no \u00e9s l'HTML, \u00e9s el sistema","og_description":"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s'automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.","og_url":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/","og_site_name":"\u00c8mfasi","article_published_time":"2026-09-10T11:38:58+00:00","article_modified_time":"2026-09-13T11:41:38+00:00","og_image":[{"width":1086,"height":1448,"url":"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp","type":"image\/webp"}],"author":"Manel Zambrana","twitter_card":"summary_large_image","twitter_misc":{"Escrit per":"Manel Zambrana","Temps estimat de lectura":"11 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#article","isPartOf":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/"},"author":{"name":"Manel Zambrana","@id":"https:\/\/emfasi.com\/ca\/#\/schema\/person\/ad0074bc23cdffda7d9fb64509117267"},"headline":"Maquetar amb IA: per qu\u00e8 el problema no \u00e9s l&#8217;HTML, \u00e9s el sistema","datePublished":"2026-09-10T11:38:58+00:00","dateModified":"2026-09-13T11:41:38+00:00","mainEntityOfPage":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/"},"wordCount":2385,"publisher":{"@id":"https:\/\/emfasi.com\/ca\/#organization"},"image":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#primaryimage"},"thumbnailUrl":"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp","articleSection":["Desenvolupament web"],"inLanguage":"ca"},{"@type":"WebPage","@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/","url":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/","name":"Maquetar amb IA: el problema no \u00e9s l'HTML, \u00e9s el sistema","isPartOf":{"@id":"https:\/\/emfasi.com\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#primaryimage"},"image":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#primaryimage"},"thumbnailUrl":"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp","datePublished":"2026-09-10T11:38:58+00:00","dateModified":"2026-09-13T11:41:38+00:00","description":"Maquetar amb IA va r\u00e0pid en una pantalla i es complica en quaranta. Qu\u00e8 s'automatitza de deb\u00f2, qu\u00e8 falla en integrar el CMS i qu\u00e8 no deleguem.","breadcrumb":{"@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#primaryimage","url":"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp","contentUrl":"https:\/\/emfasi.com\/wp-content\/uploads\/2026\/09\/maquetar-con-ia-sistema-diseno.webp","width":1086,"height":1448},{"@type":"BreadcrumbList","@id":"https:\/\/emfasi.com\/ca\/blog\/maquetar-amb-ia-sistema-disseny\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/emfasi.com\/ca\/pagina-principal-2\/"},{"@type":"ListItem","position":2,"name":"Maquetar amb IA: per qu\u00e8 el problema no \u00e9s l&#8217;HTML, \u00e9s el sistema"}]},{"@type":"WebSite","@id":"https:\/\/emfasi.com\/ca\/#website","url":"https:\/\/emfasi.com\/ca\/","name":"\u00c8mfasi","description":"your digital partner","publisher":{"@id":"https:\/\/emfasi.com\/ca\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/emfasi.com\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"LocalBusiness","@id":"https:\/\/emfasi.com\/ca\/#organization","name":"\u00c8mfasi - Agencia de Marketing Digital","alternateName":"\u00c8mfasi - disseny web","url":"https:\/\/emfasi.com\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/emfasi.com\/ca\/#\/schema\/logo\/image\/","url":"https:\/\/emfasi.com\/wp-content\/uploads\/2024\/01\/emfasi-profile-xxss.png","contentUrl":"https:\/\/emfasi.com\/wp-content\/uploads\/2024\/01\/emfasi-profile-xxss.png","width":1080,"height":1080,"caption":"\u00c8mfasi - agencia de marketing digital"},"image":"https:\/\/emfasi.com\/wp-content\/uploads\/2024\/01\/emfasi-profile-xxss.png","sameAs":["https:\/\/www.instagram.com\/emfasi_com\/","https:\/\/www.linkedin.com\/company\/emfasi-marketing-digital\/"],"telephone":"+34937278606","address":{"@type":"PostalAddress","streetAddress":"Rambla, 62, 1r 2a","addressLocality":"Sabadell","addressRegion":"Barcelona","postalCode":"08201","addressCountry":"ES"},"geo":{"@type":"GeoCoordinates","latitude":41.5432,"longitude":2.1093},"areaServed":[{"@type":"City","name":"Sabadell"},{"@type":"City","name":"Barcelona"},{"@type":"AdministrativeArea","name":"Catalu\u00f1a"}],"priceRange":"\u20ac\u20ac"},{"@type":"Person","@id":"https:\/\/emfasi.com\/ca\/#\/schema\/person\/ad0074bc23cdffda7d9fb64509117267","name":"Manel Zambrana","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/secure.gravatar.com\/avatar\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/576698c39e17c7731f290d1ce0eaecf7bc3d33e3c16fbe54b1ada71268439153?s=96&d=mm&r=g","caption":"Manel Zambrana"},"description":"Full Stack Developer en \u00c8mfasi","sameAs":["https:\/\/www.linkedin.com\/in\/manel-zambrana-allue-846a2554\/","https:\/\/www.linkedin.com\/in\/manel-zambrana-allue-846a2554\/"],"url":"https:\/\/emfasi.com\/ca\/blog\/author\/manel-zambrana\/"}]}},"_links":{"self":[{"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/posts\/5182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/comments?post=5182"}],"version-history":[{"count":4,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/posts\/5182\/revisions"}],"predecessor-version":[{"id":5186,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/posts\/5182\/revisions\/5186"}],"wp:attachment":[{"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/media?parent=5182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/categories?post=5182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emfasi.com\/ca\/wp-json\/wp\/v2\/tags?post=5182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}