qwopop/competitor-reels-tool

tasteskill v2

Una página construida por un modelo suele parecerse al promedio de todas las páginas que ha visto: un título centrado sobre 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 monoespaciado. Nada de ello está mal y nada de ello 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 que invente un estilo, un modelo elige la opción por defecto de la categoría cada vez. scripts/draw.mjs reparte tres de veinte direcciones investigadas; tú eliges la que mejor transmita la idea del tema, y el script reparte su sistema tipográfico, paleta, héroe y composiciones de sección 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 extraído de la cosa en sí, no del estilo.
3. Un estilo de casa sin adornos, medido en un navegador real por scripts/inspect.mjs, para que las reglas se comprueben en lugar de esperarse.
4. Miras lo que has hecho. Capturas de pantalla en tres anchos, una rúbrica de jurado, corrige, vuelve 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 superficial, y los jurados ciegos prefieren con razón una página más rica con marcas que una página vacía sin ellas. La otra mitad es la sustancia: tipografía más grande, campos enteros de color, imágenes reales del mundo de este tema (encontradas o dibujadas), y cada sección con 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 caigan en .taste-skill/ allí. Los scripts necesitan Node 22+ y un Chrome, Edge o Chromium instalado, y no instalan nada. assets.mjs también necesita acceso a la red; no utiliza claves API.

La ejecución

Hazlo en orden. Los pasos 1 a 5 toman unos minutos y deciden si la página es buena.

1. Lee el briefing y el proyecto

Averigua qué es real: el tema, la audiencia, la única cosa que la página debe conseguir que alguien haga, el stack, cualquier marca existente (colores, fuentes, logotipo), y por encima de todo qué imágenes existen realmente: las propias fotografías del proyecto o fotos de producto, 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, la calle, los materiales y la historia del tema están en archivos y museos abiertos, de uso gratuito con un 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 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 es ese lugar (sus azulejos, letreros, colores de pintura, tipografías en sus fachadas, su luz, su clima); los números en el briefing (asientos, habitaciones, minutos al mar, el precio, el año); la limitació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 billete, un letrero). Esta lista es de donde proviene la idea en el paso 4. En pruebas ciegas, la página que ganó cada briefing se construyó a partir de un elemento de dicha lista (el nombre del cliente y lo que significa, la calle donde se encuentra, la única limitación que lo hace como 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, 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 breve resumen de cada una. Pon cada una contra tu inventario: ¿qué forma 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 adaptaba 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 briefing lo pida claramente.
• --have: activos 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: el dibujo entonces 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 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, bien: el diseño familiar es el que esta habilidad existe para prevenir.
• Redibuja una ranura (--redraw hero | type | palette | photos | section:<rol> | direction) solo por una razón que puedas indicar: contradice una restricción de marca establecida, 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 puede 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 <rol>, elige aquel cuyas suposiciones coincidan con el contenido, y tómalo con --redraw section:<rol>=<id>.
• Comprueba 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 luchan contra 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.
• Vuelve a imprimirla en cualquier momento con node <skill>/scripts/draw.mjs --show. En una sesión larga, vuelve a leerla 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 en blanco se llenen 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 producción. ¿Qué produce la cosa? Pon la producción 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? Amplíalo, 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: billete, menú, etiqueta, recibo, invitación, carpeta, manual?
• Su opuesto. ¿Qué otra categoría posee el sentimiento del que esta carece?

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 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 de la que esta toma su nombre 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 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 tallado en las letras de la fundición; establece el préstamo y lee la cifra mensual real; ve si la estufa de la cabaña está encendida ahora mismo 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 una alternativa 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 texto (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: unos 32 caracteres es seguro en todas partes en un tamaño seguro. 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 a 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 cuánto cuesta o qué hace. Para una persona: quién y qué hace. Cada sección para 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 solicita el briefing entrega su información completamente: el menú completo con precios, cada habitación con sus propios detalles, cada ponente 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 donde el briefing deje lagunas (nombres de platos, nombres y tarifas de habitaciones, títulos de proyectos) para que el diseño se vea con toda su densidad; enuméralos en el informe para que el cliente los confirme. La prueba nunca se inventa: sin clientes, citas, reseñas, prensa, logotipos ni estadísticas comerciales.

6. Constrúyela, todavía quieta

Construye la página con la animación desactivada 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 hace referencia solo a 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, los ayudantes de movimiento); no tiene un aspecto propio.
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 a partir de 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, incluidos precios, FAQ y pie de página: el fallo 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. 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 permitan 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. Úsalas 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. dibujada en …

...

[truncado para la traducción]