williamsnieves/landing-factory

tasteskill v2

Una página construida por un modelo normalmente se ve como el promedio de cada página que el modelo ha visto: un encabezado centrado en tres líneas, una pequeña etiqueta encima, una fila de tarjetas con iconos, un gradiente suave, unas pocas reglas finas y un pie de foto en monoespaciado. Nada está mal y nada fue decidido.

Esta habilidad reemplaza esos valores predeterminados con decisiones, de cuatro maneras:

1. Un script reparte las direcciones, tú eliges entre ellas. Cuando se le pide inventar un aspecto, un modelo elige el valor predeterminado de la categoría cada vez. scripts/draw.mjs reparte tres de veinte direcciones investigadas; tú eliges la que transmite la idea del tema, y el script entonces reparte su sistema de tipos, paleta, composiciones de héroe y secciones de una biblioteca destilada de 247 sitios reales.
2. La idea proviene del tema. En el estudio, lo que separaba a los mejores sitios de los olvidables era un concepto tomado de la cosa misma, no del estilo.
3. Un estilo de casa sin adornos, medido en un navegador real por scripts/inspect.mjs, de modo que las reglas sean comprobadas en lugar de esperadas.
4. Miras lo que hiciste. Capturas de pantalla en tres anchos, una rúbrica de jurado, arregla, mira de nuevo.

Una advertencia aprendida en las pruebas. Quitar los adornos es solo la mitad del trabajo; una página que ha perdido sus etiquetas, reglas y tarjetas y no ha ganado nada a cambio se lee como vacía, y los jurados ciegos prefieren con razón una página más rica con indicios que una página vacía sin ellos. La otra mitad es sustancia: tipo más grande, campos enteros de color, imágenes reales del mundo de este tema (encontradas o dibujadas), y cada sección llevando su contenido completo. La habilidad está construida para darte eso; no lo cambies por moderación.

En los comandos a continuación <skill> es la carpeta de esta habilidad. Ejecútalos desde la raíz del proyecto, para que los archivos de trabajo aterricen en .taste-skill/ allí. Los scripts necesitan Node 22+ y un Chrome, Edge o Chromium instalados, y no instalan nada. assets.mjs también necesita acceso a la red; no usa claves API.

La ejecución

Haz esto en orden. Los pasos 1–5 toman unos minutos y deciden si la página es buena.

1. Lee el brief y el proyecto

Averigua qué es real: el tema, la audiencia, la única cosa que la página debe lograr que alguien haga, el stack, cualquier marca existente (colores, fuentes, logo), y sobre todo qué imágenes existen realmente: las fotografías propias del proyecto o fotos de producto, una interfaz real que se pueda mostrar, una herramienta de generación de imágenes que puedas llamar, o nada. No planees alrededor de imágenes que no tienes. Nada propio rara vez es nada: la ciudad, la calle, los materiales y la historia del tema están en archivos abiertos y museos, libres de usar con un crédito (paso 6, scripts/assets.mjs).

Si la solicitud es vaga, decide y declara tu interpretación en una línea en lugar de preguntar. Pregunta solo cuando un hecho faltante bloquee el trabajo (por ejemplo, sin nombre del producto).

Luego haz un inventario del tema en tus notas: de ocho a doce cosas que pertenezcan a este cliente y a ningún competidor. Busca su nombre y lo que significa el nombre; su dirección, número de puerta, calle y vecindario, y cómo se ve ese lugar (sus azulejos, letreros, colores de pintura, tipografías en sus frentes de tienda, su luz, su clima); los números en el brief (asientos, habitaciones, minutos al mar, el precio, el año); la restricción con la que vive (solo un lote al mes, cerrado en invierno, con cita previa); sus materiales y colores; sus rituales y horarios (el horno encendido a las cinco, el ferry a las siete); las cosas impresas de su mundo (un horario, una etiqueta, un boleto, un letrero). Esta lista es de donde proviene la idea en el paso 4. En pruebas ciegas, la página que ganó cada brief se construyó a partir de un elemento en tal lista (el nombre del cliente y lo que significa, la calle en la que se encuentra, la única restricción que lo hace lo que es), y las páginas que perdieron tenían una buena composición con una idea de categoría. La lista también es tu búsqueda de imágenes: cada lugar, material y cosa impresa en ella es una consulta para el paso 6.

