Proyecto 8 de 8
Claudia Franco Accesorios
Una marca que solo vivía en Instagram ahora tiene un catálogo ordenado y una forma directa de pedir.
Prototipo entregado
Esta demo necesita JavaScript. Aquí va en texto.
Bolsa (0)
Tu bolsa está vacía. Agrega una pieza.
En la tienda real esto abre WhatsApp. Aquí no se envía.
Demo · ilustraciones con IA · nada se envía
Sin conexión. La demo funciona; el video necesita internet.
Lo mismo, en texto
Esta demo necesita JavaScript. Aquí va en texto.
- Agrega dos o tres piezas de ejemplo a la bolsa.
- Mira cómo se escribe el pedido, una línea por pieza.
- Quita una pieza y mira cómo cambia el mensaje.
Video: la entrada de la lámina, el catálogo, la ficha de una pieza y la paleta de colores que crece hasta ocupar la pantalla.
Qué es
Un catálogo de joyería artesanal donde cada pieza tiene su ficha, como una lámina de herbario.
Para quién es
Para compradoras de accesorios únicos que llegan desde Instagram.
Tareas que te quita
- Armar a mano el mensaje de cada pedido: la bolsa lo escribe línea por línea.
- Editar componentes para actualizar el catálogo: la dueña cambia un archivo de datos.
- Llevar la cuenta de qué pieza sigue disponible: cada una es única y puede marcarse como vendida.
Qué hay detrás
- 1
Cada pieza es única y puede marcarse como vendida.
- 2
La clienta agrega piezas a su bolsa.
- 3
La bolsa escribe el pedido, una línea por pieza.
- 4
La clienta abre WhatsApp y envía el pedido.
- 5
La dueña agrega fotos y datos sin cambiar el diseño.
- Astro estático con Tailwind, GSAP y Lenis. No hay backend: el pedido sale por WhatsApp.
- Todo el catálogo y los textos de WhatsApp viven en un archivo de datos. Los componentes no llevan texto de negocio.
- CSP sin unsafe-inline: hay un solo script en línea, autorizado por hash, y el build manda todos los scripts y estilos a archivos.
- El script verificar encadena la revisión de tipos, el build y las pruebas, y comprueba en el HTML un h1 por página, los hashes de la CSP, y que los enlaces y las anclas existan.
- La escena de la paleta usa ScrollTrigger, que ata animaciones al scroll, con solo transform y opacity, y se apaga con movimiento reducido.
- La bolsa se guarda en localStorage, con respaldo en memoria.
- Astro
- Cloudflare
Cuidados y límites reales
- Es un preview que no se indexa en buscadores.
- Las láminas son ilustraciones hechas con IA y se reemplazan cuando haya piezas reales.
Qué prueba hay de que es robusto
Verificado el 2026-10-08. Pruebas escritas no son pruebas ejecutadas.
- 96rendimiento Lighthouse móvilQA.md de la rama, 2026-10-05
- 100accesibilidad, buenas prácticas y SEOQA.md de la rama, 2026-10-05
- 10pruebas escritastests/sitio.test.mjs
Cómo cuento
Cada cifra lleva su método, su fuente y su fecha. Un conteo de pruebas es un conteo de texto: pruebas escritas (conteo en el código), no pruebas ejecutadas.
Lo que no afirmo
- Que esté en producción: es un preview.
- Piezas reales: hay cero, las láminas son ilustraciones hechas con IA.
- Una medición de Lighthouse posterior a la bolsa de compras.
- Pruebas ejecutadas: el conteo es de pruebas escritas.
Un catálogo así, para tu marca
Quiero un catálogo asíAl pulsar Enviar en WhatsApp me autorizas a usar tu número y tu mensaje para responderte. Política de datos
Siguiente proyectoOficina de agentes Distrismoke