Hallmark: la skill para que lo que diseña tu IA no parezca hecho con IA

Todas las webs hechas con IA se parecen: mismo degradado, misma tipografía, mismo hero. Hallmark es la skill que rompe ese patrón. Cómo funciona y cómo instalarla.

Guillermo del Pino
Guillermo del Pino
Nutlope/hallmark
Estrellas
23,9K
Lenguaje
CSS
Licencia
MIT
Datos de
11 ago 2026

Las estrellas cambian a diario. La cifra es la del día indicado, no la de hoy.

Hallmark es una skill de diseño para Claude Code, Cursor y Codex que corrige el problema más reconocible de las interfaces generadas con IA: que todas se parecen. Se instala con npx skills add nutlope/hallmark, trae veintiún temas visuales y somete cada resultado a cincuenta y siete comprobaciones antes de entregártelo. Está hecha por Together AI y es MIT.

Si alguna vez has pedido una landing a un agente y te ha devuelto el mismo degradado morado, la misma tipografía y el mismo bloque de tres tarjetas que has visto cuatrocientas veces, este repo va exactamente de eso.

Por qué toda la IA diseña igual

No es casualidad ni falta de capacidad. Los modelos aprenden de lo que hay, y lo que hay en internet son millones de páginas construidas sobre las mismas plantillas. Cuando le pides una web a un modelo, te devuelve la media estadística de todas las webs que ha visto. Esa media tiene una cara concreta y la reconoce cualquiera: degradado en el hero, tarjetas con bordes redondeados, iconos de línea, mucho espacio en blanco y cero personalidad.

Publiqué 172 artículos en marzo y fue mi peor mes

Tenía esta web parada y la estoy rehaciendo con IA. Cambié la forma de hacerlo y en once días de agosto ha tenido más visitas desde Google que en todo julio. Te cuento por correo qué cambié.

impresiones clics1-9 ago · 710 → 2.522
  • · Por qué la oportunidad es mayor ahora, y no menor
  • · Lo único que la IA no te puede copiar: tu criterio
  • · Cómo hacer que Google te vea en días, no en seis meses

El problema no es que sea feo. Es que grita "esto lo ha hecho una IA", y en 2026 eso ya se ha convertido en una señal de poco esfuerzo a ojos del visitante.

Hallmark ataca eso por el único sitio por donde se puede atacar: dándole al modelo instrucciones explícitas para que se salga de sus valores por defecto.

Qué hace exactamente

El proceso que describe el repo tiene tres piezas:

  1. Elige una macroestructura según el encargo, en vez de aplicar siempre el mismo esqueleto.
  2. La viste con uno de veintiún temas visuales distintos.
  3. Pasa cincuenta y siete comprobaciones anti-slop y una autocrítica antes de darte el resultado.
Seis páginas generadas con Hallmark a partir de encargos distintos: una feria de impresión, una herramienta de facturación, un apiario, una web de software. Ninguna se parece a otra. Imagen del repositorio oficial del proyecto.
Seis páginas generadas con Hallmark a partir de encargos distintos: una feria de impresión, una herramienta de facturación, un apiario, una web de software. Ninguna se parece a otra. Imagen del repositorio oficial del proyecto.

La consecuencia práctica, y es lo que hace interesante al proyecto: dos páginas hechas con Hallmark para dos encargos distintos no son la misma plantilla con otros colores, tienen estructuras diferentes. En la imagen de arriba están todas generadas con la misma skill, y la diferencia entre la feria de impresión y la web de facturación no es el color: son tipografías, retículas y jerarquías distintas. Cuando el encargo no encaja con ninguno de los temas del catálogo, entra en un modo Custom y diseña paleta, tipografía y estructura desde cero, con las mismas comprobaciones encima.

Lo que devuelve es HTML y CSS autocontenidos, con la macroestructura anotada en un comentario del CSS.

Una de las páginas de ejemplo generadas con Hallmark, con su tipografía y su retícula propias. Imagen del repositorio oficial del proyecto.
Una de las páginas de ejemplo generadas con Hallmark, con su tipografía y su retícula propias. Imagen del repositorio oficial del proyecto.

Los cuatro comandos

ComandoQué hace
(por defecto)Construye interfaz nueva aplicando todo el conjunto de reglas
hallmark audit <objetivo>Puntúa código existente contra los antipatrones. Te da la lista, no toca nada
hallmark redesign <objetivo>Tira la estructura, conserva textos y arquitectura, y reconstruye con otra huella
hallmark study <captura | URL>Extrae el "ADN" de un diseño que admiras: estructura, tipografías y color base

