Hallmark: La Skill de Diseño Anti-AI-Slop para Claude Code (2026)

Hallmark (Nutlope/hallmark) está hoy en el puesto número uno del trending semanal de GitHub. Es una skill de diseño para Claude Code, Codex, Cursor y OpenCode con un solo objetivo: que tu agente no entregue la página que todos los modelos entregan por defecto, con el fondo crema, la etiqueta sobre cada título, el degradado violeta y la card dentro de otra card. Lo logra con reglas escritas, cincuenta temas y un linter que revisa el resultado en un navegador real.

El 3 de noviembre de 2026 leí el README, SKILL.md, las referencias de gates, redesign y flow, los scripts de instalación, del hook y del linter y el historial de commits del README, y después los comparé con Impeccable y la skill frontend-design de Anthropic. No la instalé ni armé ninguna página: los comandos están contrastados con el commit 52328cb (versión 2.0.0) y los conteos son míos.

1. Qué Es: Stars, Licencia y la Reescritura v2

El repo se presenta como una “anti-AI-slop design skill for Claude Code, Cursor, and Codex”. Vive en la cuenta de Nutlope (Hassan El Mghari), y el README dice “Made by Together AI”. GitHub lo etiqueta como CSS por el sitio de demo, pero el producto es Markdown más unas 7,500 líneas de scripts de Node. Cuando lo revisé estaba primero en el trending semanal.

⭐

Stars en GitHub

~46.5K

API de GitHub, 3 nov 2026, con ~2.5K forks

📈

Esta semana

+10.5K

#1 en el trending semanal de GitHub, 3 nov 2026

⚖️

Licencia

MIT

Skill y scripts. Las 755 fotos de la biblioteca mantienen sus propias licencias

🏷️

Versión

2.0.0

En SKILL.md y plugin.json. Sin releases ni tags en GitHub

Por qué está en trending ahora

El repo es del 27 de abril de 2026, pero la versión que la gente está marcando con estrella es nueva: la 2.0.0 entró el 21 de octubre y el README pasó a decir “fifty themes” el 27 de octubre. Alrededor hay una pared de agent skills: Impeccable sumó más stars en bruto esta semana (+11,754) y aun así quedó quinto, junto al repo de skills de Anthropic, obra/superpowers y la security-audit-skill de Cloudflare.

Los números que leíste probablemente están viejos

La cobertura anterior cita versiones previas. El README decía veintitrés temas y sesenta y cinco gates el 7 de mayo de 2026 (22 cuando Pastel salió ese mismo día). Un commit del 2 de junio fusionó 70 gates en 57, lo que coincide con los “20 temas, 57 gates y cuatro verbos” de una reseña de julio. La v2 de hoy tiene cincuenta temas, 90 cláusulas de gates bajo 71 números más 26 chequeos Finish (conteo mío de gates.md), y ya no tiene el verbo study. Confiá en el repo, no en el número redondo.

2. Qué Codifica: Floor, Reflex y Finish

El README de la v1 presentaba a Hallmark como “el consenso anti-AI-slop” en tipografía, color, layout, movimiento, microinteracciones y variedad estructural. La v2 mantiene esas áreas y ordena cada regla según qué tan fuerte obliga. Los números entre paréntesis son los ids de gate que reporta sloplint.

🔤

Tipografía

Nada de etiqueta (eyebrow) sobre un título ni de labels en mayúsculas espaciadas o versalitas (54, 67): son “house rules”, más estrictas que el resto del oficio. Nunca una sola palabra en itálica dentro de un título en redonda (38i). Dos familias tipográficas como máximo y cuerpo de texto de 16px o más.

🎨

Color

Cada color y cada fuente pasan por un token en :root (48). Nada de degradados de violeta a azul, de violeta a rosa o cian sobre oscuro, incluido el texto con degradado (2a), y nada de #000 o #fff literales fuera del bloque de tokens (7a).

📐

Layout

El título, su frase y la acción principal entran en 1280 × 800 (44b). Unas 80 palabras por pantalla (58), un contenedor con ancho máximo y centrado (44d), y overflow-x: clip, nunca hidden (34). Nada de cards dentro de cards.

🎞️

Movimiento