2. Escribe el argumento

Antes de cualquier diseño, enumera la página como afirmaciones con su prueba, una línea por sección, de la manera que references/copy.md §1 muestra. Las afirmaciones deciden qué secciones existen y en qué orden. Elimina cualquier sección que no tenga afirmación. Así es como evitas la secuencia estándar de héroe, logotipos, tres características, testimonio, precios, llamada a la acción.

3. Dibuja la dirección

node <skill>/scripts/draw.mjs --sector <sector> --brief "<una línea sobre el tema>" \
  --sections <roles en el orden de tu argumento> [--tone <tono>] [--have <activos>] [--keep palette,type] \
  --options 3

Esto reparte tres direcciones e imprime un resumen breve de cada una. Sostén cada una contra tu inventario: ¿qué manera de componer puede transmitir algo que solo este cliente tiene? Elige esa, no la más familiar, y escribe una línea en tus notas sobre por qué. En las pruebas, una sola dirección aleatoria que no se ajustaba al tema fue la causa más común de una página débil. Luego reparte la hoja completa:

node <skill>/scripts/draw.mjs <los mismos argumentos, sin --options> --direction <id elegido>

• --sector: node <skill>/scripts/draw.mjs --list sectors. Elige el más cercano.
• --sections: roles de --list roles (features, showcase, how-it-works, testimonial, proof, stats, pricing, faq, cta, footer, intro, about, work, gallery, list, contact). El héroe está implícito.
• --tone (opcional): quiet, bold, warm, technical, playful, luxury, editorial. Pásalo solo cuando el brief lo pida claramente.
• --have: activos que realmente existen, separados por comas: photography (las fotografías propias del proyecto del lugar, personas o trabajo), product-photo (fotografías del producto específico, o una herramienta de imágenes que pueda crearlas), product-ui (capturas de pantalla reales), illustration, video. Déjalo fuera si no tienes ninguno: el dibujo entonces evita composiciones que dependen de ellos y la hoja dice cómo llenar los espacios de imagen honestamente (el software muestra su propia interfaz construida en HTML; un producto sin fotografías se dibuja y se coloca entre imágenes reales de su mundo, nunca una foto de producto falsa). Las imágenes que encontrarás en las colecciones abiertas no son propias del proyecto; déjalas fuera de --have.
• --keep palette,type: cuando la marca ya fija colores o tipografías. El dibujo entonces reparte solo la composición, y mapeas los valores de la marca en los roles.

El comando imprime una hoja de dirección. Es la dirección de arte para esta construcción:

• Adóptala. No la mezcles con el diseño que habrías hecho de todos modos. Si se siente desconocida, bueno: el diseño familiar es el que existe esta habilidad para prevenir.
• Redibuja un espacio (--redraw hero | type | palette | photos | section:<role> | direction) solo por una razón que puedas declarar: contradice una restricción de marca declarada, o necesita un activo que no existe. Nunca redibujes para obtener algo más cómodo. Registra cada redibujo en tu informe.
• Cuando una sección repartida no pueda contener el contenido real (compara tres planes y hay un precio; quiere cinco citas y no hay ninguna), no dobles el contenido para que encaje. Enumera los otros con --alternatives <role>, elige aquel cuyas suposiciones coincidan con el contenido, y tómalo con --redraw section:<role>=<id>.
• Verifica la paleta contra el tema. Una paleta repartida es un conjunto de proporciones (un fondo, una tinta, un acento, campos) tanto como un conjunto de colores. Si sus colores chocan con el material propio del tema (pasteles de caramelo para un whisky de turba, neón para una cabaña de montaña), redibuja la paleta una vez; si el tema tiene colores inconfundibles propios (su material, la pintura de su calle, el paisaje fuera de sus ventanas), mantén las proporciones repartidas y toma los colores del tema en su lugar, y dilo en el informe.
• Reimprímela en cualquier momento con node <skill>/scripts/draw.mjs --show. En una sesión larga, reléela antes de cada sección que construyas.