El que más partido le he visto es audit, precisamente porque no edita. Le pasas algo que ya tienes publicado y te devuelve una lista de lo que delata que se generó con IA. Es una segunda opinión barata antes de enseñarle nada a un cliente.

Y study tiene un matiz honesto que conviene destacar: se niega a clonar píxel a píxel y a copiar plantillas de pago. Extrae principios —cómo está estructurado, qué pareja de tipografías usa, cuál es el color ancla—, no el diseño ajeno.

Cómo instalarlo

La vía corta, válida para cualquier agente:

npx skills add nutlope/hallmark

Puedes volver a ejecutarlo cuando quieras para actualizar. Si prefieres copiar los archivos a mano, el SKILL.md y la carpeta references/ van a:

  • Claude Code: ~/.claude/skills/hallmark/
  • Codex: ~/.codex/skills/hallmark/ para tenerla siempre, o .codex/skills/hallmark/ solo en ese proyecto
  • Cursor: .cursor/rules/hallmark.mdc, y aquí ojo: se pega el cuerpo del SKILL.md sin el frontmatter de la cabecera

Después no hay que configurar nada. La skill se activa cuando le pides trabajo de interfaz.

Cómo sacarle partido de verdad

Un aviso por experiencia: si le das un encargo genérico, te devolverá algo genérico. La skill puede elegir estructura y tema, pero necesita saber para quién es. Compara:

Hazme una landing para una clínica dental.
Hazme una landing para una clínica dental de barrio, familiar, treinta
años abiertos, que compite contra franquicias que venden barato. El
visitante llega con miedo al precio y a que le vendan de más. Nada de
aspecto corporativo ni de startup.

Con el segundo encargo la skill tiene material para elegir. Con el primero, vuelves a la media estadística por otro camino.

Otro uso que funciona: pedirle audit de una página tuya antes de rediseñar nada. Muchas veces la lista de problemas es más corta de lo que temías y te ahorras rehacer.

Aplicaciones prácticas

  • Landings de campaña. Si lanzas varias al mes, el riesgo de que todas acaben iguales es real. Aquí está el mayor ahorro.
  • Auditar lo que ya publicaste. audit sobre páginas antiguas, sin tocar nada, para decidir qué merece un repaso.
  • Recuperar un rediseño encallado. redesign conserva textos y arquitectura, así que no pierdes el trabajo de contenido.

Cuándo no te compensa

  • Si tienes un sistema de diseño propio, esto choca con él. Hallmark decide estructura y estética; si ya las tienes decididas, sobra.
  • Si trabajas dentro de un producto grande y consistente, tampoco: ahí la coherencia vale más que la personalidad.
  • No es accesibilidad ni rendimiento. Que no parezca hecho por IA no significa que sea usable, rápido ni accesible. Eso sigue siendo tu trabajo.
  • No sustituye a un diseñador. Sube mucho el suelo, no el techo.
Newsletter Semanal

Inteligencia Artificial aplicada a negocio

Sin humo. Solo experimentos reales, prompts que funcionan y estrategias de escalabilidad.

Preguntas frecuentes

¿Hallmark funciona con Codex o solo con Claude Code?

Funciona con los dos, y también con Cursor. Es una skill en formato abierto: el mismo SKILL.md lo leen los distintos agentes, solo cambia la carpeta donde lo pones. En Cursor hay que pegar el cuerpo sin el frontmatter.

¿Hace falta saber diseñar para usarlo?

No, pero sí saber describir. La calidad del resultado depende casi por completo de cuánto contexto le des sobre el negocio, el público y el tono. Un encargo de una línea devuelve algo tan genérico como sin la skill.

¿Qué son las cincuenta y siete comprobaciones?

Un conjunto de reglas contra los patrones que delatan un diseño generado por IA. Se aplican antes de entregarte el resultado, junto con una autocrítica del propio modelo. Están en el SKILL.md y en la carpeta references/, así que puedes leerlas y adaptarlas.

¿Puedo copiar el diseño de otra web con study?

No exactamente, y es deliberado. study extrae principios —estructura, pareja tipográfica, color ancla— pero se niega a hacer clones píxel a píxel y a reproducir plantillas de pago.

¿Sirve para webs ya publicadas o solo para empezar de cero?

Para las dos cosas. audit puntúa lo que ya tienes sin modificarlo y redesign reconstruye conservando textos y arquitectura de la información.

Analizo los repos que entran en tendencia y cómo sacarles partido con Claude Code y Codex. Ver todos los repos analizados.