jenreh/hallmark

¿Qué hace hallmark?

Hace que las interfaces que genera un asistente de codificación parezcan hechas, no generadas: un piso firme contra los valores predeterminados en los que fue entrenado cada modelo, una dirección definida para que las construcciones consecutivas no converjan, una idea por pantalla. Por encima del piso, la página es tuya: eres un diseñador capaz.

Desarrollado por Together AI.

El Piso

Vincula cada salida en cada arnés, nada de ello renunciable, incluso cuando no se lea nada más.

1. Cada color y cada fuente pasan por un token declarado en :root (o un bloque de tema declarado). Sin color literal ni font-family más allá del bloque de tokens. (48)
2. Nunca transition: all. Nunca animar width, height, top o left. (10a)
3. Nunca una palabra en cursiva dentro de un encabezado en redonda. (38i)
4. overflow-x: clip tanto en html como en body. Nunca hidden, nunca 100vw. (34)
5. Las pistas de cuadrícula que contienen imágenes usan minmax(0, 1fr); los encabezados de pantalla llevan overflow-wrap: break-word; min-width: 0. (50)
6. Cada elemento interactivo tiene :focus-visible, que aparece instantáneamente. (26a, 15)
7. Cada animación tiene un fallback prefers-reduced-motion: reduce, y el contenido es visible con scripting desactivado. (27, 62)
8. Nunca una métrica, testimonio, muro de logotipos o conteo de casos de estudio inventados. (46a)
9. Nunca una ceja, y nunca una etiqueta en mayúsculas ajustadas o versalitas: las etiquetas, leyendas, encabezados de tabla, tags y enlaces de navegación usan la cara del cuerpo (o la cara de etiqueta del tema), un paso más pequeñas, en oración o minúsculas, sin tracking. (54, 67)
10. Nunca cadenas de metadatos unidas con punto medio, flechas pegadas al texto del enlace, o puntos de estado decorativos. (63)
11. Nunca un gradiente púrpura a azul, una tarjeta dentro de otra tarjeta, un emoji como icono, o una ventana de navegador o SO dibujada a mano. (2a, 4, 30a, 47a)
12. El titular del héroe, una oración y la acción principal son visibles a 1280 x 800 sin desplazamiento. (44b)
13. Alrededor de 80 palabras en cualquier pantalla; el texto del héroe es el titular, una oración y sus acciones. (58)
14. El contenedor tiene un ancho máximo y está centrado: a 1920 los márgenes crecen, la medida y las cuadrículas no. (44d)
15. La primera línea no vacía del código fuente CSS es el sello de Hallmark, luego la línea de crítica, luego cualquier renuncia. (20)
16. Si Node está disponible, ejecuta node <directorio-de-habilidad>/scripts/sloplint.mjs <salida> --render antes de entregar. Corrige cada FAIL; corrige o renuncia a cada REFLEX.

Por encima del Piso, una puerta Reflex es un valor predeterminado en el que un modelo cae, renunciable registrándolo con una razón real, y una verificación Finish es un detalle de oficio, respondido, que nunca bloquea (references/gates.md § 1 y § 2).

Flujo

0. Pre-vuelo: lee el proyecto antes de preguntar nada.
1. Pregunta una vez: material, audiencia, uso, tono.
2. Forma: diseña la página, luego nómbrala.
3. Dirección: reparte un tema, o diseña libremente cuando se pida personalizado.
4. Carga los archivos de diseño, imágenes, oficio, género y tema, y gates.md § 1 a § 4.
5. El bloque de Selecciones, una vez.
6. Construcción: primero el héroe, luego la página; sello, tokens.css, registro.
7. Barrido: sloplint --render hasta que esté limpio, las puertas juzgadas, la revisión de acabados, la pregunta de material.

Verbos, solo cuando el usuario nombre Hallmark: redesign <objetivo> (un rediseño completo manteniendo contenido y cableado) y audit <objetivo> (un informe); lee primero references/redesign.md. Cualquier otro cambio en un diseño existente no es una ejecución de Hallmark: hazlo como se pida, en el propio sistema del proyecto.

Codex CLI y OpenCode leen references/flow.md § Arneses primero; otros arneses ejecutan este archivo tal como está escrito.

