Pídele a una IA que escriba una landing y ocho de cada diez salen casi iguales: cuadrícula de seis tarjetas con esquinas redondeadas, botones con degradado, una sola palabra de color en el título y, al final, una caja de suscripción por correo. Hallmark, de Together AI, va justo contra esos clichés. Según lo que publicó el autor @nutlope el 23 de octubre en estepost, Hallmark se reescribió desde cero tras alcanzar 30.000 estrellas y 60.000 instalaciones en v1, y lanzó v2, que se puede usar en Claude Code, Codex y OpenCode.
Primero, la conclusión:
- Hallmark es una skill de diseño web que se instala con una sola línea:
npx skills add nutlope/hallmarky listo.README indica que es compatible con Claude Code, Codex, Cursor y OpenCode. - v2 trae 48 temas. Según lo que pidas, primero te propone 3 para que elijas, y solo cuando eliges empieza a escribir la página.
- Al terminar, la revisa con
sloplint --renderen un Chrome real (el README habla de 8 anchos): busca los clichés de «olor a IA», el contraste, el anillo de foco y el diseño móvil, y si no pasa, lo corrige por su cuenta. - Lo probamos con la API Key de este sitio: Claude Code tardó 26 segundos en proponer 3 temas y 3 minutos y 40 segundos en escribir la página completa y dejarla en sloplint con 0 FAIL;
/hallmark audituna landing de IA normal, con 41 FAIL detectados;/hallmark redesignrediseño completo en 6 minutos y 11 segundos, con 0 FAIL después. En Codex,$hallmarkpropuso 3 temas en 34 segundos.
Cómo se ve una página con olor a IA
El README de Hallmark enumera sin rodeos los clichés favoritos del modelo; seguro que has visto varios de estos:
| Cliché | Cómo se ve |
|---|---|
| Eyebrow en inglés sobre los subtítulos | Sobre cada título hay una línea de texto pequeño, el eyebrow, normalmente una etiqueta en inglés en mayúsculas y con mucho espaciado entre letras |
| Una sola palabra de color en el título | «Anota en tres segundos,sin sorpresas a fin de mes», con solo media frase teñida del color principal |
| Suscripción por correo al final, siempre | Sea cual sea el producto, la página acaba con «deja tu correo para recibir novedades» |
| Todo cajas vacías o todo fotos | Una página de tarjetas vacías, o solo imágenes apiladas sin información |
| Primera pantalla sin llenar | En pantallas grandes el contenido inicial ocupa media pantalla y debajo queda un vacío |
| Formulario que finge enviar | Al pulsar «Enviar» aparece un agradecimiento, pero en realidad no se envía nada |
Hallmark divide las comprobaciones en tres niveles:Floor son obligatorias (contraste, foco, movimiento reducido, datos inventados, diseño móvil);Reflex son los valores por defecto que el modelo usa por inercia, y si hay una razón puedes dejarla registrada y eximirlos;Finish es pulido de detalles y no bloquea la publicación.
Si lo que quieres tratar es el olor a IA de un artículo, y no de una página web, miraReescribir artículos de IA con Claude Code.
Qué trae Hallmark v2
Lo siguiente se basa en el README de Hallmark y en elsitio oficial:
| Capacidad | Descripción |
|---|---|
| 48 temas | Cada uno es un «material»: papel, tipografía, paleta, componentes y textura, con una imagen del resultado. El sitio los clasifica en Editorial 20, Modern minimal 11, Atmospheric 8 y Playful 9 |
| Maquetación según la tarea | Una página de reservas existe para reservar y una tienda para vender: la acción principal va donde debe y la página termina con ella |
| Custom | Si dices custom, no usa tema y diseña solo según tu descripción; las reglas y las comprobaciones no cambian |
| Usa tu producto real | Dale una URL, un servidor de desarrollo o una App y hace las capturas por sí mismo |
| Fotos reales | Incluye 755 fotos de licencia abierta, las elige según el tema y las acredita en la página |
| redesign y audit | /hallmark redesign <路径> rediseña la página conservando contenido y enlaces;/hallmark audit <路径> solo genera el informe sin tocar archivos |
En las preguntas frecuentes del sitio se aclara que Hallmark no necesita una API Key propia: las fotos salen de su galería de licencia abierta y la clave de generación de imágenes es opcional. Lo que de verdad consume es el modelo que uses en Claude Code o Codex.
Paso 1: apunta Claude Code / Codex a este sitio
Claude Code
En el archivo global ~/.claude/settings.json escribe:
{
"env": {
"ANTHROPIC_BASE_URL": "https://api.aicodewith.ai",
"ANTHROPIC_AUTH_TOKEN": "你的 API Key"
},
"model": "claude-sonnet-5-5"
}
ANTHROPIC_BASE_URL No incluyas /v1. En esta prueba usamos Claude Code 2.1.309 + claude-sonnet-5-5.
Una compilación de Hallmark llama al modelo en varias rondas, ejecuta scripts y retoca la página una y otra vez, así que gasta más cuota que una conversación normal. Si usas una suscripción de Claude, antes mira cómo se calcula la cuota enQué hacer cuando se acaba la cuota de Claude Code.
Codex
En el archivo global ~/.codex/config.toml define un provider personalizado; la sintaxis es la misma que en eltutorial de configuración de Codex config.toml:
model = "gpt-6.1-sol"
model_reasoning_effort = "medium"
model_provider = "aicodewith"
[model_providers.aicodewith]
name = "aicodewith"
base_url = "https://api.aicodewith.ai/chatgpt/v1"
wire_api = "responses"
experimental_bearer_token = "你的 API Key"
En nuestra prueba usamos Codex CLI 0.164.0 + gpt-6.1-sol.
Paso 2: instala Hallmark
# 装给所有项目（-g），Claude Code 和 Codex 都装
npx skills add nutlope/hallmark -g
# 只装给一个客户端
npx skills add nutlope/hallmark -g --agent claude-code
npx skills add nutlope/hallmark -g --agent codex
Necesitas Node 18 o superior. Instalar solo Claude Code nos llevó 14 segundos. Dónde queda instalado y cómo se invoca:
| Cliente | Ubicación de instalación | Invocación |
|---|---|---|
| Claude Code | ~/.claude/skills/hallmark | /hallmark <需求> |
| Codex CLI | ~/.agents/skills/hallmark | $hallmark <需求> |
| Cursor, OpenCode | Lee las dos ubicaciones anteriores | /hallmark <需求> |
Para la autocomprobación en el navegador (sloplint --render) además necesitas Chrome y puppeteer-core:
npm i -g puppeteer-core
Sin estos dos, Hallmark solo ejecuta comprobaciones estáticas. Nuestra máquina tiene /usr/bin/google-chrome, y el script lo encontró solo.
Paso 3: una landing para una app de registro de gastos, empezando por elegir 3 temas
Inicia Claude Code en un directorio vacío y escribe:
/hallmark 给记账 App「账小记」做一个落地页，写成 /workspace/hm/build/index.html。先给我 3 套主题挑。
Hallmark primero ejecuta theme.mjs deal, y, de los 48 temas, elige 3 según lo que pediste: Grid (cartel de cuadrícula), Formwork (letrero de obra de hormigón) y Studio (prueba de estudio de diseño). De cada uno indica paleta, tipografía y si encaja con una app de gastos. También pregunta por materiales: capturas de la App, número real de usuarios, precios y reseñas. Si no los tienes, dice claramente que no los inventará y deja marcadores para las imágenes. Esta ronda tardó 26 segundos.
Claude Code 里 /hallmark 先发 3 套主题并追问素材的终端输出
Respondimos:
选 1 Grid。受众是上班族，转化动作是下载 App，调性偏轻松。没有截图和真实数据，用占位，不要编数字。
Después hizo lo siguiente:
- Con
theme.mjs scaffoldgenerótokens.cssybase.css, y todos los colores, tamaños de fuente y espacios pasan a ser tokens. - Añadió a la pila tipográfica en inglés de Grid una alternativa para chino (PingFang SC, Noto Sans SC, Microsoft YaHei).
- Escribió primero solo la primera pantalla y ejecutó
sloplint.mjs --render, con capturas en tres tamaños de primera pantalla (1280, 1440 y 1920) y dos de página completa (1440 y 375). - La primera revisión marcó problemas como un contraste de 1.00:1 en la etiqueta «Datos de ejemplo» y una zona de descarga demasiado delgada. Los corrigió uno por uno hasta llegar a
sloplint: clean. 0 FAIL, 0 REFLEX, 0 WARN.
La ronda completa tardó 3 minutos y 40 segundos. La primera pantalla final queda así: el título entero en un solo color, sin eyebrow, sin palabras teñidas aparte, y los números del mockup móvil son todos ¥ 00.00 con la etiqueta «Datos de ejemplo».
Hallmark 用 Grid 主题做出的记账 App 落地页首屏（headless Chrome 截图）
Con Codex es igual. En Codex escribimos $hallmark 给记账 App「账小记」做一个落地页。这一步只发 3 套主题让我挑，不要写页面。, y también empezó ejecutando theme.mjs deal, esta vez salieron Newsprint, Hedgerow y Editorial, y tardó 34 segundos. La semilla del sorteo cambia cada vez, así que los 3 temas que dieron los dos clientes no coinciden.
Codex 里 $hallmark 发出 3 套主题的终端输出
Paso 4: /hallmark audit puntúa una página existente
Para tener una referencia, primero no usamos Hallmark y le pedimos a Claude Code que hiciera directamente «una landing page de una sola página para una app de contabilidad personal». Terminó en 28 segundos: tema verde, maqueta de móvil en la primera pantalla, cuadrícula de seis tarjetas de funciones, tres pasos para empezar, FAQ y banda de descarga. Además, por su cuenta escribió una política de cobro. Borramos esa explicación inventada y los textos de botón relacionados, y después la auditamos.
/hallmark audit /workspace/hm/bare/index.html
audit solo genera un informe, no modifica archivos. A los 50 segundos el resultado fue 41 FAIL, 18 REFLEX y 5 WARN. Estos son algunos casos representativos:
- Floor: los colores y las fuentes están fijados fuera de los tokens; 10 emojis hacen de iconos; el anillo de foco tiene un contraste de solo 1.60:1; el botón de texto blanco sobre fondo verde tiene un contraste de 3.45:1.
- Reflex 38iii: «sin sorpresas a fin de mes» está coloreado por separado, que es justo lo que mencionamos al principio: «una sola palabra de color en el título».
- Primera pantalla: en una pantalla de 1440×900, el contenido de la primera pantalla termina en 575px; hay 4 bloques de texto antes del botón.
- Cifras inventadas: «tres segundos», «¥ 2,368.50», «presupuesto usado 68%» y «en menos de un minuto» aparecen en la página como si fueran hechos. El script no puede saber si son ciertos; los lista para que tú los confirmes.
- Estructura de plantilla: cuadrícula de seis funciones, tres pasos para empezar, FAQ y banda de CTA. Todo eso valdría igual con el nombre de cualquier otra app de contabilidad.
Al final te dice qué nivel puede arreglarlo: restyle (mantiene la maquetación y cambia el sistema de estilos) elimina la mayoría de los problemas de Floor; los problemas de primera pantalla, volumen y estructura solo los resuelve full (rehacer la maquetación).
/hallmark audit 对普通 AI 落地页的审计报告终端输出
Paso 5: /hallmark redesign rehace y compara
Copiamos esta página y le pedimos que la rehiciera por completo:
/hallmark redesign /workspace/hm/redo/index.html 做 full 重做，这个目录是干净的副本。页面里的编造数字一律改成占位或删掉。
La clave de redesign es «conservar el contenido y los enlaces». Primero usa sloplint --before para anotar los enlaces, campos y títulos de la página original; tras rehacerla, vuelve a usar sloplint --kept para comparar y avisa si falta algo. En la prueba cambió el título original «Anota en tres segundos, sin sustos a fin de mes» por «Anota en un momento, sin sustos a fin de mes»,--kept enseguida marcó headings gone or reworded, y solo lo dejó pasar cuando escribió el motivo del cambio en el registro de Hallmark de la primera línea del CSS de la página.
Esta vez eligió el tema Loom (papel crema, títulos con serifa y una banda índigo). Resultado:
- Se conservaron los 4 anclajes internos, las 6 funciones, los 3 pasos y la FAQ.
- Se eliminaron expresiones como «tres segundos» y «en menos de un minuto», y ¥2,368.50, 68% y +8,000.00 se sustituyeron por 00.00 con la etiqueta «datos de ejemplo».
- Se quitaron los iconos emoji y el marco del móvil.
sloplint --render --kept: 0 FAIL, 0 REFLEX, 1 WAIVED, 1 WARN. WAIVED corresponde a que la sección de «preguntas frecuentes» quedó algo escasa; su justificación es que al rehacer no se puede añadir contenido que la página original no tenía. WARN se debe a que lint separó «8,000» por la coma y no lo encontró; en el texto ya no queda ese número.
Toda la ronda tardó 6 minutos y 11 segundos.
/hallmark redesign 全量重做后的终端输出
A la izquierda, antes de rehacer; a la derecha, después, con el mismo contenido (captura con headless Chrome, primera pantalla de 1440×900):
普通 AI 落地页与 Hallmark redesign 后的首屏对比（headless Chrome 截图）
Resumen de tiempos medidos
| Paso | Cliente / modelo | Tiempo | Resultado |
|---|---|---|---|
| Instalar Hallmark | npx skills | 14 segundos | Instalado en ~/.claude/skills/hallmark |
| Proponer 3 temas | Claude Code / claude-sonnet-5-5 | 26 segundos | Grid, Formwork, Studio |
| Escribir la página completa y autorrevisarla | Claude Code / claude-sonnet-5-5 | 3 minutos 40 segundos | sloplint 0 FAIL, 0 REFLEX, 0 WARN |
| Escribir directamente sin Hallmark | Claude Code / claude-sonnet-5-5 | 28 segundos | Página de referencia |
| Página de referencia de audit | Claude Code / claude-sonnet-5-5 | 50 segundos | 41 FAIL, 18 REFLEX, 5 WARN |
| Página de referencia de redesign (full) | Claude Code / claude-sonnet-5-5 | 6 minutos 11 segundos | 0 FAIL, 0 REFLEX, 1 WAIVED, 1 WARN |
| Proponer 3 temas | Codex 0.164.0 / gpt-6.1-sol | 34 segundos | Newsprint, Hedgerow, Editorial |
Escribir una página con Hallmark es bastante más lento que hacerlo directamente. El tiempo se va sobre todo en el ciclo de «modificar una ronda y renderizar y revisar otra».
Recomendaciones de uso
- Dale primero el material: Hallmark no inventa cifras de usuarios, valoraciones ni reseñas. Cuanto más le des (capturas, números reales, colores de marca), más se parecerá la página a tu producto.
- Si cambias un sitio existente, dilo explícitamente: no modifica por su cuenta las páginas existentes; tienes que usar
/hallmark redesign <路径>. Si quieres conservar la maquetación y cambiar solo el estilo, di keep the layout; si solo quieres eliminar los clichés, di polish. - Antes de redesign, haz una copia de seguridad o trabaja con una copia: nosotros copiamos la página y la rehicimos para poder comparar.
- Si no se activa, nómbralo: si no lo usa automáticamente, di directamente «use hallmark to build ...».
- Instala Chrome: sin Chrome ni puppeteer-core solo hay revisión estática, y no detecta los problemas que hay que renderizar para medir, como la altura de la primera pantalla o el contraste.
Preguntas frecuentes
¿Qué es Hallmark?
Un skill de diseño web de Together AI, para usar con Claude Code, Codex, Cursor y OpenCode. Primero elige 3 temas de entre 48 para que escojas; luego maqueta según la tarea que debe cumplir la página y, al final, revisa en un navegador real los clichés con «sabor a IA» y los problemas de accesibilidad.
¿Cómo se instala el skill de Hallmark?
npx skills add nutlope/hallmark -g, y requiere Node 18 o superior. Instala solo un cliente más --agent claude-code o --agent codex. La revisión en el navegador también necesita npm i -g puppeteer-core y Chrome.
¿Cómo se invoca en Claude Code y Codex?
En Claude Code se usa /hallmark <需求>, y en Codex $hallmark <需求>. Describir directamente «haz una landing page» normalmente también lo activa.
¿Se pueden elegir los 48 temas?
Sí. Primero propone 3 y tú respondes con el número. Si no quieres usar un tema, di custom y diseñará solo según tu descripción.
¿Qué diferencia hay entre audit y redesign?
audit solo genera un informe, enumera los problemas por nivel (Floor, Reflex, Finish) y no modifica archivos. redesign rehace la página, conserva por defecto el contenido y los enlaces, y usa sloplint --kept para comprobar que no se haya perdido nada.
¿Se puede ejecutar Hallmark con una API Key de terceros?
Sí. En Claude Code apuntamos ANTHROPIC_BASE_URL a https://api.aicodewith.ai, y el provider personalizado de Codex a https://api.aicodewith.ai/chatgpt/v1: en Claude Code funcionaron la instalación, la propuesta de temas, la escritura de páginas, audit y redesign, y en Codex también funcionó la propuesta de temas. Hallmark en sí no necesita ninguna Key adicional.
¿Se puede publicar directamente la página generada?
Todavía hay que añadir contenido real. En la prueba, el enlace del botón de descarga, los datos de contacto del pie y las capturas de la app eran marcadores de posición, y Hallmark enumera al final lo que te falta completar. Antes de publicar, revísala tú mismo en el navegador.
