tasteskill v2

¿Qué hace tasteskill v2?

Una página construida por un modelo suele parecerse al promedio de todas las páginas que el modelo ha visto: un titular centrado de tres líneas, una pequeña etiqueta encima, una fila de tarjetas con iconos, un degradado suave, unas cuantas líneas finas y un pie de foto en monoespaciado. Nada está mal y nada fue decidido.

Esta skill 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 predeterminado de la categoría cada vez. scripts/draw.mjs reparte tres de veinte direcciones investigadas; tú eliges la que mejor transmite la idea del tema, y el script reparte su sistema tipográfico, paleta, composiciones de héroe y secciones a partir 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 propio sin adornos, medido en un navegador real por scripts/inspect.mjs, para que las reglas se verifiquen en lugar de solo desearse.
4. Miras lo que hiciste. Capturas de pantalla en tres anchos, una rúbrica de jurado, corriges, vuelves a mirar.

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 escasa, y los jurados ciegos prefieren con razón una página más rica con indicios sobre una página vacía sin ellos. La otra mitad es la sustancia: tipografía más grande, campos de color completos, imágenes reales del mundo de este tema (encontradas o dibujadas), y cada sección con su contenido completo. La skill está diseñada para darte eso; no lo cambies por moderación.

En los comandos a continuación, <skill> es la carpeta de esta skill. Ejecútalos desde la raíz del proyecto, para que los archivos de trabajo caigan 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, logotipo), y sobre todo qué imágenes existen realmente: las propias fotografías o fotos de producto del proyecto, una interfaz real que se pueda mostrar, una herramienta de generación de imágenes a la que puedas llamar, o nada. No planifiques en torno a imágenes que no tienes. Nada propio rara vez es nada en absoluto: la ciudad del tema, la calle, los materiales y la historia están en archivos y museos abiertos, libres de usar con crédito (paso 6, scripts/assets.mjs).

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

Luego inventaria el tema en tus notas: ocho a doce cosas que pertenezcan a este cliente y a ningún competidor. Busca su nombre y lo que el nombre significa; 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 fachadas, 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 viene la idea en el paso 4. En pruebas ciegas, la página que ganó cada brief se construyó a partir de un elemento de esa lista (el nombre del cliente y lo que significa, la calle en la que se encuentra, la única restricción que lo hace ser 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, como muestra references/copy.md §1. Las afirmaciones deciden qué secciones existen y en qué orden. Elimina cualquier sección que no tenga una afirmación. Así es como evitas la secuencia estándar de héroe, logotipos, tres características, testimonial, precios, llamada a la acción.

3. Saca 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 <recursos>] [--keep palette,type] \
  --options 3

Esto reparte tres direcciones e imprime un breve resumen de cada una. Contrasta cada una con tu inventario: ¿qué forma de componer puede portar 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 adaptaba al tema fue la causa más común de una página débil. Luego saca la hoja completa:

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

• --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: recursos que realmente existen, separados por comas: photography (las propias fotografías 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. Omítelo si no tienes ninguno: entonces el sorteo evita composiciones que dependan de ellos y la hoja dice cómo luchar los espacios de imagen de manera honesta (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 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 sorteo entonces solo reparte la composición, y tú 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 todas formas. Si se siente poco familiar, bien: el diseño familiar es contra el que existe esta skill.
• 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 recurso 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 las otras con --alternatives <role>, elige aquella cuyas suposiciones coincidan con el contenido, y tómala con --redraw section:<role>=<id>.
• Verifica la paleta con respecto al 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 forma 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 empieces a construir hasta que ambos espacios se hayan llenado desde el tema mismo:

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

Lugares para buscar el primer espacio:

• 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, conviértelo en 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 al desplazarse?
• 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 la sensación que a esta le falta?

Llena el primer espacio desde tu inventario (paso 1), no desde la categoría. La prueba del competidor: pon al competidor real más cercano en la oración (la panadería a dos calles, otro fabricante de muebles de roble, otra cabaña en la misma montaña). Si la oración aún 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 puntuó más bajo fueron aquellos cuya idea se registró 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 en cada visita, hecha a partir de la idea: elige una madera y ve la silla en ella; escribe tu nombre y míralo cortado 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 el 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 añade como movimiento en el paso 9.

5. Escribe las palabras

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

• Cada titular 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 con un tamaño confiable. Los héroes de la galería estudiada 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 letra grande. Para un evento: qué es, cuándo y dónde (las fechas pertenecen al titular o al 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 cartel, 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 pide el brief entrega su información por completo: 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 frente a una más ocupada.
• Se esperan detalles de muestra donde el brief deja espacios (nombres de platos, nombres y tarifas de habitaciones, títulos de proyectos) para que el diseño se vea con densidad completa; 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. Constrúyela, aún

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 tipografía de la hoja como propiedades personalizadas de CSS. Todo lo que sigue solo referencia tokens. <skill>/assets/base.css es una base neutral desde la que puedes empezar (reset, nombres de tokens, pasos de tipo fluido, cuadrícula, estilos de foco y selección, ayudantes de movimiento); no tiene apariencia propia.
2. El héroe, exactamente como lo describe el plano, en escritorio y en ancho de teléfono. Haz 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 fallo más común en el estudio, incluso entre buenos sitios, es una primera pantalla distintiva seguida de bloques estándar.
4. Imágenes, en este orden de preferencia:
   1. las 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 permiten uso comercial, por defecto). Busca en el inventario, no en 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 héroe, un grabado ampliado como motivo de la página, el mapa real de la calle como sección de contacto. Mira cada una antes de elegir; --get <ref> la 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...