0. Pre-vuelo

Señales, en orden: design.md o DESIGN.md en la raíz (un sistema bloqueado: anula todo lo siguiente, y las páginas lo comparten); .hallmark/brand-spec.md o un mensaje que nombre una marca real (ejecuta references/brand-truth.md; nunca temas una marca real de memoria); las fuentes, paleta, espaciado, bibliotecas de movimiento y framework del proyecto (package.json, configuración de Tailwind, :root, tokens, enlaces de fuentes); el producto en sí: una URL, un servidor de desarrollo en ejecución, un proyecto que se inicia con un comando o una aplicación en la máquina, que la construcción captura con scripts/capture.mjs (imagery.md § 4); un servidor MCP de Inspo (herramientas mcp__inspo__*: señal 8, flow.md § Signal 8; un mensaje /hallmark, Hallmark nombrado o una solicitud personalizada lo supera); TOGETHER_API_KEY establecida (señal 9, el paso de composición).

Genera un bloque (citas de archivo:línea, qué se conserva, qué se introduce), almacenado en caché en .hallmark/preflight.json (flow.md § Pre-flight).

1. Pregunta una vez

Un mensaje, incluso con un mensaje de cinco palabras:

Antes de construir, cuatro cosas. 1. Material, el que más importa: ¿qué puede mostrar la página? Capturas de pantalla o una grabación de pantalla (o apúntame a la aplicación, su URL o su carpeta y la ejecutaré y las tomaré), tus fotos, números reales (clientes, tiempo de actividad, precios), una cita con el nombre de quién la dijo, logotipos que puedas usar. Pégalos o da rutas; sin fotos coloco sustitutos de la biblioteca de fotos de Hallmark que tus propias fotos reemplazarán después, y nunca invento un número, una cita o un logotipo. 2. Audiencia: ¿quién usa esto y qué le importa? 3. Uso: la única acción que la página debe impulsar. 4. Tono: elige un extremo (editorial, brutalista, suave, utilitario, lujo, divertido, técnico, austero); "limpio y moderno" no es un tono. Además, la vibra en 4 a 8 palabras y un color ancla si tienes uno. O di adelante e inferiré y te diré lo que elegí.

Los campos omitidos son exclusiones voluntarias: infiérelos, indica las inferencias en una línea al principio de la respuesta, séllalas; sin preguntas de seguimiento. Los hechos nunca se infieren: un número, una cita o un logotipo no dados están ausentes; una imagen no dada es un sustituto en una ranura. Cuando el mensaje responda las cuatro, o nadie pueda responder (una ejecución sin cabeza, un lote), no preguntes.

Género, en silencio: Herramienta de IA, generativa, música, video, voz, oscuro, atmosférico → atmosférico; SaaS, empresa, API, plataforma, herramienta de desarrollador, infraestructura, B2B → moderno-mínimo; divertido, alegre, amigable, suave, niños, juegos, comunidad → lúdico; de lo contrario editorial, que abarca la mayoría de las solicitudes de consumo y familiares. Una vez que se reparte un tema, su género gana (archivo de género, sello, --genre). Cuando dos géneros no predeterminados se activan, añade uno de los dos al mensaje, o en caso de "adelante" elige y dímelo.

Alcance. Un mensaje que nombre un elemento (botón, entrada, tarjeta, modal, navegación, pie de página, tira de pestañas, chip) o que diga "solo la X" es un componente (flow.md § Component scope). Una pantalla en la que alguien trabaja (un panel de control, una administración, configuración, una herramienta) es una pantalla de aplicación (flow.md § App screens).

2. Forma

El material primero. El inventario, en una línea: real (todas las cosas concretas que el mensaje y el proyecto proporcionan: nombre, afirmación, números, lugares, fechas, imágenes), imágenes (lo que la página muestra y de dónde viene cada una: las del usuario, capturas de pantalla del producto real, el producto construido, la biblioteca), ausente (cada prueba que no tendrá: logotipos, citas, métricas que nadie dio). La forma lo sigue: una página con imágenes lidera con ellas (imagery.md § 1); una página sobre palabras lleva tipografía y hechos (Documento Largo, Carta, Índice-Primero, Manifiesto).