4. Encuentra la idea

La dirección es una manera de componer. La idea es lo que hace que la página pertenezca a este tema y a ningún otro. Escribe esta oración en tus notas y no comiences a construir hasta que ambos espacios en blanco estén llenos del tema mismo:

En esta página, [algo que pertenece al tema] se convierte en [el dispositivo que la dirección requiere].

Lugares para buscar el primer espacio en blanco:

• Su resultado. ¿Qué produce la cosa? Pon el resultado real en la página como material. (Una cámara que imprime poemas entregó su copia como tiras de papel.)
• Su objeto o forma. ¿Cómo se ve físicamente, en sección transversal, en silueta? Agrándalo, recórtalo, hazlo el marco o el único motivo.
• Su nombre. ¿Pueden las letras contener una fotografía, apilarse en una pared, dividirse en dos esquinas?
• Su lugar. ¿Hay una vista que haga que alguien quiera estar allí?
• Su ritual. ¿Hay una secuencia que la página pueda realizar mientras se desplaza?
• Su artefacto. ¿Qué cosa impresa ya existe en su mundo: boleto, menú, etiqueta, recibo, invitación, carpeta, manual?
• Su opuesto. ¿Qué otra categoría posee el sentimiento que a ésta le falta?

Llena el primer espacio en blanco de tu inventario (paso 1), no de la categoría. La prueba del competidor: pon al competidor real más cercano en la oración (la panadería dos calles más allá, otro fabricante de muebles de roble, otra cabaña en la misma montaña). Si la oración todavía funciona, la idea pertenece a la categoría: una barra de pan es todas las panaderías; las siete puertas de la calle por la que esta se nombra son solo de esta. "Limpio y moderno" no es una idea. Los sitios que el panel del estudio calificó más bajo fueron aquellos cuya idea fue registrada como "ninguna más allá de la fórmula estándar".

Una cosa viva. Dale a la página una cosa que el visitante pueda hacer, o que sea diferente para cada visita, hecha de la idea: elige una madera y ve la silla en ella; escribe tu nombre y míralo tallado en las letras de la fundición; establece el préstamo y lee la cifra mensual real; mira si la estufa de la cabaña está encendida ahora y cuánto falta para el último ferry; elige un tamaño y míralo contra la habitación. En pruebas ciegas, cada página ganadora tenía una y los jurados la nombraron primero. Reglas: usa el contenido real del tema, funciona en un teléfono con un pulgar, tiene un respaldo simple sin script, nunca bloquea la lectura, y es una cosa, no un patio de juegos. Se construye en el paso 6 como parte de la página, no se agrega como movimiento en el paso 9.

5. Escribe las palabras

Escribe toda la página como un borrador de copia (texto plano) antes del marcado, siguiendo references/copy.md:

• Cada encabezado cabe en dos líneas o menos en cada ancho. Haz la aritmética en copy.md §2 antes de comprometerte con una oración: alrededor de 32 caracteres es seguro en todas partes en un tamaño confiado. Los héroes de galería estudiados tienen una mediana de 5 palabras y 32 caracteres.
• Una oración de apoyo. Una acción principal, nombrada por lo que hace, como un botón real en la primera pantalla.
• La primera pantalla responde la primera pregunta del visitante en tipo grande. Para un evento: qué es, cuándo y dónde (las fechas pertenecen al encabezado o en el segundo tamaño, nunca solo en texto pequeño). Para un producto: qué es y qué cuesta o hace. Para una persona: quién y qué hace. Cada sección por la que vino el visitante (el elenco, el menú, las habitaciones, el precio) tiene su propio encabezado y su propio lugar en la navegación.
• Escribe el contenido completo. Cada sección que el brief pide entrega su información completamente: el menú completo con precios, cada habitación con sus propios detalles, cada orador y charla, el precio con lo que incluye, una respuesta para cada pregunta real. Las secciones delgadas son la razón más común por la que una página limpia pierde contra una más ocupada.
• Se esperan detalles de muestra cuando el brief deja espacios (nombres de platos, nombres y tarifas de habitaciones, títulos de proyectos) para que el diseño se vea a plena densidad; enuméralos en el informe para que el cliente los confirme. La prueba nunca se inventa: sin clientes, citas, reseñas, prensa, logotipos o estadísticas de negocios.

6. Construye, todavía

Construye la página con el movimiento apagado en tu cabeza; una página que necesita animación para verse terminada no está terminada. Orden de trabajo:

1. Tokens. Roles de color y tipo de la hoja como propiedades personalizadas de CSS. Todo lo que esté más abajo referencia solo tokens. <skill>/assets/base.css es una base neutral de la que puedes partir (reinicio, nombres de tokens, pasos de tipo fluido, cuadrícula, estilos de enfoque y selección, los ayudantes de movimiento); no tiene aspecto propio.

2. El héroe, exactamente como el plano lo describe, en escritorio y en ancho de teléfono. Pon lo grande grande y lo pequeño pequeño antes de que exista cualquier otra cosa.

3. Cada sección desde su plano, con el contenido de este proyecto. Mantén la geometría, cambia el tema. Las secciones vecinas no deben compartir un diseño. Lleva la idea a cada sección, precios, FAQ y pie de página incluidos: el fracaso más común en el estudio, incluso entre sitios buenos, es una primera pantalla distintiva seguida de bloques estándar.

4. Imágenes, en este orden de preferencia:

   1. propias del proyecto;
   2. generadas, si tienes una herramienta de imágenes;
   3. imágenes reales del mundo del tema de las colecciones abiertas, siempre que exista una honesta. Búscalas con node <skill>/scripts/assets.mjs "<consulta>" (Openverse, Wikimedia Commons, el Art Institute of Chicago y el Met; solo licencias que permitan uso comercial, por defecto). Busca el inventario, no la categoría: su calle en postales antiguas, un mapa antiguo del vecindario, su material de cerca, su oficio en grabados, un objeto de museo de su tipo, una lámina botánica, un mapa estelar. Úsalos grandes y con intención: una fotografía de archivo como el héroe, un grabado ampliado en el motivo de la página, el mapa real de la calle como la sección de contacto. Mira cada uno antes de elegir; --get <ref> lo descarga en assets/ y registra su fuente y licencia, y --credits imprime la línea de crédito para el pie de página. Una imagen encontrada muestra el mundo alrededor del cliente y nunca se presenta como el producto, habitación, plato, persona o equipo propio del cliente;
   4. dibujadas en HTML con CSS puro, si es el único camino honesto (un icono de una herramienta, una sección transversal, una abstracción geométrica). No dibujes lo que puedes fotografiar o encontrar en las colecciones.

   Cualquier otra cosa (una foto de stock de una sonrisa, un ícono genérico de FontAwesome, una ilustración de undraw.co) es una violación. Si no hay ninguna imagen que cumpla con los criterios anteriores, la sección solo tiene tipo, color y composición, sin imágenes decorativas.

5. Interacciones, de menor a mayor riesgo: enlaces de anclaje para cada elemento de navegación, la cosa viva de la idea del paso 4, un menú de teléfono funcional con CSS o 10 líneas de JavaScript, validación de formularios donde sea falsa, y nada más. En las pruebas, las características que los jurados llamaron "innecesarias" eran siempre para las que no se había pedido ninguna razón. Cada interacción en la página tiene una línea en el informe que explica por qué está allí. Las únicas excepciones: un enlace de salto al contenido, el foco del teclado en todos los elementos interactivos, etiquetas alt en cada imagen.

