Hallmark: la skill anti-slop que rompe el molde del diseño con IA

Abre cinco landings hechas con IA de la última semana. Cámbiales los colores mentalmente y ponlas una al lado de otra. ¿A que son la misma página?

Hero centrado, tres features en columna, un par de testimonios, tabla de precios, FAQ, footer de cuatro columnas. Siempre ese orden. Siempre esa cadencia. Da igual que sea una cafetería, una API de pagos o el portfolio de un arquitecto de software: el esqueleto es idéntico.

Ese es el AI slop del que casi nadie habla.

Se ha escrito muchísimo sobre tipografías genéricas y gradientes morados, pero el problema más profundo es estructural: los modelos aprendieron una única silueta de página y la repiten hasta el aburrimiento. Y aquí es donde entra Hallmark, una skill de diseño creada por Nutlope y respaldada por Together AI que se planta justo delante de ese reflejo.

En este post vas a encontrar:

• Qué hace Hallmark distinto de las otras skills anti-slop que ya conoces (Impeccable, frontend-design)
• Los cuatro verbos que la mueven y cuándo usar cada uno
• El verbo study, que no tiene ninguna otra herramienta del ecosistema
• Cómo la memoria de proyecto evita que dos páginas tuyas se parezcan
• Cuándo NO deberías usarla (porque tiene límites claros)

Qué es Hallmark y por qué es “aburrida a propósito” ¶

Hallmark es una skill para agentes de programación (Claude Code, Cursor y Codex) que hace que las interfaces que generan parezcan hechas, no generadas. La descripción de su propio SKILL.md es honesta hasta el desparpajo: “opinionated, short, and boring on purpose”. Opinionada, corta y aburrida a propósito.

Ese “aburrida” es una declaración de intenciones. No es una librería de componentes ni un framework CSS. Es un conjunto tirando a pequeño de reglas muy tercas que codifican el consenso del campo anti-slop —tipografía, color, layout, movimiento, microinteracciones— y que impiden al modelo caer en los defaults con los que fue entrenado.

🔑 La apuesta central de Hallmark no es la variedad visual. Es la variedad estructural. Dos páginas suyas para dos briefs distintos no deberían compartir la misma cadencia hero → 3 features → CTA → footer. Deberían parecer sitios diferentes, no cambios de color de la misma plantilla.

Si vienes de cero y no tienes claro qué es una skill en el contexto de los agentes, para un momento y lee primero la guía completa de Agent Skills. En resumen: es una carpeta con un SKILL.md que tu agente descubre y carga cuando detecta que es relevante, sin que tú le expliques nada cada vez. Hallmark es exactamente eso, con una obsesión muy concreta.

Y conviene decirlo pronto para que ajustes expectativas: es un proyecto joven. En el momento de escribir esto ronda las 38 estrellas en GitHub, publica bajo licencia MIT y va por la versión 1.0.0. No es un estándar consolidado. Es una idea afilada que merece la pena probar, no una dependencia sobre la que montar producción a ciegas.

Curso gratis · paso a paso

Barandillas para el diseño; método para el código

Hallmark le pone reglas tercas al agente para que no improvise el diseño. El mismo principio, pero para el código, es el Spec Driven Development: en este curso recorres un ciclo completo con OpenSpec sobre un proyecto real y en modo asistido, acordando el qué antes del cómo.

Entra en el curso gratis →

Por qué el problema real no es el color, es la forma ¶

El AI slop más difícil de detectar no está en la paleta, está en la macroestructura: la secuencia hero → 3 features → CTA → footer que casi todas las páginas generadas repiten. Hallmark ataca esa capa, y ahí está la diferencia que justifica el post entero.

Cuando le pides una interfaz a un modelo, no solo te devuelve la paleta promedio de todo lo que vio en su entrenamiento. Te devuelve la forma promedio. El slop del que hablamos cuando comentamos el loop engineering —esa producción acelerada de soluciones mediocres— tiene su equivalente visual en el ritmo de sección que se repite proyecto tras proyecto.

Las skills anti-slop que ya has visto por aquí atacan sobre todo la capa visual. Impeccable, la suite de Paul Bakaus, lo hace con 17 comandos que pulen crítica, color, animación y anti-patrones en un pipeline. La skill frontend-design de Anthropic lo hace con un brief de dirección de arte y una lista de prohibiciones. Ambas funcionan y las he recomendado, y las tienes ubicadas en el mapa de las 10 mejores skills para agentes junto al resto del ecosistema.