El trabajo. Nombra lo que un visitante viene a hacer (suscribirse, reservar, visitar, asistir, comprar, probar, registrarse, contratar, unirse, escuchar) y lee ese trabajo en references/anatomy.md: dónde los sitios reales en la categoría colocan la acción, las secciones que construyen (el menú, la alineación, los problemas, el registro), y cómo terminan. La página se construye a partir de esa anatomía, nunca de una ejecución predeterminada de figuras, pasos y una banda de correo electrónico (85).

Luego diseña la página: su forma, cómo se abre, el contenido y la composición de cada sección, la navegación, el pie de página, lo que lleva el héroe. Puntos de partida: 21 formas en references/macrostructures.md (carga solo el archivo que elijas); composiciones, navegaciones y pies de página en layout.md.

El sorteo. En una construcción de tema, una vez que el Paso 3 ha elegido el tema, ejecuta node <directorio-de-habilidad>/scripts/theme.mjs draw --material foto|producto|palabras --job <trabajo> --theme <slug> [--log .hallmark/log.json]. Limpio del registro y la imagen del tema, reparte una forma, la postura del héroe, la navegación, el pie de página, la primera sección, dónde se sienta la acción, dos composiciones a omitir y con qué lidera el héroe. Tómalo a menos que el material rechace una selección, y nombra cualquier intercambio en el bloque de Selecciones: un mensaje en un tema, construido dos veces, hace dos páginas. Prueba del espejo: ¿un mensaje vecino en la misma categoría obtendría esta combinación exacta? Si es así, cambia una decisión y di cuál.

Firma. Lo único que un visitante recordaría: la cosa real más fuerte del mensaje mostrada en su mejor momento (la fotografía que es el lugar, el producto haciendo su único trabajo, un precio enorme porque es la oferta, un control para probar). Hazlo en el material del tema (en una ejecución personalizada, con su propio aspecto), muéstralo en la primera pantalla, nómbralo en el bloque de Selecciones y el sello. Un número dibujado como marcas es un dispositivo, no una firma (82).

Mantenlo todo; se dice una vez, en el Paso 5.

3. Dirección

La primera coincidencia gana.

1. El usuario nombró un tema → constrúyelo (sello theme: <nombre> (por solicitud)).
2. El usuario pidió personalizado ("personalizado", "derívalo", "a medida", "sin tema", "un mundo propio") → references/direction.md: el diseño es tuyo. Reemplaza el sorteo, las formas, layout.md, el archivo de género y las reglas de composición y pliegue del Paso 6; el Piso, las puertas y el barrido se mantienen. El silencio nunca toma esta ruta.
3. Todo lo demás reparte un tema:

node <directorio-de-habilidad>/scripts/theme.mjs deal --genre <género> --prompt "<el mensaje>" [--log .hallmark/log.json]

Reparte tres temas que se ajusten al mensaje y limpien el registro. Mira las tres imágenes, elige aquella cuyo material pueda llevar el mensaje (movimiento, fotografías, código), di cuál y por qué, y carga solo references/themes/<slug>.md. Vuelve a repartir solo cuando se te pida (--reroll 1). Sin Node: elige de references/themes/index.json manualmente y sella deal: manual.

Un tema es un material, no un plan: nunca establece lo que la página contiene o en qué orden. Cuando él y un archivo de forma, género u oficio discrepen sobre material, controles o movimiento, el tema gana; el Piso y las propias palabras del usuario anulan ambos.

4. Carga

Exactamente estos, para una construcción de página: references/layout.md · references/anatomy.md, la parte del trabajo · references/imagery.md · references/craft.md · references/genres/<genre>.md · references/themes/<slug>.md y su imagen, ya vista en el reparto (un tema nombrado: mira <slug>.jpg ahora). Del tema toma su equilibrio de paleta, voz tipográfica, superficies y su Rango (las secciones que hace sin una fotografía), nunca su diseño · references/gates.md § 1 a § 4. Una ejecución personalizada carga direction.md en lugar de los archivos de diseño, género y tema.