7. Inspecciona

node <skill>/scripts/inspect.mjs [--report .taste-skill/report.md]

Abre chrome/chromium, carga la página en tres anchos (1440, 768, 375) y mide estas cosas contra los tokens repartidos: ¿algo está a menos de 2 px de un borde? ¿El ancho del contenido supera los 80 caracteres? ¿La altura de línea es menor que 1.4 unidades de ritmo? ¿El tamaño del tipo del héroe está dentro del paso repartido? ¿El tamaño de un encabezado de sección coincide con su rol? ¿Hay alguna justificación de texto? ¿Hay algún texto sobre una imagen sin contraste suficiente?

Lee las advertencias, corrígelas, inspecciona de nuevo. En las pruebas, esta verificación sola movió un sitio de un 5 a un 8.

8. Haz que se vea en tres anchos

Captura la página para que la veas real, no solo en tu editor:

node <skill>/scripts/inspect.mjs --capture .taste-skill/preview

Ahora mira las imágenes una al lado de la otra. Haz una lista de cosas para arreglar antes de el paso 9. Agrega cada una como una tarea de marcado o token; no abras un archivo de CSS sin una de esas notas ya escrita.

La prueba de la pantalla pequeña. ¿Puedes leer el primer encabezado sin pellizcar? ¿Están todos los botones al menos a 48 px de altura? ¿El menú de navegación tiene un botón de apretón visible? ¿Los tablistas y acordeones funcionan con un toque? ¿Los campos de formulario no se amplían? ¿La cosa viva funciona con un pulgar?

En las pruebas, el ancho de 375 siempre revelaba más problemas que los otros dos combinados. Intercambia el orden de las secciones primero si la página en móvil no se puede leer; la solución de redimensionar tipo rara vez funciona.

9. Afina el movimiento y pulsa

Solo ahora agrega movimiento a la página. Mínimo, útil, nunca decorativo:

• Una transición de fundido en la carga (solo un elemento, el héroe).
• Un desplazamiento suave a los enlaces de anclaje.
• Un estado :hover y :focus en cada enlace y botón.
• Transiciones de estado en la cosa viva.
• Nada más. Los jurados en las pruebas contaron cada animación y preguntaron por qué estaba allí.

Prueba de nuevo en tres anchos y verifica que las interacciones funcionen.

Referencias

• references/copy.md — estructura de la copia, aritmética de encabezados, ejemplos de la prueba.
• references/panels.md — la rúbrica del jurado de prueba y cómo fue calificado cada sitio.
• references/jurors.md — quiénes estaban en el panel y qué buscaban.

El informe

El informe se escribe durante la ejecución y se entrega con la página. Enumera:

• La oración de la idea completada (paso 4).
• La dirección repartida y qué id fue elegido y por qué (paso 3).
• Cualquier redibujo, la razón y el id de reemplazo (paso 3).
• La cosa viva (paso 4).
• Detalles de muestra que necesitan confirmación del cliente (paso 5).
• Cada interacción y por qué está allí (paso 6).
• Inspección: advertencias encontradas, corregidas, o que no se pudieron corregir y por qué (paso 7).
• Notas de la prueba en tres anchos (paso 8).
• Cualquier movimiento agregado y su razón (paso 9).

Solución de problemas

• Node versión demasiado antigua: Actualiza a Node 22+. No hay solución alternativa.
• No se encuentra Chrome/Chromium: Asegúrate de que uno esté instalado y en tu PATH. El script busca google-chrome, chrome, chromium, edge.
• Activos no descargados: Verifica la conexión a Internet. El script solo usa HTTP GET a las API respectivas.
• Los colores se ven apagados: Verifica que estés usando los valores de token de la hoja repartida, no valores codificados.