[{"data":1,"prerenderedAt":353},["ShallowReactive",2],{"biblioteca-\u002Fbiblioteca\u002Fsube-de-status-tus-cards":3},{"id":4,"title":5,"author":6,"body":7,"cover":337,"description":338,"extension":339,"meta":340,"navigation":341,"nivel":342,"path":343,"publishedAt":344,"seo":345,"stem":346,"tags":347,"__hash__":352},"biblioteca\u002Fbiblioteca\u002Fsube-de-status-tus-cards.md","Sube de status tus cards · 4 reglas para que tu web hecha con IA no se vea barata","Miguel Santa",{"type":8,"value":9,"toc":322},"minimark",[10,25,30,33,36,39,42,46,49,56,59,62,64,68,71,77,80,83,85,89,92,98,101,104,106,110,113,119,122,125,127,131,134,142,153,160,163,166,174,182,189,191,195,214,219,222,289,291,295,308],[11,12,15,19],"callout",{"title":13,"type":14},"¿Apurado? Que Claude te haga un resumen rápido.","claude",[16,17,18],"p",{},"Copia el link de esta página y pégalo en Claude. Le pides algo así:",[16,20,21],{},[22,23,24],"strong",{},"\"Resúmeme esta guía y dame el prompt para rediseñar las cards de mi página.\"",[26,27,29],"h2",{"id":28},"funciona-pero-se-ve-barata","Funciona, pero se ve barata",[16,31,32],{},"Hiciste tu web con inteligencia artificial y funciona. Pero los productos salen en cajitas donde todo tiene el mismo tamaño, y la página se ve genérica.",[16,34,35],{},"Esa cajita se llama card: la tarjeta donde tu web muestra un producto. Esta es la del video, una capa de vampiro de una tienda inventada. Arrastra la barra: misma información, cuatro cambios.",[37,38],"cards-antes-despues",{},[40,41],"hr",{},[26,43,45],{"id":44},"uno-agrupación-los-papelitos-sueltos-del-mostrador","Uno · agrupación, los papelitos sueltos del mostrador",[16,47,48],{},"La card de la izquierda tiene toda la información en diez renglones del mismo tamaño. No sabes qué leer primero. La regla: lo que habla de lo mismo va en una sola línea.",[50,51],"clip-loop",{"caption":52,"label":53,"poster":54,"src":55},"Del video: cinco renglones se vuelven dos.","Cinco tiras de papel sueltas sobre el mostrador de La Cripta, una tienda de disfraces, se acomodan en dos líneas. En la card, esos cinco renglones quedan en dos: La Cripta · Bogotá, y talla, color y llegada.","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F01-atados.webp","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F01-atados.mp4",[16,57,58],{},"La tienda y la ciudad van juntas. La talla, el color y la llegada, en otra línea. Dale «Agrupar»:",[60,61],"cards-agrupar",{},[40,63],{},[26,65,67],{"id":66},"dos-jerarquía-visual-el-dato-que-manda","Dos · jerarquía visual, el dato que manda",[16,69,70],{},"Pregúntate qué decide la compra. Ese dato va grande y lo demás queda de apoyo. Un dato manda y los otros acompañan.",[50,72],{"caption":73,"label":74,"poster":75,"src":76},"Del video: el precio va grande y lo demás, de apoyo.","El profe vestido de vampiro mira la card y pregunta qué decide la compra. Se marca el precio, crece hasta quedar grande y lo demás se achica. Sale el título jerarquía visual.","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F02-globo.webp","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F02-globo.mp4",[16,78,79],{},"Así quedan tres niveles: primario, secundario y terciario. Nielsen Norman Group, una firma que estudia cómo usamos las páginas web, recomienda máximo tres tamaños de letra. Escoge el que decide en tu tienda:",[81,82],"cards-jerarquia",{},[40,84],{},[26,86,88],{"id":87},"tres-proximidad-el-imán-que-acerca-lo-que-decide","Tres · proximidad, el imán que acerca lo que decide",[16,90,91],{},"Lo que está cerca se lee como una sola cosa. Por eso lo que te hace decidir va al lado de lo que acompaña: las estrellas junto al nombre, el envío gratis junto al precio y al botón.",[50,93],{"caption":94,"label":95,"poster":96,"src":97},"Del video: lo que decide, al lado del botón.","Un imán jala la calificación de la card hasta el lado del nombre. Después el envío gratis queda junto al precio y al botón de comprar, y a la capa le cae un sello que dice vendida.","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F03-acercar.webp","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F03-acercar.mp4",[16,99,100],{},"Usa el imán y mira cuánto camina tu ojo antes de comprar:",[102,103],"cards-proximidad",{},[40,105],{},[26,107,109],{"id":108},"cuatro-ux-writing-la-calabaza-en-la-o-de-octubre","Cuatro · UX writing, la calabaza en la O de Octubre",[16,111,112],{},"¿Ves Octubre con mayúscula? Así se escribe en inglés. En español, según la RAE, los meses y los días van en minúscula, también abreviados, y el día va antes del mes: 30 de octubre.",[50,114],{"caption":115,"label":116,"poster":117,"src":118},"Del video: Octubre se vuelve octubre.","En la fecha 30 de Octubre, la O mayúscula es una calabaza. Sale un calendario en inglés que dice October 30, y la calabaza se encoge hasta quedar en una o minúscula: 30 de octubre.","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F04-calabaza.webp","\u002Fbiblioteca\u002Fsube-de-status-tus-cards\u002F04-calabaza.mp4",[16,120,121],{},"Al texto de los botones, las fechas y los avisos de tu web se le dice UX writing. Una plantilla en inglés dejó cinco pistas en esta card. Encuéntralas:",[123,124],"cards-pistas",{},[40,126],{},[26,128,130],{"id":129},"hazlo-tú-pídeselo-a-claude-por-su-nombre","Hazlo tú · pídeselo a Claude por su nombre",[16,132,133],{},"Ya no tienes que saber diseñar. Tienes que saber pedirlo por su nombre en un prompt, el mensaje que le escribes a Claude.",[135,136,139],"step-card",{"number":137,"title":138},"1","Toma una captura de tu card",[16,140,141],{},"Del computador o del celular.",[135,143,146],{"number":144,"title":145},"2","Súbela a Claude con el prompt",[16,147,148,149,152],{},"Toca el botón ",[22,150,151],{},"+"," del chat, escoge la captura y pon el prompt de abajo.",[135,154,157],{"number":155,"title":156},"3","Revísala en claro y en oscuro",[16,158,159],{},"Abre el archivo que te entrega, cambia de modo y mira que todo se lea.",[16,161,162],{},"Quita una regla y mira el resultado:",[164,165],"cards-prompt",{},[11,167,171],{"title":168,"type":169,"icon":170},"Ojo con los datos reales","warning","lucide:eye-off",[16,172,173],{},"Si tu card muestra datos de un cliente, tápalos antes de la captura.",[11,175,179],{"title":176,"type":177,"icon":178},"¿Con qué plan?","info","lucide:info",[16,180,181],{},"El plan gratis ya te arma el archivo. Si rediseñas varias cards al día, te recomiendo el Pro de 20 dólares al mes: da al menos cinco veces más uso por sesión.",[11,183,186],{"title":184,"type":185},"Patrón aplicado · nombra lo que quieres","tip",[16,187,188],{},"«Que se vea más bonita» no le dice a Claude qué cambiar. Agrupación, jerarquía, proximidad y UX writing sí, y te dicen qué revisar. Sirven con cualquier herramienta.",[40,190],{},[26,192,194],{"id":193},"lo-que-tienes-que-recordar","Lo que tienes que recordar",[196,197,198,202,205,208,211],"ul",{},[199,200,201],"li",{},"Agrupación: lo que habla de lo mismo va en una sola línea.",[199,203,204],{},"Jerarquía visual: el dato que decide va grande, con tres tamaños de letra como máximo.",[199,206,207],{},"Proximidad: las estrellas junto al nombre y el envío gratis junto al precio y al botón.",[199,209,210],{},"UX writing: meses y días en minúscula, el día antes del mes y nada en inglés.",[199,212,213],{},"Pídeselo a Claude con esos nombres y revisa el resultado en claro y en oscuro.",[215,216,218],"h3",{"id":217},"fuentes-oficiales","Fuentes oficiales",[16,220,221],{},"Consultadas el 16 de octubre de 2026.",[196,223,224,233,240,247,254,261,268,275,282],{},[199,225,226],{},[227,228,232],"a",{"href":229,"rel":230},"https:\u002F\u002Fwww.rae.es\u002Fespanol-al-dia\u002Fmayuscula-o-minuscula-en-los-meses-los-dias-de-la-semana-y-las-estaciones-del-ano",[231],"nofollow","RAE · Meses y días en minúscula",[199,234,235],{},[227,236,239],{"href":237,"rel":238},"https:\u002F\u002Fwww.rae.es\u002Fortograf%C3%ADa\u002Fuso-de-la-tilde-y-las-may%C3%BAsculas-en-las-abreviaturas",[231],"RAE · Mayúsculas en las abreviaturas",[199,241,242],{},[227,243,246],{"href":244,"rel":245},"https:\u002F\u002Fwww.rae.es\u002Fortograf%C3%ADa\u002Fmodelos-de-expresi%C3%B3n-de-la-fecha",[231],"RAE · Cómo se escribe la fecha",[199,248,249],{},[227,250,253],{"href":251,"rel":252},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fvisual-hierarchy-ux-definition\u002F",[231],"Nielsen Norman Group · Jerarquía visual",[199,255,256],{},[227,257,260],{"href":258,"rel":259},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fgestalt-proximity\u002F",[231],"Nielsen Norman Group · Proximidad",[199,262,263],{},[227,264,267],{"href":265,"rel":266},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fcommon-region\u002F",[231],"Nielsen Norman Group · Región común",[199,269,270],{},[227,271,274],{"href":272,"rel":273},"https:\u002F\u002Fwww.nngroup.com\u002Farticles\u002Fux-writing-study-guide\u002F",[231],"Nielsen Norman Group · UX writing",[199,276,277],{},[227,278,281],{"href":279,"rel":280},"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F8241126-uploading-files-to-claude",[231],"Claude · Subir archivos",[199,283,284],{},[227,285,288],{"href":286,"rel":287},"https:\u002F\u002Fclaude.com\u002Fpricing",[231],"Claude · Planes",[40,290],{},[26,292,294],{"id":293},"qué-viene-después","Qué viene después",[11,296,300],{"title":297,"type":298,"icon":299},"Tu card ya se ve bien. Ahora, que se mueva","success","lucide:arrow-right",[16,301,302,303,307],{},"Una card ordenada también puede moverse con intención: el precio que llega con un rebote suave, el botón que responde al toque. En ",[227,304,306],{"href":305},"\u002Fbiblioteca\u002Fmotion-graphics-con-claude","Motion graphics con Claude"," están las 16 animaciones y cómo pedirlas.",[16,309,310,311,315,316,321],{},"Si te quedó alguna duda concreta: comenta ",[312,313,314],"code",{},"CARDS"," en el Reel o escríbeme por DM en ",[227,317,320],{"href":318,"rel":319},"https:\u002F\u002Finstagram.com\u002Fsantaia.lab",[231],"@santaia.lab",".",{"title":323,"searchDepth":324,"depth":324,"links":325},"",2,[326,327,328,329,330,331,332,336],{"id":28,"depth":324,"text":29},{"id":44,"depth":324,"text":45},{"id":66,"depth":324,"text":67},{"id":87,"depth":324,"text":88},{"id":108,"depth":324,"text":109},{"id":129,"depth":324,"text":130},{"id":193,"depth":324,"text":194,"children":333},[334],{"id":217,"depth":335,"text":218},3,{"id":293,"depth":324,"text":294},null,"Agrupación, jerarquía, proximidad y UX writing. Las cuatro reglas que arreglan una card plana y el prompt para que Claude rediseñe la tuya.","md",{},true,"principiante","\u002Fbiblioteca\u002Fsube-de-status-tus-cards","2026-10-16",{"title":5,"description":338},"biblioteca\u002Fsube-de-status-tus-cards",[348,349,14,350,351,342],"diseno-web","cards","ux-writing","prompts","hXoQUh1tj0H2Jf_smFZsTzMzDcfme5KOIbS60vb8yTg",1792180551981]