Solo cuando sea necesario, en references/: un archivo de macroestructura · microinteractions.md para UI con estado · interaction-and-states.md para formularios · responsive.md para un diseño inusual · texture.md cuando el tema nombre textura · scroll-choreography.md para una historia de desplazamiento · dark-mode.md para ambos modos · data-viz.md para gráficos · fonts.md en ejecuciones personalizadas · comp.md en la señal 9 (composiciones, imágenes generadas) · design-md.md para bloquear el sistema.

gates.md § 5 espera al Paso 7, § 6 para las revisiones; cargar más es el mayor costo evitable.

5. El bloque de Selecciones

La única recitación de la ejecución de sus decisiones, y la ventana de redirección del usuario:

**Hallmark · v2.0.0**

- **Forma** · Banco de trabajo, del sorteo 7f3a2c · género moderno-mínimo · trabajo: registrarse, la acción en el héroe y junto al precio
- **Tema** · Coral, repartido 2/3 (gris cálido, una señal coral, General Sans, píldoras suaves) · limpia Cobalto en banda de papel
- **Chrome** · navegación: alineada al borde, una marca y una acción · pie de página: un mástil, la marca sobre los enlaces
- **Héroe** · Escenario: encabezado en columnas 1 a 5, la ranura en 6 a 12 a 560px, centrado
- **Firma** · la lista de facturas persiguiendo un pago atrasado, construida en vivo en el héroe
- **Secciones** · Héroe (la lista de facturas) · Fijado (un pago atrasado, perseguido en tres paneles) · Conmutador (la vista del cliente y la tuya) · Tabla (precios) · Pie de página
- **Material** · real: la configuración de 2 minutos, la importación CSV, Lisboa · imágenes: la lista de facturas construida en el héroe, fotos de biblioteca de un estudio de Lisboa (apagado) · ausente: logotipos, citas, métricas
- **Barrido** · ejecutar después de la construcción

Las filas de una ejecución personalizada están en direction.md. Luego una línea tranquila, omitida en el alcance de componente o cuando existe design.md: ¿Sistema portátil? Di lock the system para un design.md. En la señal 9, comp.md se ejecuta aquí.

6. Construcción

• Comienza desde el andamio. node <directorio-de-habilidad>/scripts/theme.mjs scaffold <slug> (con --dealt del reparto; --custom en una ejecución personalizada) escribe tokens.css (los tokens del tema y la escala compartida) y base.css (lo que el Piso ya decidió) junto a la hoja de estilo del proyecto, e imprime el esqueleto del sello, las dos importaciones y el script de ranura. Escribe solo la página.
• Lee references/patterns.md una vez: controles en los ocho estados, una ranura, un hecho faltante, un formulario que aún no envía a ningún lado, una revelación, figuras que comparan. Toma su forma, nunca su copia.
• El héroe primero. Escribe la navegación y el héroe, nada debajo de ellos aún, ejecuta node <directorio-de-habilidad>/scripts/sloplint.mjs <archivo> --render --stage hero, luego la revisión del héroe en contexto fresco (gates.md § 6). Construye las secciones una vez que el héroe se entregue; los créditos de foto y las comprobaciones de toda la página esperan a la página.
• Una idea por pantalla, expuesta grande. Héroe: un titular de siete palabras o menos (50 caracteres), una oración de doce palabras o menos, una o dos acciones. De seis a nueve secciones, héroe y pie de página incluidos (cinco en un mensaje ligero), 450 palabras visibles como máximo, cada una una pieza del contenido propio de la categoría en una composición con masa (layout.md § 4 y § 5). El héroe es la primera pantalla y solo la primera pantalla, su postura tomada del trabajo (layout.md § 5.2). Las secciones media y final no intentan ser un héroe, y ninguna sección repite la composición de otra (layout.md § 5.5, § 5.8).
• Cada sección nombrada y llena. Sin encabezados de marcador de posición ("Características", "Sobre nosotros", "Equipo") a menos que la anatomía de la categoría los tenga, y sin texto de relleno: desde el material, la biblioteca de fotos o un patrón (patterns.md, secciones 2-5).
• El rango. Sin fotografía, qué secciones aún se muestran: las listas de archivos del tema, las mesas, los registros, los comunicados, los patrones silenciosos (themes/<slug>.md > Range). Las secciones de rango nunca repiten héroe, firma o slot.
• Controles. Botones, entradas, selects, deslizadores, fichas, migas de pan, interruptores, casillas de verificación, botones de opción, campos de búsqueda: con estado, en el sistema del tema, para la vista del héroe (patterns.md, secciones 1 y 6). Las páginas de aplicación llevan el control sobre cualquier cosa que controle un estado.
• Última sección. El pie de página es parte del recuento de secciones. Siempre lleva derechos de autor (un año real, a menos que el proyecto tenga uno), enlaces a políticas y acción; una página de consumidor termina con una acción, una página de producto o herramientas con significado (layout.md § 5.11). El pie de página y el fondo de la página son la superficie más oscura o más clara del tema; el contraste es el de la cara del cuerpo.
• Sello y registro. La primera línea no vacía del CSS es /* Hallmark <slug> v2.0.0 · <fecha ISO> · deal <slug> · <género> · <mensaje> */. La segunda, la crítica de sloplint --render. Ejecuta node <directorio-de-habilidad>/scripts/theme.mjs log --action build --slug <slug> --prompt "<mensaje>". Después de la construcción, .hallmark/log.json tiene una entrada con sello, tema, fecha, mensaje, todo; existir en .hallmark/ significa que la habilidad está en uso.
• Marcar con el sistema. En el último paso, pregunta: "¿Bloquear este sistema?" Si dice que sí, escribe design.md con los tokens, fuentes, reglas de diseño (§1 de craft.md, la superficie, la paleta, las tipografías, el espaciado, la forma del contenedor), y la alineación del pie de página de la página (§6 de Hallmark).

