marvinmcv-svg/SCCS-Landing-page

tasteskill v2

Una página construida por un modelo suele verse como el promedio de cada página que el modelo ha visto: un titular centrado en tres líneas, una pequeña etiqueta encima, una fila de tarjetas con iconos, un degradado suave, unas cuantas reglas finas y un pie de foto 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. Al pedirle que invente 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 transmite la idea del tema, y el script entonces reparte su sistema de tipografía, paleta, composiciones de héroe y secciones desde una biblioteca destilada de 247 sitios reales.
2. La idea proviene del tema. En el estudio, lo que separaba los mejores sitios de los olvidables era un concepto tomado de la cosa misma, no del estilo.
3. Un estilo interno sin adornos, medido en un navegador real por scripts/inspect.mjs, para que las reglas sean verificadas en lugar de esperadas.
4. Miras lo que hiciste. 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 vacía, y los jurados ciegos prefieren con razón una página más rica con signos de fabricación que una página vacía sin ellos. La otra mitad es 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 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 lo que 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 o fotos de producto propias del proyecto, una interfaz real que se pueda mostrar, una herramienta de generación de imágenes 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, gratuitos para usar con un crédito (paso 6, scripts/assets.mjs).

Si la solicitud es vaga, decide y expresa tu lectura 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 inventaría el tema en tus notas: de ocho a doce cosas que pertenecen 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 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 fue construida a partir de un elemento de 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 es también 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 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, llamado 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. Evalúa 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 alineaba con el 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. Omítelo si no tienes ninguno: entonces el sorteo evita composiciones que dependen de ellos y la hoja dice cómo luchar 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. Entonces el sorteo 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 artística 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 un espacio (--redraw hero | type | palette | photos | section:<role> | direction) solo por una razón que puedas enunciar: 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 puede contener el contenido real (compara tres planes y hay un solo precio; quiere cinco citas y no hay ninguna), no dobles el contenido para que encaje. Enumera las otras con --alternatives <role>, elige la que coincida con las suposiciones del contenido, y tómala 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.
• Vuelve a imprimirla 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 comiences a construir hasta que ambos espacios en blanco estén completados 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, conviértelo en el marco o el único motivo.
• Su nombre. ¿Pueden las letras sostener 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 esta le falta?

