Funciona, pero se ve barata
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.
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.
La misma card, antes y después
La Cripta · Bogotá
Talla M · negro · llega el 30 de octubre
Capa de vampiro
Tienda La Cripta
Bogotá
Calificación: 4,8 (312 reseñas)
Talla: M
Color: negro
Llega: 30 de Octubre
Precio: US$24
Envío gratis
Comprar
- Agrupación
10 renglones5 bloques - Jerarquía
1 tamaño de letra3 tamaños - Proximidad
estrellas lejosjunto al nombre - UX writing
Octubreoctubre
Uno · agrupación, los papelitos sueltos del mostrador
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.
La tienda y la ciudad van juntas. La talla, el color y la llegada, en otra línea. Dale «Agrupar»:
El mostrador de la tienda
- Capa de vampiro
- Tienda La Cripta
- Bogotá
- Calificación: 4,8 (312 reseñas)
- Talla: M
- Color: negro
- Llega: 30 de Octubre
- Precio: US$24
- Envío gratis
- Comprar
Diez renglones del mismo tamaño. ¿Qué lees primero?
Dos · jerarquía visual, el dato que manda
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.
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:
¿Qué decide la compra?
Capa de vampiro
La Cripta · Bogotá
Talla M · negro · llega el viernes 30
4,8 (312 reseñas)
US$24
Envío gratis
Comprar- Primario US$24lo que decide
- Secundario Capa de vampirolo que identifica
- Terciario todo lo demásde apoyo
La capa está en muchas tiendas. Si compites por precio, los US$24 mandan.
Tres · proximidad, el imán que acerca lo que decide
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.
Usa el imán y mira cuánto camina tu ojo antes de comprar:
Lo que hace decidir, cerca
Capa de vampiro
La Cripta · Bogotá
Talla M · negro · llega el viernes 30
4,8 (312 reseñas)
Cuánto sube y baja tu ojo
100 %
- 1 el nombre
- 2 las estrellas
- 3 el precio
- 4 el envío gratis
- 5 el botón
Para decidir, tu ojo baja hasta el final por las estrellas y vuelve a la foto por el envío gratis.
Cuatro · UX writing, la calabaza en la O de Octubre
¿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.
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:
Cinco pistas de una plantilla en inglés
0 de 5
Capa de vampiro4,8 (312 )
Llega el
Precio especial hasta el 31
US$24
Lo que encontraste
- Todavía nada. Empieza por la fecha.
Toca lo que suena a plantilla en inglés.
Hazlo tú · pídeselo a Claude por su nombre
Ya no tienes que saber diseñar. Tienes que saber pedirlo por su nombre en un prompt, el mensaje que le escribes a Claude.
Toma una captura de tu card
Del computador o del celular.
Súbela a Claude con el prompt
Toca el botón + del chat, escoge la captura y pon el prompt de abajo.
Revísala en claro y en oscuro
Abre el archivo que te entrega, cambia de modo y mira que todo se lea.
Quita una regla y mira el resultado:
Las reglas que le pides
El prompt
Rediseña la card de la captura con estas reglas de diseño, una por una, y muéstrame cómo queda después de cada paso:
- Agrupación: pon en una sola línea lo que habla de lo mismo.
- Jerarquía visual: el dato que decide la compra va grande y lo demás queda de apoyo, con tres tamaños de letra como máximo. Si no sabes cuál es ese dato, pregúntame antes de seguir.
- Proximidad: pon lo que hace decidir al lado de lo que acompaña. La calificación junto al nombre y el envío gratis junto al precio y al botón.
- UX writing: revisa el texto en español. Meses y días en minúscula, también abreviados, el día antes del mes y nada en inglés.
No cambies la información ni los colores de mi marca.
Entrégamela en un archivo HTML que se vea bien en modo claro y en modo oscuro, con un botón para pasar de uno a otro.
Claude
Listo. Apliqué 4 reglas, una por una:
Agrupación: la tienda va con la ciudad, y la talla, el color y la llegada quedaron en una línea.
Jerarquía: dejé el precio como el dato que manda. Si en tu tienda decide otro, dime cuál.
Proximidad: las estrellas pasaron al lado del nombre y el envío gratis al lado del precio.
UX writing: Octubre pasó a minúscula y la fecha quedó como viernes 30 de octubre.
Te dejé el archivo con un botón para pasar de claro a oscuro.
Capa de vampiro 4,8 (312)
La Cripta · Bogotá
Talla M · negro · llega el viernes 30 de octubre
- Todo se lee: nada se pierde contra el fondo.
- El precio sigue siendo lo primero que ves.
- El botón se distingue del resto.
Pásala a oscuro y vuelve a mirar las tres cosas.
Lo que tienes que recordar
- Agrupación: lo que habla de lo mismo va en una sola línea.
- Jerarquía visual: el dato que decide va grande, con tres tamaños de letra como máximo.
- Proximidad: las estrellas junto al nombre y el envío gratis junto al precio y al botón.
- UX writing: meses y días en minúscula, el día antes del mes y nada en inglés.
- Pídeselo a Claude con esos nombres y revisa el resultado en claro y en oscuro.
Fuentes oficiales
Consultadas el 16 de octubre de 2026.
- RAE · Meses y días en minúscula
- RAE · Mayúsculas en las abreviaturas
- RAE · Cómo se escribe la fecha
- Nielsen Norman Group · Jerarquía visual
- Nielsen Norman Group · Proximidad
- Nielsen Norman Group · Región común
- Nielsen Norman Group · UX writing
- Claude · Subir archivos
- Claude · Planes
Qué viene después
Si te quedó alguna duda concreta: comenta CARDS en el Reel o escríbeme por DM en @santaia.lab.