Hallmark se mete en un terreno que las otras rozan de pasada: obliga a elegir una macroestructura —una silueta de página completa— antes de tocar un solo color. Tiene 21 macroestructuras con nombre propio (Bento Grid, Long Document, Manifesto, Marquee Hero, Stat-Led, Workbench…). Eliges una entera, no seis ejes sueltos. Y aquí viene lo bueno: no puede repetir la que usó la última vez.

Compáralo con la filosofía opuesta. Impeccable te da 17 comandos para orquestar; Hallmark te da cuatro verbos y te esconde toda la maquinaria. Son dos maneras válidas de resolver el mismo problema, pero apuntan a públicos distintos: uno quiere controlar cada fase, el otro quiere que el resultado no se parezca a nada de lo anterior sin pensar en el proceso.

Cómo se instala Hallmark ¶

Lo práctico primero. Se instala con el mismo npx skills add que ya usas para el resto del ecosistema:

# Instala Hallmark en los agentes que detecte en tu sistema
npx skills add nutlope/hallmark

El instalador detecta qué agentes tienes (Claude Code, Cursor, Codex, y compañía) y coloca la skill donde corresponde. Para actualizar, vuelves a lanzar el mismo comando. Si el CLI se queja de que ya existe, borras la ruta de instalación y repites:

# Ruta en Claude Code (global)
~/.claude/skills/hallmark/

# Ruta si instalaste desde un proyecto
.agents/skills/hallmark/

También puedes copiar a mano el SKILL.md y la carpeta references/ en ~/.claude/skills/hallmark/, o meter el cuerpo del SKILL.md en .cursor/rules/hallmark.mdc si trabajas con Cursor.

Y antes de instalar nada, tienes una demo en vivo que vale su peso en oro: entra en usehallmark.com, pulsa la tecla T para ir rotando entre los 22 temas y el botón de shuffle (o R) para que combine al azar. Cada cambio de tema reconstruye la página: hero distinto, footer distinto, nav distinto. Es la mejor forma de entender de qué va esto en treinta segundos.

Los cuatro verbos: default, audit, redesign y study ¶

Toda la potencia de Hallmark cabe en un comportamiento por defecto y tres verbos explícitos. Nada de dieciocho comandos que memorizar.

Fíjate en un detalle del verbo por defecto que rompe con la costumbre: siempre pregunta antes de construir. Da igual que tu brief tenga cinco palabras o cincuenta líneas. Te pide tres cosas:

1. Audiencia: quién va a usar esto y qué le importa
2. Caso de uso: cuál es la única acción que la página debe empujar (¿suscribirse?, ¿comprar?, ¿leer?)
3. Tono: y aquí no acepta tibieza. “Limpio y moderno” no es un tono. Tienes que elegir un extremo: editorial, brutalista, suave, utilitario, lujoso, juguetón, técnico o austero

Si no quieres contestar, le dices “go ahead” y él infiere del brief… pero te dice en voz alta qué ha inferido, para que puedas corregirlo antes de que escriba 500 líneas de CSS. Esa transparencia —decirte qué eligió y por qué— es una constante en toda la skill.

💡 El verbo audit es el que menos ruido hace y el que más te va a servir a diario. Le pasas una página que ya tienes, te devuelve una lista de tells de IA ordenada por gravedad, y no te toca ni una línea. Diagnóstico puro para decidir tú qué arreglar.

Study: el verbo que no tiene nadie más ¶

hallmark study extrae el ADN estructural de un diseño que admiras —a partir de una captura o de una URL— y te lo devuelve como diagnóstico, sin clonar píxeles. Ninguna otra skill anti-slop del ecosistema tiene este verbo, y es el motivo por el que Hallmark merece un post propio y no una línea en una lista.

En concreto, hallmark study acepta una captura de pantalla o una URL de un diseño que te gusta y extrae su ADN: la macroestructura, los arquetipos de componente, el emparejamiento tipográfico y el ancla de color. Con eso te devuelve un informe de diagnóstico tipo “esto es lo que estás mirando”, nombrando cada pieza y señalando qué anti-patrones NO deberías copiar.

La clave está en lo que no hace: no clona píxeles. Extrae estructura, no una fotocopia. Y funciona en dos modos según lo que le pases:

• Modo imagen: analiza la captura, nombra el rol de cada tipografía (nunca adivina la fuente exacta, porque identificar fuentes de vista es poco fiable) y estima las bandas de color.
• Modo URL: lee el HTML y el CSS de la página con WebFetch, así que puede nombrar las fuentes exactas que carga y los valores de color reales. A cambio pierde una cosa: no puede juzgar el ritmo visual, y el propio diagnóstico te lo advierte.

Después del diagnóstico tienes tres salidas. Puedes pedirle que reconstruya tu contenido con ese ADN, puedes quedarte solo con el diagnóstico (que ya es un entregable completo), o puedes decirle “lock the DNA” y te genera un design.md portable que otras herramientas de IA como Cursor, v0 o Bolt pueden leer directamente.

Y trae una capa ética que se agradece: se niega a estudiar plantillas de pago, páginas de la competencia o galerías de Dribbble. Si la fuente es ambigua, te pregunta si es tuya, una referencia pública o el sitio de otro. La emisión del design.md en modo URL llega a pedirte que confirmes que la fuente es tuya o una referencia pública de tu propia marca.

Ninguna de las otras skills del campo hace esto. frontend-design parte de un brief. Impeccable pule lo que ya tienes. Herramientas como Open Design te dan un menú de presets de marcas conocidas y Dembrandt raspa una URL y te escupe tokens. Hallmark es la única que te deja apuntar a algo que admiras, entender por qué funciona y aplicar esa lección a lo tuyo sin plagiar.

Cómo evita Hallmark que dos páginas tuyas se parezcan ¶

Hallmark evita la repetición con una memoria de proyecto: un fichero .hallmark/log.json donde registra cada macroestructura y tema que usa, y que consulta antes de generar la siguiente página para no repetirlos. Es la pieza de ingeniería que más me gusta, porque resuelve un problema real: cuando generas varias páginas en el mismo proyecto, tienden a converger en la misma forma aunque cambies el prompt.

Según su SKILL.md, Hallmark escribe ese fichero .hallmark/log.json en la raíz de tu proyecto. Cada vez que construye una página, apunta la macroestructura, el tema y el brief resumido:

[
  { "date": "2026-04-30", "macrostructure": "Bento Grid",    "theme": "Linen",    "brief": "SaaS de observabilidad" },
  { "date": "2026-04-28", "macrostructure": "Long Document", "theme": "Linen",    "brief": "Panadería de barrio" },
  { "date": "2026-04-25", "macrostructure": "Manifesto",     "theme": "Manifesto","brief": "Manifiesto de estudio" }
]

Antes de elegir nada, lee las últimas tres a cinco entradas. Su macroestructura no puede coincidir con ninguna de las tres anteriores. Y el tema tiene que diferenciarse del último en al menos uno de tres ejes: banda de papel (oscuro/medio/claro), estilo de display (serif itálica, serif romana, sans geométrica, mono…) y matiz de acento (cálido, frío, neutro, cromático).

El resultado es que tu segunda página no puede ser un clon de la primera con otro color. La memoria de proyecto lo impide por diseño.

🛡️ Este mecanismo tiene un beneficio colateral que conecta con algo que ya hemos hablado: los contextos limpios. La skill no confía en su propia memoria de conversación, confía en un fichero en disco que sobrevive entre sesiones. Cada ejecución arranca leyendo la verdad escrita, no una justificación heredada.

El test de slop y la autocrítica antes de entregar ¶

Antes de devolverte nada, Hallmark pasa el output por un test de slop de puertas. Cada respuesta tiene que ser “no”. Un solo “sí” tumba la compilación.

Un apunte de honestidad sobre el número, porque importa: el SKILL.md actual habla de 69 puertas, mientras que el README todavía menciona 65. Es un número que crece con cada release, así que no te ancles a una cifra concreta. Lo relevante es la idea: un checklist automático que revisa desde el contraste (umbrales APCA y WCAG) hasta las huellas de nav y footer típicas de IA, pasando por métricas inventadas o texto clicable a dos líneas.

Ese último punto merece una mención aparte. Hallmark tiene una regla de copy honesto: si tú no le diste una métrica, no se la inventa. Nada de “+47% de conversión” o “más de 50.000 equipos confían en nosotros” salidos de la nada. Un “+47%” inventado es slop en el momento en que te lo inventas, y la puerta 56 del test lo caza.