Nunca transition: all, y nunca animar width, height, top o left (10a). Cada animación tiene su alternativa para movimiento reducido, el contenido se ve con JavaScript desactivado (27, 62) y una página tiene como mucho una animación de aparición.

🖱️

Estados y microinteracciones

Todo elemento interactivo tiene un :focus-visible instantáneo (26a, 15), y los controles se construyen en los ocho estados. El README también cuenta como señal un formulario que da las gracias sin enviar nada.

🔀

Variedad estructural y honestidad

Los temas y las formas de página se reparten contra .hallmark/log.json, así que un build tiene que diferir de los tres anteriores (8, 32). Nada de métricas, testimonios ni muros de logos inventados (46a): un dato que falta queda ausente y una foto que falta se vuelve un slot.

Floor, Reflex, Finish

Una página con un hallazgo Floor abierto nunca se entrega, y esos gates no se pueden eximir: contraste, foco, movimiento reducido, datos inventados, un layout roto en el teléfono, las house rules. Un build puede eximir un gate Reflex en el sello de su CSS, con evidencia y una razón propia de esa página. Los chequeos Finish (F1–F26, como las comillas rectas) reciben una respuesta, pero nunca bloquean.

Una exención Reflex, tal como la escribe gates.md

/* Hallmark · waive 47b · one frame, a real terminal capture inside · the terminal is the product being sold */

Cuatro géneros, cincuenta temas

Primero, el prompt se clasifica en silencio en un género: IA, música y voz van a atmospheric; SaaS, APIs y dev tools van a modern-minimal; chicos, juegos y comunidad van a playful; el resto va a editorial. Los cincuenta temas se reparten en 20 editorial, 12 modern-minimal, 9 playful y 9 atmospheric (conteo mío). Cada uno es un material de 8 KB o menos con una imagen, nunca un layout.

3. La Arquitectura en 4 Pasos

SKILL.md corre un build en ocho pasos numerados. Agrupados por lo que de verdad pasa, una petición atraviesa cuatro etapas.

🧭

1. Pre-flight y una sola pregunta

Primero lee el proyecto: un design.md (un sistema bloqueado que pisa todo lo demás), fuentes, paleta, config de Tailwind, el framework y el producto mismo si hay una URL o un dev server para capturar. Después pregunta una sola vez por el material, la audiencia, la acción principal y un tono (“clean and modern” no cuenta). Si respondés go ahead, infiere.

🃏

2. Género, reparto y sorteo

scripts/theme.mjs deal ofrece tres temas que encajan con el prompt y no repiten lo del log; el agente elige uno por su imagen. Después, draw reparte la anatomía según el trabajo de la página (reservar, comprar, suscribirse): una de 21 formas, la postura del hero, navegación, footer y dónde va la acción. Si pedís custom, los temas quedan afuera; el Floor sigue.

🏗️

3. Scaffold y el hero solo

theme.mjs scaffold escribe tokens.css y base.css al lado de tu hoja de estilos. La navegación y el hero van primero, se lintean con --stage hero y los revisa un subagente con contexto limpio antes de que exista nada debajo del pliegue. Después vienen de seis a nueve secciones, 450 palabras visibles como máximo y un sello en la línea 1 del CSS que registra cada decisión.

🔍

4. Barrido: linter y revisión en frío

sloplint lee HTML, CSS, JSX, TSX, Vue, Svelte y Astro, incluidas las clases de Tailwind. Con --render revisa ocho anchos en Chrome: contraste contra los píxeles reales, anillos de foco encontrados tabulando, el pliegue. Un segundo subagente revisa la página terminada, y su primera palabra decide qué pasa: recapture, rebuild, fix o ship.

Lo que cuesta un build en contexto

Sumé lo que carga SKILL.md en un build de página: SKILL.md, gates.md, craft.md, layout.md, imagery.md, patterns.md y anatomy.md, más un tema y un género. Son hasta unos 135 KB de Markdown (solo gates.md pesa 39 KB), más o menos entre 30,000 y 40,000 tokens, antes de las capturas y dos revisiones de subagentes. El ROADMAP todavía lista medir el costo en tokens de un build como trabajo pendiente.

Solo toca interfaces existentes si la nombrás

