lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill principiante claude-codecodexcursoropencodediseño

Hallmark: diseña y audita páginas con una dirección visual

Construye páginas con un tema coherente y comprueba accesibilidad, contenido y detalles visuales con ayuda de tu agente.

✓ verificado el 27 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Paso 1: instala

Comprueba Node.js ≥22.20.0 y npm/npx. Aunque Hallmark indica ≥18, la vía npx skills ejecuta un instalador con mínimo ≥22.20.0. Para la revisión visual, comprueba también Chrome y prepara la dependencia que pide el README:

npm i -g puppeteer-core
npx skills add nutlope/hallmark -g

Paso 2: prueba una auditoría

En Claude Code, el README muestra:

/hallmark audit ./index.html

Usa la ruta real de tu página. Para modificar una interfaz existente, revisa primero el modo de rediseño del README.

Comprobación

El agente debe producir hallazgos sobre la página indicada y distinguir problemas básicos de acabado. Abre la página y contrasta los hallazgos con una prueba móvil y de teclado.

Si algo falla

Si no se reconoce la orden, comprueba que la skill se cargó en el arnés elegido. Si el agente no puede abrir el navegador o la URL, resuelve ese acceso antes de aceptar la auditoría.

ver en .md ¿Prefieres el recurso entero?

Qué es

Hallmark es una skill de diseño de Together AI para agentes de programación. Guía la creación, el rediseño y la auditoría de páginas, con temas visuales y revisión en navegador.

Para qué te sirve

  • Cuando una página de reservas necesita centrar su diseño en completar la reserva.
  • Cuando quieres rediseñar una interfaz sin perder su contenido y conexiones.
  • Cuando necesitas una auditoría visual antes de entregar una página.

Cómo funciona

El agente parte del objetivo de la página y propone una dirección visual. Las comprobaciones separan requisitos básicos, patrones habituales del modelo y detalles de acabado. El proceso contempla una revisión con contexto nuevo antes de dar el resultado por terminado.

Antes de empezar

Necesitas un agente compatible, Node.js ≥18 y npm/npx. Las comprobaciones en navegador requieren Chrome y puppeteer-core instalado globalmente; sin ellos solo se ejecutan las estáticas. El README documenta instalación para Claude Code, Codex, Cursor y OpenCode. Prepara contenido y datos reales para evitar que el agente rellene huecos con información inventada.

Límites y alternativas

La skill orienta decisiones, pero el agente sigue siendo quien modifica el código. Comprueba formularios y conexiones reales, además de las capturas. Las fotografías incluidas tienen sus propias condiciones de uso y atribución. UI Craft es una alternativa con memoria y comprobaciones de diseño.

Recursos