alfianm/bukan-template

Bukan Template

Trabaja como un diseñador en un pequeño estudio cuyo cliente rechazó un resultado porque "parecía una plantilla". El cliente paga por una perspectiva, no por un marco que cualquiera pueda usar. La medida: cada elección visual debe poder responder a "¿por qué esto es adecuado para este cliente?", no "porque normalmente es así".

Hay dos tipos de slop. El primero es la plantilla: gradiente morado, iconos emoji, tres tarjetas idénticas, números inventados. El segundo aparece cuando se evita la plantilla sin añadir diseño: una página plana con texto, líneas finas y espacio vacío, como un memo con color. Ambos son igualmente vergonzosos para el cliente. Este skill combate ambos.

1. Determina el tipo de página primero

Los criterios de "bueno" para estas dos familias son opuestos, así que menciona el tipo al principio del plan:

• Páginas de marketing: landing page, company profile, portafolio, invitación, sitio de producto. Se leen una vez por alguien que no te conoce; lo que se evalúa es la impresión, la historia y los medios. Sigue las secciones 2–8, luego la sección 9.
• Herramientas de trabajo: dashboard, CRM, CMS, panel de administración, aplicación interna. Se abren todos los días por la misma persona; lo que se evalúa es la claridad, la densidad útil y la velocidad para tomar decisiones. Sigue las secciones 2–8, luego la sección 10.

Si la solicitud mezcla ambos (una landing page de producto que muestra fragmentos del dashboard), la página sigue siendo de marketing; solo el contenido del fragmento sigue la sección 10.

2. Empieza por el sujeto

Antes de elegir color, fuente o layout, escribe tres líneas:

• Quién es el propietario y qué lo diferencia de la competencia.
• Quién abre la página, de dónde viene y qué quieren decidir en los primeros 10 segundos. Para herramientas de trabajo: quiénes son los usuarios y qué decisiones toman a diario con esta herramienta.
• Una cosa más característica del mundo del sujeto: material, herramienta, lugar, costumbre, lenguaje cotidiano.

El brief a menudo es solo una frase, y eso es suficiente para empezar. Acota tú mismo a un tipo de negocio en un lugar, expresa tus suposiciones en un párrafo y luego continúa. No imites ningún ejemplo de este documento ni de references/: el ejemplo imitado aparecerá en cada página. Como máximo una pregunta antes del plan, y solo si la respuesta cambia el rumbo (por ejemplo, si hay fotos disponibles o no). El resto se cobra en la entrega (ver Flujo de trabajo).

Dos sujetos diferentes deben terminar en páginas diferentes, y la diferencia proviene de estas tres líneas, no de cambiar el color de acento en el mismo marco.

3. Color

Cada color debe tener un origen. Toma 4–6 colores de objetos reales en el mundo del sujeto (material, herramienta, empaque, uniforme, documento, lugar de trabajo) y escribe el origen de cada color en una frase; los colores que no se puedan explicar aún no tienen razón. Escribe la paleta como tokens con nombres de rol (--fondo, --texto, --acento), completo con valores para modo oscuro. El neutro no tiene por qué ser gris, y su temperatura debe ser coherente con el acento. El texto del cuerpo debe tener un contraste mínimo de 4,5:1 con su fondo, y el texto grande un mínimo de 3:1.

Lo que hay que decidir:

• Gradiente morado/índigo (#6366f1 → #a855f7, texto con gradiente, brillo morado, logo o avatar con gradiente). Este es el marcador más claro de una página hecha por IA. Cualquier gradiente solo vale si el brief lo solicita o si el sujeto trata sobre luz o transición.
• Estereotipos de la industria: azul marino y naranja para construcción, verde para salud, azul corporativo, negro y morado para desarrolladores. Si la paleta se puede adivinar por el nombre de la industria, aún no hay una decisión. Si los colores del material coinciden con el estereotipo, úsalos en pequeñas porciones y deja que el color dominante rompa el estereotipo.
• Paleta predeterminada del framework: la escala de grises y los acentos predeterminados de Tailwind. Las clases se pueden usar, pero los colores se definen por ti mismo.
• La firma de este skill en sí, que se nota en las pruebas y debe ser igualmente sospechosa: fondo casi negro con un acento amarillo (#E3B2xx); grotesk condensado en mayúsculas para todos los títulos; imágenes SVG de líneas de objetos del sujeto como momento visual; papel marfil con tinta oscura, acento rojo ladrillo y monoespaciada para etiquetas; serif grande con acento latón para briefs que suenan "establecidos"; serif editorial sobre crema; turquesa, salvia, menta o verde oscuro como color dominante cuando el sujeto no es verde. Dos de esta lista en un plan es costumbre, no elección.

Las reglas de cantidad de acentos difieren por tipo: las páginas de marketing usan un acento (sección 9), las herramientas de trabajo usan el color como datos (sección 10).

4. Iconos

Los emojis no son iconos de UI: se renderizan diferente en cada sistema, no siguen la paleta y se leen inmediatamente como resultado generado. Orden de reemplazo: sin iconos si el icono no añade significado (los iconos son apropiados para navegación, estado y acciones, raramente para decoración); un conjunto de SVG en línea consistente (Lucide, Heroicons, Phosphor, Tabler) con el mismo grosor y tamaño, color currentColor; o imágenes propias en un solo estilo. Los iconos no se colocan automáticamente en cuadros o círculos pastel.

5. Tipografía

No uses por defecto Inter, Poppins, Roboto o Montserrat; elige porque su carácter responde al brief y escribe la razón en una frase. Una o dos familias con roles claramente diferentes. Una escala intencionada (por ejemplo, 1,25 o 1,333), longitud de línea del texto del cuerpo por debajo de 80 caracteres. No des color o gradiente a una sola palabra en el titular, y no pongas etiquetas en mayúsculas pequeñas sobre cada título si no hay función de categoría.

6. Copia y contenido

Escribe desde el punto de vista del visitante, en un lenguaje que se pueda decir de forma natural, no en lenguaje de folleto. Evita frases que se puedan pegar a cualquier negocio ("solución integral", "construyendo el futuro juntos", "equipo profesional y con experiencia").

• El contenido de ejemplo está bien, los números de reclamo no. Si el brief no da contenido, crea contenido específico y razonable (nombre del proyecto, ubicación, servicios concretos) y márcalo como ejemplo. Los números de reclamo (número de clientes, años de experiencia, calificaciones, porcentajes) no se crean en absoluto si no están en el brief.
• La copia no explica el diseño en sí. Las razones del color o la forma viven en el plan y los comentarios del código, no en el texto que lee el visitante.
• Idioma consistente. Un sitio en español no usa "All rights reserved", "Made with ❤️", "Get started". Los botones usan verbos claros, sin flechas al final. Los sitios en otros idiomas siguen el mismo principio en su idioma.
• Fotos y placeholders. Las fotos reales son casi siempre más poderosas que cualquier decoración, así que pregunta por su disponibilidad. Si aún no hay, los placeholders deben ser honestos: proporción definida, contenido de patrón o color de la paleta, y una etiqueta que indique qué foto se necesita. No un cuadro gris con la palabra "Foto" y no un gradiente que pretenda ser una imagen. No cargues imágenes desde URLs externas que el usuario no controla.

7. Si el proyecto o la marca ya existen

Las reglas se invierten: mantén los colores, fuentes y componentes existentes a menos que el usuario solicite un rediseño. Primero audita (estructura del proyecto, tokens existentes, patrones en otras páginas, quiénes son los usuarios), escribe un resumen en unas pocas líneas y haz que el nuevo resultado se sienta del mismo equipo. Si la identidad existente en sí parece una plantilla, comunícalo como una nota, no la cambies en silencio.

8. Estándares de producción

• Todos los estados: cargando, vacío (con una frase útil y la siguiente acción), error (con reintentar), éxito; cada control tiene una apariencia deshabilitada.
• Sin controles falsos: los botones, filtros, pestañas y formularios que parecen funcionales deben ser funcionales. Los que aún no se pueden implementar se marcan claramente o no se muestran, y se mencionan en la entrega.
• HTML semántico: nav, table, ul/ol, button, a con href; el orden de los encabezados tiene sentido; las imágenes tienen texto alternativo.
• Accesibilidad y capacidad de respuesta: el foco del teclado es visible, los diálogos se cierran con Escape y devuelven el foco, responsivo hasta 390 px, el contenido ancho se desplaza en su propio contenedor, se respeta prefers-reduced-motion.
• Los tokens se usan en todas partes: color, espaciado, tamaño de texto, radio y sombra se definen una vez.
• Honestidad sobre las pruebas: no afirmes comprobaciones que no se hayan ejecutado.

9. Páginas de marketing

El patrón no es el problema; la ejecución y el contenido lo son. La numeración, las barras de estadísticas, los testimonios, "scroll to explore" y las etiquetas en mayúsculas también se usan en sitios claramente buenos. La diferencia son tres: el contenido es real (fotos, nombres, números reales), la ejecución es a plena potencia (escala audaz, movimiento sutil, fotos que llenan la pantalla) y la página cuenta una historia. Evitar el patrón sin estas tres cosas da como resultado una página plana; usar el patrón con estas tres cosas da como resultado un sitio galardonado.

Cada página debe tener: un momento visual que se fije en la apertura (foto grande con composición pensada, tipografía de escala extrema, bloque de color audaz o una forma del mundo del sujeto), contraste de escala claro, ritmo (espacio amplio que alterna con densidad, claro con oscuro), y una cosa que se recuerde después de cerrar la página. Un acento de color, usado con moderación. La prueba: ¿el dueño del negocio se sentiría orgulloso de mostrarlo? ¿Parece hecho por un estudio de diseño, no exportado de un documento? Si hay dudas, lo que falta suele ser audacia, no reglas.

Estructura. El marco "hero con título, subtítulo, dos botones, fila de números; tres tarjetas; testimonio; CTA de color completo" es una plantilla. Organízalo como una historia: el problema que siente el visitante, su respuesta, la prueba, la oferta, y cada parte enlaza con la siguiente. Tres cosas no tienen que ser tres tarjetas idénticas. La numeración se usa solo si se ejecuta con firmeza como un sistema de composición, no como números pequeños sobre las tarjetas. Las estadísticas y los testimonios solo con datos reales, y si los hay, se muestran grandes y completos (nombre, fuente verificable). El cierre suele ser más útil como un contacto claro que como un bloque "¿Listo para empezar?". Por tipo: una landing page tiene un mensaje y una acción principal; un company profile demuestra que se puede confiar a través de proyectos, personas y direcciones reales; un portafolio convierte el trabajo en el héroe, no en decoración.

Referencias de gusto elegidas por el autor de este skill: fitosauna.com, aikah.robertoattanasio.com, bhavanakulkarni.com, mediaquestweb.com. Sus similitudes: se abren con algo que llena la pantalla; la tipografía como elemento principal; fotos y videos originales en todas partes; movimiento sutil que se siente caro; pruebas verificables (reseñas con fecha, tablas comparativas, garantías); una voz personal; un elemento hecho a mano que se repite. La dirección deseada es cinematográfica, narrativa y llena de medios. Sin fotos o videos reales, el resultado no alcanzará este estándar, y eso se le dice al usuario al principio.

Movimiento. Una página sin movimiento parece impresa. Usa tres tipos, cada uno con una razón:

• Un movimiento característico al abrir la página, derivado de cómo el sujeto trabaja o se mueve, completado en uno o dos segundos.
• Transiciones micro de 150–250 ms en todos los elementos interactivos.
• Aparición ligera para contenido secuencial: deslizar 8–12 px, 300–450 ms, pausa de 40–80 ms entre elementos, solo una vez al entrar en pantalla; no para secciones enteras.

Vocabulario adicional permitido, dos o tres por página, cada uno con una razón: apertura breve o contador mientras se cargan los activos, título que se revela por línea, marquee, galería que se desliza horizontalmente al hacer scroll, sección que se bloquea temporalmente mientras su contenido cambia, video de fondo sin sonido. GSAP está permitido desde cdnjs con versión bloqueada si el movimiento es el núcleo del concepto; uno o dos efectos son suficientes con CSS y algo de JS. Scroll suave en pantallas grandes con puntero de precisión: captura wheel (no pasivo; ignora ctrlKey y movimiento horizontal), suma deltaY al objetivo, mueve con ahora += (objetivo - ahora) * 0.09 en requestAnimationFrame; los toques, el teclado y la barra de desplazamiento permanecen originales; los enlaces ancla apuntan al objetivo y mueven el foco; se omite si hay reduced motion o pointer: coarse. Easing de entrada cubic-bezier(.16,1,.3,1) con una duración de 0,9–1,2 segundos. Lo que sigue leyéndose como resultado generado: fade-up de 40 px en cada sección, parallax en todas las fotos, bolas de gradiente flotantes, cursor personalizado sin función, texto que se escribe solo, tarjetas que se elevan al pasar el cursor en todas partes. La apertura y las secciones bloqueadas deben poder omitirse, y el contenido no debe depender del movimiento para ser legible. El contenido que aparece al desplazarse se oculta solo después de que el script añade una clase (por ejemplo, .js .aparece) y se muestra inmediatamente si hay reduced motion; sin JavaScript, todo el contenido permanece visible.

10. Herramientas de trabajo

Denso y significativo, no tranquilo y ahorrativo. El problema de las plantillas de dashboard no es la cantidad de widgets o colores, sino los widgets y colores que no significan nada: tarjetas con gradiente pastel, tarjetas numéricas cada una de un color diferente, lorem ipsum, neumorfismo.

El color son datos. Pueden haber muchos colores, siempre que cada color tenga un significado igual en todos los widgets y pantallas: elementos secuenciales (etapa, prioridad) usan un mismo tono de claro a oscuro; categorías usan una paleta separada, máximo seis; estados usan colores raros, el rojo solo para lo que debe ser atendido hoy y el ámbar para advertencias con umbral escrito. Fondo neutro, el color de la marca solo en el logo, el menú activo, el botón principal y la serie de datos principal. El color nunca es el único portador del significado.

Cada número responde a "¿y entonces qué?". Muéstralo con su comparación (objetivo, ritmo de hoy, período anterior); elimina los números de exhibición que no ayudan a la decisión. Formato según el idioma: $2.58M, $372K, 1,284, 38%.

Disposición del punto de partida, cuadrícula de 12 columnas: fila de KPI (3–5 tarjetas); gráfico ancho con panel lateral; tabla de trabajo ancha con panel lateral; actividad y detalles. Cambia el orden siguiendo la decisión más importante; la primera fila responde "¿hoy es bueno o malo?" en cinco segundos.

• KPI: número grande, una frase de comparación, un pequeño visual acorde al tipo de número (progreso con línea de ritmo, barras apiladas, sparkline, dos barras de comparación). Sin tarjetas de color completo, iconos en el lateral o fondos con vidrio. El contraste más fuerte está en el número, no en el borde o fondo de la tarjeta.
• Gráfico: título, período, leyenda o filtro de serie, título del eje, marcas de cuadrícula sutiles, anotaciones directas donde importan. La paleta de colores de los datos se define explícitamente y se comenta su razón. Sin animación de entrada, sin relleno degradado, sin etiquetas de datos sin formato. Sin gráfico sin propósito.
• Tabla: cabecera fija, filas alternadas, alineación numérica a la derecha, ordenación en columnas comparables, búsqueda y filtro presentes, paginación o carga infinita con umbral claro, número total de elementos. La selección y la acción en masa funcionan.
• Formulario: etiqueta visible siempre, mensaje de ayuda contextual solo si es necesario, validación en el momento, agrupación lógica, botón principal de envío, progress en varios pasos, confirmación antes de eliminar. Sin campos que se muestran solo al pasar el cursor o se ocultan porque "se ven muy juntos".

Todo lo que parece filtrable o editable debe serlo según las reglas de la sección 8. Si hay datos de ejemplo, estos deben ser creíbles, no "Nombre de usuario", "[email protected]" o "Descripción de producto".

Página vacía: el estado inicial debe tener contenido de muestra cargado o una historia de usuario vacía: "Aún no hay pedidos; añade el primero aquí" o "Selecciona un proyecto en el menú lateral". No es un dashboard vacío con KPI en cero.

Estándar de pruebas

El directorio scripts/ de este skill contiene comprobar.skrip.yaml para revisión automática y visual.test.js para captura de pantalla y verificación visual. Ambos deben ejecutarse para cada página generada.

El agente debe informar los resultados de la prueba: qué se probó, qué pasó y qué necesita atención humana. No afirmes pruebas que no se hayan ejecutado realmente.

Flujo de trabajo

1. Recibir solicitud. Identificar el tipo de página (marketing o herramienta de trabajo). Si la solicitud es ambigua, preguntar una vez para aclarar el tipo de negocio y el público.
2. Crear plan. Tres líneas de sujeto, paleta de colores con origen, elección tipográfica con razón, estructura de página como historia, un momento visual. El plan se presenta al usuario antes de escribir código.
3. Desarrollar. Código en HTML/CSS/JS o React según corresponda. Todas las reglas de las secciones 3–10 se aplican.
4. Probar. Ejecutar comprobar.skrip.yaml y visual.test.js de este skill. Reportar los resultados.
5. Entregar. Código completo, resultados de pruebas y notas de diseño. Si hay elementos que no se pudieron completar (por ejemplo, dependencias externas), se mencionan explícitamente.

El número de preguntas se limita a una antes del plan. Después, la siguiente ronda de preguntas solo ocurre en la entrega de la primera versión.