Maikozort/claude-skills

tasteskill v2

Una página construida por un modelo generalmente se ve como el promedio de todas las páginas que el modelo ha visto: un encabezado centrado de tres líneas, una pequeña etiqueta encima, una fila de tarjetas con iconos, un degradado suave, algunas reglas delgadas y un pie de foto 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. Al pedirle que invente un aspecto, un modelo elige la categoría predeterminada cada vez. scripts/draw.mjs reparte tres de veinte direcciones investigadas; eliges la que transmite la idea del sujeto, y el script entonces reparte su sistema tipográfico, paleta, héroe y composiciones de sección de una biblioteca destilada de 247 sitios reales.
2. La idea proviene del sujeto. 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 se verifican en lugar de esperarse.
4. Miras lo que hiciste. Capturas de pantalla en tres anchos, una rúbrica de jurado, corriges, miras 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 superficial, y los jurados ciegos prefieren con razón una página más rica con marcas sobre una página vacía sin ellas. La otra mitad es sustancia: tipografía más grande, campos completos de color, imágenes reales del mundo de este sujeto (encontradas o dibujadas), y cada sección con su contenido completo. La skill está construida 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, de modo 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 sujeto, 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 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 usar, 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 sujeto 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, no hay nombre del producto).

Luego inventaria el sujeto en tus notas: ocho a doce cosas que pertenecen 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 billete, 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 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, lista 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 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 sujeto>" \
  --sections <roles en el orden de tu argumento> [--tone <tono>] [--have <activos>] [--keep paleta,tipografia] \
  --options 3

Esto reparte tres direcciones e imprime un breve resumen de cada una. Compara cada una con 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 adecuaba al sujeto 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 solicite claramente.
• --have: activos que realmente existen, separados por comas: photography (fotografías propias del proyecto del lugar, personas o trabajo), product-photo (fotografías del producto específico, o una herramienta de imagen que pueda crearlas), product-ui (capturas de pantalla reales), illustration, video. Omítelo si no tienes ninguno: el draw 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; omítelas de --have.
• --keep paleta,tipografia: cuando la marca ya fija colores o tipografías. El draw 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 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 skill existe para prevenir.
• Redibuja un espacio (--redraw hero | type | palette | photos | section:<rol> | 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 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. Lista las otras con --alternatives <rol>, elige la que coincida con las suposiciones del contenido, y tómala con --redraw section:<rol>=<id>.
• Verifica la paleta con el sujeto. 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 sujeto (pasteles de caramelo para un whisky de turba, neón para una cabaña de montaña), redibuja la paleta una vez; si el sujeto tiene colores inconfundibles propios (su material, la pintura de su calle, el paisaje fuera de sus ventanas), conserva las proporciones repartidas y toma los colores del sujeto 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 sujeto y a ningún otro. Escribe esta oración en tus notas y no comiences a construir hasta que ambos espacios en blanco se llenen desde el sujeto mismo:

En esta página, [algo que pertenece al sujeto] 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 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 que le falta a esta?

Llena el primer espacio en blanco de tu inventario (paso 1), no de la categoría. La prueba del competidor: pon el 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 por la que esta se nombra son solo 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 para 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; mira 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 todas las páginas ganadoras tenían una y los jurados la nombraron primero. Reglas: usa el contenido real del sujeto, 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 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 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 encabezado 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 para 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: todo el menú 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 vacíos (nombres de platos, nombres de habitaciones y tarifas, 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 comerciales.

6. Constrúyelo, 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 tipografía de la hoja como propiedades personalizadas de CSS. Todo lo downstream referencia solo tokens. <skill>/assets/base.css es una base neutral desde la que puedes comenzar (restablecimiento, nombres de tokens, pasos de tipo fluido, rejilla, 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. Pon lo grande grande y lo pequeño pequeño antes de que exista cualquier otra cosa.
3. Cada sección según su plano, con el contenido de este proyecto. Mantén la geometría, cambia el sujeto. Las secciones vecinas no deben compartir un diseño. Lleva la idea a cada sección, incluyendo precios, FAQ y pie de página: 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. las propias del proyecto;
   2. generadas, si tienes una herramienta de imágenes;
   3. imágenes reales del mundo del sujeto 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. Úsalas 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 una antes de elegir; --get <ref> la descarga en assets/ y registra su fuente y licencia, y --credits