La descripción de la skill indica usarla en builds nuevos y nunca sobre un diseño existente, salvo que nombres a Hallmark. Si pedís un restyle sin nombrarla, el agente trabaja con el sistema de tu proyecto. Es deliberado, y es la mayor diferencia con Impeccable.

4. Quickstart: Instalala en Cada Agente

La vía principal del README es la CLI de skills; también hay un plugin para Claude Code y un instalador desde un clon que valida cada tema antes de copiar. Si las skills son nuevas para vos, empezá por mi guía de agent skills. Contrasté cada comando y cada flag con el README, los scripts y la documentación de la CLI, pero no los ejecuté.

Opción A: la CLI de skills (README)

# Pick agents interactively; -g makes it available in every project
npx skills add nutlope/hallmark -g

# One agent only: claude-code, codex, cursor, opencode or github-copilot
npx skills add nutlope/hallmark -g --agent claude-code

# Leave out -g to install into the current project instead
npx skills add nutlope/hallmark --agent codex

Opción B: como plugin de Claude Code

# Inside Claude Code (invoked afterwards as /hallmark:hallmark)
/plugin marketplace add nutlope/hallmark
/plugin install hallmark@hallmark

Opción C: desde un clon, más el hook de edición

git clone --depth 1 https://github.com/Nutlope/hallmark.git
cd hallmark

# Validates every theme and reference, then copies; --dry-run changes nothing
node skills/hallmark/scripts/install.mjs --dry-run
node skills/hallmark/scripts/install.mjs --claude

# Edit-time Floor check for Claude Code: preview the JSON, then install it
node ~/.claude/skills/hallmark/scripts/install-hook.mjs --print
node ~/.claude/skills/hallmark/scripts/install-hook.mjs --global

# Optional: the browser tier (sloplint --render, screenshots) also needs Chrome
npm i -g puppeteer-core

Primeras corridas: build, audit, redesign y lint

# In Claude Code, Cursor or OpenCode (Codex: $hallmark)
/hallmark a booking page for a two-chair barbershop
/hallmark a pricing page for <product>, custom
/hallmark audit ./index.html
/hallmark redesign ./src/app

# Lint a page yourself; without Chrome only the static tier runs
node ~/.claude/skills/hallmark/scripts/sloplint.mjs ./index.html --render

# Framework project: lint the changed files, render the route from the dev server
node ~/.claude/skills/hallmark/scripts/sloplint.mjs app/page.tsx --render --url http://localhost:3000/

Codex usa $hallmark, y el plugin se invoca con /hallmark:hallmark. Si la skill no se activa sola, nombrala: “use hallmark to build…”. Las rutas de sloplint asumen la copia de Claude Code y una shell Unix.

Dónde queda instalada

Con -g, Claude Code recibe ~/.claude/skills/hallmark y Codex recibe ~/.agents/skills/hallmark; Cursor y OpenCode leen esas copias. install.mjs no le hace una copia aparte a OpenCode si ya existe una de esas, salvo que le pases --opencode --copy. La carpeta instalada pesa unos 7 MB, sobre todo por las imágenes de los temas.

Dos requisitos de Node

El README pide Node 18 o superior, que es lo que necesitan los scripts de Hallmark. La CLI de skills es más exigente: la versión 1.7.6 declara Node 22.20 o superior. Con un Node más viejo, actualizalo o tomá la vía del clon.

Sin Chrome, los chequeos de render no corren

sloplint --render y los scripts de capturas necesitan puppeteer-core y Chrome o Chromium. Sin eso solo corren los gates estáticos, y la skill tiene que avisarlo en lugar de declarar que pasó. En Codex, el sandbox workspace-write deja la red apagada por defecto.

Qué cambia el hook

install-hook.mjs agrega una entrada PostToolUse (matcher Write|Edit|MultiEdit, timeout de 10 segundos) a .claude/settings.json en la carpeta actual, o a ~/.claude/settings.json con --global. Correlo desde la copia instalada para que el hook no apunte a un clon. Solo lintea el tier Floor y nunca bloquea; --print te muestra el JSON antes y --remove lo deshace.

5. Audit y Redesign: Cómo Funcionan

Los dos verbos cargan references/redesign.md y arrancan registrando cada página del objetivo tal como está.