Completa 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 a dos calles, 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 de la que esta lleva el 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 de la idea: elige una madera y ve la silla en ella; escribe tu nombre y lo ves 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 y cuánto falta para el último ferry; elige un tamaño y lo ves 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 plan de 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 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: aproximadamente 32 caracteres es seguro en todas partes en un tamaño confiado. 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 (la alineación, 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 solicita 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 cuando el brief deja vacíos (nombres de platos, nombres y tarifas de habitaciones, títulos de proyectos) para que el diseño se vea a 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 comerciales.

6. Constrúyela, todavía

Construye la página con el movimiento desactivado 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 CSS. Todo lo posterior referencia solo tokens. <skill>/assets/base.css es una base neutral desde la que puedes comenzar (reset, nombres de tokens, pasos de tipo fluido, cuadrícula, estilos de enfoque 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 grande lo grande y pequeño lo 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, incluyendo precios, preguntas frecuentes y pie de página; el fracaso 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 Instituto de Arte de 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 al 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 código, cuando todo lo anterior falla. Dibuja la imagen directamente en HTML/SVG/CSS tipográfica, geométrica o del contorno del producto. Una imagen dibujada no requiere acreditación pero debe aspirar a la precisión; nunca es un relleno abstracto. Repite las líneas del boceto del producto; una página que tiene una fotografía real de su calle en un espacio, un mapa real de su vecindario en otro, y dibuja el rostro de la herramienta con cinta de clip de papel extendida es más rica que una que uniformemente tiene tres ilustraciones abstractas.

7. Inspecciona

node <skill>/scripts/inspect.mjs [--format markdown]

Esto abre la página en un navegador sin cabeza, mide propiedades reales y las compara contra las reglas del estilo interno. Su salida detallada (un documento de texto, por defecto) nombra cada elemento que viola una regla y cómo arreglarlo. Usa --format markdown cuando quieras que la salida parezca una solicitud de cambio legible por el agente; de lo contrario, la salida detallada es más rápida de leer como humano. El comando también existe para ser llamado desde dentro del bucle de reparación (paso 9).

8. Evalúa

Toma capturas de pantalla completas en 1440 px, 834 px y 390 px con un panel de jurado añadido que nombra el brief, la dirección y la idea, y le pide al que mira que califique cada uno en cinco criterios como Deficiente/Aceptable/Bueno/Fuerte:

node <skill>/scripts/judge.mjs [--width 1440] [--format jpg] [--dir screenshots/]

Las capturas de pantalla van al directorio --dir. Ábrelas y evalúalas. Usa la rúbrica del panel de jurado. Si algún criterio está por debajo de Bueno, vuelve al paso 9.

9. Repara

Usa las notas de la inspección y las capturas de pantalla para encontrar y arreglar violaciones de reglas o fallas visuales. Luego vuelve al paso 7. Repite hasta que cada criterio esté en Bueno o Fuerte. Si después de tres ciclos algo está atascado por debajo de Bueno, reconsidera la dirección (paso 3) o la idea (paso 4); vuelve al paso 1 solo cuando el brief se haya entendido mal.

10. Reporta

Antes de terminar, escribe un informe de una página:

• La dirección que se tomó y por qué.
• La idea y de qué elemento del inventario vino.
• La cosa viva, cómo funciona y qué contenido real usa.
• Cada redibujo y por qué.
• Las fuentes de cada imagen que no es propia del proyecto, con la atribución requerida por la licencia.
• La puntuación final del jurado.

Referencias

references/copy.md

Una guía de redacción para el sitio. La usas en el paso 5 para escribir la copia completa de la página antes del diseño.

references/house-style.md

Las reglas aplicadas por scripts/inspect.mjs. Enumera las propiedades que se miden y sus valores objetivo. El estilo interno prohíbe adornos (degradados, sombras, bordes, fondos de tarjetas con relleno, iconos para espacio, peso de fuente light, etiquetas sobre titulares) y exige intención (tipos de letra más grandes, campos horizontales de color, contenido completo, un uso de la paleta que debe incluir un campo, peso de fuente regular o más pesado, sin sustitutos de contenido como Lorem Ipsum). Léelo antes de comenzar a construir.

references/slop-checklist.md

Una lista de verificación de página abierta de elementos de diseño estándar que la habilidad debe prevenir.

Archivos de activos

scripts/draw.mjs

Reparte direcciones de diseño. Banderas: --sector (ver --list sectors), --brief "...", --sections (ver --list roles), --tone, --have, --keep, --options N, --direction id, --redraw, --alternatives, --show.

scripts/inspect.mjs

Inspecciona la página contra el estilo interno. Banderas: --file (ruta al archivo HTML, por defecto index.html), --format (text o markdown), --verbose, --help.

scripts/judge.mjs

Toma capturas de pantalla con un panel de jurado. Banderas: --file (ruta al archivo HTML, por defecto index.html), --width (ancho de la ventana, por defecto 1440), --height (altura de la ventana, por defecto 1080), --full-page (captura de pantalla de página completa), --format (png o jpg, por defecto png), --dir (directorio de salida, por defecto screenshots/), --help.

scripts/assets.mjs

Busca imágenes de colecciones abiertas. Banderas: --query "..." (término de búsqueda), --source (api, wikimedia, artic, metmuseum, por defecto todas), --get ref_id (descarga el activo por referencia), --dir (directorio de salida, por defecto assets/), --credits (imprime líneas de crédito), --format (text o markdown), --help.

assets/base.css

Una hoja de estilo base neutral. Proporciona un reset CSS, nombres de tokens para color y tipo (a ser sobrescritos por tu diseño), pasos de tipo fluido, una cuadrícula simple y estilos de enfoque/selección accesibles. No tiene un aspecto visual propio; es una base que puedes usar o ignorar.

Temas relacionado

• Diseño de sitios web
• Dirección artística
• Anti-slop
• Páginas de aterrizaje
• HTML/CSS
• React, Next.js, Vue, Svelte, Astro, Tailwind