Además del test, cada output pasa una autocrítica previa sobre seis ejes —Filosofía, Jerarquía, Ejecución, Especificidad, Contención y Variedad— puntuados del 1 al 5. Cualquier eje por debajo de 3 dispara una pasada de revisión. Y las notas quedan estampadas arriba del artefacto, en un comentario CSS que puedes leer:

/* Hallmark · pre-emit critique: P5 H4 E5 S4 R5 V5 */

No es magia. Es un agente obligado a revisarse a sí mismo antes de que tú tengas que hacerlo, que es justo la categoría de skills que más valor aporta en el trabajo diario.

De usar skills a crearlas

Skills con este nivel de oficio, hechas por ti

Verás cómo escribir tus propias skills en un SKILL.md reutilizable, con carga perezosa, references y scripts, que tu agente activa solo cuando hace falta. La misma mecánica que hace tan útil a Hallmark, pero para tu dominio.

Abrir la guía →

Guía premium · SKILL.md que funciona en 30+ agentes de IA

Hallmark frente a Impeccable y frontend-design ¶

Para que ubiques cada herramienta sin que te vendan humo, aquí va la comparativa práctica. Ninguna es “mejor” en abstracto: dependen de lo que busques.

Si ya usas Impeccable y te va bien, no te estoy diciendo que la cambies. Te estoy diciendo que Hallmark resuelve dos cosas que Impeccable no toca: el verbo study y la memoria de proyecto. Y que lo hace con una superficie de comandos mucho menor, lo que para muchos flujos es una ventaja y no una carencia.

Si quieres una panorámica más amplia del ecosistema, la selección de las 10 mejores skills para agentes que enlacé antes tiene el mapa completo de dónde encaja cada pieza.

Cuándo NO deberías usar Hallmark ¶

Aquí es donde la mayoría de posts te venden la moto. Yo prefiero que sepas dónde falla.

Hallmark no es para trabajar sobre una UI que ya tiene su estética montada. Su propio SKILL.md es explícito: si hay UI estilada que quieres preservar, la skill se queda callada y deja que otra herramienta lo maneje. Está pensada para greenfield —páginas o sitios nuevos desde cero— no para retocar el hero de una página que ya existe.

Tampoco dispara para pedir un componente suelto. Si le pides “diséñame un botón” o “arréglame este formulario”, detecta que es scope de componente y salta a un flujo distinto, sin toda la maquinaria de macroestructura y footer. Eso está bien pensado, pero significa que no es la herramienta para iteraciones pequeñas.

Y hay tres límites más que conviene tener presentes:

• Es un proyecto joven (38 estrellas, v1.0.0). Espera cambios, bugs y una API que puede moverse.
• El modo URL de study no juzga el ritmo visual: si el ritmo es lo que te enamoró de una página, pásale una captura en su lugar.
• Nunca copia la fotografía de la fuente que estudias. Genera placeholders equivalentes o te pide tus propios assets.

⚠️ Si tu proyecto ya tiene un sistema de diseño consolidado, Hallmark no es tu herramienta salvo que la invoques por su nombre a propósito. Forzarla sobre una estética existente es la vía rápida para acabar desinstalándola.

Cómo probarla hoy sin instalar nada ¶

Lo más rápido: abre usehallmark.com, pulsa T varias veces y observa cómo cada tema reconstruye la página entera. No es un cambio de skin, es una estructura distinta cada vez. Ahí entiendes la tesis sin leer una línea de documentación.

Si te convence, instálala con npx skills add nutlope/hallmark y arranca con el verbo más inofensivo: pásale hallmark audit a una landing tuya que sospeches que huele a IA. Te devolverá una lista de tells sin tocar nada, y esa lista sola ya te enseña a mirar tus propios diseños con otros ojos.

Luego, cuando quieras construir algo nuevo, deja que te haga las tres preguntas y elige un tono extremo de verdad. La diferencia entre “moderno” y “brutalista” en la respuesta es abismal.

¿La forma de tus últimas cinco páginas era siempre la misma? Pues ahí tienes el trabajo pendiente.

Preguntas frecuentes sobre Hallmark ¶

¿Qué es Hallmark exactamente? ¶

Hallmark es una skill de diseño anti-slop para agentes de programación como Claude Code, Cursor y Codex. Codifica un conjunto de reglas de tipografía, color, layout y estructura para que las interfaces que genera la IA no parezcan generadas por una plantilla. Está creada por Nutlope y respaldada por Together AI, bajo licencia MIT.