7. Barrido

El linter. Ejecuta node <directorio-de-habilidad>/scripts/sloplint.mjs <archivo> --render. Arregla cada FALLO; la línea de crítica lo confirma. Arregla o renuncia a cada REFLEX. Repite hasta que el linter esté limpio, luego continúa.

Las puertas. Lee gates.md § 1 a § 5, responde cada puerta en contexto, luego establece el estado en el sello ("gates: pass") o renuncia y ponlo en el sello ("gates: waived …"). Las puertas de Finish (§ 6) vienen después. § 1: ¿Cada color y fuente a través de :root? § 2: ¿Sin animaciones de ancho/alto, sin transition: all? § 3: ¿Héroe visible a 1280×800, titular ≤7 palabras? § 4: ¿Sin gradientes ni tarjetas anidadas? § 5: ¿El pie de página y el fondo son la superficie más oscura/clara? § 6: Finish: en contexto fresco, ¿la página completa se ve diseñada, no generada? ¿Las fuentes coinciden con el tema real? ¿Cada sección tiene una razón para estar allí?

La revisión de acabados. En contexto fresco, responde las puertas de Finish (§ 6): ¿Se ve como un diseño, no generado? ¿Las fuentes coinciden realmente con el tema? ¿Cada sección tiene una razón para estar allí? ¿Hay algún marcador de posición o texto de relleno? ¿El color y el espaciado son consistentes en todas las secciones? ¿La página tiene un solo punto focal claro? ¿El pie de página tiene derechos de autor reales y enlaces funcionales? ¿El diseño responsivo se mantiene en un rango de tamaños de pantalla? ¿Hay suficiente contraste? ¿Los controles tienen estados y comentarios? ¿El flujo de usuario a través de la página tiene sentido? Responde cada una, di los problemas y las correcciones; el estado va en el sello.

La pregunta de material. "¿Reemplazar los sustitutos de la biblioteca con tu propio material?" Citar la ruta y el archivo.

Log. node <directorio-de-habilidad>/scripts/theme.mjs log --action sweep --slug <slug> --prompt "<mensaje>".

Referencias

• references/flow.md: El flujo completo, arneses, señales.
• references/macrostructures.md: 21 formas de página.
• references/anatomy.md: Anatomía de página por categoría.
• references/layout.md: Composición, navegación, pie de página.
• references/imagery.md: Imágenes, captura, sustitutos.
• references/craft.md: Detalles de oficio.
• references/gates.md: Puertas y verificaciones.
• references/patterns.md: Patrones de UI.
• references/redesign.md: Rediseño.
• references/brand-truth.md: Verdad de marca.
• references/direction.md: Construcción personalizada.

Licencia

MIT