
Galería de vista previa
Skills similares
Ver todas las SkillsLo que obtienes
- Un único archivo web autónomo que se abre en cualquier navegador y funciona sin conexión, con fuentes e imágenes incluidas; una adaptación a tu propio proyecto con framework si lo tienes.
- Flujos de comercio que funcionan: páginas de producto con formatos, un creador de cajas por suscripción, un cajón de bolsa, una vista previa del checkout con comprobación de zona de entrega y un mapa de puntos de venta.
- El hero característico, las cintas, las ondas y el collage de fotos en un ejemplo de 28 páginas con 17 imágenes, además de páginas de historia, productores, blog, envíos, FAQ y políticas.
Ideal para
- Marcas de jugos, café, té y snacks que venden online y quieren una tienda luminosa y alegre.
- Productores locales que entregan en zonas concretas o tienen una caja por suscripción.
- Cafeterías y panaderías que pueden convertir la tienda en una carta y la sección de ubicación en un único bloque de visita.
No es para
- Pagos reales o gestión de pedidos; el checkout valida los datos pero nunca cobra a nadie.
- Marcas que necesitan un look oscuro, minimalista o corporativo en lugar de degradados y cintas.
- Vender los productos ficticios de Halcy o usar el arte de su botella como propio.
Acerca de esta Skill

Sitio de marca Gradient Juice crea un sitio alegre de marca y tienda para una marca de bebidas, comida o estilo de vida: una foto de campaña a sangre con degradado de alguien bebiendo de tu botella, cintas de texto crema que se deslizan por trazos curvos, bordes ondulados entre secciones y mosaicos de fotos luminosas. El ejemplo es Halcy, una prensa de jugos en frío ficticia de Ventura, California, con 28 páginas conectadas que incluyen una tienda, un creador de cajas y una vista previa del checkout que funcionan.

Lo que obtienes
- Un único archivo web autónomo que se abre en cualquier navegador y funciona sin conexión, con las fuentes y las imágenes incluidas. Si ya tienes un proyecto con un framework, el diseño se traslada a él.
- Una tienda completa: seis páginas de producto con formatos y precios en vivo, colecciones, un creador de cajas semanales, un cajón de bolsa, una vista previa del checkout con comprobación de zona de entrega y una página de confirmación honesta.
- Páginas de marca: nuestra historia, productores con selector de mes, un blog con cuatro artículos, un buscador de puntos de venta con mapa, envíos y devoluciones, FAQ con búsqueda, contacto, newsletter, políticas y una página de no encontrado diseñada.
- Una única dirección de arte para todas las imágenes: bodegones de producto a juego con la misma botella y luz, además de escenas de estilo de vida luminosas.
- Cintas cuyo texto se desliza despacio, una entrada rápida del hero y apariciones tranquilas, todo pausado con la configuración de movimiento reducido.

Cómo usarlo
- Comparte tu marca, tus productos con precios y formatos, dónde y cuándo entregas, tu historia y tus datos de contacto. El texto que falte se redacta como marcador verosímil y se te enumera para que lo confirmes.
- Deja que el agente genere una nueva foto de hero con tu nombre en la botella y un bodegón por producto con la misma luz, o envía tus propias fotos. Las dos escenas neutras de bebidas del paquete pueden quedarse.
- Abre cada página en escritorio y en el móvil, añade productos a la bolsa, crea una caja, prueba la vista previa del checkout y pide cambios.

La tipografía usa Bricolage Grotesque, Figtree y DM Serif Display, incrustadas en el archivo. Las imágenes nuevas salen de la herramienta de imágenes de tu propio agente y pueden tener sus cargos de uso; el checkout nunca cobra.
Lo que necesitas antes de empezar
- Tú aportas
- Nombre de la marca, productos con precios y formatos, y una breve historia · Datos del mercado: moneda, zonas de entrega o envíos, y datos de contacto · Tus propias fotos de producto y equipo, o tu aprobación para generar imágenes nuevas
- Dependencias
- Node.js 18 o superior en la máquina de tu agente, para ejecutar el script incluido que genera el archivo único sin conexión · Acceso a internet mientras se genera el archivo, para descargar las fuentes una vez e incrustarlas · Una herramienta de imágenes en tu agente, o tus propias fotos, para el hero y las imágenes de producto
- Costos externos
- La foto del hero y los bodegones de producto se generan con la herramienta de imágenes de tu propio agente, que puede cobrar por uso. Si no la tienes, aporta tus propias fotos; las dos escenas neutras de bebidas pueden quedarse. Ver el ejemplo no cuesta nada y el checkout nunca cobra.
- Última prueba
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
Reseñas de usuarios
Cargando reseñas…








