Skill de Panel de Citas
Genera un panel de consumo de una sola pantalla que se sienta como una columna de citas de un periódico dominical convertida en software. Tipografía editorial, un solo acento contenido, mucho espacio negativo, sin interfaz de deslizamiento ni clichés de ligue.
Flujo de trabajo
- Lee el archivo DESIGN.md activo (inyectado arriba). Apuesta por una token de visualización serif para los números de métricas — estas pantallas viven o mueren por los números.
- Elige una voz de marca — irónica, observacional, ligeramente literaria. Genera texto real y específico. Ejemplos: "las personas que responderían en un día", "manejable. dos ahora son amigos.", "tu activo de compatibilidad más valioso."
- Diseño, en orden:
- Barra de ticker superior — tira horizontal de una sola fila en la parte superior con estilo mono de ceja: eslogan a la izquierda, "PRÓXIMO NIVEL EN 2,080 MUTUOS" a la derecha, ambos en mayúsculas mono con espaciado entre letras. Regla fina debajo.
- Panel lateral izquierdo — barra lateral de 220–260px. Marca de la empresa en serif cursiva en la parte superior. Tarjeta de usuario (avatar / nombre de usuario / ratio / nivel). Tres grupos de navegación: "HOY" (muestra, bandeja de entrada, cola, notificaciones), "TÚ" (tus estadísticas, mutuos y comunidades, bloqueados, configuración), "ARCHIVO" (números anteriores, coincidencias caducadas). El elemento activo recibe texto de acento + punto de acento.
- Contenido principal:
- Cuadrícula de KPIs — 3 columnas × 3 filas (o 9 celdas). Cada celda: etiqueta mono en minúsculas, un número serif sobredimensionado (usa acento o verde apagado para positivo, rojo apagado para precaución), nota al pie en cursiva de una línea. Especificaciones plausibles — "1,842 ↑ 41 esta sem · crecimiento saludable.", "14% por encima de la mediana de tu cohorte.", "4 / exes en tu círculo · manejable. dos ahora son amigos."
- Panel de gráfico de barras — "mutuos — últimos 30 días". Barras negras altas y delgadas, los últimos dos días resaltados en acento. Leyenda arriba con "↑ TENDENCIA ALCISTA · +3 MUTUOS CERCANOS ESTE MES · DOS A TRAVÉS DEL MISMO OFFSITE" en mono.
- Panel de tendencia — "tasa de acierto — últimas 12 semanas". Una línea de texto debajo ("SUBIDA CONSTANTE DE 8% → 14%. ATRIBUIBLE A UNA UNIÓN A UNA COMUNIDAD…"). Regla de pie.
- Escribe un único documento HTML:
<!doctype html>hasta</html>, CSS en línea.- Fondo blanco cremoso, cuerpo serif, etiquetas mono en todas partes.
- Usa
font-feature-settings: 'tnum'para los números de métricas. - Gráfico de barras SVG con ~30 barras, alturas variadas.
data-od-iden ticker, barra lateral, cuadrícula de KPIs, gráfico, tendencia.
- Autocomprobación:
- Se lee como contenido contenido, editorial, ligeramente divertido — no caliente.
- Un solo token de acento utilizado en 3–4 lugares como máximo (un KPI, dos barras destacadas, un estado activo de navegación).
- Sin interfaz de deslizamiento, sin corazones, sin emoji de fuego.
Contrato de salida
Emitir entre etiquetas <artifact>:
<artifact identifier="dating-slug" type="text/html" title="Panel de Citas — Título">
<!doctype html>
<html>...</html>
</artifact>
Una oración antes del artefacto, nada después.