¿En qué se diferencia Hallmark de Impeccable? ¶

La diferencia principal es la filosofía y la superficie. Impeccable usa 17 comandos en un pipeline de pulido visual; Hallmark usa 4 verbos y apuesta por la variedad estructural entre páginas. Además, Hallmark tiene dos cosas que Impeccable no: el verbo study para extraer el ADN de un diseño y una memoria de proyecto que evita repetir formas.

¿Cómo se instala Hallmark? ¶

Se instala con npx skills add nutlope/hallmark. El instalador detecta qué agentes tienes en tu sistema y coloca la skill donde corresponde. Para actualizarla, vuelves a ejecutar el mismo comando.

¿Qué hace el verbo study de Hallmark? ¶

hallmark study acepta una captura de pantalla o una URL de un diseño que admiras y extrae su ADN: macroestructura, arquetipos, tipografía y ancla de color. Devuelve un informe de diagnóstico sin clonar píxeles y luego puede reconstruir tu contenido con ese ADN o generar un design.md portable.

¿Hallmark copia diseños de otras webs? ¶

No. study extrae estructura, no píxeles. Además se niega a estudiar plantillas de pago, páginas de la competencia o galerías tipo Dribbble, y en modo URL te pide que confirmes que la fuente es tuya o una referencia pública de tu marca antes de generar un fichero portable.

¿Sirve Hallmark para retocar una página que ya existe? ¶

No es su terreno. Hallmark está pensada para construir páginas o sitios nuevos desde cero (greenfield). Si tu proyecto ya tiene una estética montada que quieres conservar, la skill se aparta y deja que otra herramienta se encargue.

¿Con qué agentes funciona Hallmark? ¶

Con Claude Code, Cursor y Codex de forma nativa. Como sigue el formato estándar SKILL.md, en la práctica funciona con cualquier agente que entienda esa especificación, que es la mayoría del ecosistema actual.

¿Qué es el test de slop de Hallmark? ¶

Es un checklist automático (69 puertas en la versión actual del SKILL.md) que revisa cada output antes de entregarlo. Comprueba contraste, huellas de IA en nav y footer, métricas inventadas y más. Un solo fallo tumba la compilación hasta que se corrige.

¿Es Hallmark gratis? ¶

Sí. Es un proyecto open source bajo licencia MIT. Puedes usarlo, hacer fork y desplegarlo sin coste. Ten en cuenta que ejecutar la skill consume tokens de tu agente de IA, aunque usa carga perezosa para reducir el gasto.

¿Puedo usar Hallmark en producción? ¶

Con cautela. Es un proyecto joven (v1.0.0, unas 38 estrellas en GitHub) y su API puede cambiar. Es excelente para prototipar y elevar el punto de partida de tus diseños, pero no lo trates aún como una dependencia estable sobre la que montar sistemas críticos sin revisar su output.

TL;DR ¶

• 🎯 Hallmark ataca el AI slop estructural: no solo los colores, sino la forma repetida de página que todos los modelos generan.
• 🛠️ Cuatro verbos, no dieciocho: comportamiento por defecto, audit, redesign y study.
• 🔍 Su verbo estrella es study: extrae el ADN de un diseño (captura o URL) sin copiar píxeles. Nadie más en el ecosistema lo hace.
• 🧠 La memoria de proyecto (.hallmark/log.json) impide que dos páginas tuyas se parezcan, rotando macroestructura y tema.
• ⚠️ Es open source (MIT) y joven (v1.0.0): ideal para prototipar y auditar, todavía verde para producción crítica.

Fuentes ¶

• Nutlope, “hallmark” (repositorio en GitHub)
• Hallmark, “SKILL.md” (fichero de reglas del repositorio)
• Hallmark, demo interactiva y landing oficial
• Web Reactiva, “Agent Skills: guía completa para Claude Code, Codex, Cursor y OpenCode”
• Web Reactiva, “Cómo lograr diseños únicos con IA con las skills de Impeccable”
• Web Reactiva, “Cómo crear interfaces web únicas con la skill frontend-design de Claude Code”

🧨 Última oprtunidad para recibir la dinamita que mereces sobre programación con IA el próximo domingo: Suscríbete gratis a Web Reactiva en https://webreactiva.com/newsletter