🔎

audit <target>: un reporte, sin cambios

sloplint --before guarda los hallazgos y las capturas en .hallmark/. El agente mira las capturas antes de darle peso al linter, escribe una lectura de cuatro líneas (propósito, qué funciona, qué se ve generado, qué está roto) y reporta por tier con archivo:línea y la profundidad de arreglo más liviana. No modifica ningún archivo tuyo.

Una URL en vivo sin código detrás solo se puede auditar, con --url

🛠️

redesign <target>: completo por defecto

Conserva cada dato, link, formulario, campo, handler, ruta, id y test hook, y cambia el sistema y la composición. Pide un árbol de git limpio (nunca hace commit ni stash por vos) y muestra un plan a nivel de archivos antes de borrar nada. Al final, sloplint --kept hace fallar la corrida si se perdió un link, un campo o un handler, y .hallmark/compare.html muestra el antes y el después.

Los colores y fuentes de marca se quedan; el índigo de fábrica no cuenta como marca

🎚️

restyle y polish: solo si lo pedís

Si decís keep the layout o restyle, solo cambian el color, la tipografía, los radios, las sombras, el movimiento y los controles. Si decís polish, solo se arregla lo que nombra un gate. Las profundidades no se mezclan: un polish que encuentra el concepto equivocado recomienda la versión completa.

Acá los gates de layout se reportan como notas, así un polish no re-espacia tu sitio

6. Hallmark vs Impeccable vs frontend-design de Anthropic

Las tres persiguen las mismas señales y comparten linaje: Impeccable dice que arrancó de la skill frontend-design de Anthropic, y Hallmark cita a las dos como inspiración. Se diferencian en el alcance y en cuánta maquinaria viene con el gusto.

Lado a lado (READMEs y archivos SKILL.md, 3 nov 2026)

Aspecto	Hallmark	Impeccable	frontend-design
Forma	Una skill de build, 50 temas y un linter	24 comandos (polish, bolder, critique, audit…) más un detector	Un solo SKILL.md de unos 9.4 KB
Su fuerte	Páginas nuevas desde un prompt	Interfaces que ya existen (según su README)	Una base de buen gusto en cualquier build
Código existente	Solo si la nombrás: audit o redesign	Cualquier comando, apuntado a una página o un componente	Sigue el brief, sin modo de revisión
Chequeos mecánicos	sloplint (tiers estático y de render en Chrome), más un hook opcional en Claude Code	62 reglas deterministas por CLI, CI, extensión de Chrome o un hook de edición	Ninguno; autocrítica con capturas
Agentes	Claude Code, Codex CLI, Cursor y OpenCode	19 en su lista, de Claude Code a Gemini CLI y Kiro	Cualquier cliente de Agent Skills
Red	Fotos de Wikimedia; imágenes de Together AI solo con TOGETHER_API_KEY	Trae direcciones visuales de impeccable.style para diseños nuevos	Ninguna
Licencia, stars	MIT, ~46.5K	Apache-2.0, ~101K	Apache-2.0, dentro de anthropics/skills (~187K)
Instalación	npx skills add nutlope/hallmark -g	npx impeccable install	/plugin marketplace add anthropics/skills y después /plugin install example-skills@anthropic-agent-skills

¿Conviene combinarlas?

Yo no cargaría dos skills de gusto en un mismo build: cada una tiene su propio catálogo y su idea de qué es un default, y el agente termina arbitrando. Elegí una para diseñar; sumar un segundo detector sobre el resultado es barato. Es mi criterio después de leerlas, no una medición.

7. Casos de Uso: Dónde Se Gana su Lugar

Hallmark es opinado, así que encaja mucho mejor en algunos trabajos que en otros. Estos cuatro aprovechan sus puntos fuertes.

🚀

Páginas de lanzamiento para side projects y dev tools

El género modern-minimal, la anatomía guiada por el trabajo y el build con el hero primero apuntan a la página que de otro modo saldría con componentes de fábrica y un degradado índigo. Dale capturas reales, o un dev server para capturar, y el producto encabeza la página.

Ideal para: una página de producto que todavía no tiene un design system detrás

🏪

Sitios de pequeños negocios

