Sobre esta plantilla
Beauty Categories da a una marca de ecommerce una primera pantalla terminada y las cifras que la produjeron. La paleta es blanco #EBEBEB de base, naranja intenso #251E18 para la tipografía y naranja #593C2D para los acentos. Se entrega como React y Tailwind CSS, y la captura se fija a 640x470 antes de escribir código. El movimiento se queda en transiciones de 150ms. Tenlo abierto mientras escribes: el brief de 4.038 caracteres es la parte que se traslada a tu propia página.
Pensado para
- Pensado para un fundador en solitario que saca un único diseño de sección de funciones para una marca de ecommerce y no tiene ningún sistema de diseño detrás.
- Pensado para responsables de contenidos que reescriben un diseño de sección de funciones cuyo titular tiene que seguir siendo tan largo como el de Beauty Categories.
- Responsables de diseño que comparan referencias de ecommerce y buscan una construida sobre blanco #EBEBEB y naranja #593C2D.
Qué incluye
- Los tamaños están en el brief, no en una escala. Los valores son la especificación: pasos de espaciado de 20px y transiciones de 150ms, capturados en 640x470 y no deducidos de una captura. Como los valores son fijos, una sustitución cambia el aspecto sin cambiar el ritmo.
- Acento solo en los controles. Aquí el color está racionado: un acento (#593C2D), un fondo (blanco #EBEBEB) y ningún tercer valor disputando la atención. Todo lo demás se apoya en blanco #EBEBEB, y eso es lo que mantiene legible una paleta saturada.
- Aquí nada se hereda. El espaciado se cita igual (pasos de espaciado de 20px y transiciones de 150ms), no como una escala que crece sola.
- Un acento, una función. El contraste entre #593C2D y blanco #EBEBEB es lo que hace legible el acento en tamaños pequeños.
Movimiento e interacción
Tiempos en milisegundos
Los cambios de estado están fijados en 150ms, así que la respuesta de los controles es un valor de diseño y no el que trae el navegador por defecto. Un mismo valor se reutiliza en todos los controles, así que sus tiempos no se separan.
Movimiento que no estorba
Esta se entrega como composición estática en 640x470, así que la jerarquía tiene que funcionar sin movimiento, y funciona. El movimiento se trata como respuesta y no como adorno. No hacen falta líneas de tiempo de scroll.
Qué cambiar primero en Beauty Categories
Una línea, una fuente y un acento: esas tres sustituciones son las que más cambian el diseño. Los valores que no deberían moverse son estos: pasos de espaciado de 20px y transiciones de 150ms. Conserva el recorte del material: hace tanto trabajo como la tipografía.
El argumento de sección de funciones
4.038 caracteres de brief producen una sola pantalla sin relleno. Los valores que contiene son explícitos (pasos de espaciado de 20px y transiciones de 150ms), y por eso la composición se sigue leyendo cuando cambian las palabras. Beauty Categories enuncia la oferta una vez y deja que la composición la repita en lugar de añadir una segunda promesa.
Cómo ordena Beauty Categories la primera lectura
La página tiene un orden deliberado. El titular ocupa el tamaño de display, la línea de apoyo explica la oferta y el acento naranja #593C2D marca la acción principal, así que el siguiente paso nunca está en duda. Nada más compite: no hay una cuadrícula de tarjetas antes de la primera decisión, y eso es lo que evita que este tipo de sección de funciones resulte pesado en un trabajo de ecommerce. Quien busca ecommerce recibe la oferta antes que las opciones.
Preguntas frecuentes
¿El prompt de Beauty Categories es una especificación cerrada o un punto de partida?
El brief capturado ocupa 4.038 caracteres y describe la maqueta, la escala tipográfica, la paleta y las transiciones. Copiarlo te da ese texto; si lo mandas a Studio, la misma petición queda preparada con la página ya descrita.
¿Por qué la ficha nombra React y Tailwind CSS?
Beauty Categories se construyó en React y Tailwind CSS, y la ficha lo dice por procedencia. El brief describe posiciones, tamaños y tiempos, así que se puede reconstruir en cualquier framework capaz de componer tipografía y colocar elementos.
¿Cómo se comportan las transiciones de 150ms en Beauty Categories?
Las entradas y los cambios de estado se quedan en 150ms. Los dispara un cambio de estado, no una biblioteca de scroll, y nunca retrasan el contenido.