anatomy.md sabe dónde ponen la acción los sitios reales de cada rubro (el menú, la reserva, la tienda), y la biblioteca de fotos llena los slots con imágenes acreditadas de Wikimedia Commons hasta que lleguen las tuyas. Una sola pregunta les sirve a clientes que contestan un mensaje, no cinco.

Ideal para: una panadería, un consultorio o un estudio que necesita una página honesta

🔎

Auditar una página hecha con IA antes de entregarla

audit devuelve una lista de pendientes por tier con referencias archivo:línea y capturas, y no edita nada. En el rescate de proyectos, ese es el reporte que querés antes de elegir entre un polish y una reconstrucción.

Ideal para: revisar una página que publicó el agente de otra persona

🧹

Un lint anti-slop sobre componentes

sloplint lee TSX, Vue, Svelte y Astro con sus clases de Tailwind, así que uppercase tracking-widest text-xs en un label, transition-all o un par from-/to- violeta fallan igual que su CSS. Correlo a mano sobre los archivos que cambiaste antes de una revisión.

Ideal para: mantener limpia una página de Hallmark después de editarla

8. Cuándo NO Usarla

Esta es la parte que un contador de stars no te cuenta.

✅ Encaja bien si...

• Estás armando una página o un sitio nuevo y todavía no tenés design system
• Podés darle material real: capturas, fotos, números y citas que tenés permiso de usar
• Tu agente puede correr Node, idealmente con Chrome y subagentes, para que el linter y las revisiones corran de verdad
• Querés que builds consecutivos se vean distintos en lugar de converger en un mismo look
• Querés auditar una página existente sin dejar que un agente la toque

⚠️ Evitala (o dejala como experimento) si...

• Necesitás una librería de componentes: Hallmark son instrucciones más un linter, no un paquete de botones
• Tu marca usa eyebrows o labels en mayúsculas espaciadas: son house rules del Floor, y los gates Floor no se pueden eximir
• Querés cambios chicos sobre una interfaz existente: no interviene si no la nombrás, e Impeccable está pensado para ese ciclo
• Estás sumando una página a una app con Tailwind v4 cuyas otras páginas no se pueden mover: el scaffold pisa nueve tokens de Tailwind, entre ellos text-lg y ease-out
• Tenés poco contexto: un build de página carga hasta unos 135 KB de reglas, más capturas y dos revisiones de subagentes
• Necesitás el mismo resultado siempre: el reparto y el sorteo hacen que dos builds del mismo prompt difieran
• Vas a vender la página con las fotos provisorias: la mayoría de las 755 son CC BY-SA y la línea de créditos se tiene que quedar

Mi postura

Usá Hallmark para páginas nuevas, no para retocar una app que ya te gusta. Instalala por proyecto para que viaje con el repo, sumá puppeteer-core para que corra el tier de render y respondé su única pregunta con material real: como no inventa números, un prompt flaco termina en una página llena de slots vacíos. Sobre trabajo existente, corré audit primero y recién ahí decidí si un redesign vale el diff.

Conclusión

La idea de Hallmark es simple y, en los papeles, está bien ejecutada: escribir los defaults en los que cae cada modelo, volver mecánica la mayoría, repartir las decisiones creativas para que los builds no converjan y poner ojos nuevos sobre el resultado. La v2 es inusualmente explícita sobre qué obliga, qué se puede eximir y qué no tiene permitido afirmar el agente.

Los costos también son reales: un flujo largo que asume Node, Chrome y subagentes, hasta unos 135 KB de reglas por build, reglas Floor que tu marca puede rechazar y conteos que siguen cambiando entre versiones. Tratala como una opinión fuerte con un linter pegado: usala donde todavía no tenés design system, dale material real y auditá antes de que rediseñe algo que te importa.

Sello de verificación

Las stars, los forks, las fechas, la licencia y la lista vacía de releases salen de la API de GitHub el 3 de noviembre de 2026; las stars semanales, del trending de GitHub el mismo día. Los comandos y flags salen del repo en el commit 52328cb (versión 2.0.0), de la documentación de la CLI de skills (v1.7.6), del README de Impeccable y del SKILL.md de frontend-design de Anthropic. Los conteos son míos. No instalé la skill, no ejecuté sus scripts ni armé ninguna página.